App Store登録もOK！
JavaScriptで作るiPhoneアプリ

DashcodeプロジェクトをPhoneGapプロジェクトに組み込む

　Webアプリケーションが単体で動作するようになったら、PhoneGapのプロジェクトに関連ファイルをすべて組み込んで、いよいよiPhoneアプリケーションとしてビルドを行います。PhoneGapの中のXcodeファイルをダブルクリックして、プロジェクトを開きます。これ以降の作業は、Xcode上で行っていきます。

　PhoneGapを使ってスタンドアロンのアプリケーションを作成する手順は、PhoneGapのWikiにアップされています。

• Building a self-contained ajax application（iPhone）

　PhoneGapのプロジェクトファイルは、そのままではローカルのHTMLファイルやJavaScriptファイルを参照せず、 代わりにurl.txtに書かれたURLをオープンするようになっています。まずはこの部分を修正して、index.htmlを読み込みます。

　具体的には、GlassAppDelegate.mのapplicationDidFinishLaunching()メソッドの中を書き換えます。上記の解説ページの該当部分を参考にしてコードの書き換えを行ってください。

　ここで注意する点がいくつかあります。

• サブディレクトリに入ったCSSやJavaScriptファイルを読み込むことはできない。すべてのファイルをトップの階層にコピー。Dashcodeの出力したコードには「Parts」ディレクトリのパスがハードコートされている部分があるので検索して削除
• CSSやJavaScriptファイル、画像ファイルなどはXcodeの「Resources」にドラッグ＆ドロップして追加。たまにファイルのコピーが行われないことがあるようなので、必要なファイルがすべて一覧に表示されていることを確認
• 上記のリソースファイルは、アプリケーションのコンパイル時にアプリケーションバンドルにコピーされる必要がある。「ターゲット」「Glass」「バンドルリソースをコピー」をクリックして、追加したファイルが含まれていることを確認。含まれていない場合は、Resourcesフォルダのファイル名リストから必要なファイルを選択して「バンドルリソースをコピー」にドラッグ＆ドロップでコピー

　アプリケーションのビルド＆動作チェック

　ファイルのコピーが完了したら、プロジェクトをビルドしてシミュレータで動作チェックを行います（シミュレータではGPS呼び出し部分はスキップしています）。

アプリケーションをシミュレータで実行した様子

　うまく動作したでしょうか？

　画面が途中で止まってしまったり、意図した動作にならない場合は、まずローカルのHTMLファイルを直接Safariで開いて動作チェックをしてみてください。ファイルの欠如やパスのミスなどがあれば、ここで修正します。

　ローカルの動作に問題がない場合は、Xcodeプロジェクトへのファイルのコピーミスなどが疑われます。もう一度すべてのファイルがコピーされているか確認してみてください。

サンプルアプリケーションの公開

　今回作成したアプリケーションは、現在App Storeでの配布を目指して登録申請中です。

　登録され次第こちらにリンクを張りますのでお楽しみに。また、登録までの様子も次回のコラムでお伝えしたいと思います。

おわりに

　App Storeで短期間に大きな売り上げを達成したデベロッパが脚光を浴び、毎日のようにおびただしい数のアプリケーションが登録される様子を眺めて、あの熱狂に自分も参加したいと考えている方は多いのではないでしょうか。

　今回ご紹介したWebテクノロジーを使ったアプリケーション開発手法は、忙しくて時間の取れないエンジニアやJavaScriptを習いたてのユーザーにとって、比較的簡単な作業でアプリ開発を行えるもう1つの選択肢といえるでしょう。

　また、ベースとなるWebアプリケーションをDashcodeで開発することで、UIのiPhoneらしさを再現できます。

　もちろん、OpenGLを使った3Dアニメーションやハードウェアの限界を引き出すようなプログラミングには、従来どおりのObjective-Cによるプログラミングが必要ですが、まずはハイブリッドで開発して徐々にCの範囲を広げたり、パーツによって言語を選択したりできます。

　このコラムをきっかけに、より多くのiPhoneアプリケーションが生まれ、App Storeをにぎわすことを願っています。

□　謝辞

　Twitter検索の利用に関して、許諾をいただいた@penguinanaさんに感謝します。JSONPのコールバックへの対応もしていただき、今回のアプリケーション開発をスムーズに進めることができました。ありがとうございました。

■ ＠IT関連記事

iPhone向けWebアプリを作ろう Safari Web Content Guide for iPhoneを読み解く iPhone／iPod touch上のWebブラウザのSafariで動くWebアプリを作成し、UIを最適化するコツを紹介します 「リッチクライアント ＆ 帳票」フ ォーラム 2008/5/29

日本のインディよ！ iPhoneにカワイイ系で打って出よ ものになるモノ、ならないモノ（24）　ついにiPhoneが日本に。国内キャリアの垂直統合型ビジネスモデルが揺らぐとき、インディ系開発者が世界に打って出る商機がある！ 「Master of IP Network」フォーラム 2008/6/17

Adobe AIRでiTunes×Twitterクライアントを作った これ、俺ならこう使う（2）　iTunesで再生されている楽曲のタイトルを、Twitterアカウントに「いま聴いている曲」として投稿するAIRアプリケーション「音ログAIR」を作ってみました 「リッチクライアント ＆ 帳票」フ ォーラム 2008/8/11

Google App Engineは20％プロジェクトから生まれた Google Developer Day 2008特集（2）　プロダクトマネージャーに聞く、App Engineの成り立ちと現状、ビジネス、Amazon EC2との違い、そして日本人への期待 「リッチクライアント ＆ 帳票」フ ォーラム 2008/6/24

立薗理彦(たちぞの まさひこ) 1972年東京生まれ。1996年、慶應大学 環境情報学部卒。シャープで組み込み系のソフトウェアエンジニアとして働いた後、携帯電話メーカーのノキアで日本向け端末のリリースに携わる。 この頃、週末プロジェクトとしてiTunesでの再生履歴をネットで公開するサービス「音ログ」を開発。これをきっかけに、ウェブ業界への転身を決意してフリーに。 その後、音楽ニュースサイト「ナタリー」の立ち上げに関わり、2007年10月から技術担当取締役としてナターシャに参加。現在に至る。 最近の興味は、iPhoneでのアプリケーション開発。 趣味は、TVドラマ「Lost」を繰り返し見ること。全シーズンをすでに3回以上見ていて、ハワイでのロケ地ツアーにも2回参加。 著者つぶやき http://mshk.tumblr.com/ http://twitter.com/mshk http://friendfeed.com/rooms/sweet-tweet

1-2-3-4

INDEX
これ、俺ならこう使う（5） App Store登録もOK！JavaScriptで作るiPhoneアプリ
	Page1 プロローグ 無理してネイティブアプリを作らなくてもいい Webアプリ vs ネイティブアプリ──iPhoneアプリ開発の選択肢 ローカルWebアプリという第3の選択肢 ローカルストレージによるオフライン動作の実現
	Page2 ハイブリッドアプリケーションとは？ 早速、JavaScriptでiPhoneネイティブアプリを作ってみよう PhoneGap Big Five QuickConnect
	Page3 DashCodeとPhoneGapで「Coco Twitter」を作ってみた 今回作ったもの 事前の準備 このアプリケーションの仕組み DashcodeでWebアプリ部分を開発 DashcodeのUIライブラリを使って、ビュー部分を作成 Dashcodeフレームワーク 独自ファイルの追加 JavaScriptでコントローラを実装
	Page4 DashcodeプロジェクトをPhoneGapプロジェクトに組み込む アプリケーションのビルド＆動作チェック サンプルアプリケーションの公開 おわりに 謝辞

ご意見、ご感想は Smart＆Social 会議室へどうぞ

Smart＆Social フォーラム トップページへ