スマートデバイス×HTML5で 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~
16 likes2,215 views
http://www.canon-its.co.jp/seminar/20140924sencha.html
スマートデバイス×HTML5で 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~
- 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
- 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とベンダーのサポート
- 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”
- 29. Node.js
- 32. フロントエンド開発ツール群
- 33. AltJS
- 34. HTML5とクラウド
- 35. BaaS(Backend as a Service)
- 36. BaaS = バックエンド不要
- 38. HTML5フレームワーク
- 39. AngularJS • HTMLをテンプレートと して構造を記述 • 双方向データバインディ ング • 「ディレクティブ」によ るコンポーネント化
- 40. Backbone.js • シンプル、スモール • 開発者のコードに干渉し ない • 上にフレームワークを重 ねて使われることが多い （Marionette.jsなど）
- 41. Sencha • 充実したコンポーネント が付属 • モバイル/PC両対応 • ビルドツールも含めて全 部入り
- 42. Vue.js • MVVM形式でデータバイ ンディングを実現 • Angularよりもシンプル、 学習コストが低い • 比較的歴史が浅いが現在 急成長中
- 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を導入し、コンパイル時型チェッ クを行う • プロジェクトの特長に合わせて慎重に導入 - 開発スピードより堅牢性重視など - 軌道に乗れば開発スピードにも寄与する場合あり
- 50. 本当にネイティブでなくてよい？ • 最新機能は常にネイティブが先行 - iOS8: HomeKit, HealthKit, Extension, Metal • ハイブリッドアプリでのプラグイン開発 ≒ ネイティブ開発
- 51. 何を重視する？ i) 顧客への幅広いリーチか、最新のユーザ体験か？ ii) リリース後の保守は？頻繁に更新が発生するか？ iii) 組織内のリソースを有効活用したいか？ 新たに人材を育成・採用することもいとわないか？
- 52. THANKS!