インフラエンジニアを募集中です。詳細はこちらつまづきがちなiPhoneコーディングのTips(JS多め)HTML&CSSminami2011.09.27来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。・・・と考えがちですが、iPhone版のSafariでは使用不可です。content="user-scalable=no">が効かない最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいます。今のところ完全に本体の設定によるので、画面のズーム不可ありきのコーディングはしないほうが無難なようです。スクロールバーは表示されない基本的にスクロールバーは表示されません。お手軽インラインフレームを実装している場合などは注意が必要です。代替とするならJavascriptでスクロールボタンなどを実装しましょう。Javascriptの実行時間は最大10秒間flashのアニメーションをJSで代替・・・なんて考えている場合は要注意です。Javascriptの実行時間が10秒以上経過すると、処理に強制ストップがかかります。iPhone版のSafariは負荷が高いとクラッシュすることもよくありますので、jsの使用は最小限にしたほうがよさそうです。マウスオーバーイベントの挙動が違うマウスカーソルという概念がないので、マウスオーバーイベントもPCとは挙動が異なり、クリックイベントと同時に発生するようです。マウスオーバーイベントは基本的に使わないようにしましょう。追記:正確には、シングルタップ(クリック)した際クリック可能なエレメントがある場合、mousemove,mouseoverが発生それによりコンテンツに変化がなければmousedown,mouseup,clickが発生という流れのようです。window.close()ができない現在開いているウインドウを閉じるためにwindow.close()を使うことがありますが、基本的にiPhone版Safariでは無効となります。しても閉じたい場合は下記のように記述すると一応動いてくれます。デバッグコンソールは表示しておくエラーの確認をしたい場合は、デバッグコンソールを表示しておくと便利です。JavascriptのエラーのほかにhtmlやCSSのエラーも教えてくれます。console.log()などで出力を確認することもできるので開発中は表示しておきましょう。[設定]→[Safari]→[デベロッパ]→[デバッグコンソール]をオンにすると確認できます。まとめ実際にコーディングしているときにつまづいた内容を挙げてみました。PCと同じようにコーディングすれば良いようにも見えますが、iPhoneサイトのコーディングもまた細かい独自のノウハウがたくさんありますね。試すブラウザfujihara2019.06.13はてブバシャログ。Web制作スタッフによるブログです。「現場で使えるテクニック」をモットーに、Web制作全般についてお届けします。