読者です 読者をやめる 読者になる 読者になる

iPhone5 と iOS6 での HTML5開発についてあれこれ

iOS HTML5 iphone

本日、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

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

Animation Timing API

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

CSS Image Set

低解像度と高解像度用の画像セットをまとめて定義できます。これを使えば、メディアクエリによる切り替えをせずとも、複数の解像度向けの画像を1つで定義できます。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 の JavaScriptSafari の 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 や ChromeWebkit 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、iPhoneiPadでタブを同期することが出来る。そのため同じURLが全てのデバイスへ配布される。モバイルWebのアーキテクチャに気をつける必要がある。
 

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

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

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