Transcript

• 1. Angularと Onsen UIで作る 最高のHTML5 ハイブリッドアプリ ng-japan 2015年3月21日 アシアル株式会社 久保田光則
• 2. 久保田光則 - @anatoo - アシアル株式会社所属 - UI/UXデザイナー兼
 ソフトウェアエンジニア - Onsen UIリード開発者
• 3. 好評発売中! - 最近になって韓国語版も翻訳出版されます
• 4. 話すこと Onsen UIテーマ:
• 5. http://onsen.io
• 6. Onsen UI - HTML5ハイブリッドアプリ用のUIフレームワーク - Angularをベースにしています - iOS, Androidをサポートしています - 高速な動作性がウリです - なんてことを説明しててもつまらないですよね。
• 7. 本当に話すこと - HTML5ハイブリッドアプリとは? - ハイブリッドアプリ開発にどんな問題があるのか? - なぜAngularとOnsen UIが必要なのか? - 少しだけOnsen UIの紹介
• 8. HTML5ハイブリッドアプリとは
• 9. ネイティブアプリ - Objective-CやJavaなど、そのOSの流儀で実装 - いわゆる普通のアプリ Java or Objective-C Java or Objective-C アプリ
• 10. ウェブアプリ - ブラウザで動作する - 要するにただのウェブページ
• 11. HTML5ハイブリッドアプリ - アプリとして動作 - 内部の実装にHTML5をつかっている アプリ ネイティブ層 HTML5
• 12. 仕組み アプリ HTML 読み込み WebView
• 13. HTML5ハイブリッドアプリの 何が良いのか?
• 14. クロスプラットフォーム性 Android iOS
• 15. ウェブの知識が活かせる
• 16. ストアでの配布 - 外見は普通のアプリなので、ストアで配布可能
• 17. ネイティブの機能の呼び出し Android / iOS OS API
• 18. Cordovaについて - ハイブリッドアプリ用フレームワーク - 昔はPhoneGapという名前だった http://cordova.apache.org
• 19. Cordovaがやってくれること - HTML5をアプリ内部にパッケージ化 - OSとのAPIのやり取りを一本化
• 20. Cordovaの提供するプラグイン ‣ さらにCordovaプラグインの
 仕組みを使えばこれ以外のことも可能 ファイルストレージ、カメラ、コンパス 加速度センサー、コンタクトリスト、 位置情報取得、ネットワーク、Bluetooth通信、 Androidのインテント、アプリ内ブラウザ、 GPS、NFC、etc…
• 21. 「HTML5でモバイルアプリが作れるんです ね、やったー」
• 22. こうして数多くのフロントエンド開発者が HTML5ハイブリッドアプリに 取り組んでいくことになった…
• 23. 結果 - 数年程度前の出来事 - いったいなにが起こった?
• 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の一般化により
• 26. 好転を表すシグナル - Rails作者のDHHによるHTML5ハイブリッドアプリ評
• 27. しかしそれでも - HTML5ハイブリッド アプリは遅い! - ネイティブに比べると
 使い物にならない! - 昔の体験が・・・ 画像出典: ヒストリエ
• 28. 問題
• 29. 直接の問題 - パフォーマンスや安定性が悪い - UIコンポーネントをいちいち作らないといけない
• 30. パフォーマンスに関する答え チューニングすればいいじゃん！
• 31. - 今ではハイブリッドアプリは十分速く動作する - だから勝手にチューニングすればいい、と思ってた
• 32. 得られた知見 - フロントエンド開発者の多くは、
 HTML・CSS・JSの書き方だけしかわかっていない
 ことがわかった
• 33. - 多くの開発者はより素早く描画するための
 チューニング方法を知らない
• 34. レンダリングの仕組み
• 35. 効率的なチューニング - まずは、どこがボトルネックになっているのかを知 る - インスペクタのTimelineタブで計測 - AndroidではChrome、
 iOSではSafariのインスペクタを利用
• 36. - インスペクタのTimelineタブで計測 - AndroidではChrome、iOSではSafariのインスペ クタを利用
• 37. インスペクタのTimelineタブで取れるカテゴリ Loading Scripting Rendering Painting }1frame 描画が始まって終わるまでが1frame これを16ms以下に抑えれば最高
• 38. ボトルネックがどこにあるかで
 チューニングもまた変わってくる
• 39. 1. Loading - リソースの読み込みやパース - ハイブリッドアプリではウェブアプリよりも
 ここが消費する時間は短い - リソースがローカルにすでにあるから
• 40. 2. Scripting - JavaScriptの実行時間 - 純粋な計算は速い。基本的に問題にならない。 - ただし、canvasへの描画やディスクI/Oが発生し たりリフローを同期的に強制するコードなどは遅 い
• 41. Scriptingがボトルネックだったら? - 話は簡単 - Profilesタブでさらにどのコードが重いのかを見る
• 42. - Bottom UpのSelf欄が重要
• 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が分かれば
 転送にかかる時間の理論値が割り出せる
• 54. 省略 - スライドが150ページ超えそうなので省略。
• 55. チューニングの罠
• 56. ただし - こういったチューニングの大部分は
 レンダリングエンジンの実装に依存している - どうしてもわからない時はWebKitやChromiumの コードを読むしか無い
• 57. ふと我に帰る瞬間 - なぜ単にHTML5でアプリ書きたいだけなのに
 私はChromiumのコードを読んでいるのか?
 - なぜ単にCSS書いてるだけなのに私は
 GPUのVRAMへの転送速度を気にしなければなら ないのか?
• 58. - ここまでチューニングする余裕がアプリ開発中にある のだろうか? - こういったチューニングを全て把握することを全ての 開発者に求めて良いのだろうか? 否!!
• 59. 何かがおかしい - ごく一部の人間でないと高速なHTML5ハイブリッ ドアプリは開発できないのだろうか? - ユーザがアプリの構築そのものにフォーカスできな いのだろうか?
• 60. ハイブリッドアプリ開発から見た 今のHTML5の課題 - アプリケーションアーキテクチャの構築方法の不在 - チューニングされて高速に動作するUI基盤が無い ?
• 61. iOS UIKit アプリ Objective-C/Swift Android View System アプリ Java iOSアプリ Androidアプリ
• 62. ネイティブだとUIフレームワークがある - そのOSに必要なUIが全て っている - 開発者はUIフレームワークが裏で何をやっているか
 気にしなくても良い - すぐにアプリを開発し始められる - これに対してHTML5ハイブリッドアプリでは?
• 63. WebView&Cordova ! アプリ iOS/Android HTML5ハイブリッドアプリ
• 64. - アプリの開発者が何もかも考えなければならない！ リストビューはどうやって実装すれば? 画面遷移の管理はどうすれば ジェスチャを扱うにはどうすれば良い? MVCフレームワークには何を使おう? アプリが遅いけどチューニングってどうやるの? CSSは最初から書いていく iOSのSwitchってどうやって実装するの viewportの設定ってどうやればいいの? DOMの数が巨大になるとどれぐらい重くなるんだろう? Bootstrapって使っていいのかな? 実装すれば? CSSの設計規約って何がいいのかな？fpsはどれぐらいを目標にすればいいんだろう? 描画の速度ってCIやテストで回せるっけ？
• 65. 無いもの - 使うだけで高速に描画されるUIキット - アプリケーションアーキテクチャを形作るもの
• 66. Onsen UI
• 67. - 開発者が、アプリの開発そのものに
 フォーカスできるようにする。
• 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>
• 70. CSSによるテーマ - Adobeの超高速CSSフレームワークtopcoatをベースに構築 - CSSメタ言語にStylusを利用 - 設計規約はBEMを採用
• 71. http://components.onsen.io/ - ウェブ上で簡単に色をカスタマイズできるテーマローラも完備
• 72. Onsen UIのコンポーネント群 - チューニングにより高速に動作
• 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>
• 76. - pull-to-refreshの例
• 77. ons-lazy-repeat - 数千数万のDOM要素のライフサイクルを管理 - いわゆる無限リストが簡単に実装できる <ul> <li ons-lazy-repeat=“lazyRepeatDelegate”> … </li> </ul>
• 78. - 画面に必要な分だけ表示するので高速 - AndroidやiOSのリストビューと同等のことが可能 隠れたら アンロード 表示しそうなら ロード
• 79. ons-sliding-menu要素 - スライディングメニュー、ドロワーメニューを表現
• 80. ons-alert-dialog要素 - HTMLで表現されたアラートダイアログ
• 81. ons-popover要素 - 吹き出しを表現するコンポーネント
• 82. ons-carousel要素 - 置くだけでカルーセルのUIを表現
• 83. Onsen UIが目指すもの
• 84. - だれでもHTML5で高速に動作する
 モバイルアプリを作ることができる世界
• 85. - UIをどのようにチューニングするか、
 ではなくアプリの本質的機能の開発に
 フォーカスするための基盤
• 86. Onsen UI 2.0
• 87. - Material Designsサポート - Angular2サポート
• 88. 最後に
• 89. 開発者募集 - アシアル株式会社では一緒にOnsen UIを開発して くれるエンジニアを募集しています
• 90. ご清聴ありがとうございました