PhoneGap 2.9.0を触ってみたよ

Titanium mobileはやってましたが、PhoneGapの方はやってませんでした。実際触ってみると、特にこれと言って難しそうなところは無く、TitaniumでのWebViewからリクエストを投げるのと大差ないように感じます。

それから、始めたばかりで良く分かってないですが、過去のバージョンではEclipseと連携しているパッケージで配布されていたようなんですが、2.9.0ではコンソールでの操作になっています。PhoneGap CLIというのが3系から含まれるようです。

では前書きはこのくらいにして、DLから書いていきます。
環境はMac OSX Lionです。

ダウンロード

公式サイトからパッケージのダウンロードします。
2013/07/17時点の最新版は2.9.0です。

解凍とパスの追加

適当な場所にファイルを解凍して、TerminalでPATHを追加します。以下はiOS用です。

$ PATH=$PATH:/path/to/phonegap-2.9.0/lib/ios/bin

libの下を見れば分かりますが、他にもandroid/blackberry/osx/windows-phone-7/windows-phone-8/windows8/などがあります。
必要なら.profileとかに記述を追加しておいてください。

プロジェクトの作成

$ mkdir phonegap_sample
$ cd phonegap_sample/
$ create . zebevogue.sample1 sample1

createは引数無しで実行するとヘルプが見れます。

$ create
Usage: /path/to/phonegap-2.9.0/lib/ios/bin/create [--shared] [--arc] <path_to_new_project> <package_name> <project_name>
	--shared (optional): Link directly against the shared copy of the CordovaLib instead of a copy of it.
	--arc (optional): Enable ARC.
	<path_to_new_project>: Path to your new Cordova iOS project
	<package_name>: Package name, following reverse-domain style convention
	<project_name>: Project name

ビルドと実行

$ ./cordova/build
...
** BUILD SUCCEEDED **

$ ./cordova/run
...
** BUILD SUCCEEDED **

Error: ios-sim was not found. Please download, build and install version 1.5 or greater from https://github.com/phonegap/ios-sim into your path. Or 'brew install ios-sim' using homebrew: http://mxcl.github.com/homebrew/

runの際にiOSシミュレーターを起動しますが、「ios-sim無いよ」って怒られたので、homebrewでインストールします。

$ brew install ios-sim
=> Downloading https://github.com/phonegap/ios-sim/archive/1.7.tar.gz
######################################################################## 100.0%
==> /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/rake install prefix=/usr/local/Cellar/ios-sim/1.7
  /usr/local/Cellar/ios-sim/1.7: 4 files, 100K, built in 9 seconds

改めて実行。

$ ./cordova/run

** BUILD SUCCEEDED **
2013-07-03 15:19:15.990 ios-sim[25182:507] stderrPath: /Users/****/****/phonegap_sample/cordova/console.log
2013-07-03 15:19:15.993 ios-sim[25182:507] stdoutPath: /Users/****/****/phonegap_sample/cordova/console.log

iOSシミュレーターが起動します。以下のスクリーンショットはシミュレーターの「ハードウェア」「デバイス」で「iPhone」に変更したものです。

ホームボタンで戻ると、アプリのアイコンが増えています。

Notification APIを触ってみる

とりあえずAlertみたいなのを出してみます。

修正するファイルはphonegap_sample/www/js/index.jsです。
onDeviceReady()は準備が整うとコールされるので、ここの下に書いておきます。

    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        app.MyAlert();
    },
    MyAlert: function() {
        alertDismissed = function () {
            // do something
        }
        navigator.notification.alert(
            'こんにちは、世界!',   // message
    	    alertDismissed,            // callback
            'こんにちは',                // title
            'はい'                           // buttonName
        );
    }

その他

Contacts APIも触ってみましたが、これと言って難しい事もなく、他もリファレンス見ていけば問題なさそうでした。IDEはあった方が良いと思いますが、私は特別必要でもないかなといった感じでしょうか。