http://www.canon-its.co.jp/seminar/20140924sencha.html

1. ～ キヤノンITソリューションズ
第19回課題解決ソリューションセミナー ～
スマートデバイス×HTML5で
企業情報システムはどう変わる？
～最新動向から考えるエンタープライズWebの現在と未来～
2014/09/24
株式会社マッシュマトリックス
冨田 慎一

2. 自己紹介
冨田 慎一（とみたしんいち）
• 株式会社マッシュマトリックス
代表取締役社長
• 日本オラクル
⇒セールスフォース・ドットコム
⇒マッシュマトリックス設立
• クラウド、マッシュアップ、ソーシャ
ルWeb、デジタル・アイデンティ
ティ技術 etc.

3. 株式会社マッシュマトリックス
(Mashmatrix, Inc. )
www.mashmatrix.co.jp

4. Mashmatrix for Salesforce
salesforce.mashmatrix.com

5. HTML5+クラウド+エンタープライズ

6. スマートデバイス？

8. “世界の半数以上の人がスマホを持っ
ている。そこをベースに考えないと、
間違ったことになると思います。”
– Takafumi Horie

9. 増加するスマホ契約者
• 2014年3月末のスマート
フォン契約数は5,734万
件で端末契約数の47.0％
• 2019年3月末のスマート
フォン契約数は1億300万
件に拡大と予測
（出典: MM総研 http://www.m2ri.jp/newsreleases/main.php?id=010120140423500 ）

10. 縮小するPC市場とタブレットの台頭
• 2014年の出荷台数予測
- PC⇒前年比13.9%減の1,344万台
- タブレット⇒18.3%増の937万台
• 2013～2018年の年平均成長率予
測
- 個人向けPC ⇒ マイナス2.9%
- 法人向けタブレット⇒19.7%
（出典: IDC Japan http://news.mynavi.jp/news/2014/03/18/304/ ）

11. Wearable,
or
Internet of Things

12. 業務システムでの活用？

13. 勤怠管理・活動記録・経費精算
• 位置情報付きで勤怠打刻
• ホワイトボードの会議録
を撮影
• 空き時間に経費を精算
(チームスピリットモバイル http://www.teamspirit.co.jp)

14. ドキュメント管理・プレゼンテーション
• 会議資料をペーパレスに
• カタログ・営業資料を電
子化して対面プレゼン
• マニュアル・図面を電子化
して持ち運び
(インフォテリア「Handbook」 http://handbook.jp)

15. 不動産物件管理
• 不動産物件の外観やキッ
チン、リビングの写真な
どをスマホカメラを使っ
て撮影し、登録。
• 写真は物件情報に紐付け
てデータベース管理
(「物件の写真」bukken-photo.jp)

16. POSレジ
• タブレットを使ったタッ
チ操作でレジ入力
• 売上データをリアルタイ
ムにデータベースで集計
• 高価な専用機器ではなく
安価な汎用タブレットを
活用(「ユビレジ」ubiregi.com)

17. HTML5 ???

19. マルチデバイス時代の苦悩
A) 異なるプラットフォーム、画面サイズ
B) 複数デバイスを同時にサポートする必要性
C) 流行り廃りの波が激しい、陳腐化が早い

20. HTML5の福音
A) 異なるプラットフォーム、画面サイズ
⇒ WebViewによる画面描画とレスポンシブデザイン
B) 複数デバイスを同時にサポートする必要性
⇒ 画面定義/ロジックの再利用（HTML/JavaScript/CSS）
C) 流行り廃りの波が激しい、陳腐化が早い
⇒ 標準仕様として策定されたAPIとベンダーのサポート

21. ハイブリッド・アプリケーション
http://html5experts.jp/anatoo/7253/

22. PhoneGap /
Cordova
http://phonegap.com/
http://cordova.apache.org/

23. MEAP / MADP
• モバイルアプリケーショ
ンの開発を可能にするツー
ルおよびサービスの統合
パッケージ
• 1ソース⇒マルチデバイ
スの実現に、PhoneGap
を活用
http://www-03.ibm.com/software/products/ja/worklight-foundation
http://global.sap.com/campaigns/digitalhub-mobile-platform/index.html

24. “企業としての最大の間違い
だったのは、ネイティブで
はなくHTML5に大きく賭け
すぎたことだ。その時期で
はなかった”
– Mark Elliot Zuckerberg / Sep 2012

25. Senchaからの回答
http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story

26. JavaScript !!!

27. Java から JavaScript へ
“Write Once, Run Anyware”

28. JavaScript
(ECMAScript)

29. Node.js

30. 採用件数の急激な増加
http://www.infragistics.com/community/blogs/mihail_mateev/archive/2014/07/18/
dealing-with-node-js-and-microsoft-sql-server-part-1.aspx

31. 登録モジュール数
http://www.eventbrite.com/e/node-program-nodejs-mongodb-and-expressjs-intensive-in-
person-bay-area-course-registration-12495924647

32. フロントエンド開発ツール群

33. AltJS

34. HTML5とクラウド

35. BaaS(Backend as a Service)

36. BaaS = バックエンド不要

37. フロントエンドもお手軽に
http://monaca.mobi/

38. HTML5フレームワーク

39. AngularJS
• HTMLをテンプレートと
して構造を記述
• 双方向データバインディ
ング
• 「ディレクティブ」によ
るコンポーネント化

40. Backbone.js
• シンプル、スモール
• 開発者のコードに干渉し
ない
• 上にフレームワークを重
ねて使われることが多い
（Marionette.jsなど）

41. Sencha
• 充実したコンポーネント
が付属
• モバイル/PC両対応
• ビルドツールも含めて全
部入り

42. Vue.js
• MVVM形式でデータバイ
ンディングを実現
• Angularよりもシンプル、
学習コストが低い
• 比較的歴史が浅いが現在
急成長中

43. エンタープライズHTML5開発での
チェックポイント

44. POINT#1: 規模の見極め
A)小規模(1～2人程度)
⇒ 旧来のjQueryベースでもとりあえず可、徐々にシフトを検討
B)中規模(3～10人程度)
⇒ モダンなHTML5フレームワークの導入を検討すべき
C)大規模(10人以上)
⇒ コンポーネント化/モジュール管理/ビルドシステム導入必須

45. No More…
<script src="a-very-very-large-main-script.js"></script>
Or
<script src=“aaa.js”></script>
<script src=“bbb.js”></script><!— this is unused —>
<script src=“path/to/ccc.js”></script>
<script src=“another/path/to/ddd.js”></script>
…
<script src=“zzz.js"></script><!— maybe unused ?—>

46. POINT#2: ビルドシステム
• Grunt/Gulp
• バンドルツール
(WebPack/Browserify)
• 依存モジュール管理
(Bower, npm)
• AltJS/CSSプリプロセッサ
• Sencha: Cmdツールが付属

47. POINT#3: テスト自動化
• Unit Test
- mocha, chai, power-assert
- testem, karma
- phantomjs, casperjs, selenium
• CI (=Continuous Integration)
- Jenkins
- TravisCI, CircleCI

48. POINT#4: 型チェック
• TypeScriptなどのAltJSを導入し、コンパイル時型チェッ
クを行う
• プロジェクトの特長に合わせて慎重に導入
- 開発スピードより堅牢性重視など
- 軌道に乗れば開発スピードにも寄与する場合あり

49. スマートデバイスでのHTML5開発
チェックポイント

50. 本当にネイティブでなくてよい？
• 最新機能は常にネイティブが先行
- iOS8: HomeKit, HealthKit, Extension, Metal
• ハイブリッドアプリでのプラグイン開発
≒ ネイティブ開発

51. 何を重視する？
i) 顧客への幅広いリーチか、最新のユーザ体験か？
ii) リリース後の保守は？頻繁に更新が発生するか？
iii) 組織内のリソースを有効活用したいか？
新たに人材を育成・採用することもいとわないか？

52. THANKS!