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.

Onsen UIが目指すもの

24,782 views

Published on

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

Published in: Mobile
  • Be the first to comment

Onsen UIが目指すもの

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

×