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.
共通スキルでアプリ開発を促進する
モバイル用
Webフレームワーク
最前線
アシアル株式会社
田中 正裕
アシアル株式会社
会社概要
• 創業:2002年
• 事業所:東京(本社)、サンフランシスコ
• 従業員数:約50名(8国籍)
事業内容
• 開発プラットフォーム事業:開発ツール、UIフレームワーク
• 教育事業:トレーニング、セミナー、執筆
...
自己紹介
田中正裕
アシアル株式会社 代表取締役
» Twitter: @massie
» HTML5エキスパート
» Cordovaユーザー会、発起人
引き続きWeb技術
は高いシェア
Developer Economics 2016 Surveyより
StackOverflow Developer Survey 2016より
2011年(5年前)は
56%だった
JavaScriptは
コミュニティが発展している言語に
JSフレームワークの進化
その結果…
jQuery ≫ AngularJS ≫ その他
約60万
約20万
約5万
3万以下
投稿をタグ順に並べたグラフ
フレームワークの移り変わり
jQuery AngularJS Backbone.jsReact
Google Trendsでの検索ボリューム
Node.js
JavaScriptフレームワークの主役は代わろうとしている
JavaScriptの進化
HTML5がW3Cの勧告
TypeScript 1.0
HTML5.1が勧告の予定
ES2016
ES6 (ES2015)
ChromeがBlinkエンジンに分離
特にブラウザーに依存しないNode.jsが普及するに...
ブラウザ言語から、ユニバーサル言語へ
クライアントサイド
JavaScript
トランスパイラー
サーバーサイド
JavaScript
Universal JavaScript
JSフレームワークの潮流
jQueryなど
・DOMセレクタ、Ajax等の簡易インターフェース
・ブラウザーでロードして実行
・クロスブラウザー対応
AngularJS、Bootstrapなど
・プログラムの構造化
・バインディング
・SPA(...
JSフレームワークの潮流
jQueryなど
・DOMセレクタ、Ajax等の簡易インターフェース
・ブラウザーでロードして実行
・クロスブラウザー対応
AngularJS、Bootstrapなど
・プログラムの構造化
・バインディング
・SPA(...
JSフレームワークの潮流
jQueryなど
・DOMセレクタ、Ajax等の簡易インターフェース
・ブラウザーでロードして実行
・クロスブラウザー対応
AngularJS、Bootstrapなど
・プログラムの構造化
・バインディング
・SPA(...
JSフレームワークの潮流
jQueryなど
・DOMセレクタ、Ajax等の簡易インターフェース
・ブラウザーでロードして実行
・クロスブラウザー対応
AngularJS、Bootstrapなど
・プログラムの構造化
・バインディング
・SPA(...
仮想DOM + コンポーネント
仮想的に構築されたDOMツリーをブラウザーにレンダリング。
コンポーネントを定義し組み合わせていくことでアプリを構成する。
<body>
<header-component>
ヘッダー
</header-comp...
差分だけを更新する
http://blog.takanabe.tokyo/2015/05/19/583/
今後のトレンドは仮想DOM
Riot.js Vue.js
MVCに代わるステートマネジメント手法も登場
続々登場する仮想DOMフレームワーク
MobX
Fluxパターンを実装したもの
Tony Hisgett from Birmingham, UK
一方、モバイルWebも進化
 十分に高速で大容量な端末スペック
 WebViewの自動更新でフラグメンテーション回避
 Progressive Web Apps
 Service Workerやプッシュ通知を組み合わせネイティブア
プリ...
モバイルで使うJavaScript
ネイティブ層
ブラウザー
JavaScript
Webアプリ
ネイティブコード
JavaScript
ハイブリッドアプリ
アプリとして
パッケージング
従来型のWebアプリだけでなく
ハイブリッドアプリでアプ...
CordovaとReact Native
レンダリングがWebViewか、ネイティブUIか?
• JavaScript+HTML5で記述
• アプリはWebView上で動作
• 多くのネイティブプラグイン
• 完全クロスプラットフォーム
• J...
モバイル開発の課題
 フレームワーク選定
 UI実装
 ツール・デプロイ・デリバリー
モバイルUIの実装は難しい
 ネイティブと同じルック&フィール
 フラットとAndroid Material Design
 Ripple Effectなどのアニメーション効果
 モバイルならではのコンポーネント
 ページスタックの管...
UI開発に必要なもの
iOS と Android のデザインに対応し、
自動的に プラットフォームを識別 してくれて、
Angular 1, 2, Reactなどと 組み合わせられる 、
パフォーマンス を犠牲にしない、
無料で使える UIフレ...
• OSに応じてUIを切り替え+
CSSで簡単カスタマイズ
• JSフレームワークに依存しない
• Apache License
完全なクロスプラットフォーム
• Web技術でiOSとAndroidを同時に開発
• 実行する端末に応じて自動的にコンポーネントを切り替え
• ページ遷移アニメーションやエフェクトも各OSに最適化
豊富なUIコンポーネント
• Navigator
• Tab bar
• Split view
• Infinite list
• Splitter
• Button
• Switch
• Floating action
button
• Pr...
もうひとつの課題
 ツール・デプロイ・デリバリー
Monacaクラウドで
アプリ作成までワンストップ
• ローカルでも、クラウドでも
• Onsen UIでReactやAngular 2もサポート
• デバッガーで簡単に実機で確認
無料プランも
あります!
日本で最も普及している
Cordova開発環境の一つ
16万人
はじめよう!
Webサイト
Onsen UI
https://ja.onsen.io
Monaca
https://ja.monaca.io/
8/24 (水)・9/9 (金)
Onsen UI / Monaca入門講座
▶ https://ja.monaca.io/service/training.html
第1部:「プロトタイピングによるチームコラボレーション 〜Prott活用方法〜」
株式会社グッドパッチ アカウントマネージャー 佐宗 純 様
第2部:「モバイル・IoT時代に求められる開発手法とは? 〜mBaaSを活用した具
体事例!お見せしま...
ありがとうございました
アンケートと引き替えに
Onsen UI 温泉の素を
お配りしています!
Upcoming SlideShare
Loading in …5
×

モバイル用Webフレームワーク最前線

2,016 views

Published on

夏サミ2016での講演資料。JavaScriptとその周辺技術に関する流れについての概説。

Published in: Mobile
  • Be the first to comment

モバイル用Webフレームワーク最前線

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

×