Canon Senchaセミナーの資料 http://www.canon-its.co.jp/seminar/20130828sencha.html

1. モバイルWebアプリの
これまでとこれから
Touch
VS
2013年8月28日
キヤノンITソリューションズ
Senchaセミナー

2. About me
高岡大介
Work
• 外資系SIベンダーを経て研究所へ。
• 現在フリーランスとして、Web技術研究開発・開発支援
twitter: @dsuket
facebook.com/dsuket
Inkpod Web
Sencha Touch
パーフェクトガイド

3. Agenda
1. モバイルWebアプリの現在
2. モバイルWebフレームワーク
3. モバイルWebアプリの今後

4. 1.モバイルWebアプリの現在

5. スマートフォンの普及

6. スマートフォン普及率
CIAJ 2013年度 携帯電話の利用実態調査
母数: 携帯端末利用者

7. スマートフォン普及率
CIAJ 2013年度 携帯電話の利用実態調査
スマートフォン利用者の経年変化
母数: 携帯端末利用者

8. スマートフォン普及率
CIAJ 2013年度 携帯電話の利用実態調査
スマートフォン利用者の経年変化
スマートフォン所有者が半数近くに。
母数: 携帯端末利用者

9. スマートフォン普及率
総務省 情報通信白書平成25年版
母数: インターネット利用者

10. スマートフォン普及率
総務省 情報通信白書平成25年版
諸外国と比較して、日本の普及率は低い
母数: インターネット利用者

11. G8スマートフォン普及率
「Our Mobile Planet」2013 Google
25%
母数: 16歳以上の人口

12. 国内スマホ普及率
調査報告 普及率 母集団
CIAJ 48.2% 携帯端末利用者
情報通信白書 38.2% インターネット利用者
Our Mobile Planet 24.7% 16歳以上の国民
スマホ利用者

13. 携帯利用者
国内スマホ普及率
調査報告 普及率 母集団
CIAJ 48.2% 携帯端末利用者
情報通信白書 38.2% インターネット利用者
Our Mobile Planet 24.7% 16歳以上の国民
スマホ利用者

14. インターネット利用者
携帯利用者
国内スマホ普及率
調査報告 普及率 母集団
CIAJ 48.2% 携帯端末利用者
情報通信白書 38.2% インターネット利用者
Our Mobile Planet 24.7% 16歳以上の国民
スマホ利用者

15. 総人口
インターネット利用者
携帯利用者
国内スマホ普及率
調査報告 普及率 母集団
CIAJ 48.2% 携帯端末利用者
情報通信白書 38.2% インターネット利用者
Our Mobile Planet 24.7% 16歳以上の国民
スマホ利用者

16. 年齢別普及率の推移

17. 年齢別普及率の推移
若年層ほど所有率、伸び率が高い

18. 各国の年齢別普及率

19. 各国の年齢別普及率
若年層でも諸外国のほうが圧倒的に多い

20. デバイス別インターネット利用率
2013.04 ニールセン スマートフォン・メディア利用実態調査レポート

21. デバイス別インターネット利用率
2013.04 ニールセン スマートフォン・メディア利用実態調査レポート
PCは横ばい
スマートフォンは2倍以上！

22. スマートフォンの利用状況
2013.04 ニールセン スマートフォン・メディア利用実態調査レポート
Android OS 利用者と PC 利用者の月間一人あたりの利用時間

23. スマートフォンの利用状況
2013.04 ニールセン スマートフォン・メディア利用実態調査レポート
Android OS 利用者と 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 - Press Release 26 Mar 2013
2013年、タブレット端末の出荷台数が、デスクトップ PC
の出荷台数を初めて上回る見込み。
2014年にはポータブルPCも上回る予想。

32. タブレットの出荷台数
IDC - Press Release 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. タブレットの普及状況
•若年層はPCよりもタブレット

39. タブレットの普及状況
•若年層はPCよりもタブレット
•特に新興国での普及がめざましい

40. タブレットの普及状況
•若年層はPCよりもタブレット
•特に新興国での普及がめざましい
•今後もさらに普及拡大

41. アプリの状況
Native vs Web

42. アプリの数とDL数
総数 DL数
iOS
90万（うちipad 37万）
（2013年6月）
500億DL
（2013年6月）
Android
80万
（2013年8月）
480億DL
（2013年5月）

43. アプリの数とDL数
総数 DL数
iOS
90万（うちipad 37万）
（2013年6月）
500億DL
（2013年6月）
Android
80万
（2013年8月）
480億DL
（2013年5月）

44. アプリの数とDL数
総数 DL数
iOS
90万（うちipad 37万）
（2013年6月）
500億DL
（2013年6月）
Android
80万
（2013年8月）
480億DL
（2013年5月）
両方合わせると1000億DLに。
このペースで行くと、Androidが
iOSを抜くのは近い。

45. ハイブリッドアプリ
2016年、企業向けモバイルアプリの半分がWebとネイティブのハイブリッド
アプリに―米Gartner調べ

46. ハイブリッドアプリ
Gartner Recommends a Hybrid Approach for Business-to-Employee
Mobile Apps
Consumer/Enterprise Split in 2015

47. ハイブリッドアプリ
Gartner Recommends a Hybrid Approach for Business-to-Employee
Mobile Apps
Web
20%
Hybrid
40%
Native
40%
Consumer
Consumer/Enterprise Split in 2015

48. ハイブリッドアプリ
Gartner Recommends a Hybrid 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. 企業向けモバイルアプリ
国内企業向けスマートモバイルアプリケーション／スマートモバイルアプリケーション開発ソフトウェア市場、
売上額予測：2012∼2017年（出典：IDC Japan）
2012年の企業向けモバイルアプリケーション市場規模は、前年比44.7％増の100億6100万円
と分析。2017年の売上規模は478億400万円で、2012年∼2017年に年平均36.6％で成長する
と予測する。一方、2012年の開発ソフトウェアの市場規模は前年比5.4％増の64億8100万円
で、2017年には99億7500万円に達するとみる。2012∼2017年は年平均9.0％で成長すると
予想している。
企業向けモバイルアプリ市場は約100億円、年率36.6％で拡大の見込み

50. 企業向けモバイルアプリ
国内企業向けスマートモバイルアプリケーション／スマートモバイルアプリケーション開発ソフトウェア市場、
売上額予測：2012∼2017年（出典：IDC Japan）
2012年の企業向けモバイルアプリケーション市場規模は、前年比44.7％増の100億6100万円
と分析。2017年の売上規模は478億400万円で、2012年∼2017年に年平均36.6％で成長する
と予測する。一方、2012年の開発ソフトウェアの市場規模は前年比5.4％増の64億8100万円
で、2017年には99億7500万円に達するとみる。2012∼2017年は年平均9.0％で成長すると
予想している。
企業向けモバイルアプリ市場は約100億円、年率36.6％で拡大の見込み

51. 企業向けモバイルアプリ
国内企業向けスマートモバイルアプリケーション／スマートモバイルアプリケーション開発ソフトウェア市場、
売上額予測：2012∼2017年（出典：IDC Japan）
2012年の企業向けモバイルアプリケーション市場規模は、前年比44.7％増の100億6100万円
と分析。2017年の売上規模は478億400万円で、2012年∼2017年に年平均36.6％で成長する
と予測する。一方、2012年の開発ソフトウェアの市場規模は前年比5.4％増の64億8100万円
で、2017年には99億7500万円に達するとみる。2012∼2017年は年平均9.0％で成長すると
予想している。
企業向けモバイルアプリ市場は約100億円、年率36.6％で拡大の見込み

52. アプリの状況 まとめ

53. アプリの状況 まとめ
•アプリの数はまだまだ増加。

54. アプリの状況 まとめ
•アプリの数はまだまだ増加。
•ハイブリッドアプリが増える。

55. アプリの状況 まとめ
•アプリの数はまだまだ増加。
•ハイブリッドアプリが増える。
•特に企業向けに導入が進む。BYOD

56. アプリの状況 まとめ
•アプリの数はまだまだ増加。
•ハイブリッドアプリが増える。
•特に企業向けに導入が進む。BYOD
•2017年には市場規模500億円近く、
その9割はHTML5化

57. 第三勢力

58. HTML5をプラットフォームとした
新しいOS、デバイスが台頭

59. Firefox OS
• Mozillaが開発しているスマホOS
• HTML5アプリケーションがネイティブで動作。
• ZTE Open が eBayで発売開始（$79.99）
• 主に新興国向け。
• 日本ではKDDIが参加を表明

60. Tizen
• サムスン等が主導する TizenプロジェクトのOS。
• HTML5とネイティブの両方でアプリが作成可能。
• Docomoから年内に発売？

61. 1.モバイルWebの現在 まとめ

62. 1.モバイルWebの現在 まとめ
• スマートフォン、タブレットはますます中心に。

63. 1.モバイルWebの現在 まとめ
• スマートフォン、タブレットはますます中心に。
• HTML5を利用したハイブリッド化が進む。

64. 1.モバイルWebの現在 まとめ
• スマートフォン、タブレットはますます中心に。
• HTML5を利用したハイブリッド化が進む。
• Webアプリをネイティブとしたプラットフォー
ムも出てきて、新興国で広がる可能性。

65. 1.モバイルWebの現在 まとめ
• スマートフォン、タブレットはますます中心に。
• HTML5を利用したハイブリッド化が進む。
• Webアプリをネイティブとしたプラットフォー
ムも出てきて、新興国で広がる可能性。

66. 1.モバイルWebの現在 まとめ
• スマートフォン、タブレットはますます中心に。
• HTML5を利用したハイブリッド化が進む。
• Webアプリをネイティブとしたプラットフォー
ムも出てきて、新興国で広がる可能性。
Webアプリ技術は必須！！

67. 2. モバイルWebと
フレームワーク

68. モバイルWebアプリ メリット

69. モバイルWebアプリ メリット
• マルチデバイスで展開できる
• 異なるOSでも動作が可能。

70. モバイルWebアプリ メリット
• マルチデバイスで展開できる
• 異なるOSでも動作が可能。
• Web技術で作れる
• 開発者、コミュニティ、情報が多い。
• 開発コストが比較的安価。

71. モバイルWebアプリ メリット
• マルチデバイスで展開できる
• 異なるOSでも動作が可能。
• Web技術で作れる
• 開発者、コミュニティ、情報が多い。
• 開発コストが比較的安価。
• 更新が早い
• アプリのアップデートが不要。

72. モバイルWebアプリ メリット
• マルチデバイスで展開できる
• 異なるOSでも動作が可能。
• Web技術で作れる
• 開発者、コミュニティ、情報が多い。
• 開発コストが比較的安価。
• 更新が早い
• アプリのアップデートが不要。
• Storeに依存しない
• 内容のアップデートが自由。
• 手数料が不要。(30%)

73. モバイルWebアプリ デメリット

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 HW HW
App App App
フレームワーク導入のメリット

80. HW
OS
framwork
OS OS
HW HW HW
App App App
• 端末間の差異を吸収
• Android, iOS, バージョン間の違いなどを吸収。
フレームワーク導入のメリット

81. HW
OS
framwork
OS OS
HW HW HW
App App App
• 端末間の差異を吸収
• Android, iOS, バージョン間の違いなどを吸収。
• デバイス機能の提供
• ハイブリッド化することでネイティブ機能を使えるように。Storeにも。
フレームワーク導入のメリット

82. HW
OS
framwork
OS OS
HW HW HW
App App App
• 端末間の差異を吸収
• Android, iOS, バージョン間の違いなどを吸収。
• デバイス機能の提供
• ハイブリッド化することでネイティブ機能を使えるように。Storeにも。
• パフォーマンスの問題
• パフォーマンスが低下しにくいような作りを提供。
フレームワーク導入のメリット

83. HW
OS
framwork
OS OS
HW HW HW
App App App
• 端末間の差異を吸収
• Android, iOS, バージョン間の違いなどを吸収。
• デバイス機能の提供
• ハイブリッド化することでネイティブ機能を使えるように。Storeにも。
• パフォーマンスの問題
• パフォーマンスが低下しにくいような作りを提供。
• UI、コンポーネントの提供
• よく使うUI部品、テーマなどが予め用意。
フレームワーク導入のメリット

84. HW
OS
framwork
OS OS
HW HW HW
App App App
• 端末間の差異を吸収
• Android, iOS, バージョン間の違いなどを吸収。
• デバイス機能の提供
• ハイブリッド化することでネイティブ機能を使えるように。Storeにも。
• パフォーマンスの問題
• パフォーマンスが低下しにくいような作りを提供。
• UI、コンポーネントの提供
• よく使うUI部品、テーマなどが予め用意。
• ベストプラクティスの利用
• Webアプリのノウハウを活用
フレームワーク導入のメリット

85. 最新フレームワーク
✴ Sencha Touch
✴ jQuery Mobile
✴ The-M-Project
✴ Wink
✴ DaVinci

86. • 美しく、軽快なUIコンポーネントを提供。
• Ext JSからの実績。
• クラス構造、データパッケージ、MVC、テンプレー
トなど重厚なフレームワーク
• ビルドツール、ネイティブパッケージング機能。
• 関連製品でVisualEditorやAnimationツールも充実。
• Sencha Incが開発。
Touch

87. Sencha Touch Demo

88. • jQueryを利用したモバイル向けフレームワーク。
• CSSとHTMLだけでモバイルUIを実現できるた
め、デザイナでも簡単に使用できる。
• 3rdパーティーのコンポーネントが充実。
• モバイルWebアプリというよりサイト向き。
• jQuery Foundationで開発。jQueryの実績。

89. jQuery Mobile Demo

90. • jQuery MobileをJavaScriptで組み立てる
• Sencha Touch と jQMを合わせたような感じ
• Data Bidingを使用したMVC
• ビルドツール（espresso）でネイティブパッケー
ジ化
• OpenSourceライセンス（MIT)
• 2011年からpanacodaが開発

91. The M Project Demo

92. • JavaScriptでコンポーネントを組み立てるタイプ
• 軽量（20kb） (jQM+jQ: 250k, ST: 500k )
• UIコンポーネントが充実
• エフェクトが派手（3Dなど）
• Dojo Foundationで作成
• Dojo Mobileよりもかなり軽量

93. Wink Demo

94. • Eclipse Plugin による開発環境 DaVinci Studio
• jQuery Mobile, KnockOut, Underscore,
Handlebars, Backboneなどを使用？
• WYSIWYG エディタ、Visual Data Binding
• N-Screen で複数端末をサポート
• 韓国 Davinci Software Lab. Inc.で2013年に開発
• 詳しいことはよく分からない。（怪しいｗ

95. DaVinci Studio Demo

96. 仕事で使うなら、実質 Sencha Touch か
jQuery Mobile の2択
どちらが良いかを徹底比較！

98. VS
Touch

99. 特徴
•充実のコンポーネント
•クロスプラットフォーム
•高いパフォーマンス
•クラスシステム、MVC，Sass/Compass
•ネイティブパッケージ
•多様なエコシステム
Touch

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. 高いパフォーマンス
HTML5だめだ

103. 高いパフォーマンス
ネイティブよりも早いfastbook
HTML5だめだ

104. コンポーネントの利用
•JavaScriptで定義
•Ext.define でクラスを定義
•configオプションでカスタマイズ
•ブロックのように積み上げる

105. MVC

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. Sass/Compass

112. Sass/Compass

113. Sass/Compass

114. Sass/Compass

115. Sass/Compass
• Sass/Compassを使った
テーミングシステム
• プラットフォーム毎テーマも

116. Sass/Compass
• Sass/Compassを使った
テーミングシステム
• プラットフォーム毎テーマも

117. Sass/Compass
• Sass/Compassを使った
テーミングシステム
• プラットフォーム毎テーマも
http://dev.ariel-networks.com/wp/archives/3816

118. 関連ツール

119. 関連ツール
•Sencha Architect
•Sencha Animator
•Sencha.io
•Sencha market
•Sencha try
•Eclipse Plugin

120. Sencha Touch 事例1
ショッピングアプリ
http://www.sencha.com/apps/touchstyle/

121. Sencha Touch 事例2
Contestで2位の
天気予報アプリ
http://www.sencha.com/html5-is-ready

122. Sencha Touch デメリット
• JavaScript必須
• 重厚長大なフレームワーク
• ファイルサイズがおおきい
• 初期の学習コストが高い
• 仕様がよく変わる

123. Sencha Touch が合う要件

124. Sencha Touch が合う要件
• チームで開発

125. Sencha Touch が合う要件
• チームで開発
• 大規模システム

126. Sencha Touch が合う要件
• チームで開発
• 大規模システム
• エンタープライズ向けアプリ

127. Sencha Touch が合う要件
• チームで開発
• 大規模システム
• エンタープライズ向けアプリ
• Singleページアプリケーション

128. Sencha Touch が合う要件
• チームで開発
• 大規模システム
• エンタープライズ向けアプリ
• Singleページアプリケーション
• 特殊なビューでないもの
(がんばれば出来る)

129. 特徴

130. 特徴
•CSSやJSを書かなくてもスマホ対応できる
•豊富なウィジェット
•クロスプラットフォーム
•関連ツールが沢山

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
• Theme Roller
• Dreamweaver
• jQuery Gallery
• 3rd party plugins
＆ extensions

135. jQuery Mobile 事例1
Disney Worldの
イベント情報、
アトラクション、
混雑状況など
Disney World
http://m.disneyworld.disney.go.com/

136. jQuery Mobile 事例2
IKEAの
ショッピングアプリ
IKEA
http://m.ikea.com/se/sv/

137. jQuery Mobile 事例3
adobeが作成した、jQuey
Mobileのデモサイトのよう
なもの
Adobe HTML5特設サイト
http://adobe-html5.jp/sp/

138. • 重厚長大なフレームワーク
• ファイルサイズがおおきい
• 標準デザインがイマイチ。カスタマイズ必須
• たまに変な動きをする
• 凝ったデザイン、動きが難しい
jQuery Mobile デメリット

139. jQuery Mobile が合う要件

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 jQuery Mobile
コンポーネントの数 多い 多い(*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. 結論
サイトはjQM、アプリ部分はSencha Touch
組み合わせて利用することもあり。
色んなやり方を知っておくことが重要。
エンジニアなら両方知っておきたい。

150. 3.モバイルWebアプリの今後

151. 1 2年後のモバイルアプリ
•ユーザーはAppが好き
•しばらくはハイブリッド化が進む
•マーケット問題は解決するが、Store依
存・更新の問題は残る。

152. PCの歴史を振り返る

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. PCアプリの今

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 as a Service)
•IaaS, PaaS, SaaS
→ 今年は BaaSの年
•サーバーは益々コモディティ化
http://www.appiaries.com/jp/baas/index.html

163. BaaS Market
0
2000
4000
6000
8000
2012 2017
PaaS BaaS
億円
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. BaaS Players
Sencha Space

165. BaaS時代のアプリ
•サーバーはJSONを返すAPIとなる
•クライアントは、APIを組み合わせて
ビューを表示
•NativeもHTMLもビューの一つ
BaaS
Native
App
Web
App Service
Service

166. あれ？
この構図いつか見た気がする

167. Webサービスのリベンジ

168. Web Service Reloaded

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ブラウザ, PC App、
モバイルWeb, モバイルNative
•デバイスやプラットフォームを越
えたサービスの合成

173. Server
階層的MVC
BaaS
Native
App
Mobile Web AppService
Service
Model View
Controller
PC
Browser
Model
View
View
View
Controller
Service
Coordinator

174. Sencha Products

175. Sencha Products
Mobile Web

176. Sencha Products
Mobile Web
Mobile App

177. Sencha Products
Mobile Web
Mobile App
PC Web

178. Sencha Products
Mobile Web
Mobile App
PC Web
PC App

179. Sencha Products
Mobile Web
Mobile App
PC Web
PC App
BaaS

180. Sencha Products
全てのレイヤーをカバー！
Mobile Web
Mobile App
PC Web
PC App
BaaS

181. まとめ

182. まとめ
•高機能なものはNativeで

183. まとめ
•高機能なものはNativeで
•それ以外はWebアプリ、またはハイブ
リッド化が進む。

184. まとめ
•高機能なものはNativeで
•それ以外はWebアプリ、またはハイブ
リッド化が進む。
•さらにBaaSが進むと、NativeもWebも
単なるビューへ。

185. まとめ
•高機能なものはNativeで
•それ以外はWebアプリ、またはハイブ
リッド化が進む。
•さらにBaaSが進むと、NativeもWebも
単なるビューへ。
•Webサービス新時代へ。

186. まとめ
•高機能なものはNativeで
•それ以外はWebアプリ、またはハイブ
リッド化が進む。
•さらにBaaSが進むと、NativeもWebも
単なるビューへ。
•Webサービス新時代へ。
•Sencha製品は幅広いサポート