書籍転載：［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門（2）
Cordovaを用いてアプリを開発する
Cordovaアプリケーションを開発する手順を説明。書籍転載の2本目（「Part 1《基礎編》 第4章 Cordovaを用いたアプリ開発の流れ」より）。
オープンソースのフレームワーク「Apache Cordova」（Adobe版：「 PhoneGap」）を用いると、HTML5でiOSとAndroid向けのアプリをまとめて作成できます。この連載記事（＝書籍転載）の第1回～第6回で、その開発方法を一通り解説しています。また、第7回からは、「JavaScriptコード」と「iOS／Andoridネイティブ機能」をつなぐ仕組みを説明しています。
書籍転載について
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
前回は「4.1 Cordovaを用いた開発環境を構築する」を説明しました。本稿はその続きです。
■
4.2 Cordovaを用いてアプリを開発する
開発環境の構築とプロジェクトの導入について説明しましたので、次は実際にCordovaアプリケーションを記述する手順について説明していきます。具体的な手順以外にもあらかじめ知っておくべき基礎知識を併せて解説します。
Cordovaアプリケーションで、Cordovaが提供するネイティブ機能にJavaScriptからアクセスするには、Cordovaフレームワークが提供するJavaScript側インターフェイスであるcordova.jsを利用する必要があります。まず、このcordova.jsの利用について説明します。
cordovaコマンドを用いる場合は、モバイルアプリのアイコンやスプラッシュスクリーンや各種設定をwwwディレクトリ以下に配置しますが、これらのリソースについて説明します。
また、Cordovaフレームワークは、実行時に参照する設定ファイルを持ちます。ここではその設定ファイルの編集方法やどのような設定項目があるのかについて紹介します。
4.2.1 wwwディレクトリ以下の構造を確認する
さて、ここで一度wwwディレクトリ以下の構造を確認します。cordovaコマンドで作成したプロジェクトのwwwディレクトリの構造は以下のようになります。
| www/ |
|---|
| ├ config.xml |
| ├ css |
| ├ img |
| ├ index.html |
| ├ js |
| ├ res |
| ├ spec |
| └ spec.html |
css、img、jsなどのディレクトリには、その名のとおりアプリで利用するCSSや画像やJavaScriptが収められています。それ以外のディレクトリの概要は表4.1のようになっています。
| 名前 | 役割 |
|---|---|
| config.xml | cordovaの設定ファイル |
| index.html | アプリのエントリポイント |
| spec | specディレクトリ |
| spec.html | specを実行するHTML |
config.xmlは、Cordovaフレームワークが実行時に参照する設定が収められているXMLファイルです。アプリの実行時の設定が記述できます。
このXMLファイルのスキーマは、W3CのPackaged Web Appsという仕様に従って定義されています。
index.htmlは、アプリが起動したときに読み込まれる起動ポイントとなるHTMLファイルです。アプリは、このHTMLを起点として動作します。
spec.htmlやspecは、JavaScriptのコードをテストするためのテストフレームワークであるJasmineのためのディレクトリです。specディレクトリ以下には、アプリを記述するJavaScriptのテスト用コードが置かれます。spec.htmlは、それらのテストコードをまとめて実行するためのファイルです。
Jasmineの詳細については、以下のJasmine公式のWebサイトを参照してください。
4.2.2 index.html
cordovaコマンドラインから作成したプロジェクトでは、アプリを記述するためのHTMLなどのファイルをwwwディレクトリ以下に置きます。開発者は、このwwwディレクトリ以下のファイルを編集してアプリを実装します。このディレクトリに記述した内容は、ビルドの際にプラットフォーム特有のプロジェクトファイルを生成するために利用されます。
その中でも、wwwディレクトリ以下のindex.htmlファイルは、Cordovaが起動すると最初に読み込まれるHTMLです。一度index.htmlを編集した後、動作確認をしてみましょう。
|
$ cordova emulate ios
|
index.htmlを編集した内容が、起動したアプリに反映されているかどうかを確認してください。
4.2.3 cordova.js
Cordovaフレームワークでは、JavaScript側のインターフェイスとしてcordova.jsを用意しています。ハイブリッドアプリ開発者やCordovaプラグイン開発者は、このcordova.jsが提供するインターフェイスを通じてネイティブ側の機能にアクセスします。
wwwディレクトリのindex.htmlの下のほうを見ると、cordova.jsを読み込んでいる箇所があります（リスト4.1）。
|
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
|
Cordovaを用いたアプリでは、HTML中でcordova.jsを読み込まないと、Cordovaが提供する諸機能にJavaScriptからアクセスできません。
具体的なネイティブ機能を提供するCordovaプラグインでは開発者が利用できるJavaScript側のAPIインターフェイスを提供していますが、実際にはそれはプラグイン内部でcordova.jsが提供するインターフェイスのラッパとして機能しています。
例えば、端末のカメラ機能を利用できるCameraプラグインでは、navigator.cameraオブジェクトを用いてリスト4.2のようにカメラを呼び出します。
|
document.addEventListener('deviceready', function () {
var options = {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI
};
// camera.getPicutureメソッドを使って端末のカメラを呼び出す
navigator.camera.getPicture(function (imageData) {
alert(imageData);
}, function () {
alert('fail');
}, options);
}, false);
|
このコードではcamera.getPicutureメソッドを用いてカメラを起動していますが、その実装を見てみると、cordova/execというモジュールが利用されています。このモジュールは、Cordovaが提供しているJavaScriptからネイティブへアクセスするための共通インターフェイスを提供しています。どのプラグインもこのcordova/execモジュールを使って、自身のプラグインのネイティブコードを呼び出しています。
4.2.4 devicereadyイベント
Cordovaフレームワークを用いる際に把握しておかなければならないことの1つに、devicereadyイベントがあります。
Cordovaを用いたアプリが実行されるとき、Cordovaが提供しているネイティブ機能をHTML5側からすぐに呼び出せるわけではありません。Cordovaフレームワークは、HTMLの読み込み直後に、ネイティブとHTML5とのブリッジを確立するための初期化処理を行います。この初期化処理を行う前にネイティブ機能を呼び出そうとしてもできません。フレームワークは、この初期化処理が終わると、HTML5側にdevicereadyというCordovaフレームワーク特有のイベントを発火します。
ハイブリッドアプリ開発者は、HTML5側でdevicereadyイベントを察知した後にネイティブ機能を呼び出さなければいけません。したがって、HTMLの読み込みの際にJavaScript側からあるネイティブ機能を呼び出したいときには、リスト4.3のようにdevicereadyイベントのイベントリスナを登録して、そのコールバック内でCordovaの諸機能を呼び出す必要があります。
|
document.addEventListener('deviceready', function () {
console.log('devicereadyイベントが発火されました');
}, false);
|
devicereadyイベント以外にもCordovaアプリケーションが内部でHTMLを読み込むときには、いくつか読み込みに関連するイベントが発火されます。これらは、Cordovaフレームワークが発行するイベントではなく、レンダリングエンジンが発行する組み込みのイベントです。
HTMLが読み込まれているとき、最初に発火するのがDOMContentLoadedイベントです。
DOMContentLoadedイベントは、読み込んでいるHTMLがレンダリングエンジンによってすべてパースされたときに発火します。HTML中に含まれている外部のCSSやJavaScriptの読み込みが終わらなくてもこのイベントは発火します。ただし、そのHTML中にscriptタグで埋め込まれているJavaScriptの実行はHTMLのパース処理をブロックするので注意してください。
その次に、loadイベントが発火します。このイベントは、読み込んだHTMLだけではなく、そのHTMLが依存しているすべての関連リソースが読み込まれてレンダリングが終了したときに発火します。HTMLが依存している関連リソースとは、外部のCSSやJavaScriptやAjaxやiframe内のドキュメントなど、そのページのレンダリングに必要になるもののすべてです。
DOM要素以外のJavaScriptやCSSや画像などの読み込みが終わり、loadイベントが発火した後、Cordovaフレームワークはブリッジの初期化処理を行います。その処理が完了してJavaScript側からネイティブ側へアクセスできるようになって初めてdevicereadyイベントが発火します。
devicereadyイベントが発火するまでに、関連するイベントが発火する順番を整理すると表4.2のようになります。
| 順番 | イベント名 | 発火のタイミング |
|---|---|---|
| 1 | DOMContentLoaded | そのHTMLのすべてのDOM要素が読み込まれたとき |
| 2 | load | そのページのレンダリングに必要なリソースがすべて読み込まれたとき |
| 3 | deviceready | JavaScriptからネイティブ機能へアクセス可能になったとき |
この関連するイベントが発火するタイミングは、リスト4.4のようなJavaScriptコードで確かめることができます。
|
document.addEventListener('DOMContentLoaded', function () {
console.log('DOMContentLoadedイベントが発火しました');
}, false);
document.addEventListener('load', function () {
console.log('loadイベントが発火しました');
}, false);
document.addEventListener('deviceready', function () {
console.log('devicereadyイベントが発火しました');
}, false);
|
devicereadyイベントは必ずloadイベントの後に発行されます。このため、loadイベントの発行が遅れると、その分devicereadyイベントの発行も遅れることになります。
loadイベントは、読み込まれているHTMLの関連リソースすべてが読み込まれてレンダリングが完了して初めて発火します。
devicereadyイベントを早く発行してほしい場合には、すぐに利用しないリソースは最初に読み込まずにdevicereadyイベント後に読み込むようにしてください。そうすると、読み込みのせいでdevicereadyイベントの発火のタイミングが遅延することはなくなります。
devicereadyイベントは、HTMLの読み込み時に毎回発火します。アプリの起動時だけではないことに注意してください。
■
次回は「4.3 アプリの設定」を説明します。
久保田光則（くぼたみつのり）
東京都在住。アシアル株式会社に所属するUI/UXデザイナー兼ソフトウェアエンジニア。社内では，HTML5ハイブリッドアプリの開発に多数関わる。優れたデザインとエンジニアリングを両立したオーバークオリティなアプリケーションの開発を実現するために日々，頑張る。
アシアル株式会社（あしあるかぶしきがいしゃ、Asial Corporation）
PHPなどのサーバサイドの技術と，PhoneGapなどのスマートフォン関連を中心とした開発を手がける技術ベンチャー。HTML5ハイブリッドアプリをブラウザ上で開発できるMonacaや，PhoneGapの日本語情報を配信するPhoneGap Fanなどのウェブサービスを手がける。
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
1. Cordovaを用いた開発環境を構築する
Cordovaフレームワークを用いてハイブリッドアプリを開発するための基本的な手順を紹介。書籍転載の1本目（「Part 1《基礎編》 第4章 Cordovaを用いたアプリ開発の流れ」より）。
2. 【現在、表示中】≫ Cordovaを用いてアプリを開発する
Cordovaアプリケーションを開発する手順を説明。書籍転載の2本目（「Part 1《基礎編》 第4章 Cordovaを用いたアプリ開発の流れ」より）。
3. Cordova： アプリの設定
Apache Cordovaアプリの開発準備が整ったら、そのアプリや、iOS／Androidなど特定のプラットフォームでの挙動の詳細を設定しよう。書籍転載の3本目。
