Webリソースの概要
プロジェクトを作成した初期状態ではリスト5のようにWebリソース（wwwフォルダ）はなっています。
Apache Cordovaではこのフォルダに開発したJavaScriptなどを追加していきます。
www/
├── css
│ └── index.css
├── img
│ └── logo.png
├── index.html
└── js
└── index.js
初期状態では、js/index.jsについては一部コメントなどを削除していますが、リスト6のようになっています（Visual Studio 2015で作成した場合は、script/index.jsで内容も多少異なります）。
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false); // （1） Apache Cordovaの準備が整った状態のイベントを取得
},
// deviceready Event Handler
onDeviceReady: function() { // （2） 準備が整った時に実行されるメソッド
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
// : （省略)
console.log('Received Event: ' + id);
}
};
app.initialize();
ここで、（1）のようにdevicereadyイベントを取得して、そのイベント取得後にすべての処理を開始しています。Apache Cordovaでは通常のブラウザ上で実行されるWebアプリと違い、図4に示すようにネイティブ側でも初期処理が行われます。これらの初期処理の完了通知がdevicereadyイベントです。このイベント通知の後でないと、先ほど導入したカメラ機能などは使えません。従って、必ずこのイベント取得後に処理を行うようにします。
このdevicereadyイベント以外にも、よく利用するイベントに表1のイベントがあります。
| イベントの種類 | イベント名 | 説明 |
|---|---|---|
| バックグラウンドイベント | pause | アプリがホームボタンや他のアプリなど起動などによりバックグラウンドになったときのイベント |
| フォアグラウンドイベント | resume | アプリがバックグラウンドから、フォアグラウンドになったときのイベント |
| バックボタンイベント | backbutton | デバイス側のバックボタンが押された時のイベント |
これ以外にもイベントはありますが、これらのイベントは実際のアプリ開発ではよく利用しますので、最低現、これらは覚えておくとよいでしょう。
それ以外のイベントはこちらを参照してください。
HTMLファイル作成時の注意点
続いて、サンプルアプリの実装を行っていきます。まず、HTMLをリスト7のように作成します。今回は、1つのHTMLで完結しているので、画面遷移などはありません。実際のアプリでは複数の画面があり、それらの画面を遷移する必要があります。aタグなどを用いてhtmlファイル自体を分ける事も可能ですが、アプリという性質上、毎回、初期化処理や必要なリソースを読みこむ必要が生じてしまいますので、SPA（シングルページアプリケーション）として作成する方が好ましいでしょう。SPAアプリを作る方法はいくつかありますが、Apache CordovaとAngularJSの組み合わせは非常に実績が多い組み合わせです。筆者によるAngularJSの解説記事「AngularJSではじめるJavaScriptフレームワーク開発スタイル」なども参考にしていただけると幸いです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta charset="UTF-8"> <!-- （1） 文字コードの指定 -->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="vendors/jquery-2.2.1.min.js"></script> <!-- （2） jQueryの追加 -->
<script type="text/javascript" src="vendors/bootstrap/js/bootstrap.min.js"></script> <!-- （3） Bootstrapの追加 -->
<link rel="stylesheet" type="text/css" href="vendors/bootstrap/css/bootstrap.min.css">
<title>Sample Camera App</title>
</head>
<body>
<div id="device-not-ready"> <!-- （4） 初期化前の表示 -->
<span>デバイスはまだ準備中です</span>
</div>
<div id="device-ready" style="display: none"> <!-- （5） 初期化後の表示 -->
<div>デバイスの準備が整いました</div>
<button class="btn btn-primary btn-block" id="camera-call">カメラを起動</button> <!-- （6） カメラの起動ボタン -->
<img id="image" src=""> <!-- （7）カメラで撮った写真の画像ファイル -->
</div>
<script type="text/javascript" src="cordova.js"></script> <!-- （8） cordovaの初期化JavaScriptファイル -->
<script type="text/javascript" src="js/index.js"></script> <!-- （9） 実際のアプリ機能が実装されるJavaScriptファイル -->
</body>
</html>
気を付けるべきポイントとしては、（1）のように文字コードの指定は忘れないようにしてください。iOSの場合にはこの指定がないと文字化けするようです。
Webリソースはサーバから読みこまれているわけではないので、HTTPヘッダのContentType情報が取得できるわけではありません。
端末側ではHTMLに文字コードの指定がないと正しい判断はできませんので注意してください。
また、今回は（2）、（3）のようにjQueryとBootstrapを使用します。今回は、それほど複雑なアプリではありませんのでjQueryを使いますが、通常のアプリを作るときにも何らかのJavaScriptのフレームワークを使う事が多くなると思います。これらのファイルも端末から読みこまれますので、wwwフォルダ内部においてください。
（4）がCordovaの初期化（devicereadyイベント取得前）の表示部分で、（5）が初期化終了後の表示部分です。（6）カメラの起動ボタンと、（7）画像の表示はその内部に配置しています。ここまでは、通常のHTMLとほぼ同様ですので、非常に分かりやすいと思います。
続いて、（8）のcordova.jsですが、こちらはwwwフォルダにはありません。実は、このwwwフォルダは図5に示すようにアプリのビルド時などのタイミングで各プラットフォーム毎のWebリソースフォルダにコピーされたあとに実際のアプリとして配置されます。cordova.jsは各プラットフォーム毎に内容が異なりますので、そのコピー先のフォルダにはあります。
そして、最後に（9）は今回のサンプルアプリの機能を実装するためのJavaScriptファイルです。
