これ、俺ならこう使う（5）

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

iPhone Twitterクライアント「Coco Twitter」

立薗理彦
2008/11/28

ハイブリッドアプリってご存じですか？ HTML＋JavaScriptでiPhoneアプリをWebアプリ的に開発しつつ、App Storeで販売できてしまう一挙両得のハイブリッド手法でCoCoTwitter作りました

プロローグ

　「今日、われわれはMacintosh、iPodに匹敵する3つの革新的な製品を発表する。ワイドスクリーンiPod、携帯電話、そしてインターネット端末。分かるかな？　実は、この3つは別々の製品じゃないんだ。3つを併せたもの。われわれはそれを、iPhoneと呼んでいる」（MacWorld 2007 Keynote Address）

　2007年のMacWorld。アップルのSteve Jobs CEOは、少し冗談を交えながら、しかし熱っぽくこの新しいデバイスを紹介しました。アップルが携帯電話を発表するといううわさは、すでに既定路線のようになっていたのですが、それでもなお会場の反応は熱狂的なものでした。

　あれから1年半。3Gネットワークに対応した第2世代機からは、独自に開発したアプリケションをiPhoneにインストールすることができるようになり、カスタマイズという新しい楽しみが加わりました。

　アプリケーションをダウンロードするための「App Store」は、すでに多くのユーザーを獲得しているiTunes Storeの仕組みを上手に利用して、ユーザーになじみやすく、デベロッパはユーザーにアプリケーションを販売して利益を得られるため、数多くのアプリケーションが登録されて盛況です。

　今回のこのコラムでは、iPhone向けにアプリケーションを開発して、App Storeで配布する方法について書きます。「これ、俺ならこう使う」のタイトルにふさわしく、通常のObjective-Cを使う方法ではなく、HTML＋JavaScriptを使う方法を模索してみました。

無理してネイティブアプリを作らなくてもいい

 

　Webアプリ vs ネイティブアプリ──iPhoneアプリ開発の選択肢

　第1世代のiPhoneが発売された際は、アプリケーションを開発したりインストールしたりすることは公式にはサポートされておらず、アップルはデベロッパにSafariで動作するWebアプリケーションを開発するように提案していました。

　現在は、アップルが提供するiPhone SDKを利用することでObjective-Cによるネイティブアプリケーションを開発できるようになっていますが、Webアプリにも開発の容易さのメリットがあります。またSafariは常駐を許されたアプリケーションなので、起動のスピードでネイティブアプリケーションを上回る場合もあり、一概にネイティブアプリケーションのみが選択肢とは限らないのが実情です。

　以下、ネイティブアプリケーションとWebアプリケーションのメリット＆デメリットを表にまとめました。

	ネイティブ アプリ	Webアプリ	ローカル Webアプリ
OS固有の機能	○	×	×
オフラインでの動作	○	×	○
動作スピード	○	△	△
開発言語	Objective-C	HTML＋JavaScript＋サーバサイド	HTML＋JavaScript（＋サーバサイド）
開発の容易さ	△	○	○
マルチプラットフォーム対応	×	○	○
App Storeでの配布	○	×	×

　Webアプリケーションは、傾きセンサやGPSからの情報取得やバイブレータ動作などのOSの機能の利用に制限があります。また、オフラインでの動作ができません。

　開発の容易さは、若干主観めいてしまいますが、コンパイルが必要でメモリ管理も必要なネイティブアプリに比べて、Webブラウザでリロードするだけで最新のコードをテストできて、基本的にメモリ管理も不要なWebアプリケーションに軍配が上がります。

　ネイティブアプリケーションの最大のメリットは、「App Storeでの配布ができる」ことで、多くのユーザーが集まるApp Storeでアプリケーションを配布でき、さらには課金もできてしまう点です。

　ローカルWebアプリという第3の選択肢

　前段の機能比較表に「ローカルWebアプリケーション」という項目があります。これは、 Safariでオンライン中に所得したHTML、CSS、画像データなどを保存して、オフライン時にも情報を閲覧できる機能です。

　iPhone 3G Wiki BlogのiPhone Safariにアプリケーションキャッシュが実装されている件という記事で知ったのですが、iPhone OS 2.1のSafariには、HTML 5のApplication Cacheという機能が実装されています。

　ブックマークをホーム画面に追加するのと同じ要領で、現在利用中のWebアプリをローカルに保存できます。サーバ側で、あらかじめ保存するファイルのリストを記したmanifestファイルを用意する必要がありますが、Webアプリケーションの弱点であるオフライン時での動作が可能になっています。

　現状では、ファイルを更新したときにアプリケーションがクラッシュするなど不安定な要素があり、実用性はまだまだという印象がありますが、ひとまずWebサービスとして公開して、気軽にローカルで使ってもらえるということから将来に期待したいところです。

　ローカルストレージによるオフライン動作の実現

　オフラインのWebアプリケーションが動作可能になっても、肝心なデータがなければ何も表示できません。また、少し複雑なアプリケーションになればユーザーの設定を保存しておく必要があるでしょう。

　iPhoneに搭載されたSafariは、HTML 5のClient-side Storageを実装していて、JavaScriptのAPIを呼び出すことで、クライアントのローカル環境に作成したデータベースを操作できます。これによって、オンライン中に取得したデータをローカルデータベースに保存して、オフライン時に取り出したり、アプリケーション終了以降も設定情報を保持たりできるようになります。

• Surfin' Safari（Safariの公式ブログ）：Webkit Does HTML 5 Client-side Database Strage
  
• Client-side Storageを使った、メモパッドのサンプル：Webkit HTML 5 SQL Storage Notes Demo　←New Noteをクリックしてみよう
  

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プロジェクトに組み込む アプリケーションのビルド＆動作チェック サンプルアプリケーションの公開 おわりに 謝辞

■ ＠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

リッチクライアント＆帳票 全記事一覧へ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）