PhoneGapでiPhoneアプリ開発②
開発するアプリの概要
PhoneGapの開発環境が整ったので早速アプリの開発を開始する。なるべく簡単に作れそうなアプリが良いため、巷にあふれてる「カラーコード変換」アプリを作成する事にした。以下はその概要図。
動作イメージは以下の通り。
- ユーザーはアプリ起動後に16進の入力フォームか10進の入力フォームのいずれかにカラーコードを入力する。（両方入力したら16進が優先される）
- 入力後、画面下の[変換する]ボタンを押すと背景色が入力したカラーコードになり、画面下のスペースに補色が表示される。
- [クリア]ボタンを押すとカラーコード入力前の状態に戻る。
以上。一画面で完結する非常に簡単なアプリだが、初心者としてはこれくらいがちょうど良い。
PhoneGapのファイル構成
create直後のPhoneGapのファイル構成は以下のようになっている。（PhoneGap 2.9.0）
PhoneGapを利用した開発では基本的に「www」ディレクトリ以下にHTMLやCSS、JSファイルを追加したり編集したりしていけば良いらしい。
また、index.htmlでは「cordova.js」と「index.js」という二つのjsファイルを読み込んでいるが、必須なのはcordova.jsだけのようだ。（以前はphonegap.jsだった？）
アラートでHello,Worldの表示
画面表示は完全にHTMLとCSSで描画出来るようなので放っておくことにして、試しにJavaScriptでアラートでも表示してみようと思い、「js/index.js」を参考に以下のファイルをjsディレクトリに作成した。
[main.js]
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
navigator.notification.alert("hello, PhoneGap!");
}
};
PhoneGapではこの「deviceready」というイベントがPhoneGapのロード完了時に呼び出されるらしい。jQueryでいうところの「ready()」みたいなもののようだ。詳細は以下のサイトを参照。（※日本語だが大分古い）
deviceready – PhoneGap Documentation（日本語）
JSファイルの作成が完了したので、index.htmlの記述を変更。読み込むJSファイルをindex.jsからmain.jsに変える。
<script type="text/javascript" src="js/index.js"></script> ↓ <script type="text/javascript" src="js/main.js"></script>
この状態でターミナルからデバッグを実行。
$ cd /Users/myhome/MyProject/testApp $ ./cordova/run
正常であれば以下のようにアラートが表示される。
jQueryを試す
ついでにjQueryも試してみる。jQueryのサイトから現時点でのjQuery1.x系の最新版「jquery-1.10.2.min.js」をダウンロード。（CDNで提供されているものを読み込んでもOK？）
main.jsを以下のように書き換える。
[main.js]
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
$("h1").text("jQuery is Ready!");
}
};
また、index.htmlにダウンロードしたjQueryを読み込ませる。
読み込み順序はjQueryが先なのか、cordova.jsが先なのかどちらにすれば良いのか良く分かっていないが、ひとまずjQueryを先に読み込ませる事にした。
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="cordova.js"></script>
再度デバッグを実行。
jQueryも簡単に扱えた。
