アプリ開発欲が爆発したので余韻が続いているうちに作ってしまおうと。ちょっといじってなかったら PhoneGap の本体も Xcode もバージョンアップしていましたね。テストビルドしかしてなかったので、前のを消して2.2に入れ替えました。アップグレードしたとは言えないな…

ひとまず 2.2 でもテストプロジェクトを作って実行すると、エラーが。

画像がないよ!

missing Default-568h@2x.png というエラーが表示されます。

Retina 対応するための画像が足りていないようですが、Yes で進めば黒い適当な画像を充ててくれるのでエラーはなくなります。No を選んだ場合は自分で用意する必要があります。あとで差し替えられますし、Yes で進めて良いのではないでしょうか。

その命令は廃止予定だよ!

“invokestring” is deprecated というエラーが3箇所ほど表示されます。全部コメントアウトしてしまいましょう。

1つ目は Classes の MainViewController.m の下記、/* 〜 */ の部分です。

2つ目は AppDelegate.m の下記の部分。// でコメントアウトしたらどちらも保存しておきます。

これで3つのエラーが無くなります。

ホワイトリストを入れておきます

最初は外部サイトにアクセスできない状態なので、ホワイトリストに「*」を入れてすべて通すようにします。
プロジェクトフォルダ内、www や .xcodeproj と同じフォルダにプロジェクト名のフォルダがあります。 その中に Cordova.plist がありますのでダブルクリックするなりして普通に開きます。

ExternalHosts に[+]マークをクリックして項目を追加し、item0 に「*」(半角アスタリスク)を追加して保存。これですべての外部にアクセスできるようになりました。

あとは www の中身をガシガシいじって画面を作ります。せっかく jQuery Mobile 1.2 が出てるから活用しよっと。

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) の日本語コミュニティ

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