Home > 技術 > MacOSX LionにPhoneGapをインストールしたときのメモ(2012-02-09時点) - iPhone/Android対応

MacOSX LionにPhoneGapをインストールしたときのメモ(2012-02-09時点) - iPhone/Android対応

PhoneGap.png

iPhone版

PhoneGapもTitanium Mobile同様、結構ググると情報が古い。
特にXCodeが3から4に上がったとこで、かなりUIも変わっているので、昔の情報はあんまり役に立たない。

なので、PhoneGapのサイトにあるGet Started Guideを見ながらいろいろ試してみました。
Get Started Guide « PhoneGap

PhoneGapをダウンロードする

Download « PhoneGapよりDownloadボタンをクリックし、PhonGapをダウンロードします。

現時点(2012-02-07)では1.4.1のようです。
zipファイルを解凍します。

PhoneGapをインストールする(iOS版)

以下のディレクトリのdmgファイルをダブルクリックします。

/phonegap-1.4.1/lib/ios/PhoneGap-1.4.1.dmg

すると、PhoneGap-1.4.1.pkgファイルが出現するので、次へ次へを押してインストールします。

XCodeでPhoneGapプロジェクトを作成する

XCodeのメニュー「File→New→New Project」を選択します。
以下のようにPhoneGapプロジェクトを選択し、プロジェクトを作成します。

Xcode-2.png

"Product Name"と"Company Identifier"を入力します。
とりあえず、僕は以下の感じでやりました。
Company Identifierはご自分のBundle identifierを入力してくださいね。
(ゆくゆく実機で動かすため)

Xcode.png

何はともあれRunさせる

Xcode-3.png

↑の画像ようにiPhoneのシミュレータでRunボタンをクリックしてみたところ、
以下のエラーが出ちゃいました。

スクリーンショット 2012-02-07 16.15.23.png

確かに、

Next step is IMPORTANT! Drag the www folder into Xcode 4. You can't just drag the www folder into your app's folder. It needs to be dragged into Xcode 4!! In my case I would drag it and drop it on HiWorld shown below.


via: Get Started Guide « PhoneGap

と、どうやらwwwというフォルダがないからプロジェクトに追加してね的な話のようです。
ここも、過去のPhoneGapでは、wwwフォルダがデフォルトであったりしてたようで、ググるとそっちが出てきてちょっと困ってしまいました。

そしていろいろぐぐっているとドンピシャな記事が、

  1. XCodeの左ペインのプロジェクトのアイコンを右クリック

  2. Add files to プロジェクト名...を選択

  3. 作成したプロジェクトのフォルダの中にwwwというフォルダがあるので選択

  4. 表示されるダイアログの下の方に「Create folder references for any added folders」というのがあるので選択してAddボタンを押す

  5. XCodeの左ペインの中に青い色でwwwフォルダが表示される

  6. この状態でビルドすればSimulatorでindex.htmlの内容が表示されます


via: [PhoneGap] PhoneGapでwwwフォルダがない | スタックスリー開発奮闘ブログ

Xcode-1.png

これで、wwwフォルダがXCode上に表示され、かつビルドが通るようになりました!
(なんなんだ、このワンステップは。。。)

スクリーンショット 2012-02-07 16.23.20.png

実機で動かす場合

プロビジョニングファイルの作成

ぶっちゃけこのステップが一番面倒なんですが、やらないとダメみたいなので、やるしかないですね。
以下の記事を順番にやっていくと、いつのまにか終わっています。
ASCII.jp:JavaScriptでiPhoneアプリ開発!NimbleKit入門|古籏一浩のJavaScriptラボ

そしてiPhoneをつないで、XCodeの「Window→Organizer→DEVICES」にて
Use for Development
をクリックすると、これまたいつの間にかiPhoneの認証が終わってる!イエス!

iPhoneの実機での動作確認

iPhoneが繋がっている状態なら、XCodeのシミュレータのところに自分のiPhoneの名前が出ているので、それを選択してRunするだけ。
これで、自分のiPhoneでアプリが動き出す。


Android版

必要なものをセットアップ

Android版はXCodeは使いません。
なので、eclipseのセットアップをする必要があります。

eclipseは3.7を使って、Mac版のAll in one eclipseはないので、以下の記事をもとに自力で作ります。
MacでPleiades All in One Eclipse - Archit!!
そんなに難しくないので、手順通りに行なってください。
(All in oneを求めていない方は、eclipse単体でOKです)

eclipse以外に以下のものが必要になりますが、これはPhoneGapでAndroidアプリを作るための基礎知識(1/3) - @ITこの記事がすごく参考になります。
セットアップしちゃいましょう!

  1. Android SDK
  2. ADT Plugin
  3. PhoneGap(すでのiPhoneのほうでダウンロードしていますね)

Android Projectを作成し、PhoneGapに必要なファイルを配置する

eclipseの「File→New→Other」と選択し、Androidの配下にあるAndroid Projectを選択します。
プロジェクトが作成されましたら、以下のようにphonegapの必要なファイルをコピーしてください。

assetsフォルダの下にwwwフォルダを作成
「phonegap-1.4.1/lib/android/phonegap-1.4.1.js」をコピー
index.htmlを作成
プロジェクト直下にlibsフォルダを作成
「phonegap-1.4.1/lib/android/phonegap-1.4.1.jar」をコピー
resフォルダの下にxmlフォルダを作成
「phonegap-1.4.1/lib/android/xml/plugins.xml」をコピー

あとは、phonegap-1.4.1.jarを右クリックしてBuild PathからAdd to Build Pathを選択します。

最終的にこんな感じです。
Java - phonegap_assets_www_index.html - Eclipse - _Users_hisamatsu___dev_workspace.png

これでベースは整いました。

Android ProjectをPhoneGap仕様にする

AndroidManifest.xml

ここで一点注意ですが、uses-sdk android:minSdkVersionに9と入れていますが、これは2.3.2を意味しています。
Android SDK Managerでは2.3は2.3.3しかダウンロードできないため、ここで2.3.2を許容しておきます。
(というかそもそもuses-sdk android:minSdkVersion書かなければいいのかな)

src/PhonegapActivity.java

assets/www/index.html

phonegap-1.4.1.jsファイルはjsというフォルダの中に配置しました。

何はともあれRunさせる

プロジェクトを右クリックして「Run As→Android Application」を選択します。
ちょっと時間がかかります。

スクリーンショット 2012-02-09 14.10.07.png

ちょっといいなと思ったのが、一度シミュレータが起動したらそのまま閉じないでおいて、
index.htmlの修正をしても、もう一度「Run As→Android Application」をするだけです。
これかなり速いです。
なので、のっけのシミュレータの起動だけは結構重いですが、その後の修正点の反映は速いかもしれません。

Androidの実機での動作確認

Android端末の設定で、「アプリケーション→開発→USBデバックにチェックをつけるだけ。
これで、プロジェクトを右クリックして「Run As→Android Application」を選択すると、実機側でアプリが起動する。
簡単!

■関連記事
MacOSX LionにTitanium Mobile(Studioも)をインストールしたときのメモ(2012-02-06時点) - iPhone/Android対応

■参考リンク
以下のリンク先から今回の記事のヒントを大量にいただきました。
ありがとうございます!
PhoneGapでAndroidアプリを作るための基礎知識(1/3) - @IT
PhoneGapを試してみる | Classmethod.dev()
インストール方法(Android編) | PhoneGap Fan

PhoneGap 入門ガイド (Smart Mobile Developer)
アシアル株式会社
翔泳社
売り上げランキング: 225899

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1282
Listed below are links to weblogs that reference
MacOSX LionにPhoneGapをインストールしたときのメモ(2012-02-09時点) - iPhone/Android対応 from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > MacOSX LionにPhoneGapをインストールしたときのメモ(2012-02-09時点) - iPhone/Android対応

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top