jQuery不要！クリッカブル（イメージ）マップを実装するならレスポンシブや2倍書き出しでもズレないImage Map Resizerを使おう
超、超、超かんたんです。
もうレスポンシブや2倍書き出しのときにクリッカブルマップがズレることはありません。
どんなときも、どんなときも、クリッカブルがクリッカブルらしくあるためにImage Map Resizerを使いましょう。
このプラグインは日本語文献が非常に少なかったので、今回自分でまとめることにしました。
目次
Image Map Resizerはニュースタンダードになる
今まで定番だったjQuery RWD Image Mapsはレスポンシブや2倍書き出しに弱かった
クリッカブルマップをレスポンシブ化すると言えばjQuery RWD Image Mapsが定番でした。
しかし、昨今の画面サイズの多様化に追いつけず、今では普通にクリッカブルマップがズレます。
また、最近ではiPhoneやMacのRetinaディスプレイでの表示に耐えうるよう、画像は2倍書き出しにするのが一般的なWEB制作です。
ですがjQuery RWD Image Mapsでは、
「画面では400px * 400pxで表示」でも「実際の画像は800px * 800pxで書き出し」というシチュエーションに非常に弱いです。
2倍書き出しをすると、クリックするポイントが2倍ズレます。
また、相対的な指定（pxではなく%）で画像を表示してもズレることがしばしばありました。
それも無理はありません。
jQuery RWD Image Mapsの最終更新は4年前です。
4年前の2016年はというと、iPhoneSEがやっと世に出た年です。
こんなに画面サイズが多様化するなど予想していなかったのでしょう。
Image Map Resizerはそれらをすべてクリアしている
今回紹介するImage Map Resizerではそれらの問題は心配ありません。
最終更新は2年前ではあるものの、4年前のプラグインよりは安心できるでしょう。
また、レスポンシブや2倍書き出し、相対的な画像サイズの指定に非常に強く、クリックするポイントがズレる気配が全くありません。
安心して実装することができます。
また、付随して嬉しい要素があります。
それはjQueryが不要なこと。
Image Map ResizerではjQueryと生のJS（vanillaJS）の両方の記述から選択できます。
つまり、jQueryを使いたければjQueryで、vanillaJSを使いたければvanillaJSで実行することができます。
昨今は軽くて高機能なVue.jsやReactの登場でレガシーな扱いを受けがちなjQuery。
もしPageSpeed Insightsで高スコアを狙いたいならjQuery不要はありがたい仕様です。
具体的な使い方
GitHubからダウンロード可能
もし使ってみて良いなと思ったら「Thank you, David!」と言いながらStarを押しましょう。
きっと開発者の方が喜びます。
今回使うのはリポジトリの中の『imageMapResizer.min.js』のみです。
（「開発中はプラグインの中身をデバッグしたいんだ！」という方は圧縮されていない『imageMapResizer.js』を使うと良いでしょう）
プラグインの読み込み
|
1 |
<script src="js/imageMapResizer.min.js"></script> |
jQueryを使わない人は何も考えずbodyの閉じタグの直前に書くと良いでしょう。
jQueryを使って実行したい人は、必ずjQueryを読み込んだあとに記述してください。
パスはご自身のプロジェクトのフォルダ構成に合わせて変更してください。
プラグインの実行
|
1 2 3 |
<script> imageMapResize(); </script> |
〜おわり〜
これだけですべてのクリッカブルマップがレスポンシブ対応されます。
もちろん2倍書き出しだってなんのその。
jQueryで実行したい人は以下の記述になります。
|
1 2 3 |
<script> $('map').imageMapResize(); </script> |
もし、他の関数との兼ね合いだったり、実行する場所の問題だったりで、
明示的に「ページを読み込んだら実行」と指定したい場合は以下のように書きます。
|
1 2 3 4 5 |
<script> $(document).ready(function() { $('map').imageMapResize(); }); </script> |
一応紹介はしたものの、vanillaJSの記述が一番短いのでわざわざjQueryを使う必要はないと思います。
まとめ
クリッカブルマップのレスポンシブ化でうまく行かずにモヤモヤしていた時に見つけたプラグインです。
英語のサイトから見つけ出しました。
すでにStar数が600を超えているのでそこそこメジャーなプラグインだと思いますが、
日本語でこのプラグインを紹介しているサイトはこの記事のほかにはたった1つだけです。
もし自分のやりたいことが定番のプラグインで実装できない時、
日本語だけでなく英語でググったりしてみると新しく良いプラグインが見つけられるかもしれません。
関連記事
記事を書いた人
虎視眈々とCTOの座を狙っています
虎視眈々とCTOの座を狙っています