AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
202 likes50,287 views
ng-japan(http://ngjapan.org)での発表資料です。
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
- 2. 久保田光則 - @anatoo - アシアル株式会社所属 - UI/UXデザイナー兼 ソフトウェアエンジニア - Onsen UIリード開発者
- 6. Onsen UI - HTML5ハイブリッドアプリ用のUIフレームワーク - Angularをベースにしています - iOS, Androidをサポートしています - 高速な動作性がウリです - なんてことを説明しててもつまらないですよね。
- 7. 本当に話すこと - HTML5ハイブリッドアプリとは? - ハイブリッドアプリ開発にどんな問題があるのか? - なぜAngularとOnsen UIが必要なのか? - 少しだけOnsen UIの紹介
- 9. ネイティブアプリ - Objective-CやJavaなど、そのOSの流儀で実装 - いわゆる普通のアプリ Java or Objective-C Java or Objective-C アプリ
- 15. ウェブの知識が活かせる
- 17. ネイティブの機能の呼び出し Android / iOS OS API
- 18. Cordovaについて - ハイブリッドアプリ用フレームワーク - 昔はPhoneGapという名前だった http://cordova.apache.org
- 24. 最も有名な失敗例 「HTML5に けたのは失敗」 Facebook ザッカーバーグCEO - HTML5で記述したfacebookアプリを ネイティブで書きなおす 2012年9月11日 TechCrunch Disrupt SF 2012より
- 25. 数年前に比べて現在状況は 好転してきた - 端末スペックの向上 - CPU、メモリ共に一昔前のノートPCとほぼ同じに - AndroidでのWebViewのChromiumの採用 - 利用できるHTML5 APIの増加 - Android2.3系のシェアの低下 - CrossWalkの登場 - Android5からのAndroid System WebViewの導入 - HTML5ハイブリッドアプリの事例の増加 - BYODの一般化により
- 27. しかしそれでも - HTML5ハイブリッド アプリは遅い! - ネイティブに比べると 使い物にならない! - 昔の体験が・・・ 画像出典: ヒストリエ
- 28. 問題
- 34. レンダリングの仕組み
- 35. 効率的なチューニング - まずは、どこがボトルネックになっているのかを知 る - インスペクタのTimelineタブで計測 - AndroidではChrome、 iOSではSafariのインスペクタを利用
- 39. 1. Loading - リソースの読み込みやパース - ハイブリッドアプリではウェブアプリよりも ここが消費する時間は短い - リソースがローカルにすでにあるから
- 40. 2. Scripting - JavaScriptの実行時間 - 純粋な計算は速い。基本的に問題にならない。 - ただし、canvasへの描画やディスクI/Oが発生し たりリフローを同期的に強制するコードなどは遅 い
- 43. 3. Rendering - Rendering - レイアウト処理 - Recalculate Style - 要素に当たるCSSルールの計算 - Layout - Render Treeの生成
- 44. Recalculate Style - 要素のスタイルの計算 - 個別のDOM要素に対して、当たるスタイルを計算 する - CSS OMを参照して、DOM要素の数 x CSSルール の数分マッチング処理が走る - 重たいCSSの書き方を減らす - 使っていないCSSのルールは消す
- 45. Layout - RenderTreeの生成 - 全てのDOMのレイアウト情報を計算 - 計算された結果の視覚的なオブジェクト のツリーがRenderTree
- 46. 4. Painting - Painting - 描画処理 - Paint - Display List(ChromiumだとSkiaへの命 令)の生成 - Rasterize - Display Listの実行してピクセル化 - Composite Layers - レイヤの合成
- 47. 雑多なチューニングテクニック小話
- 48. translate3d(0, 0, 0)が速いのはなぜ？ - GPUで描画されるから? - 半分正解だが半分間違っている - transform CSSプロパティを変更しても、 Composite Layersのみが起こるから - つまり、同時に別処理でLayoutを引き起こしたり すると台無し
- 49. どのCSSプロパティを変更すると何が起こる? - 要素の大きさが変わるような場合 Layoutから処理が始まる - transformやopacityだとComposite Layersのみ走る - CSSプロパティによって変更で何が起こるか違う - 詳しくはCSS Triggersでググるんだ！
- 50. DOMリークを防ぐ - DOM要素が誤って参照されたまま開放されない - 見た目よりも深刻 - detached DOMツリーとそれに参照されている リソースが全てリークする - iOS, Androidだとメモリスワッピングが弱く設計 されている
- 51. reflowを起こさないようにする - 画像のサイズは必ず指定する - 一度DOMツリーから切り離して操作する - offsetHeightやgetBoundingClientRect()を呼び 出しつつstyleを変更するみたいなコードをループ で書くと地獄
- 52. GPUバウンド - CPUよりもGPUの方で時間がかかっている状態 - Rasterize後にテクスチャとしてGPUのVRAMに転 送 - Composite Layers - GPUへの転送や合成がCPU時間よりも時間がかかっ ていればGPUバウンド
- 53. GPUバウンドなページを作る - 大きな領域を持つ要素にtransform: translate3d(0, 0, 0)を当ててたくさん生成してア ニメーションさせる - Rasterize時にGPUにテクスチャとして転送される - 転送や合成に時間がかかるようになる - GPUのVRAMへのbandwidthが分かれば 転送にかかる時間の理論値が割り出せる
- 55. チューニングの罠
- 62. ネイティブだとUIフレームワークがある - そのOSに必要なUIが全て っている - 開発者はUIフレームワークが裏で何をやっているか 気にしなくても良い - すぐにアプリを開発し始められる - これに対してHTML5ハイブリッドアプリでは?
- 66. Onsen UI
- 68. Angularをベースにして構築 - HTMLを拡張して、アプリも記述可能にしてくれる - 大規模なアプリでも耐えられるアーキテクチャ - DIコンテナ、サービス、コントローラ、フィルタ等
- 69. Custom Elements - HTMLを記述するだけでUIを構築できる <ons-page class=“first-page”> <ons-toolbar> <div class=“center”>Toolbar Title</div> </ons-toolbar> <div> <p>Page Contents</p> <ons-button ng-click=“foo()”> MyButton </ons-button> </div> </ons-page>
- 73. ons-navigator - 画面遷移と遷移アニメーションを管理する <ons-navigator class=“first-page”> <ons-toolbar> <div class=“center”>Toolbar Title</div> </ons-toolbar> <div> <p>Page Contents</p> <ons-button ng-click=“foo()”> MyButton </ons-button> </div> </ons-navigator>
- 74. - ページをスタックで管理する - 画面遷移を司るコンポーネント page1.html page2.html page1.html pushPage() popPage() page1.html
- 75. ons-pull-hook - いわゆるpull-to-refreshを実装できるコンポーネント <ons-page> <ons-pull-hook ng-action="load($done)"> Pull to refresh </ons-pull-hook> <ons-list> ... </ons-list> </ons-page>
- 77. ons-lazy-repeat - 数千数万のDOM要素のライフサイクルを管理 - いわゆる無限リストが簡単に実装できる <ul> <li ons-lazy-repeat=“lazyRepeatDelegate”> … </li> </ul>
- 83. Onsen UIが目指すもの
- 86. Onsen UI 2.0
- 87. - Material Designsサポート - Angular2サポート
- 88. 最後に
- 90. ご清聴ありがとうございました