15. 9月 2012 · 1 comment · Categories: アプリ開発 · Tags:

Ti でアプリを作ろー!と決心して早数ヶ月…なんていうかもう、わからないところもわからなくなっているのと、作りたいアプリが Ti 向けではないような雰囲気もあったので、アプリ開発のモチベを上げるためにも PhoneGap をいじってみることに。

情報が古くなるスピードがかなり早いようで、私が DL したのは PhoneGap 2.0.0 でした。色々なサイトを拝見しながらのインストールメモ。ちなみにまだ Mac の常識に慣れてない。

Apache Cordova API Documentation – Getting Started with iOS を意訳。
(ちなみに「超訳」って言おうとしたら、アカデミー出版の商標登録なんですなー)

必要なもの

・Xcode 4.3以上
・Xcode Command Line Tools
・Mac OS X Lion か 10.7 以上
・必要に応じて:
・Apple iOS デバイス(iPhone、iPad、iPod Touch)
・iOS デベロッパ証明書

iOS SDK と Apache Cordova のインストール

・Mac App Store から Xcode をインストール。
・Xcode Command Line Tools を下記の手順でインストール。
(Xcode を起動し、Xcode > Preferences > Downloads > Components で Command Line Tools の Install ボタンをクリック)
・Apache Cordova の最新版をダウンロード。
・phonegap.zip を解凍すれば、Apache Cordova iOS は lib/ios の中にあります。

新しいプロジェクトの作成

・「Cordova-2.0.0.pkg(インストーラ)」を実行して、最後まで進みます。
・bin フォルダー(ソースか .dmg のどちらかから)をハードドライブ上にコピーします。
(アプリケーション > phonegap > bin としてコピーした)
・ターミナルを起動します。(アプリケーション > ユーティリティ の中)
・Dock のターミナルアイコンに bin フォルダをドラッグします。新しいターミナルウインドウが起動するはずです。
・ ./create と入力して Enter。
Phongep のインストールフォルダに project フォルダを作って、そこでやってみることに。

(./create /Applications/phonegap/project/HelloWorld com.HelloWorld HelloWorld な感じ。
/Volumes/Cordova-2.0.0/bin/replaces: line 28: tmpFile: Read-only file system
mv: tmpFile: No such file or directory とか出た場合、ハードディスクにコピーされてない可能性大なので見直すこと)
・できたフォルダ内の .xcodeproj を起動します。

シミュレーターを起動する

・ツールバーの Scheme のドロップダウンメニューで、
Target → HelloWorld、Active SDK → iOS [version] Simulator を選択します。
(iPad 4.3 Simulator を選んでみた。More Simulators を選べば他のバージョンも選択できます)
・Run ボタンをクリック!シミュレーターが起動します。

接続デバイスで起動する

・Finder の HelloWorld に戻って、リソースグループ(.xcodeprojと同じ階層にある HelloWorld)の中にある HelloWorld-info.plist を開きます。
・アップルまたは独自のバンドル識別子によって提供される識別子を BundleIdentifier に変更します。
(もし開発者ライセンスを持っていたら、アプリケーションに登録して Assistant を実行できます)
・ツールバーの Scheme のドロップダウンメニューで Target として HellWorld を選択します。
・上記の右側の Active SDK として使用しているデバイス名を選択します。
(USBに接続されたデバイスが必要になるかもしれません)

結果

・緑色の “device is ready” というメッセージが点滅している、以下のような画面を見ることができるでしょう。

9/16追記:
PhoneGap2.0の日本語解説サイトがリニューアルしてた!

PhoneGap Fan – PhoneGap (Cordova) の日本語コミュニティ

うん、やっぱりわかりやすい。


1件のコメント

  1. ( ´・ω・`)古い情報見てた。こっちらしい。 http://t.co/53sUUW2y