24/7 twenty-four seven

iOS/OS X application programing topics.

UIWebView を使ってリソースバンドル内の HTML ファイルで、外部 JavaScript や CSS を読み込む

UIWebView を使用して、ローカルに存在する HTML ファイルを表示することができます。
そのとき、凝った表示を行う場合、外部 CSS や JavaScript を使用したい場合があると思います。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="json2.js"></script>


例えば、上記のように HTML ファイルと JavaScript ファイルがリソースバンドルに存在する場合は、次のように書きます。

NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]];

要するに、リソースバンドルのファイルパスを URL として渡します。


プログラム内で動的に生成するなど、HTML が文字列の場合は、下記のように、baseURL 引数にリソースバンドルのパスを指定します。

[webView loadHTMLString:htmlString baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];


ただ、 *.js ファイルの扱いには少し注意が必要で、Xcode はデフォルトで *.js の拡張子を持つファイルは、ソースファイルの扱いになり、コンパイルしようとします。

まあ、できないので上記のような警告がでます。


問題は、ソースファイルとして扱われるので、リソースバンドルに含まれないということです。
(Xcode 上はリソースに存在するように見えるが、ソース扱いなので、実際にビルドされたアプリケーションには含まれない)


この問題を解決するには、ターゲットを開いて、ビルドのルールを編集します。


上の図のように、「ソースをコンパイル」というルールの中に、*.js ファイルが含まれているので、ドラッグして「バンドルリソースをコピー」に移動します。