つまづきがちなiPhoneコーディングのTips(JS多め)

つまづきがちなiPhoneコーディングのTips(JS多め)

来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。

来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。

[HTML] input type="file"は使えない

画像をアップするコンテンツだからフォームに input type="file" を・・・と考えがちですが、iPhone版のSafariでは使用不可です。

[HTML] <meta name="viewport" content="user-scalable=no">が効かない

最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいます。今のところ完全に本体の設定によるので、画面のズーム不可ありきのコーディングはしないほうが無難なようです。

[HTML] スクロールバーは表示されない

基本的にスクロールバーは表示されません。CSSのoverflow:auto などでお手軽インラインフレームを実装している場合などは注意が必要です。代替とするならJavascriptでスクロールボタンなどを実装しましょう。

[Javascript] Javascriptの実行時間は最大10秒間

flashのアニメーションをJSで代替・・・なんて考えている場合は要注意です。Javascriptの実行時間が10秒以上経過すると、処理に強制ストップがかかります。
iPhone版のSafariは負荷が高いとクラッシュすることもよくありますので、jsの使用は最小限にしたほうがよさそうです。

[Javascript] マウスオーバーイベントの挙動が違う

マウスカーソルという概念がないので、マウスオーバーイベントもPCとは挙動が異なり、クリックイベントと同時に発生するようです。マウスオーバーイベントは基本的に使わないようにしましょう。

追記:正確には、

  1. シングルタップ(クリック)した際クリック可能なエレメントがある場合、mousemove,mouseoverが発生
  2. それによりコンテンツに変化がなければmousedown,mouseup,clickが発生

という流れのようです。訂正します。

[Javascript] window.close()ができない

現在開いているウインドウを閉じるためにwindow.close()を使うことがありますが、基本的にiPhone版Safariでは無効となります。
どうしても閉じたい場合は下記のように記述すると一応動いてくれます。

//リンクをクリックしてウインドウを閉じる
document.getElementById('リンクのID').onClick = function(){
	window.open('','_self');
	window.close();
	return false;
};

[Javascript] デバッグコンソールは表示しておく

エラーの確認をしたい場合は、デバッグコンソールを表示しておくと便利です。JavascriptのエラーのほかにhtmlやCSSのエラーも教えてくれます。console.log()などで出力を確認することもできるので開発中は表示しておきましょう。[設定]→[Safari]→[デベロッパ]→[デバッグコンソール]をオンにすると確認できます。

01.jpg

まとめ

実際にコーディングしているときにつまづいた内容を挙げてみました。
一見PCと同じようにコーディングすれば良いようにも見えますが、iPhoneサイトのコーディングもまた細かい独自のノウハウがたくさんありますね。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ