Html5/JSモバイルアプリ最前線
Your SlideShare is downloading.
×
Check these out next
More Related Content
Slideshows for you (20)
Similar to Onsen UI 2.0とUIライブラリの未来 (20)
More from アシアル株式会社 (20)
Recently uploaded (20)
Onsen UI 2.0とUIライブラリの未来
- 1. Onsen UI 2.0とUIライブラリの未来 Enterprise HTML5 developer Meetup #2 アシアル株式会社 久保田光則 Onsen UI
- 2. 久保田光則 @anatoo
- 3. 好評発売中！
- 4. Agenda - Onsen UIとは？ - v2.0-betaが出ました - Material Design対応 - Web Components化
- 5. Onsen UIとは - HTML5ハイブリッドアプリ用のUIライブラリ
- 6. 要素を記述してUIを宣言
- 7. 図 - Cordova上で使うことを想定 Cordova Onsen UIHTML5 JavaScript & CSS HTML5 Application
- 8. なぜこれが必要?
- 9. http://cordova.apache.org
- 10. HTML5をラップしてアプリへ + ♪
- 11. クロスプラットフォーム Android iOS
- 12. ウェブ技術の再利用
- 13. ストアでの配布 - 外見は普通のアプリなのでそのまま配布で きる
- 14. ネイティブの機能をJSから - CordovaがJavaScript向けのAPIを用意してくれる Android / iOS OS API
- 15. 事例: http://cordova.apache.org
- 16. ハイブリッドアプリ開発の課題 - プリセットのUIキットの不在 - UIのパフォーマンス
- 17. レンダリングが重い！ - HTML5アプリの実装はできても レンダリングのパフォーマンスを改善でき る人はそれほどいない
- 18. http://onsen.io/
- 19. コンポーネントが沢山 - JavaScriptコンポーネントが約30個 - CSSコンポーネントが約60個
- 20. Onsen UIでは - モバイルアプリ開発に必要なUI一式を提供 - UIコンポーネントは予めチューニング 開発者がアプリ開発に フォーカスできるようにする
- 21. プロジェクトのステータス - 2013年公開から約2年経過 - コミット数 約4000 - Githubスター数 約2400 - 今まで作成されたissue数 約1050 - プルリクエストの数 約370
- 22. 事例: たくさん
- 23. 1. Angularへの依存をゼロに 2. Material Designへの対応 v2.0で変わること
- 24. - 従来はAngularのdirectiveを利用 - Angularを必ず読み込む必要あり
- 25. UIライブラリ共通の問題 - フレームワークに依存してしまうこと jQuery jQuery Plugin React.js React Components Angular1.x Directive
- 26. 色んなフレームワーク
- 27. 画像出典: http://blog.bitovi.com/longevity-or-lack-thereof-in-javascript-frameworks/ 移り変わりの速さ
- 28. Web Components Onsen UIの選択
- 29. Custom Elements Templates Shadow DOM HTML Imports {
- 30. Custom Elements Templates Shadow DOM HTML Imports {
- 31. <x-hoge></x-hoge>
- 32. // x-hoge要素を定義 document.registerElement( 'x-hoge', {prototype: Object.create(HTMLElement.prototype)} );
- 33. <body> <div> <x-hoge></x-hoge> </div> </body>
- 34. var proto = Object.create(HTMLElement.prototype); // 要素が作成された時に呼ばれる proto.createdCallback = function() {…}; // DOMツリーに追加された時に呼ばれる proto.attachedCallback = function() {…}; // DOMツリーから取り除かれた時に呼ばれる proto.detachedCallback = function() {…}; document.registerElement('x-hoge', {prototype: proto});
- 35. <x-hoge message=“Hello World!”> </x-hoge>
- 36. var proto = Object.create(HTMLElement.prototype); // 属性の値が変更された時に呼ばれる proto.attributeChangedCallback = function(name, old, new) {…}; document.registerElement('x-hoge', {prototype: proto});
- 37. <x-hoge></x-hoge> <script> var hoge = body.querySelector(‘x-hoge’); hoge.doSomething(); </script>
- 38. var proto = Object.create(HTMLElement.prototype); // 任意のメソッド、プロパティを追加する proto.doSomething = function() {…}; document.registerElement('x-hoge', {prototype: proto});
- 39. - 2.0では全てのコンポーネントを Custom Elementsで置き換え - 特定のフレームワークへの依存が消えた
- 40. Onsen UI 2.0で目指すもの - どのフレームワークからも利用できるUIライブラリ - Framework Agnostic
- 41. Material Designへの対応も
- 42. http://onsen.io/2/ で2.0 beta公開中
- 43. ご清聴ありがとうございました
