ちょっと前に一部の界隈で話題になったHTML+JavascriptでiPhoneアプリ作成を始めてみた。

まずはこの辺（＠ITの記事）を参考に・・・。
いくつかのライブラリが出ているようだ。。。

・PhoneGap
・QuickConnect

というのが良さげだ。

が、しかしQuickConnectはライセンスがLGPL。。。
これはAppStoreで販売・配布しようと思うと制限がありすぎ(>_<;)

一方のPhoneGapはMITライセンス。
これなら大丈夫！
ということでPhoneGap採用！


上記の@ITの記事では、簡易RADとしてのDashCodeを利用してまずHTMLを作成しているが、
この方法だと、iPhoneSDKを十分に使いこなせなさそうだったので、
Xcodeで最初から作るという前提で、
不定期に記事を書いていきます。


まずはXcodeをインストールしてください。ちなみにMacOSX10.5（Leopard）じゃないと後述のiPhoneSDKがインストールできないので、違う人はまずOSを買ってきましょう(^-^;

XcodeはOSのCDの中にあります。


はい、次。iPhoneSDKをインストールします。

だいたいここまでで、1時間くらい要します。XcodeとiPhoneSDKのアップデートはちょくちょくチェックしておいたほうがいいです。
筆者は、iPhoneSDKをアップデートしていなかったがために、PhoneGapのサンプルがビルドできないという「症状」に4時間近く悩まされて今いました(^-^;


じゃ、ここでPhoneGapを登場させます。
ダウンロードして解凍してできたディレクトリの中に「iPhone」というディレクトリがありますので、
その中にXcode用のプロジェクトファイルがあります。
「PhoneGap.xcodeproj」を開きます。
もうひとつプロジェクトファイルがありましたが、
筆者の環境ではこちらはなぜか開きませんでした。

公式のwikiに従って、下準備をします。

ここで一回テストでビルドしてiPhoneシミュレータを走らせてみましょう。
Hello!Wordld!が表示されれば、準備完了！


あとは、index.htmlに改良を加えていけばいいわけですが、
いつものHTMLアプリケーションの感覚で、

<a href="javascript:;" onclick="test();">TEST</a><br />
<div id="SET"></div>
<script type="text/javascript">
function test(){
document.getElementById(‘SET’).innerHTML = ‘test!!!’;
}
</script>

って書いたら、大変なことになりました。
こまかい説明はしませんが、
<a>タグを書くとiPhoneシミュレータが落ちますんで使わないほうがいいでしょう。
テキストにonclick属性などをつけたい場合は、
<span>タグを利用します。

画像は、Xcode上で、Resourceディレクトリ内にコピーしてやる事で利用できるようになります。
あくまでコピーです。デフォルトの状態でドロップすると参照になってしまいます。
これでは利用できないので注意してください。
またフォルダの利用は不可です。
かならずindex.htmlファイルと同階層に置く必要があります。
おそらく画像だけでなくJS・CSSファイルもだと思われます。（現時点で未確認）

画像の呼び出しは通常通り、
<img src="ファイル名" />
です。
画像にonclick属性を設定するときは、<a>タグを利用せず、<img>タグの属性とします。

ということで大体全体像がつかめたところで眠くなったので終了。。。zzz

次回はObjective-Cのクラスにアクセスできるのかをやってみますねー。
あと、画像のない記事ですまぬ。