Uploaded bydsuke Takaoka
モバイルWebアプリのこれまでとこれから。Sencha Touch vs jQuery Mobile
Canon Senchaセミナーの資料 http://www.canon-its.co.jp/seminar/20130828sencha.html
![[Mobile5] 最新動向 2012年5月](https://cdn.slidesharecdn.com/ss_thumbnails/html20120523web-120525220541-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
モバイルWebアプリのこれまでとこれから。Sencha Touch vs jQuery Mobile
- 1.
- 2. About me 高岡大介 Work • 外資系SIベンダーを経て研究所へ。 •現在フリーランスとして、Web技術研究開発・開発支援 twitter: @dsuket facebook.com/dsuket Inkpod Web Sencha Touch パーフェクトガイド
- 3. Agenda 1. モバイルWebアプリの現在 2. モバイルWebフレームワーク 3.モバイルWebアプリの今後
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11. G8スマートフォン普及率 「Our Mobile Planet」2013Google 25% 母数: 16歳以上の人口
- 12. 国内スマホ普及率 調査報告 普及率 母集団 CIAJ48.2% 携帯端末利用者 情報通信白書 38.2% インターネット利用者 Our Mobile Planet 24.7% 16歳以上の国民 スマホ利用者
- 13. 携帯利用者 国内スマホ普及率 調査報告 普及率 母集団 CIAJ48.2% 携帯端末利用者 情報通信白書 38.2% インターネット利用者 Our Mobile Planet 24.7% 16歳以上の国民 スマホ利用者
- 14. インターネット利用者 携帯利用者 国内スマホ普及率 調査報告 普及率 母集団 CIAJ48.2% 携帯端末利用者 情報通信白書 38.2% インターネット利用者 Our Mobile Planet 24.7% 16歳以上の国民 スマホ利用者
- 15. 総人口 インターネット利用者 携帯利用者 国内スマホ普及率 調査報告 普及率 母集団 CIAJ48.2% 携帯端末利用者 情報通信白書 38.2% インターネット利用者 Our Mobile Planet 24.7% 16歳以上の国民 スマホ利用者
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. スマートフォンの利用状況 2013.04 ニールセン スマートフォン・メディア利用実態調査レポート AndroidOS 利用者と PC 利用者の月間一人あたりの利用時間
- 23. スマートフォンの利用状況 2013.04 ニールセン スマートフォン・メディア利用実態調査レポート AndroidOS 利用者と PC 利用者の月間一人あたりの利用時間
- 24. スマートフォンの利用状況 アプリ中心の使い方。 PCよりも総アクセス時間が多い が、1回あたりの利用時間は短い。 （PC が28分であるのに対し、スマートフォンは9分） 注) 専用サービスを利用するAndroidの利用状況を計測したも の。iOSは入っていない。 2013.04ニールセン スマートフォン・メディア利用実態調査レポート Android OS 利用者と PC 利用者の月間一人あたりの利用時間
- 25.
- 26.
- 27. スマートフォン普及状況 まとめ • 携帯の約半分がスマートフォンになってきた。 •スマートフォン普及率は、全体では25％、 24歳以下では過半数。
- 28. スマートフォン普及状況 まとめ • 携帯の約半分がスマートフォンになってきた。 •スマートフォン普及率は、全体では25％、 24歳以下では過半数。 • 他の先進国の普及率は50％以上。
- 29. スマートフォン普及状況 まとめ • 携帯の約半分がスマートフォンになってきた。 •スマートフォン普及率は、全体では25％、 24歳以下では過半数。 • 他の先進国の普及率は50％以上。 • インターネットへのアクセスの1/3以上は スマートフォンから。
- 30.
- 31. タブレットの出荷台数 IDC - PressRelease 26 Mar 2013 2013年、タブレット端末の出荷台数が、デスクトップ PC の出荷台数を初めて上回る見込み。 2014年にはポータブルPCも上回る予想。
- 32. タブレットの出荷台数 IDC - PressRelease 26 Mar 2013 2013年、タブレット端末の出荷台数が、デスクトップ PC の出荷台数を初めて上回る見込み。 2014年にはポータブルPCも上回る予想。
- 33. タブレット端末 所有率 タブレット端末の所有率 2012 価格.comリサーチ:タブレット端末アンケート 2013
- 34. タブレット端末 所有率 タブレット端末の所有率 2013タブレット端末の所有率2012 価格.comリサーチ: タブレット端末アンケート 2013
- 35. タブレット端末 所有率 タブレット端末の所有率 2013タブレット端末の所有率2012 価格.comリサーチ: タブレット端末アンケート 2013タブレット端末の所有率（世代別）
- 36. タブレット端末 所有率 タブレット端末の所有率 2013タブレット端末の所有率2012 価格.comリサーチ: タブレット端末アンケート 2013タブレット端末の所有率（世代別） 1年で20％近くアップ。 若年層ほど所有率が高い。 注）価格.comのユーザーを対象
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46. ハイブリッドアプリ Gartner Recommends aHybrid Approach for Business-to-Employee Mobile Apps Consumer/Enterprise Split in 2015
- 47. ハイブリッドアプリ Gartner Recommends aHybrid Approach for Business-to-Employee Mobile Apps Web 20% Hybrid 40% Native 40% Consumer Consumer/Enterprise Split in 2015
- 48. ハイブリッドアプリ Gartner Recommends aHybrid Approach for Business-to-Employee Mobile Apps Web 20% Hybrid 40% Native 40% Consumer Web 30% Hybrid 60% Native 10% Enterprise Consumer/Enterprise Split in 2015
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59. Firefox OS • Mozillaが開発しているスマホOS •HTML5アプリケーションがネイティブで動作。 • ZTE Open が eBayで発売開始（$79.99） • 主に新興国向け。 • 日本ではKDDIが参加を表明
- 60. Tizen • サムスン等が主導する TizenプロジェクトのOS。 •HTML5とネイティブの両方でアプリが作成可能。 • Docomoから年内に発売？
- 61.
- 62.
- 63. 1.モバイルWebの現在 まとめ • スマートフォン、タブレットはますます中心に。 •HTML5を利用したハイブリッド化が進む。
- 64. 1.モバイルWebの現在 まとめ • スマートフォン、タブレットはますます中心に。 •HTML5を利用したハイブリッド化が進む。 • Webアプリをネイティブとしたプラットフォー ムも出てきて、新興国で広がる可能性。
- 65. 1.モバイルWebの現在 まとめ • スマートフォン、タブレットはますます中心に。 •HTML5を利用したハイブリッド化が進む。 • Webアプリをネイティブとしたプラットフォー ムも出てきて、新興国で広がる可能性。
- 66. 1.モバイルWebの現在 まとめ • スマートフォン、タブレットはますます中心に。 •HTML5を利用したハイブリッド化が進む。 • Webアプリをネイティブとしたプラットフォー ムも出てきて、新興国で広がる可能性。 Webアプリ技術は必須！！
- 67.
- 68.
- 69. モバイルWebアプリ メリット • マルチデバイスで展開できる •異なるOSでも動作が可能。
- 70. モバイルWebアプリ メリット • マルチデバイスで展開できる •異なるOSでも動作が可能。 • Web技術で作れる • 開発者、コミュニティ、情報が多い。 • 開発コストが比較的安価。
- 71. モバイルWebアプリ メリット • マルチデバイスで展開できる •異なるOSでも動作が可能。 • Web技術で作れる • 開発者、コミュニティ、情報が多い。 • 開発コストが比較的安価。 • 更新が早い • アプリのアップデートが不要。
- 72. モバイルWebアプリ メリット • マルチデバイスで展開できる •異なるOSでも動作が可能。 • Web技術で作れる • 開発者、コミュニティ、情報が多い。 • 開発コストが比較的安価。 • 更新が早い • アプリのアップデートが不要。 • Storeに依存しない • 内容のアップデートが自由。 • 手数料が不要。(30%)
- 73.
- 74. モバイルWebアプリ デメリット • 端末間の差異が割とある（特にAndroid） •OS、バージョンに強く依存する。 • 同じOS、バージョンでも端末で違うことも。
- 75. モバイルWebアプリ デメリット • 端末間の差異が割とある（特にAndroid） •OS、バージョンに強く依存する。 • 同じOS、バージョンでも端末で違うことも。 • 全てのデバイス、OS機能が使えない • カメラ、Bluetooth、バイブなどは一部のデバイス機能は使えない。 • アドレス帳、カレンダー、通知などOS機能と連動できない。
- 76. モバイルWebアプリ デメリット • 端末間の差異が割とある（特にAndroid） •OS、バージョンに強く依存する。 • 同じOS、バージョンでも端末で違うことも。 • 全てのデバイス、OS機能が使えない • カメラ、Bluetooth、バイブなどは一部のデバイス機能は使えない。 • アドレス帳、カレンダー、通知などOS機能と連動できない。 • パフォーマンスの問題 • アクションゲームなど応答性の高いものは厳しい。 • OpenGLのような3D表現は苦手。
- 77. モバイルWebアプリ デメリット • 端末間の差異が割とある（特にAndroid） •OS、バージョンに強く依存する。 • 同じOS、バージョンでも端末で違うことも。 • 全てのデバイス、OS機能が使えない • カメラ、Bluetooth、バイブなどは一部のデバイス機能は使えない。 • アドレス帳、カレンダー、通知などOS機能と連動できない。 • パフォーマンスの問題 • アクションゲームなど応答性の高いものは厳しい。 • OpenGLのような3D表現は苦手。 • マーケットがない • 課金やプロモーションの問題
- 78.
- 79. HW OS framwork OS OS HW HWHW App App App フレームワーク導入のメリット
- 80. HW OS framwork OS OS HW HWHW App App App • 端末間の差異を吸収 • Android, iOS, バージョン間の違いなどを吸収。 フレームワーク導入のメリット
- 81. HW OS framwork OS OS HW HWHW App App App • 端末間の差異を吸収 • Android, iOS, バージョン間の違いなどを吸収。 • デバイス機能の提供 • ハイブリッド化することでネイティブ機能を使えるように。Storeにも。 フレームワーク導入のメリット
- 82. HW OS framwork OS OS HW HWHW App App App • 端末間の差異を吸収 • Android, iOS, バージョン間の違いなどを吸収。 • デバイス機能の提供 • ハイブリッド化することでネイティブ機能を使えるように。Storeにも。 • パフォーマンスの問題 • パフォーマンスが低下しにくいような作りを提供。 フレームワーク導入のメリット
- 83. HW OS framwork OS OS HW HWHW App App App • 端末間の差異を吸収 • Android, iOS, バージョン間の違いなどを吸収。 • デバイス機能の提供 • ハイブリッド化することでネイティブ機能を使えるように。Storeにも。 • パフォーマンスの問題 • パフォーマンスが低下しにくいような作りを提供。 • UI、コンポーネントの提供 • よく使うUI部品、テーマなどが予め用意。 フレームワーク導入のメリット
- 84. HW OS framwork OS OS HW HWHW App App App • 端末間の差異を吸収 • Android, iOS, バージョン間の違いなどを吸収。 • デバイス機能の提供 • ハイブリッド化することでネイティブ機能を使えるように。Storeにも。 • パフォーマンスの問題 • パフォーマンスが低下しにくいような作りを提供。 • UI、コンポーネントの提供 • よく使うUI部品、テーマなどが予め用意。 • ベストプラクティスの利用 • Webアプリのノウハウを活用 フレームワーク導入のメリット
- 85. 最新フレームワーク ✴ Sencha Touch ✴jQuery Mobile ✴ The-M-Project ✴ Wink ✴ DaVinci
- 86. • 美しく、軽快なUIコンポーネントを提供。 • ExtJSからの実績。 • クラス構造、データパッケージ、MVC、テンプレー トなど重厚なフレームワーク • ビルドツール、ネイティブパッケージング機能。 • 関連製品でVisualEditorやAnimationツールも充実。 • Sencha Incが開発。 Touch
- 87.
- 88. • jQueryを利用したモバイル向けフレームワーク。 • CSSとHTMLだけでモバイルUIを実現できるた め、デザイナでも簡単に使用できる。 •3rdパーティーのコンポーネントが充実。 • モバイルWebアプリというよりサイト向き。 • jQuery Foundationで開発。jQueryの実績。
- 89.
- 90. • jQuery MobileをJavaScriptで組み立てる •Sencha Touch と jQMを合わせたような感じ • Data Bidingを使用したMVC • ビルドツール（espresso）でネイティブパッケー ジ化 • OpenSourceライセンス（MIT) • 2011年からpanacodaが開発
- 91. The M ProjectDemo
- 92. • JavaScriptでコンポーネントを組み立てるタイプ • 軽量（20kb）(jQM+jQ: 250k, ST: 500k ) • UIコンポーネントが充実 • エフェクトが派手（3Dなど） • Dojo Foundationで作成 • Dojo Mobileよりもかなり軽量
- 93.
- 94. • Eclipse Pluginによる開発環境 DaVinci Studio • jQuery Mobile, KnockOut, Underscore, Handlebars, Backboneなどを使用？ • WYSIWYG エディタ、Visual Data Binding • N-Screen で複数端末をサポート • 韓国 Davinci Software Lab. Inc.で2013年に開発 • 詳しいことはよく分からない。（怪しいｗ
- 95.
- 96. 仕事で使うなら、実質 Sencha Touchか jQuery Mobile の2択 どちらが良いかを徹底比較！
- 98.
- 99.
- 100. 充実のコンポーネント 50種類以上の 標準コンポーネント Button, Form, DetaView,List, Icons,Toolbar, Panel,Tab, Carousel, Button Tab, Overlay, Slider, Spinner, Check, Radio, Picker, DatePicker, and more,,, 300個以上の ビルトインアイコン
- 101. クロスプラットフォーム iOS, Androidがメイン だったが、最新版では BlackBerry 10, IE10( Windows 8), FireFox (Aurora) も サポート Tizenもサポート予定
- 102.
- 103.
- 104.
- 105.
- 106. MVC • 堅牢なClassシステム • MVCアーキテクチャ •Data Package
- 107. MVC • 堅牢なClassシステム • MVCアーキテクチャ •Data Package
- 108. MVC • 堅牢なClassシステム • MVCアーキテクチャ •Data Package
- 109. MVC • 堅牢なClassシステム • MVCアーキテクチャ •Data Package
- 110. MVC • 堅牢なClassシステム • MVCアーキテクチャ •Data Package 大規模でも破綻 しにくい構成
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119. 関連ツール •Sencha Architect •Sencha Animator •Sencha.io •Senchamarket •Sencha try •Eclipse Plugin
- 120.
- 121.
- 122. Sencha Touch デメリット •JavaScript必須 • 重厚長大なフレームワーク • ファイルサイズがおおきい • 初期の学習コストが高い • 仕様がよく変わる
- 123.
- 124. Sencha Touch が合う要件 •チームで開発
- 125. Sencha Touch が合う要件 •チームで開発 • 大規模システム
- 126. Sencha Touch が合う要件 •チームで開発 • 大規模システム • エンタープライズ向けアプリ
- 127. Sencha Touch が合う要件 •チームで開発 • 大規模システム • エンタープライズ向けアプリ • Singleページアプリケーション
- 128. Sencha Touch が合う要件 •チームで開発 • 大規模システム • エンタープライズ向けアプリ • Singleページアプリケーション • 特殊なビューでないもの (がんばれば出来る)
- 129.
- 130.
- 131. 豊富なウィジェット Accordion, Navigation, Button, Checkbox, Dialog,Footer, Form, Grid, Icon, List, Panel, Toolbar,Toggle, Popup, Radio button, Select, Slider,Table,Text inputs,Transitions, and more...
- 132. クロスプラットフォーム iOS, Androidはもちろん、 BlackBerry, bada,Windows Phone, palm, symbian, MeeGo など幅広いサポート
- 133. コンポーネント定義 HTML5の仕様の一つで、タグに自由に 属性を定義できる。 これを利用して、コンポーネントを定義 <div data-○○○ ="xxxx"></div> データ属性
- 134. 関連ツール • codiqa • ThemeRoller • Dreamweaver • jQuery Gallery • 3rd party plugins ＆ extensions
- 135. jQuery Mobile 事例1 DisneyWorldの イベント情報、 アトラクション、 混雑状況など Disney World http://m.disneyworld.disney.go.com/
- 136.
- 137. jQuery Mobile 事例3 adobeが作成した、jQuey Mobileのデモサイトのよう なもの AdobeHTML5特設サイト http://adobe-html5.jp/sp/
- 138. • 重厚長大なフレームワーク • ファイルサイズがおおきい •標準デザインがイマイチ。カスタマイズ必須 • たまに変な動きをする • 凝ったデザイン、動きが難しい jQuery Mobile デメリット
- 139.
- 140. jQuery Mobile が合う要件 •少人数で開発
- 141. jQuery Mobile が合う要件 •少人数で開発 • デザイナーと協業
- 142. jQuery Mobile が合う要件 •少人数で開発 • デザイナーと協業 • JavaScriptに詳しくない or jQueryを熟知している
- 143. jQuery Mobile が合う要件 •少人数で開発 • デザイナーと協業 • JavaScriptに詳しくない or jQueryを熟知している • あまり動きの無いもの
- 144. jQuery Mobile が合う要件 •少人数で開発 • デザイナーと協業 • JavaScriptに詳しくない or jQueryを熟知している • あまり動きの無いもの • モバイルWebサイト
- 145. 比較表 Sencha Touch jQueryMobile コンポーネントの数 多い 多い(*1) ファイルサイズ 大きい(*2) 大きい (*2) パフォーマンス 良い 普通 対応Platform 普通 多い 拡張性 高い 高い (*3) 保守性 高い 低い (*4) 学習コスト 高い 低い テーマの作成 Sass/Compass Theme Roller Native Pakage 有り 無し (*5) (*1) 3rd Party含む。 (*2) カスタムビルドで小さく出来る。 (*3) 機能追加はできるが、本体の拡張は難しい。 (*4) 他のフレームワークと組み合わせることで対応可能。 (*5) PhoneGapなどを使えば可能
- 146. 実際の所は？？ jQuery Mobile • 動き微妙な時が。。 •それっぽいものを早く簡単に 作るなら使える。 • 単独では機能不足のため、 色々組み合わせるのが大変。 • 凝りだすと面倒。 • テストが難しい。 • デザイナ中心にとりあえず作 るなら良い。 Sencha Touch • 全てJSなので何でも出来る。 • 一通り揃っているので楽だ が、習得するのが難しい。 • ライブラリのソース読むこと は必須。 • 英語のドキュメントは豊富だ が、日本語が少ない。 • ある程度の規模以上、企業向 けにお勧め
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153. PCの歴史を振り返る • 90年代 • Windowsの登場により、PCが爆発的に普及。 •個人作成のフリーソフト大流行。Vector、窓の杜、雑誌の付録
- 154. PCの歴史を振り返る • 90年代 • Windowsの登場により、PCが爆発的に普及。 •個人作成のフリーソフト大流行。Vector、窓の杜、雑誌の付録 • 2000年代前半 • 出荷数頭打ち。低価格化が進み総販売額はここをピークに減少。 • Google大躍進。
- 155. PCの歴史を振り返る • 90年代 • Windowsの登場により、PCが爆発的に普及。 •個人作成のフリーソフト大流行。Vector、窓の杜、雑誌の付録 • 2000年代前半 • 出荷数頭打ち。低価格化が進み総販売額はここをピークに減少。 • Google大躍進。 • 2000年代後半 • ノートPCの割合が増加。ネットブックも流行。 • Gmail、Google Mapの開始。Web 2.0の時代。 • Webサービス、マッシュアップが流行。
- 156.
- 157. PCアプリの今 • 個人作成のフリーソフト • ほとんど見なくなった。 •OS標準機能でできるようになった。 • Webサービス（アプリ）が増えた。
- 158. PCアプリの今 • 個人作成のフリーソフト • ほとんど見なくなった。 •OS標準機能でできるようになった。 • Webサービス（アプリ）が増えた。 • PCアプリが無くなったわけではない • 複雑、高機能、パフォーマンスが求められるもの • 単独ではない。クラウド連携。
- 159. モバイルアプリ •PCの 90後半∼ 00前半に似ている •インストール型アプリが流行。 • アプリの機能がOSに取り込まれている。 • モバイル向けWebアプリの台頭。 • アプリマーケットがキー
- 160. Webアプリマーケット • Webアプリストアのデファクト争い • Amazon,Mozillaが開始 • Chrome Web Store モバイル版(未定) • パッケージ型が広まる？ • デバイス機能、セキュリティ、オフライン
- 161.
- 162. BaaS (Backend asa Service) •IaaS, PaaS, SaaS → 今年は BaaSの年 •サーバーは益々コモディティ化 http://www.appiaries.com/jp/baas/index.html
- 163. BaaS Market 0 2000 4000 6000 8000 2012 2017 PaaSBaaS 億円 Gartner Says Worldwide Platform as a Service Revenue Is on Pace to Reach $1.2 Billion Backend as a Service (BaaS) Market worth $7.7 Billion by 2017 2017年にはBaaS市場がPaaSより急成長
- 164.
- 165.
- 166.
- 167.
- 168.
- 169. Web Service Reloaded •BasS Store の登場
- 170. Web Service Reloaded •BasS Store の登場 • API化が進むことで、疎結合なサービスAPIの連携
- 171. Web Service Reloaded •BasS Store の登場 • API化が進むことで、疎結合なサービスAPIの連携 • セマンティックWeb悲願のサービス合成が実現？
- 172. 今後のサーバーサイド •クライアントは単なるビューへ • PCブラウザ, PCApp、 モバイルWeb, モバイルNative •デバイスやプラットフォームを越 えたサービスの合成
- 173. Server 階層的MVC BaaS Native App Mobile Web AppService Service ModelView Controller PC Browser Model View View View Controller Service Coordinator
- 174.
- 175.
- 176.
- 177. Sencha Products Mobile Web MobileApp PC Web
- 178. Sencha Products Mobile Web MobileApp PC Web PC App
- 179. Sencha Products Mobile Web MobileApp PC Web PC App BaaS
- 180. Sencha Products 全てのレイヤーをカバー！ Mobile Web MobileApp PC Web PC App BaaS
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.