HTML5モバイルアプリ開発講座（Monaca入門編）

Copyright © Asial Corporation. All Rights Reserved. │ 1
HTML5モバイルアプリ開発講座
Monaca入門編
アシアル株式会社

View Slide

ハイブリッドアプリとは

View Slide

モバイルアプリ開発に関する課題
1. 開発工数がかかる
2. ソースコード管理の複雑化
3. エンジニアの確保が困難
×
×
従来のネイティブアプリ（OS上で直接動作するアプリ）開発では、
開発言語がOS毎に異なるために以下のような問題を抱えていました。

View Slide

ハイブリッドアプリの登場
ハイブリッドアプリはWebの技術を使って開発しますが、生成さ
れるアプリはネイティブアプリとほぼ同等のものになります。
×
ネイティブアプリ Webアプリ
ネイティブアプリとWebアプリ、２つのアプリの特徴を兼ね備え
たアプリを「ハイブリッドアプリ」と呼びます。

View Slide

従来の開発手法とハイブリッドアプリの比較
特徴・性能
ネイティブ
アプリ
Webアプリ
ハイブリッド
アプリ
クロスプラットフォーム対応 × ○ ○
ストアへの公開 ○ × ○
端末へのインストール ○ △ ○
オフラインでの利用 ○ △ ○
端末固有の機能の利用 ○ △ ○
アプリ実行速度 ○ △ △

View Slide

ハイブリッドアプリの仕組み
ハイブリッドアプリ開発には、Apache Cordova (PhoneGap)と
いうライブラリを利用します。
OSに依存する処理はCordovaから提供されるため、開発者はOS
の違いを意識せずにWeb技術だけで開発することができます。
ネイティブコード
HTML
CSS
JavaScript
アプリ本体はWeb技術で実装
WebView(ブラウザ)で表示
CordovaがOSに合わせたネイ
ティブコードを提供

View Slide

Monacaのご紹介

View Slide

Monacaとは
• 20万人以上が利用するCordova開発環境
• iOS、Android、Windows対応
• 日本語サポート・ドキュメント
• コアの機能はクラウドサービスとして提供
• WindowsマシンでもiOSアプリの開発OK

View Slide

Monacaの仕組み
IDE デバッガー
ビルドシステム
クラウド
ターゲットOSに
合わせた環境で
アプリをビルド
開発環境として提供
Monacaでは各ターゲットOSごとのビルドシステムがクラウド上に用
意されており、リモートでビルドを行うため開発環境を問わずに利用
することができます。
ソースコードは
クラウド上に

View Slide

Monaca Proプラン以上で利用可能
選べるIDE
Monaca CLI
コマンドライン
からの実行
Monaca Cloud IDE
ブラウザーベースの
フル機能IDE
開発スタイルに合わせて様々なIDEを選択することが可能です。
Monaca Localkit
既存の開発環境が
そのまま利用可能

View Slide

Monacaデバッガーによる実機デバッグ
①ファイルを編集 ②実機ですぐに動作確認
コンパイル処理やUSB経由での実機転送などは不要。デバッグ専用ア
プリがネットワーク経由で変更箇所を取得するため、リアルタイムに
動作検証できます。
推奨環境
Google Chrome

View Slide

開発環境のセットアップ

View Slide

Monacaのアカウント登録
Chromeブラウザで下記URLを開き、「無料トライアル」ボタンをク
リックしてアカウント登録を行って下さい。
https://ja.monaca.io

View Slide

Monacaのアカウント登録
• 受信可能なメールアドレスとパスワードを入力してアカウント新規
作成を行って下さい。

View Slide

アカウント仮登録完了
登録したメールアドレスに確認のメールが届きます。メールに
記載されたURLにアクセスして、無料トライアルを開始して下
さい。

View Slide

IDEを起動する
プロジェクトを選択し、右側に表示される「クラウドIDEで開く」
ボタンをクリックすると、IDEが起動します。
IDEを開く

View Slide

IDEの起動
IDEの各部の役割は以下の通りです。
ファイルの管理を
行います
ファイルの編集を
行います
プレビューを
表示します
デバッグ情報を表示します
ダッシュボードを
開きます

View Slide

開発の流れ
コードエディタ
で編集し、保存する
コードエディタで編集したファイルを、プレビューとデバッガー
で確認しながら開発を進めていきます。
簡単な確認はプレビューで
実際の表示確認はデバッガーで

View Slide

Monacaデバッガーのインストール
App Store、またはGoogle Playにて「monaca」で検索し、
スマートフォンにインストールして下さい。
アイコンはこちらです。

View Slide

Monacaデバッガーの起動
• Monacaデバッガーを起動すると、左の
ログイン画面が表示されます。
• Monacaに登録したアカウントでログイ
ンを行ってください。

View Slide

Monacaデバッガーでアプリを実行する
• デバッガーを起動すると自動的にクラウドへ接続し、プロジェクトが
一覧表示されます。
• プロジェクトをタップするとアプリがシミュレートされます。

View Slide

「はじめてのMonacaアプリ」を動かしてみる
• カメラ、コンパス、バイブレーションなどのネイティブ機能を動
かすことができます。

View Slide

Monacaデバッガーのメニュー
更新
プロジェクト
一覧に戻る
スクリーン
ショットを撮る
アプリログの
確認

View Slide

端末固有の機能（ネイティブ機能）を使う

View Slide

ネイティブコード
ネイティブ機能呼び出しの仕組み
• カメラなどの各機能はネイティブの言語で実装され、プラグイン
形式で提供されています。利用する際にはアプリのネイティブ層
に組み込んで利用します。
• JavaScriptでAPIをコールすることで、プラグインが実行され端末
固有の機能にアクセスすることができます。
HTML・CSS・JavaScript
OS
必要なプラグインを
組み込む

View Slide

Cordovaプラグインの種類
◼ 標準プラグイン
• カメラ等の基本的な機能を提供
• Monacaデバッガーにあらかじめ組み込まれている
• 無料プランで利用可能
◼ 第三者提供のプラグイン
• 2,000個以上のプラグイン（https://cordova.apache.org/plugins/）
• ネイティブ言語を用いた自作プラグインの作成も可能
• Monaca Proプラン以上で利用可能

View Slide

標準Cordovaプラグイン一覧
プラグインの種類概要
Battery バッテリー残量を取得する
Camera カメラアプリの起動、またはデバイスに保存された画像の読み込みを行う
Capture 音声や動画の録音・録画機能を提供する
Console 開発環境にデバッグ情報を出力する
Contacts デバイスに保存されている連絡先情報にアクセスする
Device デバイスに関する情報（モデル名、OS、UUIDなど）を取得する
Device Motion デバイス内蔵の加速度センサーを参照し、デバイスの傾きを検知する
Device Orientation デバイス内蔵のコンパスを参照し、デバイスが指し示す方位を取得する
Dialogs ネイティブのダイアログを表示する
File デバイスのファイルシステムにアクセスする
File Transfer ファイルのアップロードとダウンロードを行う
Geolocation デバイスの位置情報（緯度、経度）を取得する
Globalization 設定されたロケールとタイムゾーンに基づいた日付文字列を取得する
InAppBrowser アプリ内でブラウザを開き、Webページを表示する
Media オーディオファイルを再生する
Network Information ネットワークへの接続状態（WifiやLTEなど）を取得する
Splashscreen スプラッシュスクリーンを表示する
Vibration デバイスを振動させるバイブレーション機能を実行する
StatusBar OSのステータスバーの表示切替やカスタマイズを行う
Whitelist アプリからのアクセスを許可するURLを設定する

View Slide

Cordova固有のイベント
• Cordovaには独自のJavaScriptイベントが用意されています。
• Cordovaプラグインを呼び出すAPIは、端末の機能を呼び出す準備ができた
ときに発生する「deviceready」イベント以降で実行することができます。
Cordova固有のイベント
イベント発生タイミング
deviceready Cordovaのライブラリのロードがすべて完了し、端末の機
能を呼び出す準備ができたとき（アプリ起動後、数百ミリ
秒経過後に発生）
pause アプリがバックグラウンドに移行したとき
resume アプリがフォアグラウンドに復帰したとき
※ バックグラウンドでは、JavaScriptのコードは実行されません。

View Slide

カメラ機能の利用
• 端末のカメラを起動したり、写真を読み込んだりするには、Cordovaの
camera APIを利用します。
navigator.camera.getPicture( 成功時処理, 失敗時処理, オプション );
カメラAPI
引数説明
成功時処理カメラによる撮影や写真の読み込みが完了したときに実行す
る関数を指定
失敗時処理カメラの呼び出しに失敗したとき、またはユーザーにより途
中でキャンセルされたときに実行する関数を指定
オプションカメラ起動か写真読み込みか、といったAPIの挙動や、写真の
画質や取得方法などを指定

View Slide

カメラAPIのオプション（抜粋）
オプション説明設定値
sourceType カメラAPIの挙動・Camera.PictureType.CAMERA（規定値）
カメラを起動
・Camera.PictureSourceType.SAVEDPHOTOALBUM
端末に保存された写真を読み込む
destinationType 画像の取得形式・Camera.DestinationType.FILE_URI（規定値）
写真が保存されているパスを取得
・Camera.DestinationType.DATA_URL
base64形式で写真を取得
quality 画質 0～100（規定値：50）
※ iOSの場合、MAX50が推奨
saveToPhotoAlbum 撮影後、端末に画像を
保存するかどうか
true
false（規定値）
cameraDirection 前面／背面のどちらの
カメラを利用するか
・Camera.Direction.FRONT
インカメラ（前面）を利用
・Camera.Direction.BACK（規定値）
アウトカメラ（背面）を利用

View Slide

実習

View Slide

新しいプロジェクトを作成する
ダッシュボードに戻り、「新しいプロジェクトを作る」ボタンを選択します。

View Slide

新しいプロジェクトを作成する
1. テンプレートの種類は「最小限のテンプレート」を選択します
2. プロジェクト名と説明（任意入力）を設定して作成します
カメラアプリに
変更

View Slide

HTMLの実装
index.htmlのタグ内に以下のコードを記述します。

写真を撮る

View Slide

スクリプトの実装
index.htmlのタグ内にカメラAPIを実行する処理を記述します。 <script> function shoot() { var option = { saveToPhotoAlbum: true // 撮影後端末に保存 }; // カメラを起動 navigator.camera.getPicture(onSuccess, onError, option); // 成功時に呼び出されるコールバック関数 function onSuccess(imageURI){ document.querySelector("#photo").src = imageURI; } // 失敗時に呼び出されるコールバック関数 function onError(message){ alert("Error:" + message); } } 
完成したら、Monacaデバッガーで
実行して写真を撮ってみましょう。
撮影した写真が端末に保存されてい
ることを確認してください。

View Slide

Cordovaプラグインの有効化
• Monacaデバッガーにはすべての標準Cordovaプラグインがあらかじめ組み
込まれていますが、ビルドしたアプリには開発者が有効化したCordovaプラ
グインのみが組み込まれます。
• プラグインの追加は、メニューバーの「設定」＞「Cordovaプラグインの管
理」から行うことができます。
今回は「Camera」プラグインを有効化します

View Slide

Cordovaバージョンと第三者提供プラグイン
• 「Cordovaプラグインの管理」画面では、Cordovaのバージョンが確認でき
ます。Proプラン以下では、最新2バージョンのみ利用できます。Business
プラン以上では、旧バージョンを使い続けることが可能です。
• 第三者提供プラグインは、［Cordovaプラグインのインポート］ボタンでイ
ンポートします。プロジェクトのCordovaバージョンに対応していない場合、
動作しない可能性があります。

View Slide

アプリのビルド

View Slide

アプリ設定
• メニューバー「設定」＞「Android/iOSアプリ設定」画面で、アプリ名や
パッケージ名、アイコン画像等を設定します。

View Slide

ビルドの種類
Android版 iOS版
デバッグビル
ド
主にテスト用途で利用します。アプリ
を社内限定で配布する場合などにも利
用可能です。ダミーの署名をつけてビ
ルドします。
テスト用途で開発者向けにアプリを配布
する場合に利用します。Developer証明
書が必要です。
アドホックビ
ルド
－
特定の端末にアプリを限定配布する場合
に利用します。ディストリビューション
証明書とAdHoc用のProvisioningプロ
ファイルが必要です。
In-Houseビ
ルド
－
組織内にアプリを配布する場合に利用し
ます。ディストリビューション証明書と
In-Houseビルド用のProvisioningプロ
ファイルが必要です。
Monaca Businessプラン以上が必要です。
リリースビル
ド
Google Playで公開することができま
す。自分で作成した署名をつけてビル
ドを行います。
App Storeで公開することができます。
ディストリビューション証明書とApp
Store用のProvisioningプロファイルが必
要です。
カスタムビル
ドデバッガー
第三者提供のCordovaプラグインを含むカスタムデバッガーを作成します。

View Slide

【Android】デバッグビルド（1/2）
• メニューバーの「ビルド」＞「Androidアプリのビルド」を開くと [デバッ
グビルド] が選択されているので、そのまま [ビルドを開始する] ボタンをク
リックします。

View Slide

【Android】デバッグビルド（2/2）
• ビルドが開始されます。ビルドが完了するまでには数分の時間がかかります。

View Slide

スマートフォンにインストールする
• QRコードから直接端末にインストールできます。
• リリースビルドの場合、ローカルPCにダウンロードしたapkファイル
（iOSの場合はipaファイル）はそのままストアに公開可能です。

View Slide

【Android】リリースビルド（1/2）
• メニューバー「設定」＞「Androidキーストア設定」を開き、[クリアして新
規作成][OK]の順に選択し、任意のエイリアス名、エイリアスパスワード、
KeyStoreパスワードを入力して下さい。

View Slide

【Android】リリースビルド（2/2）
• メニューバーの「ビルド」＞「Androidアプリのビルド」画面で [リリース
ビルド] を選択し、エイリアスのパスワードを入力してビルドを開始して下
さい。

View Slide

【iOS】ビルド設定とリリース向けビルド
• iOSアプリのビルドには、有償のApple Developer Programへの参加と、証
明書の発行が必要になります。
• 以下のドキュメントを参考に作業を行ってして下さい。
https://docs.monaca.io/ja/monaca_ide/manual/build/ios/

View Slide

開発したアプリの配布
• App Storeにアプリを登録するためにはMacが必要です。Proプラン以上で
は、iOSアプリをMonacaから直接アップロードする機能が利用できます。
• 組織内にiOSアプリを限定配布する場合、Apple Enterprise Programへの
参加が必須となります。
Android版 iOS版
マーケットでの公開方法
Google Playなどの
Androidアプリストア
App Store
マーケットを経由しない
配布（社内限定）
○
△ （Enterprise Program
参加企業のみ）
テストを目的とした限定
配布
○ （制限なし） ○ （100名まで）
• Androidアプリは自由に配布することが可能ですが、iOSアプリは配布に関
して様々な制約があります。

View Slide

Monaca提供Enterpriseプラグインの紹介

View Slide

復号化
ソースコード暗号化プラグイン
• 通常のハイブリッドアプリの場合、HTMLファイルはコンパイルされない
ため平文のままアプリ内に保存されます。
• ソースコード暗号化プラグインによって、端末には暗号化されたHTML
ファイルが保存され、アプリ実行時にデータを複合化します。複合化
データは一時的にメモリ上に展開されるだけなので、外部から読み取ら
れる心配はありません。

View Slide

セキュアストレージプラグイン
• アプリ内に保存されるデータを暗号化するストレージ機能を提供します。
端末の盗難や紛失などの万が一の際の情報漏洩を未然に防ぎます。
• セキュアストレージは HTML5標準の localStorage とよく似た仕様と
なっています。ただし、セキュアストレージはCordovaプラグインとし
て提供されているため、非同期で実行されます。
let data = localStorage.getItem('item');
secureStorage.getItem('item', (result) => {
let data = result;
});
⚫ LocalStoregeの場合
⚫ セキュアストレージの場合

View Slide

In-App アップデータープラグイン
• ストア等から再ダウンロードすることなく、アプリの自動更新を行う機
能を提供します。アプリの再配布、端末への再インストールを行うこと
なく、常にユーザーが最新のアプリを利用している状態を保てます。
プログラム修正
ビルドした
アプリをデプロイアプリ本体の
ダウンロード
が必要
ビルド配布
システム
従来
プログラム修正
＆アップロード
配信サーバ
HTML5部分のみ
をアプリに配信
In-App
ｱｯﾌﾟ
ﾃﾞｰﾀｰ
サーバーに更新ファイル
を配置します。

View Slide

サービス連携

View Slide

外部サービスとの連携方法
◼ Monacaプロダクトパートナー
https://ja.monaca.io/product-partner/index.html
• バックエンドサービス、広告、分析、セキュリティ診断、テスト支援
など、Monacaと連携可能な各種ツールが提供されています。
◼ プロダクトパートナーに掲載がないサービスであっても、以下の
うちいずれかが提供されていればMonacaからの利用が可能です。
• Cordovaプラグイン
• クライアントサイド用のJavaScript SDK
• Web API

View Slide

参考ドキュメント

View Slide

参考ドキュメント
• 標準Cordovaプラグインリファレンス
https://docs.monaca.io/ja/reference/cordova_6.5/
• クラウドIDEマニュアル（ビルドやアプリの配布について）
https://docs.monaca.io/ja/monaca_ide/manual/
• teratail（質問フォーラム）
https://teratail.com/tags/monaca
• モナカプレス（サンプルアプリの紹介やリリース情報など）
https://press.monaca.io/

View Slide


View Slide

HTML5モバイルアプリ開発講座（Monaca入門編）

HTML5モバイルアプリ開発講座（Monaca入門編）

アシアル株式会社

More Decks by アシアル株式会社

Other Decks in Technology

Featured

Transcript