Because We Love Happy Coding

フリーライターがPHPとかJavaとか勉強してます

【罠】「クリックすると開く」メニューがiPhoneで動作しなかった原因が罠

コーディングをしていると「それは罠だろ」と思う瞬間があります。

教科書通りに組んでいるのに動作しない。何がおかしいのか一生懸命に調べて、そして分かった時の「 俺は悪くない 」「 そんなのわかるわけないだろ 」感。一言で言うとそれが罠です。

WordPressコメント欄が邪魔なのでたためるようにした

仕事でWordPressのサイトをいじっていたのですが、モバイル画面では記事とコメントとサイドバーが直列に並びます。

  • ヘッダー
  • 記事
  • コメント欄
  • サイドバー
  • フッター

という並び順です。コメント欄はあまり頻繁には使われないのですが、ここが場所を広くとっていると、サイドバーのカテゴリや「最近の記事」などを見てもらう確率が下がります。

そこで、デバイスサイズがモバイルと判断できる時には、コメント欄を最初は非表示しておいて、「コメント」をクリックした時だけ表示する……という施策をすることにしました。

おれの能力…幽波紋スタンドは『jQuery』。その程度のコメントなら クリックで出し入れするのは わけない、、、、

結果、「わけない」ってほどでもないですが、なんとか動くものができ、Chromeの開発者ツールで確認できました。

ところが、念のため自分のiPhoneで表示させてみたところ、「コメント」をクリックしても動かないのです。あれっ? と思ってChromeに戻って試してみると、こちらでは問題なく動きます。

なんだ!? この妙な手応え……!

iPhoneの不気味な仕様らしい

qiita.com

ええーっ。Σ( ̄△ ̄;)

俺は悪くない 」「 そんなのわかるわけないだろ 」……これが罠です。

jQuery でクリックイベントをバインドする時は

 $('document').on('click', '#hoge', function(){});

とやるのが当たり前だと思い込んでいました。それがiPhoneでは利かない……とは。

とりあえず、上記記事を信じて、cursor: pointerを指定いれたらホントに動いた。唖然。信じられなーい。