HTML5jプラットフォーム部での講演資料です。

1. Onsen UIが目指すもの
アシアル株式会社 田中正裕

2. アプリ開発の可能性を広げるプラットフォーム
自己紹介
田中正裕
アシアル株式会社 代表取締役
Twitter: @massie
職務: Monacaプロダクト責任者
Cordovaユーザー会、発起人

3. 好評発売中!

4. http://onsen.io

5. • HTML5ハイブリッドアプリ開発フレームワーク
• オープンソース
• エンタープライズ向けモバイルアプリ基盤

6. Cordovaの仲間
• Adobe PhoneGap
• Microsoft Visual Studio
• Google Chrome Apps
• IBM MobileFirst Platform
• Intel XDK
• アシアルMonaca
• Microsoft Manifold JS

7. Onsen UI
- HTML5ハイブリッドアプリ用のUIフレームワーク
- Angularをベースにしています
- iOS, Androidをサポートしています
- 高速な動作性がウリです

8. 温泉？

9. ハイブリッドアプリ開発から見た
今のHTML5の課題
- アプリケーションアーキテクチャの構築方法の不在
- チューニングされて高速に動作するUI基盤が無い

10. iOS
UIKit
アプリ
Objective-C/Swift
Android
View System
アプリ
Java
iOSアプリ Androidアプリ

11. ネイティブだとUIフレームワークがある
- そのOSに必要なUIが全て揃っている
- 開発者はUIフレームワークが裏で何をやっているか
気にしなくても良い
- すぐにアプリを開発し始められる
- これに対してHTML5ハイブリッドアプリでは?

12. WebView&Cordova
!
アプリ
iOS/Android
HTML5ハイブリッドアプリ

13. - アプリの開発者が何もかも考えなければならない！
リストビューはどうやって実装すれば?
画面遷移の管理はどうすれば
ジェスチャを扱うにはどうすれば良い?
MVCフレームワークには何を使おう?
アプリが遅いけどチューニングってどうやるの? CSSは最初から書いていく
iOSのSwitchってどうやって実装するの
viewportの設定ってどうやればいいの?
DOMの数が巨大になるとどれぐらい重くなるんだろう?
Bootstrapって使っていいのかな?
て実装すれば?
CSSの設計規約って何がいいのかなfpsはどれぐらいを目標にすればいいんだろう?
画の速度ってCIやテストで回せるっけ？

14. 無いもの
- 使うだけで高速に描画されるUIキット
- アプリケーションアーキテクチャを形作るもの

15. Onsen UI

16. - 開発者が、アプリの開発そのものに
フォーカスできるようにする。

17. Angularをベースにして構築
- HTMLを拡張して、アプリも記述可能にしてくれる
- 大規模なアプリでも耐えられるアーキテクチャ
- DIコンテナ、サービス、コントローラ、フィルタ等

18. 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>

19. CSSによるテーマ
- Adobeの超高速CSSフレームワークtopcoatをベースに構築
- CSSメタ言語にStylusを利用
- 設計規約はBEMを採用

20. http://components.onsen.io/
- ウェブ上で簡単に色をカスタマイズできるテーマローラも完備

21. クロスプラットフォーム
Android 4+, iOS 7+に加え
Windows 8.1 (PCおよびPhone)にも対応しています

22. Onsen UIのコンポーネント群
- チューニングにより高速に動作

23. 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>

24. - ページをスタックで管理する
- 画面遷移や画面の切り替えを行うコンポーネント
page1.html
page2.html
page1.html
pushPage() popPage()
page1.html

25. 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>

26. - pull-to-refreshの例

27. ons-lazy-repeat
- 数千数万のDOM要素のライフサイクルを管理
- いわゆる無限リストが簡単に実装できる
<ul>
<li ons-lazy-repeat=“lazyRepeatDelegate”>
…
</li>
</ul>

28. - 画面に必要な分だけ表示するので高速
- AndroidやiOSのリストビューと同等のことが可能
隠れたら
アンロード
表示しそうなら
ロード

29. ons-sliding-menu要素
- スライディングメニュー、ドロワーメニューを表現

30. ons-alert-dialog要素
- HTMLで表現されたアラートダイアログ

31. ons-popover要素
- 吹き出しを表現するコンポーネント

32. ons-carousel要素
- 置くだけでカルーセルのUIを表現

33. 他にも様々なコンポーネント

35. その他の特徴
- 日本語ドキュメントもバッチリ
- でもOnsen UIの利用者でいうと日本人は15%程度
- TypeScriptのサポート
- Visual Studio用Extensionの提供
- 日本人1名＋ヨーロッパ人3名の体制で開発中

36. Onsen UIが目指すもの

37. - だれでもHTML5で高速に動作する
モバイルアプリを作ることができる世界

38. - UIをどのようにチューニングするか、
ではなくアプリの本質的機能の開発に
フォーカスするための基盤

39. Onsen UI 2.0

40. - Angularからの独立
- Angular 2やReactに対するバインディング
- プラットフォーム特有UIへの対応

41. 最後に

42. 開発者募集
- アシアル株式会社では一緒にOnsen UIを開発してく
れるエンジニアを募集しています

43. ご清聴ありがとうございました