この記事はVOYAGE GROUP エンジニアブログ: Advent Calendar 2013の15日目です。
先日社内で行なった勉強会の資料をSlide Shareにアップしました。口頭で説明した内容を追加してあります。
先日社内で行なった勉強会の資料をSlide Shareにアップしました。口頭で説明した内容を追加してあります。
補遺
前提としてiOSのWebView(ハイブリッド)アプリでネイティブアプリになるべく近いLook and Feelを実現する際の話です。
ネイティブとの連係
直近のプロジェクトではコードベースを最小にしたかったので、PhoneGapを使わなかったのですが、最新のPhoneGapは必要な機能を切り出してビルドして使えるみたいですね。素晴らしい。あまり自分で実装したくない所なので、既存で使える物をなるべく使いましょう。
私はFastClick.jsを有効にして、タッチの処理はclickイベントをハンドルしています。
なるべくブラウザ(Chrome)でデバッグする理由
iPhoneシミュレーター、実機ではデバッグしづらいからです。touchendとclickイベント
clickイベントが遅延する対策としてtouchendを使っても良いと説明しましたが、touchendイベントとclickイベントは発動条件が異なります。具体的にはタッチした後に別の要素まで指を動かして離すとtouchendはFireするが、clickイベントは飛びません。タップしたけどやっぱ辞めた、という動きはclickイベントを使った方が意図した通りになります。私はFastClick.jsを有効にして、タッチの処理はclickイベントをハンドルしています。
パフォーマンス周り
最後のまとめで覚悟が必要とさらっと書いてありますが、どういう事かと言うと。ネイティブであればiOS SDKが標準で用意してくれる、少ないメモリ、貧弱なCPUでUIを構築するための仕組み、例えばUITableCellの再利用やGrand Central Dispatch(GCD)がHTML5/JavaScriptには無いです。独自で実装したり、WebWorkerを利用してバックグラウンドプロセスで動かすという手もありますが面倒な事に変りはありません。そのあたりをカバーしつつ、レンダリングエンジンの気持ちになって考え、DOM操作を最適化していくという覚悟が必要、という意味です。Androidに比べればWebViewがサクサク動いてくれる、というのが唯一の救い。
初回リリース時は工数のかかるパフォーマンス、アニメーションのチューニングを潔く諦めるのもアリかなと思ってます。いつでも直せるのがメリットなので。
それ以外に大変な事
やった事はありませんが、オリエンテーション対応が必要という場合はもうSencha Touchを使った方が良いと思います。2.3でiOS 7のスタイルも追加されました。個人的にはjQuery mobileよりもおすすめ。学習コスト高いけど。
