スマートデバイス×html5で 企業情報システムはどう変わる?...
DESCRIPTION
http://www.canon-its.co.jp/seminar/20140924sencha.htmlTRANSCRIPT
スマートデバイス×HTML5で企業情報システムはどう変わる？
～最新動向から考えるエンタープライズWebの現在と未来～
～ キヤノンITソリューションズ 第19回課題解決ソリューションセミナー ～
2014/09/24 株式会社マッシュマトリックス
冨田 慎一
自己紹介冨田 慎一（とみたしんいち）
• 株式会社マッシュマトリックス代表取締役社長
• 日本オラクル⇒セールスフォース・ドットコム⇒マッシュマトリックス設立
• クラウド、マッシュアップ、ソーシャルWeb、デジタル・アイデンティティ技術 etc.
HTML5+クラウド+エンタープライズ
スマートデバイス？
– Takafumi Horie
“世界の半数以上の人がスマホを持っている。そこをベースに考えないと、間違ったことになると思います。”
増加するスマホ契約者• 2014年3月末のスマートフォン契約数は5,734万件で端末契約数の47.0％
• 2019年3月末のスマートフォン契約数は1億300万件に拡大と予測
（出典: MM総研 http://www.m2ri.jp/newsreleases/main.php?id=010120140423500 ）
縮小する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/ ）
Wearable,or
Internet of Things
業務システムでの活用？
勤怠管理・活動記録・経費精算
• 位置情報付きで勤怠打刻
• ホワイトボードの会議録を撮影
• 空き時間に経費を精算
(チームスピリットモバイル http://www.teamspirit.co.jp)
ドキュメント管理・プレゼンテーション
• 会議資料をペーパレスに
• カタログ・営業資料を電子化して対面プレゼン
• マニュアル・図面を電子化して持ち運び
(インフォテリア「Handbook」 http://handbook.jp)
不動産物件管理• 不動産物件の外観やキッチン、リビングの写真などをスマホカメラを使って撮影し、登録。
• 写真は物件情報に紐付けてデータベース管理
(「物件の写真」bukken-photo.jp)
POSレジ• タブレットを使ったタッチ操作でレジ入力
• 売上データをリアルタイムにデータベースで集計
• 高価な専用機器ではなく安価な汎用タブレットを活用 (「ユビレジ」ubiregi.com)
HTML5 ???
マルチデバイス時代の苦悩
A)異なるプラットフォーム、画面サイズ
B) 複数デバイスを同時にサポートする必要性
C)流行り廃りの波が激しい、陳腐化が早い
HTML5の福音A)異なるプラットフォーム、画面サイズ
⇒ WebViewによる画面描画とレスポンシブデザイン
B) 複数デバイスを同時にサポートする必要性
⇒ 画面定義/ロジックの再利用（HTML/JavaScript/CSS）
C)流行り廃りの波が激しい、陳腐化が早い
⇒ 標準仕様として策定されたAPIとベンダーのサポート
PhoneGap / Cordova
http://phonegap.com/
http://cordova.apache.org/
MEAP / MADP• モバイルアプリケーションの開発を可能にするツールおよびサービスの統合パッケージ
• 1ソース⇒マルチデバイスの実現に、PhoneGapを活用
http://www-03.ibm.com/software/products/ja/worklight-foundation
http://global.sap.com/campaigns/digitalhub-mobile-platform/index.html
– Mark Elliot Zuckerberg / Sep 2012
“企業としての最大の間違いだったのは、ネイティブではなくHTML5に大きく賭けすぎたことだ。その時期ではなかった”
Senchaからの回答http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story
JavaScript !!!
Java から JavaScript へ
“Write Once, Run Anyware”
Node.js
採用件数の急激な増加
http://www.infragistics.com/community/blogs/mihail_mateev/archive/2014/07/18/dealing-with-node-js-and-microsoft-sql-server-part-1.aspx
登録モジュール数
http://www.eventbrite.com/e/node-program-nodejs-mongodb-and-expressjs-intensive-in-person-bay-area-course-registration-12495924647
フロントエンド開発ツール群
AltJS
HTML5とクラウド
BaaS(Backend as a Service)
BaaS = バックエンド不要
HTML5フレームワーク
AngularJS
• HTMLをテンプレートとして構造を記述
• 双方向データバインディング
• 「ディレクティブ」によるコンポーネント化
Backbone.js
• シンプル、スモール
• 開発者のコードに干渉しない
• 上にフレームワークを重ねて使われることが多い（Marionette.jsなど）
Sencha
• 充実したコンポーネントが付属
• モバイル/PC両対応
• ビルドツールも含めて全部入り
Vue.js
• MVVM形式でデータバインディングを実現
• Angularよりもシンプル、学習コストが低い
• 比較的歴史が浅いが現在急成長中
エンタープライズHTML5開発での チェックポイント
POINT#1: 規模の見極めA)小規模(1～2人程度)
⇒ 旧来のjQueryベースでもとりあえず可、徐々にシフトを検討
B)中規模(3～10人程度)
⇒ モダンなHTML5フレームワークの導入を検討すべき
C)大規模(10人以上)
⇒ コンポーネント化/モジュール管理/ビルドシステム導入必須
No More…<script src="a-very-very-large-main-script.js"></script>
<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 ?—>
Or
POINT#2: ビルドシステム• Grunt/Gulp
• バンドルツール(WebPack/Browserify)
• 依存モジュール管理(Bower, npm)
• AltJS/CSSプリプロセッサ
• Sencha: Cmdツールが付属
POINT#3: テスト自動化• Unit Test
- mocha, chai, power-assert - testem, karma - phantomjs, casperjs, selenium
• CI (=Continuous Integration) - Jenkins - TravisCI, CircleCI
POINT#4: 型チェック• TypeScriptなどのAltJSを導入し、コンパイル時型チェックを行う
• プロジェクトの特長に合わせて慎重に導入
- 開発スピードより堅牢性重視など
- 軌道に乗れば開発スピードにも寄与する場合あり
スマートデバイスでのHTML5開発 チェックポイント
本当にネイティブでなくてよい？
• 最新機能は常にネイティブが先行
- iOS8: HomeKit, HealthKit, Extension, Metal
• ハイブリッドアプリでのプラグイン開発
≒ ネイティブ開発
何を重視する？i) 顧客への幅広いリーチか、最新のユーザ体験か？
ii) リリース後の保守は？頻繁に更新が発生するか？
iii) 組織内のリソースを有効活用したいか？
新たに人材を育成・採用することもいとわないか？
THANKS!