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

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