ネイティブよりも速いと評判のfastbookの裏側を調べてみる
本記事は、Sencha Advent Calendar 2012 の23日目の記事です。
1日遅れでごめんなさい！あ、今日であってた(;´▽｀A 当初完走は無理なんじゃないかと思ってたけど、みんなのがんばりで完走目前！おめでとうございます！
Sencha Touchで作ったネイティブよりも速いfacebookアプリ「fastbook」が話題になっていますね。
ネイティブを凌ぐすごいパフォーマンスに驚きますよね！これらは実際にはどんなコンポーネントを使って作られているのかすごく気になります。そこで、ちょっと調べてみたいと思いました。
ネイティブアプリ向けパッケージが、https://github.com/extjs/fastbook にあるようなのですが、メンテナンス中と出てアクセスできません。。ソースみたかった。。。（2012.12.26追記: 今見るとアクセスできますね。けど、本当にWebViewでラップしただけで中身はWebから表示してるだけでした。つまりJSのソースは無い） 仕方ないので公開されているものを解析しつつ推測してみます。
基本的に３つのスクリプトファイルからできているようです
app.js にアプリのロジックが圧縮されて入っています。圧縮と言ってもそれほど複雑な物ではないので、Webインスペクターで Pretty print すれば、まあなんとか読めます。気になるのは、sdkですね。Ext.versionを見てみると、versionが "3.0alpha" とあります！まだ一般公開されていない、次期 Sencha Touch で作られてるんですね！
とりあえず app.js を記事で触れられている改善点を中心に見てみました。
パフォーマンス改善のポイントはいくつかありますが、特に無限Listコンポーネントが重要のようです。これは最近、Sencha Touch 2.1で改良された無限Listコンポーネント（What’s Coming in Sencha Touch 2.1）のことかと思ったら、実はそうでもないようです。
Sencha Touch 2.1.0 の SDK に含まれる examples に、touchtweets というTwitterアプリのサンプルがあります。これは新しい無限リストに対応しているそうです。（オンライン上のデモはまだ2.0.1のようだ）
fastbookではiframeを使ってDOMツリーを分割したとあります（実際はobjectタグだった。iframeではなくobjectなのはなぜだろう？）。しかし、先のサンプルのリストはiframeではありませんでした。fastbookで使われているのは「Sandboxコンテナー」というまったく新しい機能のようです。残念ながらまだSDKには入っていません。 Sencha Market なんかで出してくれないかなー、と期待してます。
次の、TaskQueueは、Ext.TaskQueueのことですね。これはSencha Touch 2.1から新しく追加された機能です。複数のDOM要素の操作をバッチ処理のようにまとめることで、DOMのリフローとリペイントを最小化するようです。リフローについては ブラウザ動作の理解－リフローとリペイント及びその最適化 に詳しくあります。ただ、まだこのクラスはAPIドキュメント上はprivateとなっていて、フレームワーク内部での利用しか推奨されていません。
次に AnimationQueue を追加したとあります。これもfastbookのための新規クラスです。これは内部に taskQueue と idleQueue の二つのキューを持ち、taskQueueがある間はそれを実行し、taskQueueが無くなったら idleQueue を実行する、という仕組みでアニメーションやロードの処理を分割しているようです。特にアニメーションに特化した機能では無く、汎用的な仕組みなため、これも早く標準APIへ組み込んで欲しいですね。
Web Workerは、Ext.Xhrという新しいクラスに組み込まれています。また、これ用に xhr-worker.js が読み込まれています。このスクリプトでWorkerとのmessageやりとりをしているようです。Web WorkerではAjaxでのリソース取得、デコードを行っています。元々Ajaxで非同期通信ではあるのですが、WebWorkerを使うことでUIスレッドから切り離し、よりスクロールの滑らかさなどを維持するようです。特に現在のマルチコアプロセッサを持つスマートフォンなどでは有効だそうです。
総じて、やはりfastbookはかなりチューニングされています。通常Sencha Touchで使われるMVCアーキテクチャでのアプリケーションのロード方法とも少し違います。カリカリにチューニングされているからこそ、この性能が出るんですね。
単純にSencha Touchを使ったからといって、皆が皆ここまでのアプリケーションを作れるわけではありません。それはネイティブにとっても言えることでしょう。ネイティブだからパフォーマンスが良い、HTML5（Sencha Touch）だから優れている、というのはナンセンスです。大筋の傾向はありますが、個別事例ではそれが全てではありません。結局は作り手の技術と情熱次第。
そういう意味で、fastbookはSenchaが優れているということではなく、まさしく作り手次第でHTML5でもここまで出来るんだ、ということを証明してくれたのだと思います。
HTML5で出来ないことまとめ 2012年12月版
本記事は、HTML5 Advent Calendar 2012 の12日目の記事です。なんとか本日中にあげれるか・・ アップできた！
業務やらイベントやら本やらで死ぬほど忙しいなか、無謀にもHTML5 Advent Calendarに参加してしまった@dsuketです。こんばんわ。
先月の段階ではここまで修羅場になるとは思わなかったのですが、師走は恐ろしいものですね。年末にこんな首を絞めるイベントが山ほど各所で行われているとは、つくづくエンジニアはM属性だと思いました。
本ネタは始めは「HTML5で出来ること」にしようかと思っていたのです。が、そんな話は山ほどある。もはや食傷気味ですよね。そこで逆転の発想で「出来ないこと」にすればいい！と閃いたわけです。さすが良い閃きだな−、俺冴えてる！と思ったのも束の間。念のためググってみると・・・「あれ？いっぱいあるぞ・・(￣0￣;)」
しかし、検索上位に表示されるものをよく読んでみると古い内容が多く、もうそれできるよ（できそうだよ）というのも多くある。日々進化の早いこの業界、2，3年も経つと情勢が大きく変わりますよね。そこで今回は、その先人達の記事を参照しつつ「HTML5で出来ないこと 2012年12月版」としてお送りしたいと思います。
第13回 来るべきHTML5の世界へ（後編）
まず、下記の記事からみてみましょう。2010年12月なのでちょうど2年前の記事ですね。
第13回 来るべきHTML5の世界へ（後編）
HTML5でできないこと
また，マルチメディア機能では，Flashがストリーミング動画を複数のブラウザに表示できるのに対し，HTML5ではその対応ができません。これは，HTML5向けのビデオエンコーディング技術がブラウザメーカで統一されていないためで，Internet Explorer 9やSafariなどは「H，264」を，MozillaやOperaは「WebM」をサポートしています。さらに，動画機能についても，動画制御や著作権管理，フルスクリーン表示などに未対応であり，マルチメディア機能を中心に実装する動きが活発化する中，できないことも明らかになってきました。
ここで上げられているコーディックの問題は今もあります。GoogleがH.264を長期的にサポートをしないと言いだした（GoogleがH.264問題を再説明、IEとSafariにはWebMプラグインを提供へ）かと思えば、MozillaはH.264サポートを打ち出したり（Mozilla が H.264 をサポートへ、webM 一本化を断念）、一方OperaはMobileに限っては H.264をサポートしたり（Web specifications support in Opera products 英語版）と混乱の極みですが、これでモバイルでは主要なブラウザが全てH.264をサポートすることになりました。（デスクトップ向けではまだ）
記事中で次に触れている動画制御が、何を指しているのか分かりませんがシークやループも可能です（参考: HTML5のvideo/audio＋JavaScript APIテクニック）。DRMは未だ解決していません。GoogleやMSが取り込んではいるようですが、標準化にはまだまだ遠そうです（GoogleとMicrosoftら、HTML5対応のコンテンツ暗号化APIの標準化を申請）。フルスクリーンについては Fullscreen API で標準化が進み、Firefox、Chrome、Safariでは既にサポートされています。
HTML5でアプリを開発するメリットとデメリット
次の記事はこちら。HTML5でアプリを開発するメリットとデメリット より
HTML5で出来ないことは以下の通り。
- 写真/動画撮影
- Bluetoothへのアクセス
- Gyroscope
- プッシュ通知
- バイブレーション
- メディアファイルへのアクセス
- バックグラウンドで起動
写真/動画撮影については、WebRTC や Media Capture API で仕様が策定中です。Media Capture API はiOS6でその一部が実装され、遂にカメラが使えるようになりました（参考: iOS6のSafariでサポートされるHTML5の機能）。Androidでもversion 3から対応しています（ Android 4の新機能でカメラWebアプリ作ってみた）。残念ながらPC向けブラウザは対応しているものはなさそうです。動画や音声のストリーミングが可能なWebRTCについては、Opera 12、Android版Opera mobileが標準で対応、Google Chrome がオプションで対応しています。
Gyroscope（ジャイロスコープ）は DeviceOrientation Event Specificationで仕様策定されています。最新のiOS/Androidなら結構動きます。
BluetoothはHTML5でデバイス機能を使うためのDevice API にも標準化されていません。今後の追加予定も無さそうです。（追記: あるよ、とご指摘いただきました。末尾で追加しました）プッシュ通知については、そのものではありませんが、Server-Sent Eventsというもので実現可能です。ブラウザでこれを受け取りOSの通知システムと連動すればネイティブアプリのようになるでしょう。
バイブレーションは Vibration APIで標準化されています。未だ Firefox Aurora でしかサポートされてませんが時間の問題でしょう。メディアファイルへのアクセスは前述の通り。バックグラウンドでの起動は Web Workers でできそうですが、現在のところ iOSなどではバックグラウンド中のJavaScriptは停止してしまうため無理そうです。今後の改善に期待！
HTML5で作るiPhoneアプリのできない5つのこと
続いての記事はこちら HTML5で作るiPhoneアプリのできない5つのこと。こちらも2年以上前なのでだいぶ変わりましたねー。ちなみに3が二つあるのは原文まま。
１、clipboardの利用
２、ファイルのアップロード
３、カメラ
３、シェイクイベント
４、加速度センサー
５、バックグラウンド起動
クリップボード欲しいですよねぇ。無いことが意外だとクライアントによく言われます。未だ実装はありませんが、仕様はあります。 Clipboard API and events です。最終更新が去年の2月ですね。なにやらパテントの関係で難航しているようです。。。
ファイルのアップロートは先のMedia Capture APIとFile APIによってiOS6から対応済みです。ただしアルバム内に限る。任意のファイルできません。カメラは前述の通り。シェイクイベントはDeviceOrientation Eventで実現可能です。加速度センサーも同様ですね。
Flashだとここまでできる! HTML5とFlashの機能比較
だいぶ疲れてきました。しかも時間無い。。最後はFlashとの比較。 Flashだとここまでできる! HTML5とFlashの機能比較
クロスブラウザの映像対応
依然として動画コーデックの統一が進んでおらずクロスブラウザに対応した動画コンテンツを提供することが難しい状況です。
これは前述の通り。モバイルはだいぶH.264に寄ってきましたが、デスクトップはまだまだ。
Flash だと縦書きができる
CSS3でwriting-modeがサポートされました。コレを使えば縦書きもできます。こちらの サンプルの右下 Vertical Textで確認できます。
Flash だとタイムラインアニメーションに映像を組み込める
HTML5のオーサリングツールも出始めました。
これらを使えばFlashのようにCanvasアニメーションを作ることが出来ます。
Flash の 3D は進化している
HTML5の3Dも進化しています。WebGLの性能もあがり、便利なライブラリも充実してきています。tree.jsのサンプルで体験することが出来ます。
Flash だとウェブカメラが利用できる
先のWebRTCを使えばHTML5でもウェブカメラが使えます。 WebRTCはブラウザ上でリアルタイムコミュニケーションをするためのフレームワーク。HTML5 Conference 2012
ChromeのCanaryビルドなどで使うことが出来ます。正式サポートまでもう少し！？
Flash 内部で音を生成して再生することができる
HTML5でもこんなドラムマシーンができます。 HTML5 AudioとJavaScriptで作った簡易ドラムマシン
まとめ
時間が無いので手短にまとめます。
- ここ2年くらいでHTML5で出来ることが随分増えた。
- 特にモバイルの進化がすごい。
- これからの2年もきっとすごい進化する。
ということで、本来ならばまだできないことをまとめたいところですが、早くしないと今日が終わってしまうため今回はここまで！
と、してたのですが、やっぱり気持ち悪いので簡単にまとめを追加。
これまで上げた点から、今でもどのブラウザでも出来ない、2012年12月版HTML5で出来ないことは以下の5点！
個人的には 3，4，5あたりができるようになるともう最高なんだけどなー。これらはまだまだ先の話になりそうです。
追記:
ブクマやtwitterでコメントいただきました。ありがとうございます。
アレが入ってないぞ，このヤロー！とかあるとおもうので、ジャンジャン突っ込んで下さい！
んーこれ dsuket.hatenablog.com/entry/2012/12/… 頑張って書いてくれてるけどBluetoothはSysApps w3.org/2012/09/sysapp… PushやクリップボードはWebApps w3.org/2012/webapps/c… が議論の場で、実装も結構進んでるのよ〜
— dynamis (でゅなみす)さん (@dynamitter) 12月 13, 2012ご指摘ありがとうございます。勉強になります。
System Applications Working Group というので、WebのNative化に対する標準化を進めているそうです。詳しくは小松さんの記事で！WebのNative化に対する標準化が始まる？
Web Applications Working Group では、アプリケーションとして必要な機能の標準化を進めています。クリップボードだけじゃなく、先に挙げたFullscreen APIやFile API、Server-Send Eventsなんかもこれに含まれています。他にも Database and Offline Application APIs、Web Intents、Web Sockets、Widgetsなんかもあります。
ブコメより
んー、出来ないことの範囲が狭い気がするよ、自由にローカルファイルを扱わせろとかOSコマンド実行させろとかあると思うんだけどなあ
確かに、File APIでローカルファイルが扱えるようになった、といっても <input type="file"> か、ドラッグ＆ドロップしないとファイルハンドラを受け取れないのは不便ですよね。OSのファイルシステムにそのままアクセスはセキュリティ上問題でしょうけど、サンドボックスみたいな環境があっても良いかもですねー。同様に、OSのシステムコマンド実行も難しいでしょうねぇ。システムコールを呼べるようになると凄いんですが、セキュリティが心配すぎる。。
E4Xが使えない、なんて話しもどこかから。
E4Xありましたね。。。当時は画期的だ！と思ったのですが、JSONが普及してからはXMLがあんまり出番が無くなったような。FireFox もついに打ち切るそうです。E4X は衰退しました
他にもツッコミお待ちしてますー
Sencha Touch 2.1の変更点まとめ
本記事は、Sencha Advent Calendar 2012 の3日目の記事です。Sencha Advent Calendar ですが、今のところ参加者がとても少ないです。。どんなネタでも大歓迎ですので、ご参加お待ちしています！
先月、11月6日に Sencha Touch 2.1 がリリースされました。ざっくりと以下のような点が追加・改善されたようです。
- パフォーマンスの改善
- ネストしたレイアウトでのパフォーマンス改善
- paintedイベントへの変更
- TaskQueueメカニズムの追加
- Chart の機能改善
- Drawパッケージの改善
- 拡張可能なスプライト
- 修飾子と属性の定義
- フライウェイト・インスタンス化・スプライト
- Retinaディスプレイサポート
- Chartパッケージに新しいチャートを追加
- 集合チャート
- 金融チャート
- Drawパッケージの改善
- コンポーネントの強化
- 無限スクロール付きリスト
- 新しいSencha Cmd
- 強化されたネイティブサポート
詳しくは以下をみてください。
ところが、2.1で新しくなったのはこれだけではありません。というか、全然もっとある！！ということで Release Notesから、個人的に興味あるものをピックアップして紹介したいと思います。
チャート系
- Implemented SVG support for Draw
- SVG is now forced on Android 4.1 devices due to Canvas issues
- Added webkitBackingStorePixelRatio support
- CanvasのRetina対応
チャート系のアップデートに伴い、draw系パッケージも各種強化されました。詳細は割愛。詳しくはRelease Notesみて下さい。Android 4.1 ではCanvasの問題から強制的にSVGになるようです。
dataパッケージ系
- [TOUCH-2792] Implemented filters, sorters and paging into WebStorage proxy
- [TOUCH-2844] Optimized clear method on WebStorage Proxy
WebStorageでもフィルタ、ストア、クリアができるようになった！
- [TOUCH-2800] Implemented new WebSQL proxy
- [TOUCH-3551] Added filtering and sorting capabilities to the SQL proxy
ようやくWebSQLプロキシが実装されました！！フィルタとソートも追加。
Sencha Command 関連
- in-app purchases API for iOS
- Contacts APIs for iOS and Android
- Push notifications for iOS
- openURL support
アプリ内課金、連絡先API、プッシュ通知などにも対応！
パフォーマンス
- SizeMonitor refactored for improved performance
- Improved Android 4 Scroll Indicator performance
- Update Button SASS so it looks better on device
- Change ListItems to not use vertical docking for headers. This improves performance since there is less DOM and less box layouts
スクロールや回転、リストのパフォーマンスアップ。ボタンデザインの修正。
- [TOUCH-3497] Added support for iPhone 5 resolution startup screen
解像度が変わりましたからねー。
その他
- [TOUCH-2888] Changed the default zIndex in message box to a larger number to stop accidental zIndex issues when creating other floating panels/components
- 1.xの頃からあるバグで昔私も報告したなー。ようやく直ったようで。
- [TOUCH-3042] Allow hideOnMaskTap to be changed dynamically
- これは地味に欲しい機能。
- [TOUCH-3031] Allow JS files to be specified as remote
- JSの部分遅延ロードができるのかな？
- Ext.browser, Ext.feature, Ext.os が追加
- 機能判別やブラウザ、OS判定が便利になった！
- POST calls will now honor the disableCache option
- 例の iOS6 のPOSTキャッシュのバグ回避？
- Added proper support for IE10 animateStartTime
- IE10サポートも進んでいるようです。
総括
Release notesからざっくりと拾い出してみました。実はまだドキュメントに載っていない新機能が色々とありました。ソースを見ると入っているのですが、ドキュメント化が間に合ってないみたい。2.1 になって、細かい使い勝手などが結構改善されています。2.0 → 2.1 への乗り換えはそんなにコスト掛からないと思うので、是非検討されるとよいんじゃないでしょうか？
あと、たまにRelase notesを見ると思わぬ情報があったりしておもしろいですねー。ちゃんとドキュメント読みましょう、ということですね。
さて、Sencha Advent Calendar 明日は、また @kawanoshinobu さんです！その次が未定なので、ぜひ誰かJOINしてください！（切実
Objective-Cの循環参照について
2年ほど前に書いた記事 #import の使いどころ：循環参照しないために。 が未だにそれなりにアクセスがあるのですが、これは間違いがあります。正確にいうと、間違いでは無いのですが、冗長であまり意味のない記述でした。
#import は C言語の #includeを拡張して、一度だけしかヘッダファイルを読み込まないようになっています。そのため基本的には循環参照は起こらないようになっています。
では、何が問題になるか。
先の記事のコードは、以下のようなものでした。
ClassA.h
#import "ClassB.h" @interface ClassA { ClassB variableB; } @end
ClassB.h
#import "ClassA.h" @interface ClassB { ClassA variableA; } @end
これをコンパイルすると、以下のような処理が行われます。
- ClassA.h を読み込む
- ClassA.h の先頭の#import 宣言により、ClassB.h を読み込む
- ClassB.h を読み込む
- ClassB.h の先頭の#import 宣言により、ClassA.h を読み込もうとするが、既に読み込み済みのためスキップする。
- @interface で ClassB を宣言
- 型 ClassA の 変数 variableA を宣言
- エラー!! 型 ClassA が見つからない!!
ClassB.h を読み込んだときに、まだClassAの宣言が見つからないため、このエラーが発生します。そこで、@class ディレクティブで、ClassA はクラスだということを教えてあげる必要があります。@class 宣言を追加した正しいコードは以下の通り。
ClassA.h
#import "ClassB.h" @class ClassB; @interface ClassA { ClassB variableB; } @end
ClassB.h
#import "ClassA.h" @class ClassA; @interface ClassB { ClassA variableA; } @end
実装ファイルとヘッダファイルにimportを分ける必要は特にありません。全部ヘッダファイルに書いてOKです。
もう1点。
そのクラスのメンバーにアクセスしない場合は、import宣言は特に不要です。メソッドの戻り値のように、実装ファイルの中でそのオブジェクトのメンバーにアクセスする必要が無い場合などは、@class でクラス宣言だけしてやればOKです。インスタンス変数やメソッド引数のような場合は、実装中で使用するはずですので、importは必要でしょう。
@class は、その型がクラスであることを示しているだけです。逆に言うと使用するクラスを全部 @class で宣言しておいても特に問題はありません。（めんどくさいので普通はやらない） 循環しそうだな−、というのは @class で宣言しておくと幸せになれるかもしれません。
ということで、まとめ。
- 循環参照しそうな場合は、ヘッダに @class を宣言しとくと良い
- 実装ファイルで別途 importする必要は無い。
こちらも是非参考に：
Objective-Cのクラスの前方宣言がないと困ること
Chrome/Safari でスマホサイズの表示テストをする方法
スマホ用のWebページ（アプリ）なんかを作っていると、Chrome や Safari でその画面サイズで表示を確認したいことが多いですよね。インスペクタ便利だし。実機とかエミュレータとかめんどくさい。
一般的なスマホの画面サイズ 320 x 480 にブラウザのウインドウサイズを変更すれば、メディアクエリとかで自動的に表示を切り替えてくれるはず。が、私のMacだとなぜか Chrome/Safariの横幅が 400px までしか縮められない！微妙に足りない！！（Windowsならもうちょっと縮むとか？？）
サイズを変更する Chrome Extension とか試してみましたが、だめでした。やはり 400px 以下になりません。しかし、JavaScriptで別窓を開けば自由にリサイズできることが分かりました。
そこで、今見てる画面を、スマホサイズで別窓で開くブックマークレットを使うことにしました。
コードは以下の通り。
javascript:window.open(location.href, 'phone', 'width=320,height=480');
このアドレスを適当な名前（PhoneViewとか）でブックマークに登録しておくと、一発でスマホサイズで確認できて便利！（ブラウザのポップアップブロックにひっかかる場合があるので注意）
ほんとは UA とかも変えたかったけど、JSでは変更できないため断念。Extension作ればUAの変更できるらしいが、とりあえずそれはまた別の機会に。
Safari6 の Web インスペクタで行番号がずれる問題
前回の記事「iPhone5 と iOS6 での HTML5開発についてあれこれ」で書いたように、Safari6 の Web インスペクタで iOSのリモートでバッグが出来るようになりました！
が、また日本語（マルチバイト文字）を含むコードを表示すると行番号がずれている。。この問題は以前からあって、一応解決策もしたはずだった。参考: Safari の Webインスペクタで行番号がずれる問題を解決
しかし、Safariのバージョンが上がる度にこの辺りの設定箇所がコロコロ変わってしまうのです。Safari 5.0 までは /System/Library/Frameworks 以下にあった WebKit.framework が、Safari 5.1 では /System/Library/StagedFrameworks へ移動し、WebCore.framework となりました。（StagedFrameworks の説明はここが詳しい: 新・OS X ハッキング! 39 実は大きく変わった「Safari 5.1.4」）
それが、いつのまにやらまた /System/Library/PrivateFrameworks に移動されたようです。
で、とりあえず現在（Safari 6.0.1で確認）のパスはここ
/System/Library/PrivateFrameworks/WebInspector.framework/Versions/Current/Resources
ここにある、Main.css を編集します。ミニファイ化されているので、適当なエディタで展開するといいと思います。
.text-editor {
display: -webkit-box;
position: relative;
overflow: hidden;
/ 以下を追加 /
font-family: "好みのフォント", monospace;
font-size: 11px;
line-height: 13px;
}
編集内容は以前とほぼ同様。line-height が 13px とピクセル指定にしています。 .text-editor>.gutter>.line-number で指定されている物と合わせる必要があります。
ファイルを書き換えて管理者権限で保存し、Safari を再起動すると反映されます。
これで私の環境では直りましたが、まだ直らないようなら、こちらを参考にすると良いかもしれません。 Webインスペクタの行番号がズレてたら直しましょう
これで、リモートでバッグもばっちり！！ と、いきたいところですが、Safari6 のWebインスペクタて使いにくいですよね。。 次回は使い方なんかを。
iPhone5 と iOS6 での HTML5開発についてあれこれ
本日、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の例のように、下が切れます。
レスポンシブ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 を使ったライブストリーミングなどもサポートされません。
画像やビデオを選択した後に出来ること:
Web Audoi API
Web Audio API が モバイルブラウザに初めて乗りました。これでゲーム開発などに役立つかもしれません。
Smart App Banner
Webサイトを訪れたとき、サイトに紐付いたアプリがインストールされていなければインストールボタン、インストールされていれば View ボタンを自動で表示できるようになりました。
CSS3 Filter
CSS3 Cross-Fade
フルスクリーン 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倍 遅いという意味では無い。
他に幾つかよいニュースを発見しました。
リモート デバッギング
初めて、 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」→「環境設定」→「詳細」から、「メニューバーに”開発”メニューを表示」をチェックします。
次の環境でデバッグが可能です。
ネイティブアプリは、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アプリが盛り上がっていくとおもしろいなー、と思う次第でありました。
