Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ

44,822 views

Published on

ng-japan(http://ngjapan.org)での発表資料です。

Published in: Software

AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ

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

×