d-3 今だからこそ考える エンタープライズ・モバイル ・アプリ … · • ibm...
TRANSCRIPT
© 2015 EXA CORPORATION
D-3 今だからこそ考える
エンタープライズ・モバイル
・アプリケーション開発
2015/07/15
株式会社エクサ
テクノロジーイノベーション部 開発品質技術室
原嶋 徹
Web技術を使ったモバイル・アプリで
業務改善してみませんか？
Apache Cordovaのご紹介
1
エンタープライズの定義
2
エンタープライズ
コンシューマ 個人向けアプリケーション
例：ECサイト、ゲーム
組み込み ハードウェア制御アプリケーション
例：エレベータ制御
企業向けアプリケーション
例：営業管理、生産管理
1. 業務環境の変化
2. モバイル動向
3. ハイブリッド・モバイル開発
4. Apache Cordova 検証
5. まとめ
3
今日の内容
1. 業務環境の変化
2. モバイル動向
3. ハイブリッド・モバイル開発
4. Apache Cordova 検証
5. まとめ
4
業務環境の変化
• 「業務プロセスの標準化」から
「標準化＋個別化」へ
– データ・プロセス統制
– 日常生活でのモバイル利用
– ワーク・ライフ・バランス
5
業務環境の変化
モバイルも業務のプラットフォームとして活用したい！
6
1. 業務環境の変化
2. モバイル動向
3. ハイブリッド・モバイル開発
4. Apache Cordova 検証
5. まとめ
7
モバイル動向
• AndroidとiOSに2分割
8
52.3% 45.1%
0.4% 2.1%
2015/3月のシェア（日本）
Android
iOS
Windows
other
Kantar Worldpanel社 調査
モバイル・アプリの課題
• ベンダーに依存＆増加中
9
Windows Phone
– Windows Phone 8.1
– C#/VB.net
– .Net Framework 4.5
– VisualStudio 2013
Android
– Android 5.1 lollipop
– Java SE 8.0
– Android Application Framework
– Android Studio
iPhone
– iOS8
– Objective-C
– Swift 2.0
– Xcode
モバイル向けWeb技術動向
• レスポンシブ Web デザイン
• シングル ページ アプリケーション
• HTML5
10
レスポンシブ Web デザイン
• コンバートサービスからCSSフレームワークを使ってデバイスごとにデザイン指定
• モバイルファースト
– モバイル端末での利用を第一に考えてデザイン
11
Bootstrap
• 全ての端末、ブラウザで同じ表示にするためのCSS
フレームワーク
– 4タイプの画面サイズを定義し、個別にレイアウト構造が
指定できる
12
シングル ページ アプリケーション
• プラグインによる拡張ベースからブラウザ標準機能でのリッチなインタフェース実現
– DOM操作による画面切り替え、より流動的なUX
を提供
13
AngularJS
• 動的に画面を構成できるJavaScriptフレームワーク
– ルーティング、テンプレートで実現
• CRUDアプリケーションに親和性が高い
– MVCパターンで今までのアプリケーションに構造が近い
• Dependency-Injectionの実装
– 独立性を保ち、多人数で開発する時に影響範囲を限定できる
14
HTML５
• グラフィックスの強化
• ローカルのファイル操作
• 非同期通信の強化
• カメラや加速度センサーなどのローカルデバイスへ接続
15
モバイル向けWebの課題
• ローカルデバイスはまだ使えない
• Push通知はブラウザが立ち上がっていることが前提
16
Mobile HTML5調査
カメラ対応状況(2014/12版)
モバイルを最大限に活用するために
• ベンダーは固定されたくない
→モバイル アプリケーション×
• ローカルデバイスの機能は使いたい
→Web アプリケーション×
17
Web＋モバイル○
1. 業務環境の変化
2. モバイル動向
3. ハイブリッド・モバイル開発
4. Apache Cordova 検証
5. まとめ
18
• アプリケーションはWeb技術で開発
• ローカルデバイス操作はモバイル技術で開発
• フレームワークで差分を吸収
ハイブリッドとは
19
ハイブリッド用フレームワーク
Apache Cordova①-概要-
• PhoneGapをAdobe社が買収し、Apacheへ寄贈したハイブリッド・モバイル・アプリケーション開発フレームワーク
– IBM MobileFirst, Oracle Mobile Application Framework
IonicFramework等で採用
20
Apache Cordova②-仕組み-
• Web技術を使って画面作成
• Node.jsを使って環境毎にビルド
• ライブラリからローカルデバイス操作
21
1. 業務環境の変化
2. モバイル動向
3. ハイブリッド・モバイル開発
4. Apache Cordova 検証
5. まとめ
22
Apache Cordova-検証ポイント-
①アプリケーションの開発生産性
②ローカルデバイス制御の容易性
③ Webサーバとの通信方針の確立
– テキストデータ
– バイナリデータ
23
Apache Cordova-検証ソフトウェア構成-
24
今まで作成してきたWebアプリ
ケーションと同じ構成で実現
Apache Cordova-検証コンポーネント構成-
• 一般的なシングルページアプリケーションのコンポーネント構成で実装
25
Action Service
Dao
Utils
DTO
View Controller Model
Factory Template
Container
JSON
RPC
Device
検証実施状況
26
検証結果①：アプリケーションの開発生産性
• Web技術のみでアプリケーション作成可能
• ブラウザでも動作確認でき、テストしやすく生産性が良い
• Web画面用フレームワークが必須
– 画面を統一するためにCSSフレームワークが必須
– 画面制御のためにJavaScriptフレームワークが必須
27
検証結果②：ローカルデバイス制御の容易性
• Apache Cordovaで公開されているプラグインを使い、ローカルデバイスへアクセス可能
• ローカルデバイス初期化処理に時間がかかるため、シングル ページ アプリケーション パターンが必須
• 標準APIの複雑度が高いため、Wrapしたフレームワークを使うと良い
28
検証結果③：Webサーバとの通信方針の確立
• テキストデータはAjaxで通信
• バイナリデータはApache Cordova のプラグインを使い、1ファイルごと通信
• モバイルでトランザクション制御の仕組みが必要になるため、フレームワークが必須
– 複数ファイル操作を行いたい場合には、ファイル
ごとに送信し、1リクエストになる様に制御する
29
検証結果まとめ
• 『Apache Cordova』は有用
• 『Apache Cordova』単体で使うのではなくWrapper + Web画面フレームワークを併用すべし
30
『Apache Cordova』＋『ngCordova』＋『AngularJS』＋『Bootstrap』
1. 業務環境の変化
2. モバイル動向
3. ハイブリッド・モバイル開発
4. Apache Cordova 検証
5. まとめ
31
• 業務環境の変化
– 業務効率化のために、個人のモバイルが重要
• 最近のモバイル動向
– クロスプラットフォーム＋ローカルデバイス利用のために、
ハイブリッド
• ハイブリッド・モバイル開発
– 『 Apache Cordova』
• Apache Cordova 検証
– +『 ngCordova』+『 AngularJS』+『 Bootstrap』
32
まとめ
ハイブリッドの適用範囲
エンタープライズ コンシューマ
ローカルデバイスを使う
ハイブリッド ネイティブ
ローカルデバイスを使わない
Web
33
今後
• Mobile Enterprise Application Platform
– IBM MobileFirst Platform
• +クラウド
– Bluemix
34
QA
36
END
37
本資料で使用されている商標・登録商標
• Apache Cordova, Struts2はApache Software Foundationの商標または登録商標です。
• Node.jsはJoyent, Incの商標または登録商標です。
• ngCordova, IonicFrameworkはDrifty社の商標また登録商標です。
• BootstrapはTwitter社の商標または登録商標です。
• AngularJS, Android, Android lollipop, Android Application Framework, Android StudioはGoogle, Inc.の商標または登録商標です。
• iPhone, iOS, Objective-C, Swift, XcodeはApple Computer, Inc.の商標または登録商標です。
• Windows, Windows Phone, .Net Framework, VisualStudio2013はMicrosoft社の商標または登録商標です。
• IBM MobileFirst Platform, IBM Bluemix は、International Business Machines
Corporationの商標または登録商標です。
• Oracle Mobile Application Framework, Java SE, JavaWebStartはOracle Corporation及びその子会社、関連会社の商標または登録商標です。
• CurlはSCSK社の商標または登録商標です。
• SpringFrameworkはSpringSourceの商標または登録商標です。
• mybatisはThe Mybatis teamの商標または登録商標です。
38