Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

45.048 visualizaciones

Publicado el

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

Publicado en: Software
  • Sé el primero en comentar

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. ご清聴ありがとうございました

×