Cordovaを使ったHTML5ハイブリッド型モバイル

Cordovaを使ったHTML5ハイブリッド
型モバイルアプリの活用ポイント
アシアル株式会社
生形可奈子
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
1
アシアル株式会社のご紹介
アシアルは、「エンジニアリングでインターネットの成長を牽
引する」という事業コンセプトのもと、HTML5、JavaScriptを
中心としたWeb技術をベースにした、デベロッパー支援事業を
行っております。
モバイルアプリ開発環境
UI/UX設計
URL : http://ja.monaca.io/
システム構築・コンサル
セミナー・スクール
Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリとは
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
3
モバイルOSシェア
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
モバイルアプリ開発に関する課題
開発言語がOS毎に異なるため、
1. 開発工数がかかる
2. ソースコード管理の複雑化
3. エンジニアの確保が困難
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
HTML5という選択肢
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリの登場
ネイティブアプリとWebアプリ、２つのアプリの特徴をいいとこ
どりしたアプリを「ハイブリッドアプリ」と呼びます。
ネイティブアプリ
×
Webアプリ
ハイブリッドアプリは、Webの技術を使って開発しますが、生成
されるアプリはネイティブアプリとほぼ同等のものになります。
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
従来の開発手法とハイブリッドアプリの比較
ネイティブ
アプリ
Webアプリ
ハイブリッド
アプリ
クロスプラットフォーム対応
×
○
○
端末へのインストール
○
×
○
マーケットでの配布
○
×
○
オフラインでの利用
○
×
○
端末固有の機能の利用
○
△
○
アプリ実行速度
○
△
△
特徴・性能
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリの仕組み
ハイブリッドアプリは、Cordova（PhoneGap）というOSSライ
ブラリを利用して開発します。 CordovaはHTMLで作成された
コードをネイティブコードでパッケージングします。
WebView
ネイティブコード
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
ネイティブ機能呼び出しの仕組み
カメラなどの端末固有の機能を呼び出す場合、開発者は
JavaScriptで命令を記述します。するとCordovaがネイティブ
コードによって対応する機能を実行します。
Cordova標準API
HTML・CSS・JavaScript
ネイティブコード
URL : http://ja.monaca.io/
カメラ
GPS
連絡帳
Copyright © Asial Corporation. All Right Reserved.
Cordovaを利用しているAndroidアプリ
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
様々なソリューションで採用
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
Monacaのご紹介
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
13
ハイブリッドアプリ開発環境：Monaca
• iOS, Android, Windows 8, Chrome Apps対応
• クラウドベースのハイブリッドアプリ開発環境
• 日本語サポート・ドキュメント
• Windowsマシンでも開発OK
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
Monacaのユーザー
祝！100,000ユーザー達成
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
Monacaによるアプリ開発
コンパイル処理やUSB経由での実機転送などは不要。デバッグ
専用アプリがネットワーク経由で変更箇所を取得するため、リ
アルタイムに動作検証できます。
①
②
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
Monacaの仕組み
ソースコードは
クラウド上に
クラウド
IDE
デバッガー
URL : http://ja.monaca.io/
ターゲットOSに
合わせた環境で
アプリをビルド
ビルドシステム
Copyright © Asial Corporation. All Right Reserved.
選べるIDE
ブラウザーベースのフル機能IDE
既存の開発環境がそのまま利用可能
拡張機能としてMonacaの機能を提供
コマンドラインからの実行
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
Visual StudioによるCordovaアプリ開発
Visual Studioに標準搭載されているツールと、拡張機能とし
て提供されているMonaca for Visual Studioがあります。
Visual Studio Tools
for Apache Cordova
Monaca for
Visual Studio
開発ベンダー
マイクロソフト
デバッガー
Visual Studioに統合されたエミュ
実機
レータ
ビルド環境のセットアップ（iOSアプクラウドビルド
リの場合はMacとXcodeも）が必要（iOSアプリも可）
ビルド機能
URL : http://ja.monaca.io/
アシアル
Copyright © Asial Corporation. All Right Reserved.
バックエンドサービスとの連携
Azureのモバイル用バックエンドサービスや、オンプレミス環境
のサーバーとの連携が可能です。
Azure Mobile Apps
JavaScriptによる
データの送受信
・クラウドデータベース
・ユーザー認証
・プッシュ通知
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
デモ
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
21
開発事例紹介
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
22
事例１：テレ朝動画アプリ
• 株式会社テレビ朝日
• YouTube上の公式動画閲覧アプリ
• SNS連携、お気に入り登録など
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
ワンソースでマルチデバイス対応
Android
iPhone
style.css
CSS切替
iPad
style2.css
HTMLは共通
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
事例２：ASICS SHOE FINDER
• 株式会社アシックス
• 足形計測サービスと連携して、
おすすめシューズを検索
• マーケット公開しない店頭アプリ
• 開発期間は約2週間（iPadのみ）
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
事例３：Health Planet
• 株式会社タニタヘルスリンク
• 既存の同名Webサービスとの連携
• 体重計の計測データをBluetoothで
アプリに送信
• 歩数計のデータをNFCで読み込み
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
Health Planetの仕組み
REST API
Webサービス
Cordova API
体重計
Bluetooth
HTTP
歩数計
NFC
(Android)
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
事例4：ジャパンネット銀行残高確認アプリ
• ジャパンネット銀行
• 機能は残高確認のみ
• パターン認証による１秒
ログイン
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
ハイブリッドアプリが抱える課題
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
29
ハイブリッドアプリの３つの課題
1. パフォーマンスチューニング
2. Androidの断片化問題
3. セキュリティ対策
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
パフォーマンス対策：Onsen UI
HTML5のカスタムタグを記述することでUIを簡単に構築するこ
とができる、モバイルアプリのためのUIフレームワークです。
• モバイルライクなフラットデザイン
• ネイティブと遜色ないアニメーション
• 豊富なUIパーツ
• SPAの構築が容易
• UIガイドラインに準拠
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>
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
断片化対策：Crosswalk
通常のハイブリッドアプリでは、OSに付属しているWebView
を利用していますが、MonacaではIntelのCrosswalkという
WebViewをアプリに内包してビルドすることができます。
Androidアプリ
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
セキュリティ対策：ソースコード暗号化
端末には暗号化されたファイルが保存され、アプリ実行時に
データを複合化します。複合化データは一時的にメモリ上に
展開されるだけなので、外部から読み取られる心配はありません。
復号化
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
Monacaによるアプリ開発まとめ
 Web標準技術のみを使って開発ができる
 多くの端末やOSに、ワンソースで対応できる
 リモートデバッグ・リモートビルド機能で手軽に
開発・検証できる
 ハイブリッドアプリの弱点を補う暗号化プラグイ
ンやUIフレームワークなどを提供
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
価格は無料～
プラン名
Basic
Personal
Gold
Platinum
価格
無料
980円/月
5,000円/月
8,000円/月
プロジェクト数
3
10
100
無制限
ビルド回数
3回/24時間
無制限
無制限
無制限
Visual Studio連携
Community
Editionのみ
Community
Editionのみ
○
○
外部のCordovaプ
ラグイン組み込み
×
×
○
○
ローカル開発
×
×
○
○
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
Monacaエンタープライズ
エンタープライズ向けの上位プランです。業務アプリ開発をセ
キュアかつ効率的に行うための各種機能を提供します。
・ソースコードの暗号化
・アプリの自動更新機能
・SAP等の外部システムとの連携
・完全なローカル環境での開発
・その他カスタマイズ対応
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.
様々な開発支援サービス
専門のサポートチームが
技術的課題を解決します。
ご要望に応じてコードレ
ビューも行います。
URL : http://ja.monaca.io/
Monacaによるアプリ開
発講座の他、JavaScript
等のプログラミング教育
も実施しています。
Copyright © Asial Corporation. All Right Reserved.
https://ja.monaca.io/
URL : http://ja.monaca.io/
Copyright © Asial Corporation. All Right Reserved.

Download Report