プログラミングノート

一からものを作ることが好きなエンジニアの開発ブログです。

iPhoneのSafari対応について

iOS

Safari対応サイトを作った際にあまり調べていなかったので、ちょっと調べてみました。OS 3.0から使える機能も増えていて、簡単なアプリならネイティブアプリ作らなくても実現できますね。選択肢が増えるのは良いことです。

ブラウザの仕様

Web標準技術が使えるので、PCサイト開発の延長で作れる。
ブラウザ互換などは気にしなくて良いので、HTML5+CSS3で作りこむのもあり。

制限

リソースの制限

  • デコード後のGIF, PNG, TIFF 2MBまで
  • デコード後のJPEG 32MB
  • アニメーションGIF 2MBまで
  • Canvas 要素 2MB
  • その他リソースファイルはそれぞれ10MBまで


その他制限

Web標準技術を使う
次世代Web標準技術も使える
  • HTML5
  • CSS3(WebKitで先行サポートしているプロパティなど)
セキュリティ関連
  • SSL2, SSL3, and TLS with many popular cipher suites
  • RSA keys up to 4096
  • HTTPS

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" />
ホームアイコン

57×57のpngで、角丸のエフェクトは自動でかけてくれる。

<link rel="apple-touch-icon" href="/custom_icon.png"/>
起動画面

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プラグイン

HTML5やCSSアニメーションを活用している例

公式ドキュメント

登録が必要ですが、全てここに記載されています。

その他参考サイト