Onsen UIが目指すもの
アシアル株式会社 田中正裕
アプリ開発の可能性を広げるプラットフォーム
自己紹介
田中正裕
アシアル株式会社 代表取締役
Twitter: @massie
職務: Monacaプロダクト責任者
Cordovaユーザー会、発起人
好評発売中!
http://onsen.io
• HTML5ハイブリッドアプリ開発フレームワーク
• オープンソース
• エンタープライズ向けモバイルアプリ基盤
Cordovaの仲間
• Adobe PhoneGap
• Microsoft Visual Studio
• Google Chrome Apps
• IBM MobileFirst Platform
• Intel XDK
• アシアルMonaca
• Microsoft Manifold JS
Onsen UI
- HTML5ハイブリッドアプリ用のUIフレームワーク
- Angularをベースにしています
- iOS, Androidをサポートしています
- 高速な動作性がウリです
温泉?
ハイブリッドアプリ開発から見た
今のHTML5の課題
- アプリケーションアーキテクチャの構築方法の不在
- チューニングされて高速に動作するUI基盤が無い
iOS
UIKit
アプリ
Objective-C/Swift
Android
View System
アプリ
Java
iOSアプリ Androidアプリ
ネイティブだとUIフレームワークがある
- そのOSに必要なUIが全て揃っている
- 開発者はUIフレームワークが裏で何をやっているか
気にしなくても良い
- すぐにアプリを開発し始められる
- これに対してHTML5ハイブリッドアプリでは?
WebView&Cordova
!
アプリ
iOS/Android
HTML5ハイブリッドアプリ
- アプリの開発者が何もかも考えなければならない!
リストビューはどうやって実装すれば?
画面遷移の管理はどうすれば
ジェスチャを扱うにはどうすれば良い?
MVCフレームワークには何を使おう?
アプリが遅いけどチューニングってどうやるの? CSSは最初から書いていく
iOSのSwitchってどうやって実装するの
viewportの設定ってどうやればいいの?
DOMの数が巨大になるとどれぐらい重くなるんだろう?
Bootstrapって使っていいのかな?
て実装すれば?
CSSの設計規約って何がいいのかなfpsはどれぐらいを目標にすればいいんだろう?
画の速度ってCIやテストで回せるっけ?
無いもの
- 使うだけで高速に描画されるUIキット
- アプリケーションアーキテクチャを形作るもの
Onsen UI
- 開発者が、アプリの開発そのものに
フォーカスできるようにする。
Angularをベースにして構築
- HTMLを拡張して、アプリも記述可能にしてくれる
- 大規模なアプリでも耐えられるアーキテクチャ
- DIコンテナ、サービス、コントローラ、フィルタ等
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>
CSSによるテーマ
- Adobeの超高速CSSフレームワークtopcoatをベースに構築
- CSSメタ言語にStylusを利用
- 設計規約はBEMを採用
http://components.onsen.io/
- ウェブ上で簡単に色をカスタマイズできるテーマローラも完備
クロスプラットフォーム
Android 4+, iOS 7+に加え
Windows 8.1 (PCおよびPhone)にも対応しています
Onsen UIのコンポーネント群
- チューニングにより高速に動作
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>
- ページをスタックで管理する
- 画面遷移や画面の切り替えを行うコンポーネント
page1.html
page2.html
page1.html
pushPage() popPage()
page1.html
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>
- pull-to-refreshの例
ons-lazy-repeat
- 数千数万のDOM要素のライフサイクルを管理
- いわゆる無限リストが簡単に実装できる
<ul>
<li ons-lazy-repeat=“lazyRepeatDelegate”>
…
</li>
</ul>
- 画面に必要な分だけ表示するので高速
- AndroidやiOSのリストビューと同等のことが可能
隠れたら
アンロード
表示しそうなら
ロード
ons-sliding-menu要素
- スライディングメニュー、ドロワーメニューを表現
ons-alert-dialog要素
- HTMLで表現されたアラートダイアログ
ons-popover要素
- 吹き出しを表現するコンポーネント
ons-carousel要素
- 置くだけでカルーセルのUIを表現
他にも様々なコンポーネント
その他の特徴
- 日本語ドキュメントもバッチリ
- でもOnsen UIの利用者でいうと日本人は15%程度
- TypeScriptのサポート
- Visual Studio用Extensionの提供
- 日本人1名+ヨーロッパ人3名の体制で開発中
Onsen UIが目指すもの
- だれでもHTML5で高速に動作する
モバイルアプリを作ることができる世界
- UIをどのようにチューニングするか、
ではなくアプリの本質的機能の開発に
フォーカスするための基盤
Onsen UI 2.0
- Angularからの独立
- Angular 2やReactに対するバインディング
- プラットフォーム特有UIへの対応
最後に
開発者募集
- アシアル株式会社では一緒にOnsen UIを開発してく
れるエンジニアを募集しています
ご清聴ありがとうございました

Onsen UIが目指すもの

Editor's Notes

  • #3 - 僕は誰か? - 東京に住んでるPhoneGapメインのHTML5エンジニア - We’re making many apps for our Japanese clients, all of them are major companies. - I’m writing many PhoneGap related books. - Proudly, the first ever PhoneGap book sold in stores is mine. But that’s Japanese.