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 ); }