iPhoneのSafari対応について
Safari対応サイトを作った際にあまり調べていなかったので、ちょっと調べてみました。OS 3.0から使える機能も増えていて、簡単なアプリならネイティブアプリ作らなくても実現できますね。選択肢が増えるのは良いことです。
ブラウザの仕様
Web標準技術が使えるので、PCサイト開発の延長で作れる。
ブラウザ互換などは気にしなくて良いので、HTML5+CSS3で作りこむのもあり。
制限
リソースの制限
その他制限
Web標準技術を使う
- HTML 4.01
- XHTML 1.0
- CSS 2.1 and partial CSS3
- ECMAScript3 (JavaScript)
- DOM Level2
- AJAX technologies, including XMLHTTPRequest
Viewport
描画エリアの設定。最低限この設定を追加するだけでもiPhone Safariに対応したように見える。
検索バーとステータスバーを除いた解像度は
- 縦の場合 320×356
- 横の場合 480×208
<meta name = "viewport" content = "width = device-width">
これで自動的に320pxに収まる。
viewportを指定しない場合は width = 980px に設定される。
UAの判定
UserAgentの例。
iPhone/iPod Touchの判定、Safariのバージョンを取得できる。
Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/XXXXX Safari/525.20
Detecting WebKit with JavaScriptを利用すると WebKitDetect.isMobile(); で判定できるようです。
CSS関連
CSS3のMedia Queryが利用できるので、iPhoneのみ適応するCSSを設定可能。
<!-- for iPhone --> <link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet"> <!-- for the others --> <link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet">
先行実装されているCSS3のプロパティやアップルの拡張を利用できて、アニメーションもCSSだけで実現できる。-webkit- というプレフィックスがついているものがそう。
-webkit-border-image | 画像でボーダーラインを引く |
-webkit-border-radius | 角丸の設定 |
-webkit-text-size-adjust | フォントサイズをよきに計らってくれる |
-webkit-tap-highilght-color | タップ時のハイライト |
-webkit-transform | 移動、拡大縮小、回転 |
などなど
JavaScript関連
個人的に一番驚いたのはGPSの継続測位ができるところ。
iアプリはトラステッドアプリでしか使えないのに。
イベント
タッチ関連
- touchstart
- touchend
- touchmove
- touchcancel
ジェスチャー関連
- gesturestart
- gesturechange
- gestureend
デバイス関連
- orientationchange
ローカルストレージ
JavaScript database API経由でSQLiteの利用や、HTML5のアプリケーションキャッシュが利用可能。Gearsみたいな感じでオフラインでも快適に利用できるアプリを作れる。
GPS
JavaScriptで現在地測位、継続測位が可能。(iPhoneOS3.0から)
W3CのGeolocation APIに準拠とのこと。
Debugging
Safariの設定で、Debug Consoleを有効にすれば使える
<script> console.log("My log message goes here."); console.warn("My warning message goes here."); console.error("My error message goes here."); console.info("My information message goes here."); </script>
Webアプリケーション用の設定
画面遷移のないWebサイトであれば、ネイティブアプリのようにアクセスしてもらうことも出来る。後述のjQTouchが良い感じに対応している。
フルスクリーンモード
ホーム画面から起動した場合に、上部の検索バーが非表示になる。
<meta name="apple-mobile-web-app-capable" content="yes" />
起動画面
iPhoneOS3.0からはネイティブアプリのように起動用の画像を設定可能。
サイズは 320×460。
<link rel="apple-touch-startup-image" href="/startup.png">
ステータスバーの概観
フルスクリーンモードの際に色を変更可能。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
ライブラリ
WebKitのCSSを全く知らなくても、ライブラリを利用すれば何とかなります。
UniversaliPhone UIKit | HTMLとCSSのみで構成されたライブラリ |
iui | JavaScriptでスライドアニメーションなどが実装されている |
iWebKit | Themeが豊富で色々なカラーに変更できる |
jQTouch | iPhone開発に特化したjQueryプラグイン |
公式ドキュメント
登録が必要ですが、全てここに記載されています。