HTML5によるハイブリッドアプリ開発に関する雑記
HTML5でiPhoneやAndroid向けのハイブリッドアプリを作るのが最近の流行りみたいです。ハイブリッドアプリとは、外面は普通のアプリとしてAppStoreやGoogle play marketでインストールできるものの、その中身や一部がHTML5で記述されているアプリです。
最近の有名な例だと、CookpadやLinkedIn、はてなスペース、少し前にネイティブに移行してしまいましたがfacebookのモバイルアプリもHTML5を使って記述されていました。GREE界隈で言われているらしいガワネイティブっていう言葉もハイブリッドアプリを指します。ちょっとググってみると、2016年には企業向けのアプリの50%がハイブリッドアプリになるという予測もあります。
ハイブリッドアプリの何がいいかというと、Objective-CとかJavaとかがわからなくてもウェブ系技術者であればAndroidやiPhone向けアプリが書けちゃうので、今までウェブでやってきた技術者のスキルをそのまま使えるというところがよく言われます。また、マルチプラットフォーム対応する際には、全てネイティブで書くと同じ内容のアプリをJavaとObjective-Cで開発しなければいけませんが、HTML5であればワンソースでAndroidとiOS両方のプラットフォームに対応できるという事もよく言われます。世の中ウェブ系技術者はいっぱいいますが、スマートフォンという比較的歴史の浅いプラットフォームの開発者は余る程いるわけではないということなんだろうと思います。
ただ、HTML5でモバイルアプリを開発する際のノウハウというものは、結構細々とした話が多いせいかそれほど共有されていません。おいおいHTML5だから普通のウェブ技術者も普通に開発できるからそんなノウハウとか必要ないんじゃないの、と思うかもしれません。が、同じHTML5でもPCとくらべてスペックの低いAndroid端末やiOS端末できちんと動くようにしなければいけなかったり、モバイルアプリ特有の事情があったりするわけです。あとネイティブとHTML5を橋渡しするのはどうするか、とかも。ハイブリッドアプリも銀の弾丸では無く、色んなハマりどころがあります。よくあるのは、HTML5で作ってみたけど重すぎて使い物にならなかったり、一応動くけどUI的に大変ヘボいアプリができてしまう、またはfacebookが直面したようなHTML5で作ったアプリが落ちるけどWebViewの中身がブラックボックスなのでなんで落ちるのかよくわからない、というところです。
とりあえずハイブリッドアプリ開発の時に必要となる細々としたノウハウなどを雑多にまとめて書いておきます。
以下、箇条書き。
- ハイブリッドアプリの作り方
- HTML5からネイティブの機能を呼び出したいときはPhoneGapなどを使える
- PhoneGapに実装されていない機能でも、プラグインを書くことで実装できる
- セキュリティ
- モバイル端末で表示しているHTMLにウェブインスペクタを利用するには
- iOSならsafariのリモートインスペクタを使う
- それ以外はweinre使う
- 自分の場合、社内にweinreサーバ立ててすぐに使えるようにしてる
- 何もかもHTML5で書こうとするとだいたい破綻する
- android2.3やiOS4だと，CSSのposition: fixedがまともに使えないので、上部に固定されたツールバーが作れない
- パフォーマンス上HTML5だと無理っぽい部分が出てくる
- ネイティブですでに用意されているUI部品があるのにHTML5でイミテーションを作る無意味さ
- 開発効率を上げるためにハイブリッドで、という場合になんでもHTML5でやろうとするとかえって効率悪くなったりへぼいアプリが出来上がったりして本末転倒になる
- 自分の場合、画面のツールバーやそのボタンなどは、HTML5で書かずにネイティブで書いてる(中身のコンテンツの部分だけHTML5で書いている)
- あと画面遷移時のスライドアニメーションなどもネイティブのコードで書いてる
- パフォーマンスや原理的にHTML5では難しい画面の場合、PhoneGapプラグイン書いてその画面だけネイティブにするのが吉
- ボタンなどにclickイベントは使わない
- 試してみるとわかるけどびっくりするほど遅延が発生する
- tappableのようなタップイベントをうまく扱えるライブラリを使う
- jQueryじゃなくてzepto.js使いましょう
- アニメーションにはCSSアニメーション使いましょう
- JavaScriptのみで直接アニメーションするとクソ重い
- JavaScriptからアニメーション操作するときは domElement.style.webkitAnimation みたいなアニメーション関連のスタイルのプロパティを書き換えて使う
- アニメーションライブラリを使う場合は内部でCSSアニメーション使っているかどうか確認しておく
- 仕方なくJavaScriptだけでアニメーションする場合でも、setTimeoutやsetIntervalではなく、できればrequestAnimationFrame使う
- iOSだと、webkitTransformにtranslateXやtranslateを使うとチラつくので、translate3dの方を使う。
- アニメーションの描画にはGPUを有効にして早くする
- パフォーマンスが必要なときは、DOMをいじらない
- 見た目を変えるときに、class属性を変更するやり方はよくあるが、アニメーション中の処理などのパフォーマンスが必要なときにやると重い。子要素を追加したりするのも同様
- DOMそのものをいじるのではなく、DOM要素のstyleプロパティをJavaScriptから直接弄ったほうが断然軽い
- viewport使いましょう
- リストのような要素を沢山表示する画面でのイベント処理には、イベントが発生するDOMElement一個一個にaddEventListenerすると重くなる
- document.bodyにひとつだけイベントハンドラをつけてevent.targetでどのDOM要素でのイベントかを見て処理する
- android4系だと、WebViewがassetsからリソースを512回以上読み込むとSIGSEGVで必ず落ちるバグがある
- 画面の傾きをハンドリングする
- touch関連イベントの扱い
- iOSで動かすハイブリッドアプリのほうがはるかに速い
