Onsen UIが目指すもの
Die SlideShare-Präsentation wird heruntergeladen.
×
Hier ansehen
Weitere Verwandte Inhalte
Diashows für Sie (20)
Ähnlich wie モバイル用Webフレームワーク最前線 (20)
Weitere von アシアル株式会社 (15)
Aktuellste (10)
モバイル用Webフレームワーク最前線
- 1. 共通スキルでアプリ開発を促進する モバイル用 Webフレームワーク 最前線 アシアル株式会社 田中 正裕
- 2. アシアル株式会社 会社概要 • 創業：2002年 • 事業所：東京（本社）、サンフランシスコ • 従業員数：約50名（8国籍） 事業内容 • 開発プラットフォーム事業：開発ツール、UIフレームワーク • 教育事業：トレーニング、セミナー、執筆 • 開発支援事業：アプリ開発、サーバーサイド（PHP）開発
- 3. 自己紹介 田中正裕 アシアル株式会社 代表取締役 » Twitter: @massie » HTML5エキスパート » Cordovaユーザー会、発起人
- 4. 引き続きWeb技術 は高いシェア Developer Economics 2016 Surveyより
- 5. StackOverflow Developer Survey 2016より 2011年（5年前）は 56%だった JavaScriptは コミュニティが発展している言語に
- 6. JSフレームワークの進化 その結果…
- 7. jQuery ≫ AngularJS ≫ その他 約60万 約20万 約5万 3万以下 投稿をタグ順に並べたグラフ
- 8. フレームワークの移り変わり jQuery AngularJS Backbone.jsReact Google Trendsでの検索ボリューム Node.js JavaScriptフレームワークの主役は代わろうとしている
- 9. JavaScriptの進化 HTML5がW3Cの勧告 TypeScript 1.0 HTML5.1が勧告の予定 ES2016 ES6 (ES2015) ChromeがBlinkエンジンに分離 特にブラウザーに依存しないNode.jsが普及するにつれ、新しいES バージョンやAltJSを積極的に使えるようになった。
- 10. ブラウザ言語から、ユニバーサル言語へ クライアントサイド JavaScript トランスパイラー サーバーサイド JavaScript Universal JavaScript
- 11. JSフレームワークの潮流 jQueryなど ・DOMセレクタ、Ajax等の簡易インターフェース ・ブラウザーでロードして実行 ・クロスブラウザー対応 AngularJS、Bootstrapなど ・プログラムの構造化 ・バインディング ・SPA（シングルページアプリケーション） React、Angular 2など ・仮想DOM ・コンポーネント指向（モジュラーデザイン） ・Universal JavaScript
- 12. JSフレームワークの潮流 jQueryなど ・DOMセレクタ、Ajax等の簡易インターフェース ・ブラウザーでロードして実行 ・クロスブラウザー対応 AngularJS、Bootstrapなど ・プログラムの構造化 ・バインディング ・SPA（シングルページアプリケーション） React、Angular 2など ・仮想DOM ・コンポーネント指向（モジュラーデザイン） ・Universal JavaScript Internet Explorerの互換性向上、 QuerySelector API等のサポートに伴い、 jQueryを必要とするケースは減少
- 13. JSフレームワークの潮流 jQueryなど ・DOMセレクタ、Ajax等の簡易インターフェース ・ブラウザーでロードして実行 ・クロスブラウザー対応 AngularJS、Bootstrapなど ・プログラムの構造化 ・バインディング ・SPA（シングルページアプリケーション） React、Angular 2など ・仮想DOM ・コンポーネント指向（モジュラーデザイン） ・Universal JavaScript バインディングのための処理の負荷が 高く、パフォーマンスが犠牲になる。 特にモバイル端末にて課題となる。
- 14. JSフレームワークの潮流 jQueryなど ・DOMセレクタ、Ajax等の簡易インターフェース ・ブラウザーでロードして実行 ・クロスブラウザー対応 AngularJS、Bootstrapなど ・プログラムの構造化 ・バインディング ・SPA（シングルページアプリケーション） React、Angular 2など ・仮想DOM ・コンポーネント指向（モジュラーデザイン） ・Universal JavaScript プログラムの構造化やバインディング といった特徴は引き継ぎ、最新の JavaScriptにあわせて大幅に進化。
- 15. 仮想DOM + コンポーネント 仮想的に構築されたDOMツリーをブラウザーにレンダリング。 コンポーネントを定義し組み合わせていくことでアプリを構成する。 <body> <header-component> ヘッダー </header-component> <page-component> <list-component> 自作UIコンポーネント </list-component> </page-component> </body> <body> <header> ヘッダー </header> <div id=“page”> <ul> <li>自作UIコンポーネント</li> </ul> </div> </body> 仮想DOM リアルDOM
- 16. 差分だけを更新する http://blog.takanabe.tokyo/2015/05/19/583/
- 17. 今後のトレンドは仮想DOM Riot.js Vue.js MVCに代わるステートマネジメント手法も登場 続々登場する仮想DOMフレームワーク MobX Fluxパターンを実装したもの
- 18. Tony Hisgett from Birmingham, UK
- 19. 一方、モバイルWebも進化 十分に高速で大容量な端末スペック WebViewの自動更新でフラグメンテーション回避 Progressive Web Apps Service Workerやプッシュ通知を組み合わせネイティブア プリのようなUser Experienceを実現する技術 ♥
- 20. モバイルで使うJavaScript ネイティブ層 ブラウザー JavaScript Webアプリ ネイティブコード JavaScript ハイブリッドアプリ アプリとして パッケージング 従来型のWebアプリだけでなく ハイブリッドアプリでアプリ化することができる Cordovaや React Nativeなど
- 21. CordovaとReact Native レンダリングがWebViewか、ネイティブUIか？ • JavaScript＋HTML5で記述 • アプリはWebView上で動作 • 多くのネイティブプラグイン • 完全クロスプラットフォーム • JavaScriptで記述 • アプリはJSエンジンで動作 • React Native用の UIコンポーネントを使う • “Learn once, write anywhere”
- 22. モバイル開発の課題 フレームワーク選定 UI実装 ツール・デプロイ・デリバリー
- 23. モバイルUIの実装は難しい ネイティブと同じルック＆フィール フラットとAndroid Material Design Ripple Effectなどのアニメーション効果 モバイルならではのコンポーネント ページスタックの管理 無限スクロールやスワイプ操作 クロスプラットフォーム 表示する端末にあわせて表示を切り替え
- 24. UI開発に必要なもの iOS と Android のデザインに対応し、 自動的に プラットフォームを識別 してくれて、 Angular 1, 2, Reactなどと 組み合わせられる 、 パフォーマンス を犠牲にしない、 無料で使える UIフレームワーク
- 25. • OSに応じてUIを切り替え＋ CSSで簡単カスタマイズ • JSフレームワークに依存しない • Apache License
- 26. 完全なクロスプラットフォーム • Web技術でiOSとAndroidを同時に開発 • 実行する端末に応じて自動的にコンポーネントを切り替え • ページ遷移アニメーションやエフェクトも各OSに最適化
- 27. 豊富なUIコンポーネント • Navigator • Tab bar • Split view • Infinite list • Splitter • Button • Switch • Floating action button • Progress • Floating label • Ripple effect • Gesture control • Pull to refresh …
- 28. もうひとつの課題 ツール・デプロイ・デリバリー
- 29. Monacaクラウドで アプリ作成までワンストップ • ローカルでも、クラウドでも • Onsen UIでReactやAngular 2もサポート • デバッガーで簡単に実機で確認 無料プランも あります！
- 30. 日本で最も普及している Cordova開発環境の一つ 16万人
- 31. はじめよう！
- 32. Webサイト Onsen UI https://ja.onsen.io Monaca https://ja.monaca.io/
- 33. 8/24 (水)・9/9 (金) Onsen UI / Monaca入門講座 ▶ https://ja.monaca.io/service/training.html
- 34. 第1部：「プロトタイピングによるチームコラボレーション 〜Prott活用方法〜」 株式会社グッドパッチ アカウントマネージャー 佐宗 純 様 第2部：「モバイル・IoT時代に求められる開発手法とは？ 〜mBaaSを活用した具 体事例！お見せします〜」 ニフティ株式会社 IoTデザインセンター 三嶋 英城 様 第3部：「Monaca事例から学ぶHTML5モバイルアプリの活用ポイント」 アシアル株式会社 マーケティング・事業開発担当 取締役 塚田 亮一 ▶ https://form.k3r.jp/asial/0826seminar
- 35. ありがとうございました アンケートと引き替えに Onsen UI 温泉の素を お配りしています！
