iPhone5 と iOS6 での HTML5開発についてあれこれ - webとかmacとかやってみようか R

本日、iOS6がリリースされましたね。明日は iPhone5 の発売日。Mobile Safari も大幅にアップデートされて、Web開発者にとって非常に気になります。

iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more で素晴らしいまとめがありましたので、簡単に紹介したいと思います。

iPhone5

新しい画面サイズ

新しい 4インチ画面になり、解像度は WDVGA (Wide Double VGA) 640×1136px になりました。横幅はこれまでと変わりませんが、高さが 176px 増えました。

新しいシミュレーター

Xcode4が新しくなり、iOS6のシミュレータが出ました。Mac AppStore からダウンロードできます。

何をすべきか

画面サイズに依存したWebサイト（アプリ）は注意が必要です。縦幅が足りなくなります。Google Mapsの例のように、下が切れます。

f:id:dsuke:20120920101847p:plain

レスポンシブWebデザインを使っていても不十分です。通常RWDは横幅に対して使われますが縦には使われていません。

デバイスの検出

サーバーサイドでiPhone5を検出する方法はありません。userAgent は iOS6 としか判定できません。iOS6 の載った iPhone4/4s と区別不能です。

しかし、JavaScript かメディアクエリーを使えば判定できます。スクリーンの高さが 568px の時は 4インチディスプレイになります。

isPhone4inches = (window.screen.height==568);

また、CSSメディアクエリーとレスポンシブWebデザインのテクニックでiPhone5を判定できます。

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { /* iPhone 5 or iPod Touch 5th generation */ }

ホームスクリーンWebアプリ

ホームにWebアプリを追加すると、上下にレターボックスが表示され、今までの画面サイズと同じように表示されます。しかし、4インチに対応したWebサイト（アプリ）でもこうなってしまう問題があります。

iOS6 での HTML5

ファイル管理

ついに iOS6 の Safari でファイルアップロードをサポートしました！

input タグの fileタイプで、カメラとギャラリーから画像を選択できます。強制的にカメラにする方法はありません。しかし、accept 属性で動画と画像の選択は出来ます。

他のファイル、オーディオ、Pagesドキュメント、PDFなどはサポートされません。getUserMedia を使ったライブストリーミングなどもサポートされません。

画像やビデオを選択した後に出来ること:

form action を使ってポストする。
AJAXでアップロードする。
File API を使って、クライアントサイドでJS から直接データを操作する。

Web Audoi API

Web Audio API がモバイルブラウザに初めて乗りました。これでゲーム開発などに役立つかもしれません。

Smart App Banner

Webサイトを訪れたとき、サイトに紐付いたアプリがインストールされていなければインストールボタン、インストールされていれば View ボタンを自動で表示できるようになりました。

CSS3 Filter

CSSで画像のフィルター（グレイスケール、ぼかし、ドロップシャドウ、明るさなど）をかけられるようになりました。transforms のようにスペース区切りで複数のフィルタをかけられます。デモ

CSS3 Cross-Fade

iOS6 では新しい CSS Image Values 標準の幾つかをサポートしました。クロスフェードを使うことで、二つの画像を同じ場所に異なる透明度で配置できます。

デモ

フルスクリーン Safari

iPhone、iPod（iPadは無し）で Safari をフルスクリーン表示することができます。アドレスバーやツールバーが隠れます。しかし、ランドスケープ（横）表示の時だけで、強制的にフルスクリーンにすることは出来ません。

Animation Timing API

requestAnimationFrame として知られている Animation Timing API がサポートされました。これによって setInterval をつかったダサイ描画ループは卒業ですね！

CSS Image Set

低解像度と高解像度用の画像セットをまとめて定義できます。これを使えば、メディアクエリによる切り替えをせずとも、複数の解像度向けの画像を１つで定義できます。retinaディスプレイ対応のための使用ですね。これに対する標準化グループはまだない、とのことで Apple 独自仕様のようです。

Passbook クーポンとパスの配布

Passbook は iOS の新しいアプリです。入場券、チケット、ディスカウントクーポン、ポイントカード、ギフトカードなどを全てまとめて管理します。ネイティブアプリだけでなく、Webサイトからもこのパスの発行ができます。詳しくはこちら developer.apple.com/passbook

（日本でも iPhone5 発売日から電通がなにやら仕掛けてくるそうです。これから流行るかもしれませんねー）

Storage API と WebAppの更新

相変わらず IndexedDB は使えず、特に利用可能な新しいAPIはないようです。しかし、幾つか変更点が。

Application Cache の制限が 25Mb に増えました。（これまでは約5M）
ホームスクリーンWebAppは独自のストレージサンドボックスを持つようになりました。
（追加する度に新しいストレージを持つようになったため、複数アプリの切り替えにはよいニュースです。Webサイトとホームの間でデータのやりとりをするには問題があります。）
ホームスクリーンWebAppのタイトルが定義できるようになりました。これまではサイトのページタイトルが使われていたのが、別名を定義できるようになりました。

また、apple-mobile-web-app-orientations という、WebAppの向きを指定できるメタタグもあるそうです。しかし、これはまだ動かないそうな。

WebView の更新

WebView の JavaScript は Safari の 3.3倍遅い。しかし、これは SunSpider（ベンチマークツール）の結果に過ぎない。全ての機能をカバーしているわけではないし、トータル描画時間でもない。だから、WebView のアプリが 3.3倍遅いという意味では無い。

他に幾つかよいニュースを発見しました。

WebAppのデバッグのためのリモート Web Inspector
部分レンダリングを抑止する属性 supressesIncrementalRendering。
info.plist の WebKitStoreWebDataForBackup。localStorageやSQL databaseのiCloud等へのバックアップ。
開発者契約の変更。（良いニュースなの？？）

リモートデバッギング

初めて、 iOS 上の Safari に公式リモート Web Inspector が追加されました。これで iWebInspector や Weinre は過去の物となりました。このリモートデバッガーはシミュレータか、USBで繋がれた実機で動きます。（実機はUSBに繋がないといけない）

リモートインスペクションを始めるためには Safari 6 for Desktop が必要です。残念なことにサポートしているのは Mac だけです。Safari for Windows は 5.x で開発が止まり、もう利用出来ません。ですので、iOS デバイスのwebデバッグができるのは Mac OS だけです。

セキュリティの理由から、最初に Web Inspector を有効にする必要があります。「Safari」→「環境設定」→「詳細」から、「メニューバーに”開発”メニューを表示」をチェックします。

次の環境でデバッグが可能です。

iOSデバイス、またはシミュレータの Safari
iOSデバイス、またはシミュレータにインストールされた WebApp
Apache Cordova/PhoneGap のような WebView を使ったネイティブアプリ

ネイティブアプリは、Xcodeでインストールしたアプリだけインスペクできます。（つまり自分で開発したアプリ）そのため、Google Chrome のようなものはできません。

Safari 5 や Chrome の Webkit Inspector を使っているなら、Xcode のネイティブ開発UIをベースにした Safari 6 の完全に再デザインされたインスペクターを目にするでしょう。新しいUIを理解するまで迷うでしょう。このインスペクターでできることは

HTML、CSS の確認とライブ変更
ストレージへのアクセス: クッキー、Local Storage、Session Storage、SQL Database。
webapp のプロファイル: ネットワークリクエスト、レイアウト＆レンダリング、JavaScript、イベントのパフォーマンスレポート。パフォーマンスツールの大きな進歩です。
DOMの検索
全ての警告とエラーを一カ所で確認
worker thread の管理
JavaScript ブレークポイントの管理、キャッチしない例外のブレーク
コンソールへのアクセスとJavaScriptの実行
JavaScriptコードのデバッグ
対象の要素をタッチしてインスペクトする

素晴らしいよApple！私達はこれを長い間待っていた！！

その他の小さなアップデート

JavaScriptのパフォーマンスが 20%向上
Google Maps が iOS6 から使えなくなる。http://maps.google.com へのアクセスはネイティブアプリではなく、GoogleMapsのWebサイトへリダイレクトされる。そこで、ネイティブマップアプリを開く新しいURLスキーマができた。maps:?=<query> queryはまさに検索文字列か、緯度経度をいれる。ルートナビゲーションを開始するパラメータは次のようになる。maps:?saddr=<source>&daddr=<destination>
XHR2: XMLHttpRequestProgressEvent をサポート
input の autocomplete を公式サポート
DOM4 の Mutation Observers を実装。WebKitMutationObserver で DOMの変更をキャッチできる。
-webkit-transform: preserve-3d でのハードウェアアクセラレーションの廃止。パフォーマンステクニックとしてこれを使うことは止めるべきだ。
window.selection による Selection API
<keygen> 要素
Canvas アップデート: createImageData の引数は1つになり、二つの関数が増えた。高解像度対応の、webkitGetImageDataHD と webkitPutImageDataHD。
SVGプロセッサとイベントの更新
新しい CSS viewport が結びつけられた。 vh (viewport height), vw (viewport width) と、vmin(vw と vh の最小値)
CSS3 Exclusions と CSS Regions が β1で利用可能だったが、最終バージョンで削除された。
iCloud タブ。Mac、iPhone、iPadでタブを同期することが出来る。そのため同じURLが全てのデバイスへ配布される。モバイルWebのアーキテクチャに気をつける必要がある。

以上、 iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more の紹介でした！あとちょっと、「まだ待っているもの」、「最後に」と続きますが、そこは割愛。気になる方は是非原文を読んで下さい。かなり意訳＆はしょったところもありますので、ご指摘＆コメント歓迎です。

個人的に今回の目玉はやはり リモートWebインスペクターに限りますね！特にプロファイラとブレークポイントが泣けるほど嬉しい！これを切望したWeb開発者も大勢いると思います。

これで開発環境も充実してきたし、ますますWebアプリが盛り上がっていくとおもしろいなー、と思う次第でありました。