どうも、今回はタイトルの通りですが、クリッカブルマップをレスポンシブ対応させる必要がある時って意外とありますよね。特に地図系とか。
それで、「クリッカブルマップ レスポンシブ」とかで検索すると大体jQueryのプラグインを使って対応するという記事がずらーっと出てくるわけです。。ただ、最近はvue.jsやangularとか脱jQueryの動きも活発なわけで、そんなjQueryのプラグインなんか使いたくないという需要が少しはあるのかなと思うので、プラグインなしでレスポンシブ対応のクリッカブルマップの実装方法を紹介したいと思います。
実装概要
まず、今回の実装方法の概要を簡単にまとめます。
日本地図をクリッカブル
今回はこちらの日本地図の画像をサンプルとして、それぞれの地域をクリッカブルエリアにしていきたいと思います。
多角形（poly）パスを使用
クリッカブルマップには「rect」、「circle」、「poly」の3種類がありますが、今回は色々な図に対応できる多角形（poly）を使用して可変に対応します。
対象画像の可変幅
可変の仕様に関しては、320〜1280pxの間で可変するものとします。
実装手順
そして、実装手順は下記の通りとなります。
実装手順
- ベースとなるcoordsの作成
- 可変コンテンツの作成
- ベースcoordsの配列化
- ターゲット要素（画像）のサイズ取得
- 幅に合わせてcoordsをリセット
レスポンシブ対応クリッカブルマップの実装方法
では、早速紹介していきたいと思いますが、まずはじめに完成系のコードを貼っておきます。
完成ソースコード
上記のコードがレスポンシブに対応したクリッカブルマップになりますが、実装していく上でのポイント冒頭の手順を元に説明していきます。
ベースとなるcoordsを作成
まずクリッカブルマップの対象となる画像のオリジナルサイズでcoordsを作成していきます。
coordsの作成に関しては、こちらのImagemap Generatorというサイトで簡単に作成することができます。とても便利なのでおすすめです。
とりあえず下図のような感じで適当に地域に分けてクリッカブルエリアを作成します。
可変コンテンツの作成
そして、出来上がったパス情報を元に下記のように適当にhtml作成して、スタイルで日本地図が320〜1280pxの間でサイズが可変するように設定します。
この時点で、対象の日本地図が320〜1280pxの間で可変するかと思います。
ベースcoordsの配列化
そしたら、今度は各areaの「coords」の部分を配列化します。完成コードの33〜46行目にあたります。
この箇所では、areaタグの情報をarea変数に入れて、areaタグの数だけ繰り返し処理をして、各coordsのデータをカンマ区切りで配列化（baseCoords）しています。
ターゲット要素（画像）のサイズ取得
次にクリッカブルの対象となる日本地図画像のオリジナルの縦横サイズを取得します。また同時に縦横比（アスペクト）も求めておきます。完成コードの48〜59行目になります。
この箇所はソースコードのままですが、imageクラスを使用してターゲットとなる日本地図画像を読み込み、ロードが完了した時点で画像の縦横幅を取得し、その情報を元に画像のアスペクトも求めています。
そして、次の項目で紹介する可変幅に合わせてcoordsの値をリセットする関数（getCoords）を呼び出しています。
ちなみに、読み込みが完了する前にサイズを取得しようとしても取得できないので正確にオリジナル画像のサイズを取得するためにも読み込み処理を使用してください。
幅に合わせてcoordsをリセット
ここが今回の一番重要なポイントになりますが、先ほど取得したオリジナル画像のサイズ情報と、現在のターゲット要素の幅を用いてcoordsの情報をリセットしていきます。完成コードの61〜75行目にあたります。
ここの処理では、まずターゲットとなる可変要素の現時点の横幅を取得して「targetWidth」変数に代入します。
そしたら、取得した現時点の横幅をオリジナル画像の横幅で割ってX座標の比率（rateX）を求めます。この比率をオリジナルのX座標値に乗算することで、その時の幅に適したX座標が求められるわけです。
同様に、Y座標も求めていきます。まず、Y座標の比率は現時点の横幅にオリジナル画像のアスペクトを乗算して、その値をオリジナルの縦幅で割ることで求めることができます。この比率をX座標同様にオリジナルのY座標値に乗算することで可変幅に対応したY座標が求められます。
あとは、ベースのcoordsを配列化したときと同じように、areaタグの数分だけ繰り返し処理をしつつ、ベースのcoordsの値をX座標とY座標に分けて、先ほど求めた比率をそれぞれ乗算してあげれば可変幅に対応した座標値を得られることができます。
最後に、ウィンドウがリサイズされた時にcoordsの値をリセットできるように、リサイズ関数を追加すれば完了です。
まとめ
いかがでしたでしょうか？
このようにレスポンシブに対応したクリカッブルマップは意外と簡単に実装することができます。また多角形なのであらゆる形の図にも対応することができます。
これくらいの処理のためにわざわざプラグインを導入するのはデータを無駄に重くするだけなので、なるべくプラグインに頼らず実装できるようにしておくのがおすすめです。
ということで、今回はここまで！また！