クリッカブルマップのレスポンシブ対応はjQuery非依存の「image-map-resizer」が良い感じだった

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。

たまーに実装するクリッカブルマップ。

もう枯れた技術になりつつあるのか、レスポンシブ対応するとなるとプラグイン選びが意外と悩まかったりします。

定番の「jQuery RWD Image Maps」が正直微妙

長く定番だった「jQuery RWD Image Maps」ですが、時代は脱jQuery。

案件によってはパフォーマンスなどの観点から、jQuery非依存でレスポンシブなクリッカブルマップを実装したいんじゃ！

というシーンも少なからずあるんじゃないかと思います。

ただこのプラグインにはそれ以外にも（個人的に）致命的に使いづらい点があります。

jQueryのバージョンに依存する

「jQuery RWD Image Maps」は古いプラグインのため、jQueryのバージョンが新しいと動作しないケースがあります。

※jQueryのバージョンを落としてもなお動作が不安定だったこともありました

iphone等でのバグが多め

なんだかんだ正常に動作しないことが多い気がするのがiphone。

しかもRetina対応画像（×2～）にも強いとは言えず、ネット上ではクリッカブルエリアが大きくずれる、などのバグ報告もちらほら。

で、先日ネットを放浪する中で見つけたのが掲題のプラグインでした。

jQuery非依存で軽量の「image-map-resizer」

導入が簡単でRetina画像対応、動作も今のところ概ね安定しているのがjQuery非依存で軽量の「image-map-resizer」です。

早速使い方をば見ていきましょう。

瞬き禁止。

準備：先ずはクリッカブルマップを作成

クリック可能範囲を座標で算出するのは非常にメンドクサイので、文明の利器（便利ツール）を使っていきましょう。

• HTML Imagemap Generator

このサイトで行うことはたったの3ステップ。

1. 使用する画像をドラッグアンドドロップする
2. 右上のシェイプツールでクリック範囲を指定する（複数可）
3. HTMLコードをコピペ

これだけで面倒な座標計算を行ってくれます。

上述の通りRetina画像対応なので×2や×3の画像でも見た目通りにクリッカブルエリアを指定すればOK。

image-map-resizer

image-map-resizerはGithub、npm、CDNから利用可能。

• Github
• npm
• CDN

スクリプトの読み込み・実行

ここではわかりやすくCDN版の使い方で進めていきます。

もちろんGithubからダウンロードしてもいいし、npm経由でimportしてもOK。

↓をbodyの閉じタグ直前あたりに記述してあげます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>
<script>
  imageMapResize();
</script>

～ 完 ～

…えっ？もう終わり？？

てくらいにあっけなく実装完了です。

それではさようなら。

…ってそれだとなんだかわびしいので補足情報も少し。

jQueryも一応対応してるっぽい

READMEを見る限りではjQueryメソッドとしても使えるようですね。

上述の「imageMapResize();」を↓のように書き換えるだけの模様。

$('map').imageMapResize();

わざわざjQueryで書くこともないかもですが、一応補足として記載しておきます。

どなたかの参考になればこれ幸い。

DEMO