【Photoshop拡張機能】クリッカブルマップのコードを取得する

2013年5月3日 / category : jsx, lab

Photoshopの拡張パネル「ClickableMapPanel」を作成しました。
クリッカブルマップの座標設定をDreamweaverで設定するとあまり綺麗にできず、なおかつ複雑な形だと大変。
そこでPhotoshop上で、クリッカブル箇所を選択範囲で指定、もしくはパスで指定するだけで座標を書き出してくれる拡張パネルを作成してみました。

【使い方】
1.ClickableMapPanelフォルダを下記のフォルダに追加する。
windowsの場合(CS6)
→ Program Files/Adobe/Adobe Photoshop CS6 (64 Bit)/Plug-ins/Panels
macの場合(CS6)
→ Applications/Adobe Photoshop CS6/Plug-ins/Panels

2.PhotoshopCS6を起動する。
3.「ウィンドウ」→「エクステンション」→「ClickableMapPanel」を選択、ClickableMapPanelパネルが開く


4-1.【shapeがrectの場合】 対象となるimgタグの画像を開く
クリッカブルエリアが正方形である必要があります。四角形・多角形の場合は、shapeをpolyにしてください。


4-2.【shapeがrectの場合】 パネル内のshapeのタイプを「rect」を選択

4-3.【shapeがrectの場合】 クリックエリアとなる正方形を選択範囲で設定する
※imgタグの画像の場合、レイヤーが「インデックス」となっているので、メニュー「イメージ」→「モード」→「RGBカラー」をクリックし、レイヤーを「背景」となるよう変更してください。


4-4.【shapeがrectの場合】 パネル内「コードを取得する」をクリックする。
クリッカブルエリアとなるレイヤーが追加され、パネル内のテキストエリアにHTML用のコードが書き出されるので、コピーする。


4-5.【shapeがrectの場合】 コピーしたコードをDreamweaver上の該当するコードにペーストする。


4-6.【shapeがrectの場合】 実際にアップしたものが下記です。
http://tsudoi.org/photoshop/Plug-ins/Panels/ClickableMapPanel/rect.html

5-1.【shapeがcircleの場合】 基本的にrectの操作と同じです。
circleの場合は、クリッカブルエリアが正円である必要があります。



5-2.【shapeがcircleの場合】 実際にアップしたものが下記です。
http://tsudoi.org/photoshop/Plug-ins/Panels/ClickableMapPanel/circle.html

6-1.【shapeがpolyの場合】 こちらも基本的にrectの操作と同じです。
6-2.【shapeがpolyの場合】 例として矩形の日本地図の画像を開き、北海道エリアのみクリッカブルにしてみます。


6-3.【shapeがpolyの場合】 北海道エリアを選択範囲で設定し、パネル内のshapeタイプを「poly」に設定


6-4.【shapeがpolyの場合】 パネル内「コードを取得する」をクリックする。
クリッカブルエリアとなるレイヤーが追加され、パネル内のテキストエリアにHTML用のコードが書き出されるので、コピーする。


6-5.【shapeがpolyの場合】 コピーしたコードをDreamweaver上の該当するコードにペーストする。


6-6.【shapeがpolyの場合】 実際にアップしたものが下記です。
http://tsudoi.org/photoshop/Plug-ins/Panels/ClickableMapPanel/poly.html

7-1.【shapeがpathの場合】 パスで作成したデザインデータを開きます。


7-2.【shapeがpathの場合】 パス選択ツールで、パスを選択する


7-3.【shapeがpathの場合】 パネル内のshapeタイプを「path」に設定し、「コードを取得する」をクリックする。※アンカーポイントが多いと、時間がかかります。
クリッカブルエリアとなるレイヤーが追加され、パネル内のテキストエリアにHTML用のコードが書き出されるので、コピーする。


7-4.【shapeがpathの場合】 コピーしたコードをDreamweaver上の該当するコードにペーストする。


7-5.【shapeがpathの場合】 実際にアップしたものが下記です。
http://tsudoi.org/photoshop/Plug-ins/Panels/ClickableMapPanel/path.html

【Download】
http://tsudoi.org/photoshop/Plug-ins/Panels/ClickableMapPanel.zip
【使用上の注意】
・楕円のクリッカブルは対応できていません。
・曲線のパスは対応できないため、直線となります。
・パスが切れていると、おかしな結果になります。

【備考】
CS6での検証しかしておりません。。。検証が不十分です。使用中に不具合などがあれば、ご連絡ください。
mail : tsudoi@aru-inc.co.jp

このエントリーをはてなブックマークに追加