Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
~ キヤノンITソリューションズ 
  第19回課題解決ソリューションセミナー ~ 
スマートデバイス×HTML5で 
企業情報システムはどう変わる? 
~最新動向から考えるエンタープライズWebの現在と未来~ 
2014/09/24 
株式会...
自己紹介 
冨田 慎一(とみたしんいち) 
• 株式会社マッシュマトリックス 
代表取締役社長 
• 日本オラクル 
⇒セールスフォース・ドットコム 
⇒マッシュマトリックス設立 
• クラウド、マッシュアップ、ソーシャ 
ルWeb、デジタル・...
株式会社マッシュマトリックス 
(Mashmatrix, Inc. ) 
www.mashmatrix.co.jp
Mashmatrix for Salesforce 
salesforce.mashmatrix.com
HTML5+クラウド+エンタープライズ
スマートデバイス?
“世界の半数以上の人がスマホを持っ 
ている。そこをベースに考えないと、 
間違ったことになると思います。” 
– Takafumi Horie
増加するスマホ契約者 
• 2014年3月末のスマート 
フォン契約数は5,734万 
件で端末契約数の47.0% 
• 2019年3月末のスマート 
フォン契約数は1億300万 
件に拡大と予測 
(出典: MM総研 http://www.m...
縮小するPC市場とタブレットの台頭 
• 2014年の出荷台数予測 
- PC⇒前年比13.9%減の1,344万台 
- タブレット⇒18.3%増の937万台 
• 2013~2018年の年平均成長率予 
測 
- 個人向けPC ⇒ マイナス2...
Wearable, 
or 
Internet of Things
業務システムでの活用?
勤怠管理・活動記録・経費精算 
• 位置情報付きで勤怠打刻 
• ホワイトボードの会議録 
を撮影 
• 空き時間に経費を精算 
(チームスピリットモバイル http://www.teamspirit.co.jp)
ドキュメント管理・プレゼンテーション 
• 会議資料をペーパレスに 
• カタログ・営業資料を電 
子化して対面プレゼン 
• マニュアル・図面を電子化 
して持ち運び 
(インフォテリア「Handbook」 http://handbook.j...
不動産物件管理 
• 不動産物件の外観やキッ 
チン、リビングの写真な 
どをスマホカメラを使っ 
て撮影し、登録。 
• 写真は物件情報に紐付け 
てデータベース管理 
(「物件の写真」bukken-photo.jp)
POSレジ 
• タブレットを使ったタッ 
チ操作でレジ入力 
• 売上データをリアルタイ 
ムにデータベースで集計 
• 高価な専用機器ではなく 
安価な汎用タブレットを 
活用(「ユビレジ」ubiregi.com)
HTML5 ???
マルチデバイス時代の苦悩 
A) 異なるプラットフォーム、画面サイズ 
B) 複数デバイスを同時にサポートする必要性 
C) 流行り廃りの波が激しい、陳腐化が早い
HTML5の福音 
A) 異なるプラットフォーム、画面サイズ 
⇒ WebViewによる画面描画とレスポンシブデザイン 
B) 複数デバイスを同時にサポートする必要性 
⇒ 画面定義/ロジックの再利用(HTML/JavaScript/CSS) ...
ハイブリッド・アプリケーション 
http://html5experts.jp/anatoo/7253/
PhoneGap / 
Cordova 
http://phonegap.com/ 
http://cordova.apache.org/
MEAP / MADP 
• モバイルアプリケーショ 
ンの開発を可能にするツー 
ルおよびサービスの統合 
パッケージ 
• 1ソース⇒マルチデバイ 
スの実現に、PhoneGap 
を活用 
http://www-03.ibm.com/so...
“企業としての最大の間違い 
だったのは、ネイティブで 
はなくHTML5に大きく賭け 
すぎたことだ。その時期で 
はなかった” 
– Mark Elliot Zuckerberg / Sep 2012
Senchaからの回答 
http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story
JavaScript !!!
Java から JavaScript へ 
“Write Once, Run Anyware”
JavaScript 
(ECMAScript)
Node.js
採用件数の急激な増加 
http://www.infragistics.com/community/blogs/mihail_mateev/archive/2014/07/18/ 
dealing-with-node-js-and-micros...
登録モジュール数 
http://www.eventbrite.com/e/node-program-nodejs-mongodb-and-expressjs-intensive-in- 
person-bay-area-course-regi...
フロントエンド開発ツール群
AltJS
HTML5とクラウド
BaaS(Backend as a Service)
BaaS = バックエンド不要
フロントエンドもお手軽に 
http://monaca.mobi/
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> 
Or 
<script src=“aaa.js”></script> 
<script src=“bbb.j...
POINT#2: ビルドシステム 
• Grunt/Gulp 
• バンドルツール 
(WebPack/Browserify) 
• 依存モジュール管理 
(Bower, npm) 
• AltJS/CSSプリプロセッサ 
• Sencha: ...
POINT#3: テスト自動化 
• Unit Test 
- mocha, chai, power-assert 
- testem, karma 
- phantomjs, casperjs, selenium 
• CI (=Contin...
POINT#4: 型チェック 
• TypeScriptなどのAltJSを導入し、コンパイル時型チェッ 
クを行う 
• プロジェクトの特長に合わせて慎重に導入 
- 開発スピードより堅牢性重視など 
- 軌道に乗れば開発スピードにも寄与する場...
スマートデバイスでのHTML5開発 
チェックポイント
本当にネイティブでなくてよい? 
• 最新機能は常にネイティブが先行 
- iOS8: HomeKit, HealthKit, Extension, Metal 
• ハイブリッドアプリでのプラグイン開発 
≒ ネイティブ開発
何を重視する? 
i) 顧客への幅広いリーチか、最新のユーザ体験か? 
ii) リリース後の保守は?頻繁に更新が発生するか? 
iii) 組織内のリソースを有効活用したいか? 
新たに人材を育成・採用することもいとわないか?
THANKS!
スマートデバイス×HTML5で
 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~
スマートデバイス×HTML5で
 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~
Prochain SlideShare
Chargement dans…5
×

スマートデバイス×HTML5で
 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~

1 742 vues

Publié le

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

  • Soyez le premier à commenter

スマートデバイス×HTML5で
 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~

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

×