11月10日開催「企業競争力向上のためのHTML5活用戦略会議」資料

1. Monacaエンタープライズのご紹介
アシアル株式会社 エンジニア
四⽅方 裕

2. モバイルアプリ開発における課題
1. マルチプラットフォーム対応
2. 開発リソースの確保
3. 開発環境の整備

3. 課題①マルチプラットフォーム対応
u 要件としてマルチプラットフォーム対応はほぼ必須
u BYOD(Bring your own device)の⼀一般化
u 特定プラットフォームに依存するリスク
u スマートデバイスが汎⽤用機として業務に組み込まれる
増え続けるスマートデバイスとOSにどう対応していくのか？

4. 課題②開発リソースの確保
u Objective-C/Android向けJavaの開発者不不⾜足
u モバイルアプリ開発の需要が⾮非常に⾼高い
u モバイルアプリ開発への技術スイッチが難しい
u モバイルアプリ開発の難しさ
u モバイル特有の画⾯面設計
u 端末側だけでなく、サーバサイドやWebの知識識も必要
開発リソースをどのように確保するのか？

5. 課題③開発環境の整備
u 開発環境のセットアップ
u iOSアプリの場合はXcodeのインストールとXcodeを動かす
ためにMacが必要
u Androidアプリの場合はJavaやEclipse・ADTが必要
u 開発・運⽤用でスタックするポイントが多い
u 開発環境の構築やメンテナンス
u ビルドやデプロイもプラットフォームごとに知識識が必要
u 質問できる場所も少ない
アプリの開発・運⽤用をいかに省省⼒力力化していくのか？

6. Monacaとは
Google Chrome/Safari上でアプリ開発ができるクラウド開発環境
https://monaca.mobi にアクセスするとすぐに開発が始められます

7. Monaca
Monacaクラウド
開発環境
WebベースのIDEデバッガービルドシステム
アプリ

8. Monacaとは
u クラウドベースのPhoneGap/Cordova開発環境（GUI）
u iOS, Android, Windows 8, Chrome Apps対応
u ⽇日本語サポート・ドキュメント
u Windowsマシンでも開発OK
u 専⽤用デバッガー
u 無料料〜～

9. Monacaの成果
マルチプラットフォーム対応
→HTML5だけでアプリを開発を⾏行行い、各プラットフォームごとにビルド
を⾏行行う
開発リソースの確保
→Webの標準技術で開発できる。基本的なネイティブ機能はプラグイ
ンとして組み込むことができるため、ネイティブ開発はほぼ不不要
開発環境の整備
→クラウド上にすべての開発ツールを⽤用意。ビルドシステムがあるので
Macを持っていなくてもiOSアプリが開発できる
現在のMonacaユーザーは7万⼈人、
リリースされたアプリは2000超

10. アシアルの取り組み
アシアル⾃自⾝身もモバイルアプリのデベロッパーとして
実際にハイブリッドモバイルアプリの開発を請け負ってきました
タニタ ヘルスプラネット テレビ朝⽇日公式動画アプリ
セキュリティや開発効率率率、アプリのパフォーマンスの問
題解決に取り組み、ベストプラクティスを追求し続けて
きました。

11. 実際のアプリ開発から得られたノウハウを集結させ、
Monacaを
よりセキュアに、
より効率率率的に、
そしてより実戦的に進化させた姿が
「Monacaエンタープライズ」

12. Monacaエンタープライズの構成
Monacaクラウド
Monaca Localkitデバッガー
ビルドシステム
ローカル開発環境
アプリ
+
フロントエンド：Onsen UI
バックエンド連携：Kidozen
エンタープライズ
プラグイン
セキュリティ：
運⽤用効率率率化

13. よりセキュアに

14. よりセキュアに

15. Monaca Localkit
u Monaca開発を完全デスクトップに
u クラウドを使うのはビルド時のみ
u 好きなエディタを使ったり、
gruntやgulpと組み合わせたり
u デバッガーとも接続します

16. セキュアストレージプラグイン
u スマートデバイス上に保存されるデータを暗号化することで、アプ
リのデータセキュリティを向上します
u 盗難や紛失など万が⼀一の際の情報漏漏洩を防⽌止しすることが出来ます
端末
ストレージ
アプリ
通常データ
通常保存
暗号化データ暗号化保存プラグイン
内容をそのまま読
み取れる
暗号化されているため、
内容を読み取れない

17. HTML5ファイル暗号化プラグイン
u ハイブリッドアプリには、アプリ内のロジックや画像ファイル等が、
取り出し複製することが出来るという課題があります
u アプリ内のHTML5ファイルを暗号化する事によって、解読、複製を
防⽌止し⾼高いセキュリティレベルを保ちます
WebView
暗号化済みHTML5資産
読み込み対象ファイルを復復号化
ファイル読み込み
メモリ上のデータを
WebViewにロード
復復号化データ（メモリ上）
アプリ実⾏行行時に復復号化を⾏行行い、データは直接WebViewにロードされます。復復号化データ
の処理理はメモリ上で完結しているため、復復号化した内容をファイルシステムから読み取
られる危険性はありません。

18. より効率率率的に

19. Monaca Debugger
u 実機上でアプリの動作を確認できるデバッグツール
u プログラムの変更更を即座に反映
u iOS/Android/Chrome Apps等各プラットフォームに提供
アプリをコンパイルせずに実機上で動作確認
Cordova APIやプラグインにも対応

20. Onsen UI
OSSのHTML5 UIフレームワーク。
Cordovaアプリのフロントエンドの決定版。
u モバイルUIコンポーネントの提供
u 滑滑らかな画⾯面遷移アニメーション
u スマートフォン・タブレットのマル
チスクリーンサイズに対応

21. 組み込みハイパフォーマンスWebView
Androidの機種依存とパフォーマンスの問題を解決
u Intel製の⾼高性能WebView「Crosswalk」を採⽤用
u Android WebViewのフラグメンテーション問題を解決
u Android4系から利利⽤用可能

22. Kidozen
u mBaaS + 既存のバックエンドシステムとの連携用コネクター
u Active Directory、SAP、Oracle、SalesForce等との連携
u LDAP、Active Directory等の認証基盤との連携
u アプリ開発者はKidoZenのAPIのみを意識識
u データ仮想化でシンプルなモバイルアプリ開発
u アプリから各データソースは共通API化
u データソースレベルでのセキュリティコントロール

23. より実戦的に

24. バージョン管理理
u Monaca Localkit + Git/Subversion
ローカルPCのファイルシステムをマウントして利利⽤用するため、
バージョン管理理システムとダイレクトに連携することができます。
Monaca Localkit
Git
Subversion
ファイルシステム

25. テスト⾃自動化
u Monaca Localkit + Node.js + Javascriptテストフレームワークを
組みわせて、ユニットテストを⾃自動化
Monaca LocalkitJavascript
Node.jsTest Framework
u その他QUnitやjasmine、Jenkinsなども連携可能
u TDD/CIでアプリ開発をより⾼高速化

26. アプリ⾃自動更更新(プラグイン)
u アプリの再配布・端末への再インストールを⾏行行うことなく、HTML5
プログラムを更更新することが可能
プログラム
修正
配信
サーバ
HTML5
アプリ
プラグイン
HTML5
HTML5プログラムのみ⾃自動更更新
アプリ⾃自体の更更新は不不要
修正したプログラムを
アップロード

27. 製品デモ

28. Monacaエンタープライズのまとめ
増え続けるスマートデバイスとOSにどう対応していくのか？
u HTML5/Cordovaでマルチプラットフォームに対応
開発リソースをどのように確保するのか？
u Webの標準技術を使ってアプリを開発
u Web技術者がモバイルアプリ開発でも活躍
アプリの開発・運⽤用をいかに省省⼒力力化していくのか？
u Monacaエンタープライズの活⽤用で開発・運⽤用を⼤大幅に効率率率化
u 既存の開発フロー・システム・バックエンドとも柔軟に組み合わ
せが可能