iPhoneでクリッカブルマップが押せない

  • 著者 アバター アルム＝バンド
  • カテゴリー jQuery

「図の中の一部分をクリック(orタップ)すると新しくコンテンツを開く」という事項をなるべく簡単に実装する手段としてクリッカブルマップが候補に挙がりました。

が、iPhone(iOS12.1.2)でクリッカブルマップが押せない……！

そこで下記のような対策を講じてみましたが、いずれもダメでした……。

ちなみに、使用しているjQueryのバージョンは3.3.1です。

ここに関してはクリッカブルマップがrwdImageMapsで消える|動かなくなる場合がある件 | メディカルデザイン株式会社のブログという記事に

rwdImageMaps自体が結構長い間メンテナンスされておらず、最新のjQueryで廃止された関数を使っていたりする

クリッカブルマップがrwdImageMapsで消える|動かなくなる場合がある件 | メディカルデザイン株式会社のブログ

という記述があり、この記事自体が2016/7/22のものなので、それは3.3.1では動かないだろうな、と。

念のためさらにいくつかの対策を追加で実施しました。

rwdImageMaps

デフォルトではjQueryとrwdImageMapsプラグインを読み込んだ上で 

$(function() {
    $('img[usemap]').rwdImageMaps();
});

とすれば良いのですが、いくつかの記事では 

$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});

という書き方をしていたのでjQueryのイベントを見て何かするのかと思い(プラグインのコードを見る限りそんな感じはなかったですが) 

$(function(e) {
    $('img[usemap]').rwdImageMaps();
});

としてみましたが、効果なし。……うん、知ってた。

jMap

jMapは情報が少なかった(+他のものが多数出てきてググラビリティが低かった)ので、導入した後に動かないことを確認してすぐ次に移りました。

image-map-resizer

一番新しくメンテナンスされている(2/21時点で6日前(!)にGithubにプッシュされていた)ので、期待を込めて導入してみましたがダメでした。何故だ。

ついでにrwdImageMapsについて言われていたいくつかの対策をこちらにも実施

  • px単位のwidthをcssで指定
  • ※コードは下記
    1. jQueryのwidth()やheight()メソッドでimgタグの表示時点での幅・高さを取得
    2. attrメソッドを使って1.の値をimgタグにwidth, heightを指定
    3. 2.と同様にjQueryのcssメソッドでwidth, heightを指定

$(function() {
    iMapResize();
});
$(window).on("resize", function() {
    iMapResize();
});

function iMapResize() {
    var imageMap = $("#imageMap");
    imageMap.removeAttr("width").removeAttr("height").css({width:"auto",height:"auto"});
    var w = imageMap.innerWidth();
    var h = imageMap.innerHeight();
    imageMap.attr("width", Math.floor(w)).attr("height", Math.floor(h)).css({width:w+"px",height:"auto"});
    $("map").imageMapResize();
}

これでもダメでした。

色々コードを追って対策したり、cssでごにょごにょする時間はちょっとなさそうなので何か代替手段を探しましょうか……。

参考

jQuery-rwdImageMaps

jMap

image-map-resizer

この記事を書いた人

アバター

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧