Hatena::Groupiphone-dev

Miyakeyの日記@ウェブデザイナー

2009-10-17

webviewでウェブアクセスせずに画像を表示する方法

15:17

解説をウェブビューで作れないかと考えて、プロジェクトの中に画像を入れてHTMLファイルを作って見たのですが、どうも画像にアクセスできない、、、。

HTMLファイルにアクセスする事はすぐに出来ましたが、サンドボックス内とは言え、htmlファイルから画像を引っ張って来れないようです。

悩んでいたのですが、検索したら意外と簡単に解決方法が。

http://dblog.com.au/iphone-development/iphone-sdk-tutorial-build-your-very-own-web-browser/

要はbase64エンコードしてHTMLファイル内にテキストで書き込んじゃえば出来るって話です。

エンコードはここで出来るようです。

http://www.abluestar.com/utilities/encode_base64/index.php

無事出来たのは良いんだけど、もし、もっと簡単な方法があったら教えてください。

するとwebviewで使う物は全て1ファイルでメンテしないといけないってことか。

Javascriptも埋め込まないといけないってことですね〜。

追記 18:55

webviewは動作重いですね。

プロジェクトに入れてしまえば、ウェブアクセスが無いから軽くなると踏んでいたのですが。

そうでもないようです。

解説もインターフェースビルダーで作った方が軽くすむのかな。



追記 10/19 0:21

できました!!

同じブログに答えが載っていました。

http://dblog.com.au/iphone-development/loading-local-files-into-uiwebview/

どうやらbaseURL:を設定すれば良かったようです。nilにしてました。

以下のコードで<img src="img/1.png" />の画像を取得できました。cssとかjavascriptはまだ試してないです。

NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSFileHandle *readHandle = [NSFileHandle fileHandleForReadingAtPath:path];

NSString *htmlString = [[NSString alloc] initWithData: 
						[readHandle readDataToEndOfFile] encoding:NSUTF8StringEncoding];

//baseURL用のパスの変換
NSString *imagePath = [[NSBundle mainBundle] resourcePath];
imagePath = [imagePath stringByReplacingOccurrencesOfString:@"/" withString:@"//"];
imagePath = [imagePath stringByReplacingOccurrencesOfString:@" " withString:@"%20"];

NSString *baseURLResult = [NSURL URLWithString:[NSString stringWithFormat:@"file:/%@//",imagePath]];

webView = [[UIWebView alloc] initWithFrame: CGRectMake(0.0f, 10.0f, 320.0f, 380.0f)];
webView.backgroundColor = [UIColor whiteColor];
[self.webView loadHTMLString:htmlString baseURL:baseURLResult];

[window addSubview:webView];

[htmlString release];

謎なのが/を//に置き換えている所。UIWebViewで正しく動作させるために必要だそうです。

勉強になりました。



追記 2011/01/11 19:07

岸川さんの指摘で上記のような変換は必要ないことがわかりました。

アプリ内部においたHTMLファイルも相対指定で画像を表示できるようになりました。

ありがとうございました。

NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSFileHandle *readHandle = [NSFileHandle fileHandleForReadingAtPath:path];

NSString *htmlString = [[NSString alloc] initWithData: 
						[readHandle readDataToEndOfFile] encoding:NSUTF8StringEncoding];

webView = [[UIWebView alloc] initWithFrame: CGRectMake(0.0f, 10.0f, 320.0f, 380.0f)];
webView.backgroundColor = [UIColor whiteColor];
[self.webView loadHTMLString:htmlString baseURL:[NSURL fileURLWithPath:path]];

[window addSubview:webView];

[htmlString release];

horigoodhorigood2009/10/17 19:29うちのアプリでは、画像も普通に表示できていますが...。
何か、同じようなトラブルで引っかかったような記憶もあるのですが、かなり前のことなもので、忘れてしまいました。orz
お役にたてなくて申し訳ありませんが、表示できていると事実だけ、お知らせしておきます。

MiyakeyMiyakey2009/10/18 01:27>horigoodさん
有難うございます。
出来るとなれば調査が足りなかったですね。
一頁位だったら上記の方法でもよさそうですが、数が増えるとちょっと厳しいですね。
アプリ内でサイトが作れると。
物によってはかなり楽に作れると思いまして。(^o^)

ktakayamaktakayama2009/10/20 21:14多分ですね、xcode に突っ込んだファイルは全部同じディレクトリに展開されるので、<img src="1.png" /> みたいにやると出ると思います。

MiyakeyMiyakey2009/10/20 23:32>ktakayamaさん
コメントありがとうございます。

そう思って、それもやってみたんですが結果的にダメだったんですよね。

画像はimgフォルダにまとめて“追加したフォルダにフォルダ参照を作成する”というオプションで追加しています。
そうするとimgフォルダの階層を認識してくれるみたいで、img/1.pngでちゃんと画像が表示されていました。

ちなみに“追加したフォルダを再帰的にグループを作成する”にするとktakayamaさんのおっしゃる通りに、1.pngじゃ無いとアクセスできないようです。
(ビルドしちゃうとフォルダ階層なんて関係なくなっちゃうので、実はフォルダ分けする必要はなさそうですが)

サンドボックス内のファイルは file://ではじまる直接指定じゃないとアクセス出来ない様に見えますね。
今のところですが。

んだなんだな2010/02/27 17:00まったく同じことを悩んでいたので、助かりました。画像表示できました。ありがとうございました。

岸川克己岸川克己2011/01/10 21:36URLを作るところはそんなややこしいことをしなくてもfileURLWithPath:メソッドでOKです。
僕は下記のコードでやってます。これでリソースバンドルからの相対指定でOKです。

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

MiyakeyMiyakey2011/01/11 18:58>岸川さん
ありがとうございます。
たしかにその通りでした。

相対指定で出来る様になりました。
上のコード直します。

わざわざURLでやらなくて良かったんですね。
勉強になりました。