2015/8/7 日本マイクロソフト・エクセルソフト・アシアル合同で開催されたクロスプラットフォームセミナーの資料です。

1. 1URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Cordovaを使ったHTML5ハイブリッド
型モバイルアプリの活用ポイント
アシアル株式会社
生形 可奈子

2. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
アシアル株式会社のご紹介
アシアルは、「エンジニアリングでインターネットの成長を牽
引する」という事業コンセプトのもと、HTML5、JavaScriptを
中心としたWeb技術をベースにした、デベロッパー支援事業を
行っております。
モバイルアプリ開発環境 UI/UX設計 システム構築・コンサル セミナー・スクール

3. 3URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリとは

4. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
モバイルOSシェア

5. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
モバイルアプリ開発に関する課題
開発言語がOS毎に異なるため、
1. 開発工数がかかる
2. ソースコード管理の複雑化
3. エンジニアの確保が困難

6. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
HTML5という選択肢

7. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリの登場
ネイティブアプリとWebアプリ、２つのアプリの特徴をいいとこ
どりしたアプリを「ハイブリッドアプリ」と呼びます。
ハイブリッドアプリは、Webの技術を使って開発しますが、生成
されるアプリはネイティブアプリとほぼ同等のものになります。
×ネイティブアプリ Webアプリ

8. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
従来の開発手法とハイブリッドアプリの比較
特徴・性能
ネイティブ
アプリ
Webアプリ
ハイブリッド
アプリ
クロスプラットフォーム対応 × ○ ○
端末へのインストール ○ × ○
マーケットでの配布 ○ × ○
オフラインでの利用 ○ × ○
端末固有の機能の利用 ○ △ ○
アプリ実行速度 ○ △ △

9. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリの仕組み
ハイブリッドアプリは、Cordova（PhoneGap）というOSSライ
ブラリを利用して開発します。 CordovaはHTMLで作成された
コードをネイティブコードでパッケージングします。
ネイティブコード
WebView

10. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ネイティブコード
ネイティブ機能呼び出しの仕組み
カメラなどの端末固有の機能を呼び出す場合、開発者は
JavaScriptで命令を記述します。するとCordovaがネイティブ
コードによって対応する機能を実行します。
HTML・CSS・JavaScript
連絡帳GPSカメラ
Cordova標準API

11. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Cordovaを利用しているAndroidアプリ

12. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
様々なソリューションで採用

13. 13URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaのご紹介

14. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリ開発環境：Monaca
• iOS, Android, Windows 8, Chrome Apps対応
• クラウドベースのハイブリッドアプリ開発環境
• 日本語サポート・ドキュメント
• Windowsマシンでも開発OK

15. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaのユーザー
祝！100,000ユーザー達成

16. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaによるアプリ開発
① ②
コンパイル処理やUSB経由での実機転送などは不要。デバッグ
専用アプリがネットワーク経由で変更箇所を取得するため、リ
アルタイムに動作検証できます。

17. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaの仕組み
IDE デバッガー ビルドシステム
クラウド
ソースコードは
クラウド上に ターゲットOSに
合わせた環境で
アプリをビルド

18. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
選べるIDE
ブラウザーベースのフル機能IDE 既存の開発環境がそのまま利用可能
拡張機能としてMonacaの機能を提供 コマンドラインからの実行

19. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Visual StudioによるCordovaアプリ開発
Visual Studio Tools
for Apache Cordova
Monaca for
Visual Studio
開発ベンダー マイクロソフト アシアル
デバッガー Visual Studioに統合されたエミュ
レータ
実機
ビルド機能 ビルド環境のセットアップ（iOSアプ
リの場合はMacとXcodeも）が必要
クラウドビルド
（iOSアプリも可）
Visual Studioに標準搭載されているツールと、拡張機能とし
て提供されているMonaca for Visual Studioがあります。

20. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
バックエンドサービスとの連携
・クラウドデータベース
・ユーザー認証
・プッシュ通知
Azure Mobile Apps
Azureのモバイル用バックエンドサービスや、オンプレミス環境
のサーバーとの連携が可能です。
JavaScriptによる
データの送受信

21. 21URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
デモ

22. 22URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
開発事例紹介

23. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
• 株式会社テレビ朝日
• YouTube上の公式動画閲覧アプリ
• SNS連携、お気に入り登録など
事例１：テレ朝動画アプリ

24. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Android iPhone iPad
ワンソースでマルチデバイス対応
HTMLは共通
CSS切替
style.css style2.css

25. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
事例２：ASICS SHOE FINDER
• 株式会社アシックス
• 足形計測サービスと連携して、
おすすめシューズを検索
• マーケット公開しない店頭アプリ
• 開発期間は約2週間（iPadのみ）

26. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
事例３：Health Planet
• 株式会社タニタヘルスリンク
• 既存の同名Webサービスとの連携
• 体重計の計測データをBluetoothで
アプリに送信
• 歩数計のデータをNFCで読み込み

27. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Health Planetの仕組み
Bluetooth
NFC
(Android)
HTTP
Webサービス
体重計
歩数計
REST API Cordova API

28. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
事例4：ジャパンネット銀行残高確認アプリ
• ジャパンネット銀行
• 機能は残高確認のみ
• パターン認証による１秒
ログイン

29. 29URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリが抱える課題

30. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリの３つの課題
1. パフォーマンスチューニング
2. Androidの断片化問題
3. セキュリティ対策

31. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
パフォーマンス対策：Onsen UI
• モバイルライクなフラットデザイン
• ネイティブと遜色ないアニメーション
• 豊富なUIパーツ
• SPAの構築が容易
• UIガイドラインに準拠
HTML5のカスタムタグを記述することでUIを簡単に構築するこ
とができる、モバイルアプリのためのUIフレームワークです。

32. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Onsen UIの使い方
<ons-toolbar></ons-toolbar>
<ons-list-item></ons-list-item>
<ons-tabbar></ons-tabbar>

33. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
断片化対策：Crosswalk
通常のハイブリッドアプリでは、OSに付属しているWebView
を利用していますが、MonacaではIntelのCrosswalkという
WebViewをアプリに内包してビルドすることができます。
Androidアプリ

34. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
セキュリティ対策：ソースコード暗号化
復号化
端末には暗号化されたファイルが保存され、アプリ実行時に
データを複合化します。複合化データは一時的にメモリ上に
展開されるだけなので、外部から読み取られる心配はありません。

35. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaによるアプリ開発まとめ
 Web標準技術のみを使って開発ができる
 多くの端末やOSに、ワンソースで対応できる
 リモートデバッグ・リモートビルド機能で手軽に
開発・検証できる
 ハイブリッドアプリの弱点を補う暗号化プラグイ
ンやUIフレームワークなどを提供

36. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
価格は無料～
プラン名
価格
Basic
無料
Personal
980円/月
Gold
5,000円/月
Platinum
8,000円/月
プロジェクト数 3 10 100 無制限
ビルド回数 3回/24時間 無制限 無制限 無制限
Visual Studio連携
Community
Editionのみ
Community
Editionのみ
○ ○
外部のCordovaプ
ラグイン組み込み
× × ○ ○
ローカル開発 × × ○ ○

37. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monacaエンタープライズ
エンタープライズ向けの上位プランです。業務アプリ開発をセ
キュアかつ効率的に行うための各種機能を提供します。
・ソースコードの暗号化
・アプリの自動更新機能
・SAP等の外部システムとの連携
・完全なローカル環境での開発
・その他カスタマイズ対応

38. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
様々な開発支援サービス
専門のサポートチームが
技術的課題を解決します。
ご要望に応じてコードレ
ビューも行います。
Monacaによるアプリ開
発講座の他、JavaScript
等のプログラミング教育
も実施しています。

39. URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
https://ja.monaca.io/