Webアプリをネイティブアプリ化する (6/6)

これで、Webサイトに公開しているWebアプリをWevViewに埋め込んで表示させるのはできるようになりました。が、これだとURLがわかれば普通にWebブラウザからアクセスできてしまい、「わざわざアプリを使う」意味がなくなる、と思う人もいることでしょう。またWebサイトを利用する場合、サイトのアクセスが遅かったり、時にはサーバーがダウンしたり……といった場合にはアプリも動かなくなってしまいます。

Webアプリのファイル類をまるごとネイティブアプリ内に持たせて表示させる（つまりネット上のWebサイトにはアクセスしない）ようにすれば、一見したところは完璧なネイティブアプリとなります。これをやってみましょう。

1. Webアプリをファイルに出力する
まず、Dashcodeの「実行と共有」ボタンをクリックし、「ディスクに保存...」ボタンをクリックして、Webアプリをファイルとして保存しておきましょう。場所はどこでもかまいません。これで、アプリ名のフォルダにファイルをまとめる形で保存がされます。ここでは「sampleapp」というフォルダ名で保存されている、という前提で説明をしていきます。

2. Xcodeプロジェクト内にファイルをコピーする
先ほど作成したFirstNativeAppプロジェクトのフォルダをFinderで開いてください。開くと、「FirstNativeApp.xcodeproj」というファイルと、「FirstNativeApp」というフォルダが用意されているはずです（Xcode 4の場合）。この「FirstNativeApp」フォルダの中に、先ほどのWebアプリのフォルダ（「sampleapp」フォルダ）をそのままコピーしてください。

3. プロジェクトにフォルダを組み込む
FirstNativeAppプロジェクトをXcodeで開きます。そして、「File」メニューから「Add Files to "FirstNativeApp"」というメニューを選んでください。これは、ファイルやフォルダをプロジェクトに追加するためのものです。メニューを選ぶと画面にファイルやフォルダを選択するためのファイルダイアログが現れるので、先ほどの「sampleapp」フォルダを選んで「Add」ボタンを押します。これで、プロジェクトの中に「sampleapp」というフォルダが追加されます。

4. ソースコードの修正
最後に、FirstNativeAppViewController.mを開き、先に追加したviewDidLoadメソッドを修正しましょう。下に掲載したリストのように書き換えてください。（★マークの文が、修正したところになります）

以上の修正を終えたら、プロジェクトをビルドし、エミュレータで実行してみましょう。ちゃんとWebアプリの画面が表示され、動くはずです。ネイティブアプリ自身に、表示するWebアプリのファイルをすべてもたせてしまえば、ネットへのアクセスなど一切不要ですし、表示速度もほぼ瞬時です。


――これで、iPhoneのアプリ開発の、おそらくもっとも簡単な方法をひと通りマスターしたことになります。すなわち、「Dashcodeを使って、HTMLとJavaScriptでWebアプリを作り、それをもとにネイティブなアプリを作る」という方法です。もちろん、Objective-Cで書いたアプリはネイティブコードで実行されますが、WebアプリベースではJavaScriptで動きます。動作速度も違いますし、ハードウェアにアクセスするような高度なことはできません。反面、アプリのバージョンアップなどせずとも常に最新の内容を表示させることができますし、サーバー側にプログラムを置いて連動させるなどすればスマートフォン単体ではできないようなことも実現可能でしょう。

少なくとも、「Objective-Cなんて難しいもの、とても覚えられないよ」と、iPhoneアプリ開発を諦めていた人にとっては、この手法は朗報となるはずです。まずは、Webアプリで腕試し。人気が出たら、ネイティブ化。これが、いまどきのiPhoneアプリ開発手法かも？

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※FirstNativeAppViewController.mの修正

- (void)viewDidLoad
{
  [super viewDidLoad];
	NSString *path = [[NSBundle mainBundle] // ★
			pathForResource:@"/sampleapp/index" ofType:@"html"]; //★
	NSURL *url = [NSURL fileURLWithPath: path isDirectory:NO]; //★
	NSURLRequest * request = [NSURLRequest requestWithURL: url];
	[webview1 loadRequest:request];
}