SVGのイメージマップでレスポンシブにも対応。MoreResearchSVGのイメージマップでレスポンシブにも対応。Web画像内の特定の箇所をクリック可能にするイメージマップ。ユーザーとして、誰もが一度は使用したことがあるのではないでしょうか。開発する側にとっては、イメージマップのコードは直感的に記述・理解できるものではないという難点があります。昨今は、レスポンシブデザインへの対応や、マウスオーバー時のアニメーション等、標準イメージマップでは対応できない要件を求められることも多くなりました。「Web標準対応の統合制作環境」と言われる通り、Dreamweaverはイメージマップを作成するのにも最も適したツールで、柔軟、かつ効率的に開発を行うことが可能です。本記事ではDreamweaverの便利な機能を利用しつつ、まずmap・area要素を使用した従来の方法、次にSVGを使用したモダンな方法について、実務で使えるイメージマップの実装方法を解説していきます。JPG等)にイメージマップを定義するまずおさらいですが、イメージマップは、area要素にホットスポット(クリック可能な領域)を定義し、それをmap要素でひとまとめにします。その際、map要素には、name属性を使って名前を付けます。そのname属性の値を、img要素のusemap属性に指定して、画像とホットスポットとの紐付けを行います。</map></p>実装方法としてはこれだけの大変シンプルなものですが、area要素のcoords属性に記述するホットスポット定義はやや面倒です。指定する数値の並び順は、shape属性の値に依存しており、例えばrectであればx座標とy座標のペアになりますが、circleの場合は中心座標と半径の値を記述します。polyの場合は更に複雑になり、多角形の各頂点の座標値のペアが並ぶ形になります。これはとても瞬時に人が把握できるものではありません。そのため、イメージマップの作成には、描いた図形からホットスポットをコードとして生成してくれるツールを使うのが一般的です。Dreamweaverを利用する利点としては、主に下記2つの理由が挙げられます。コーディング中に、他のツールと行き来することなく、そのままイメージマップの作成ができる一度作成したホットスポットを、コピー&ペーストして利用できる2つ目のコピー&ペーストは特に便利です。「同じ形のホットスポットが50個必要」という要件のとき、ホットスポットのコピー&ペーストができない場合、50個全てを自分で作成しなければなりません。正確に行うのは骨の折れる作業です。Dreamweaverを使えば、こんな場合でも簡単です。Dreamweaverでのホットスポットの作成方法をおさらいしつつ、手順を解説していきましょう。今回は例としてこちらの見取り図の画像を使用します。ルームAからルームHまでの各部屋と、2つのエレベータ、そして受付の領域をクリックできるようにしたいと思います。イメージマップを作成するHTMLファイルを開きます。[表示]→[表示モード]→[デザイン]と選択して、デザインビューを表示します。プロパティインスペクターが表示されていない場合は、[ウィンドウ]→[プロパティ]から表示します。デザインビューの下にドックさせると使いやすいでしょう。デザインビューの画像を選択します。すると、プロパティインスペクターの左下に「マップ」という項目が表示されます(1)。「マップ」が表示されていない場合は、右下の矢印(2)をクリックして詳細メニューを展開してください。3種類のホットスポットツールから、領域の形にあったものを選択します。画像の上に領域を描画していきます。描画したホットスポットは、半透明のシアン色で示されます。一度描画したホットスポットを後から簡単に編集できるのも、Dreamweaverの利点のひとつです。ポインターホットスポットツールに持ち替えて、ホットスポットを選択すると、変形点が表示されます。これをドラッグすると、自由に大きさや形を変えることができるので、複雑な図形の場合は一度大まかにポイントを打っていき、後から微調整を加えるやり方がよいでしょう。領域をコピーする作成したホットスポットは、コピー&ペーストが可能です。V(Macの場合はCmd)で動作します。Zで元に戻すことも可能です。作成したホットスポットはコードとして自動的に生成されます。[表示]→[分割]→[コード-デザイン]からコードを確認すると、下のように、map要素とarea要素が生成されており、またimg要素のusemap属性とも自動的に紐付けがされていることが分かります。このとき、デザインビューの中でホットスポットを選択すると、対応するコードがハイライトされるため、視覚的に対応がわかるようになっています。href="#"></map>この状態では、領域は指定されていますが、クリックしても何も起きません。area要素に、href属性、target属性、alt属性が設定されていないので、記述を追加しましょう。ホットスポットを選択すると、プロパティインスペクターがホットスポット用に切り替わります。href属性、target属性、alt属性はそれぞれプロパティインスペクターの「リンク(1)」「ターゲット(2)」「代替(3)」と紐付いています。コードを直接編集することも可能です。Graphics」の略で、XMLに基づいたマークアップ言語の1つです。JPGやPNG、GIF等と同様に画像として扱うことができ、ベクター形式であるため拡大・縮小を行っても劣化しないのが特徴です。マークアップ言語であるため、SVGをテキストエディタで開いてコードを編集することも可能です。SVGを用いてイメージマップを再現すると、レスポンシブデザインへの対応(厳密にはフルードイメージ。画面幅に応じてサイズが変わる画像のことで、レスポンシブデザインの定義の1つ)・マウスオーバーの対応が容易に行えます。IllustratorでSVG画像を作成まずはホットスポットとして使うSVG画像を作成します。SVGの作成といっても特に難しいことはなく、ホットスポットの形に合わせて長方形や楕円などを描画していくだけです。一からコードを書くのは現実的ではないため、ここではIllustratorを使用します。Illustratorを開き、背景画像と同サイズのアートボードを作成。背景画像を配置したら、適宜ホットスポットにしたい領域に図形を描画します。このとき、以下に注意して作業を行ってください。必要が無ければ、線のプロパティを無効にするアンカーポイントはなるべく減らすレイヤー構造をなるべくフラットに保つ塗りの色については、もちろん最終成果物と同等の設定でもよいですし、作業がしづらいようであれば透過処理をしても構いません。その場合、後からコードを編集すれば修正が可能です。IllustratorからSVG画像を書き出すさて、図形の描画が終わったら、[ウィンドウ]→[アセットの書き出し]からアセットの書き出しパネルを表示させ、背景画像も含め全てを選択してAltキー(Macの場合はOption)を押しながら、アセットの書き出しパネルにドラッグします。次にSVG書き出しの詳細設定を行います。アセットの書き出しパネルのメニューアイコンをクリックし[形式の設定]を選択するとダイアログが表示されます。その中のSVGを選択してください。重要な設定は下記です。スタイル......内部CSS画像......保持レスポンシブ......チェックを外す「レスポンシブ」の項目は、svg要素のwidth・height属性を制御するものです。Explorerで意図した挙動になりません。設定を保存したらアセットの書き出しパネルの[書き出し設定]からSVGを選択し、[書き出し...]をクリックして任意の箇所にSVGを保存します。生成されたSVGをページに埋め込む保存されたSVGファイルをDreamweaverで開くとコードが表示されます。それを整形して、画像を埋め込みたいページの該当する箇所にコピーします。Illustratorからの書き出しの際に、[形式の設定]にて「レスポンシブ」のチェックを外したため、svg要素に対して横幅の指定も同時に行います。width属性の標準値も尊重しつつ親要素以上の大きさにはならないよう、今回はmax-widthプロパティを使用しています(1)。ここでは、スタイル指定のクラス名は、Illustratorが出力したaをそのまま用います。/></svg>この状態で一度コードがきちんと意図通りに動いているかを確認するため、[表示]→[分割]→[コード-ライブ]よりライブビューを起動します。ライブビューで横幅を変更して確認してみると、きちんと意図通りにフルードイメージとなっていることがわかります。2017リリースから搭載された「リアルタイムプレビュー」が非常に有用です。[ファイル]→[リアルタイムプレビュー]または右下のアイコンをクリックすることで有効にすることができ、編集しているコードの内容が保存の必要もなくリアルタイムに反映されます。[デバイスでプレビュー]欄に記載されているURLを入力、またはQRコードを読み込むことにより、モバイルデバイス実機のブラウザにて確認が可能ととなります。ページをプレビューする方法をご覧ください。1つ注意として、ライブビュー/リアルタイムプレビューはシンタックスエラーがあるとリアルタイムの反映は無効になってしまいます。執筆時点ではsvg要素内の空要素の記述方法に対応していないため、リアルタイムでの反映を行う場合は下記のように要素を書き換える必要があります。...></polygon></svg>少し手間と思われるかもしれませんが、昨今の主要なコード編集ツール(テキストエディタ・IDE・オーサリングツール)の中で標準でリアルタイムにブラウザに変更を反映できるのは、DreamweaverとBracketsのみです。細かな数値の調整をする場合に、いちいち保存せずに表示の確認ができるこの機能は大変重宝します。コードベースでSVGの編集が必要になった際、DreamweaverとBracketsはうってつけのツールと言えるでしょう(編集を終えた後は、空要素に戻すのを忘れないでください)。SVG画像をクリック可能にするホットスポットの作成が完了したので、次はクリックしてページ遷移ができるようにします。SVG標準のハイパーリンクは、Dreamweaverのプレビューに対応しないため、今回はJavaScriptを用いてこれを実現します。リンク先のURLを格納する場所が必要なので、ホットスポットとして扱う各要素にHTML5から実装されたカスタムデータ属性を用いてURLを指定します。ここではdata-hrefを追加しています。/>次にクリック操作への対応を実装します。今回は記述簡略化のため、jQueryと、Illustratorが出力したクラスaをそのまま使用します。});});これで、クリックイベントの実装は完了です。それから、クリック可能な要素であることをユーザーに伝えるため、マウスオーバー時にカーソルの形が変わるようにCSSを調整します。下の例は、Illustratorが出力したaというクラス名をそのまま用いています。*/}ここで実際に確認してみましょう。意図通りの挙動になっていることがわかります。※ライブビューで遷移前のページへ戻る場合は、一度デザインビュー等を選択した後にライブビューを選択してライブビューを再起動してください。マウスオーバー時のホットスポットの見た目を変更するホットスポット上にマウスカーソルが移動したときに、クリック可能であることを示すため、見た目が変わるよう実装します。これは、map・area要素では実現不可能な要件ですが、SVG画像なら、CSSだけで簡単に実装できます。今までの例では、分かりやすいようにホットスポットを常に表示していました。これを標準状態では不可視にし、マウスオーバー時だけ表示されるように指定を行います。transition属性を使って、変化にかかる時間も指定します。*/}これだけで実装は完了です。実際にライブビューで確認してみると、アニメーションも含めたマウスオーバーが反映されていることが分かります。map・area要素との比較SVGによるイメージマップの実装は非常に簡単で、インタラクションの付与も容易にできることがお分かりいただけたかと思います。留意すべき事柄として、SVGは本来リンクを行うためのものではないため、map・area要素と比べるとセマンティクスにおいて少し弱くなってしまうことが懸念されます。SVGを採択する場合は、WAI-ARIAに基づきrole="link"を付与する等してセマンティクスを少しでも補強するとよいでしょう。MapsとImageMapsterというjQueryプラグインを用いることによって、フルードイメージとマウスオーバーに対応させることが可能です。本来できないことをJavaScriptで実現しているため、細かい調整は難しく、また両方のプラグインを共存させることも残念ながらできません。それぞれの得意・不得意を抑えた上で、要件に合わせてSVGを使うべきかを判断するとよいでしょう。まとめ以上、map・area要素とSVGによるイメージマップの実装方法の解説を通して、Dreamweaverのユニークな機能を紹介してきました。いずれにおいても、Dreamweaverはイメージマップの作成に適したツールであることがお分かりいただけたかと思います。SVGの項でご紹介したリアルタイムプレビューは、イメージマップの作成のみに留まらず、web開発全般において非常にパワフルな性能を発揮します。これを皮切りに、ぜひともうまれかわった最新のDreamweaverの機能を探検してみてはいかがでしょうか。