iOSアプリのモックアップをWebView(ローカル)で作ってみた。

今回はネットワークに繋がない端末でモックアップをインストールしたかったので、UIWebViewからローカルにバンドルしたHTMLを呼び出すだけのiOSアプリを作成しました。 もとのHTMLはテストサイトとかで作っていた画面遷移を確認する程度のWebアプリです。

  1. Single View Applicationのテンプレートで新規プロジェクト作成する
  2. UIWebViewを配置しViewControllerをdelegateに設定する
  3. ViewControllerにwebviewプロパティを定義しOutletとして接続しておく
  4. ViewControllerにUIWebviewDelegateプロトコルを実装する
  5. ViewContorllerのviewDidAppearあたりでアプリのリソースバンドル内のHTMLファイルを指定する。

NSURLを生成するときにネットワーク上のアドレスではなく、ファイルパスを渡すためURLWithStringの代わりにfileURLWithPathを呼び出す。

あと、HTMLと画像やJSなどのリソースがすべてバンドル内のルート(?)に展開されるそうなので、 ブラウザ用に作っていたものを転用する場合、HTMLやCSSのパスをバンドルされた状態にあわせて調整する必要がある。(./js/index.js -> ./index.js) (名前がかぶった時とかどうなるんだろう…検証してませんが。)

参考)http://waka.hatenablog.com/entry/2012/11/21/091037

また、JSがコンパイルするリソースとして設定されてしまうので、適宜、コピーするリソースのほうに移動してあげる必要があるそうです。コンパイルされるほうはリソースはあるけどバンドルリソースとしてアクセスできないので。

参考)http://d.hatena.ne.jp/KishikawaKatsumi/20091229/1262052856

見せられませんが、JSでサクッとつくったものがわりと綺麗にアプリっぽくなったので全部出来る人がつくるぶんにはいい方法だな、と思いました。