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

HTML&CSS

2011.09.27

来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ている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でスクロールボタンなどを実装しましょう。

参考：スクロールボタンがつけられるjQueryプラグインVertical Scroller jQuery Plugin Plus

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

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

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

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

追記：正確には、

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

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

Safari Web Content Guide - Handling Events

[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]→[デベロッパ]→[デバッグコンソール]をオンにすると確認できます。