酢ろぐ!

カレーが嫌いなスマートフォンアプリプログラマのブログ。

WebBrowserコントロールはData URI Schemeもサポートしていますよ

Windows Phone OS 7.1からWebBrowserコントロールでもData URI Schemeを使えるようになりました。Windows Phone OS 7.0のIE MobileのレンダリングエンジンがIE7相当、7.1はIE9相当という事情もありそうです。

Data URI Schemeは、IETFにて制定された仕様(RFC2397)で、例えばimgタグから画像を参照する場合は下記のようにURIを指定していました。

<img src="http://example.com/hoge.jpg" />

Data URI Schemeがサポートされたことによって、画像データを「data:image/png;base64,iVBOR…(中略)…ORK5CYII=」とURI形式で表現出来るようになりました。

<img src="data:image/png;base64,iVBOR…(中略)…ORK5CYII=" />

メリットとしては、htmlファイルをダウンロード後に画像ファイルをダウンロードしにいく必要がなくなるという点でしょうか。デメリットとしてはhtmlファイルのサイズが大きくなってしまう点ですが、日本では回線速度の向上やWi-Fiの普及によって気にならないと思います。

以下のようなHTMLを用意しました。全文は載せられないのでこちらのテストページのソースを見て頂けるでしょうか。

<html>
  <head>
    <meta name="viewport" content="width=device-width"/>
    <meta name="viewport" content="user-scalable=no"/> 
  </head>
  <body>
    <p><img width="125" height="125" 
      src="data:image/png;base64,iVBORw0KGgoAAAANSU
           ……(中略)……
           ORK5CYII=" /></p>
    <p>テストページです。</p>
  </body>
</html>

今回はソースコードはあまり重要ではなく、OnNavigatedToでWebBrowser.Navigateメソッドを呼んでいるだけですので省略します。

画像ファイルをBase64形式の文字列への変換は、フリーウェアのツールを使って出来ます。オンラインツールも数多く存在しています。下記のサービスもそのひとつです。

(蛇足)

もっとも.NET Frameworkの技術を使うのであれば、System名前空間のConvert.ToBase64Stringメソッドを使って、byte型配列からBase64形式の文字列へ変換も可能です。

WebBrowserコントロールでローカルのコンテンツを表示する」にて、WebBrowser.NavigateToStringメソッドで表示させたHTMLからローカルリソースの画像ファイルを「<img src="hoge.jpg" />」のような形で参照する事が出来ません。

ローカルリソースをBase64形式へ変換して、html文字列に差し込んで、WebBrowser.NavigateToStringメソッドでhtmlを表示させることをしても良いかもしれません。