酢ろぐ!

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

Windowsストアアプリでアプリ内リソースのhtmlを表示させる (ms-appx-web編)

WebViewでアプリケーション内のリソースにhtmlファイルを表示させる場合、NavigateToStringメソッドを使えばいけそうな気がしたのですが、imgタグを含むhtmlファイルを表示させたいのもあって、Twitterで質問を投げました*1

……え?ms-appx-webっていうのがあるの?

実際にやってみた

ソリューションエクスプローラーで見た場合、下図のような構造にしました。


help.html
img
└─Logo.png

help.htmlの中身は以下のようなものを想定しています。文字だけではなくてimgタグ付きです。

<body>
これはヘルプですよ。</br>
<img src="./img/Logo.png" /></br>
↑に画像が入ってます。</br>
</body>

今回はボタンがクリックされたら、WebViewのSourceをアプリケーション内リソースのhelp.htmlに遷移するようにします。

アプリ内のリソースを指す場合は、通常ms-appx:スキームを利用しますが、ms-appx:スキームでhtmlファイルを指定した場合、WebViewではそのスキームを開くことができないので受け付けてもらえません。

WebViewでアプリ内リソースのhtmlファイルを開く場合は、ms-appx-web:スキームを利用しなければいけません。

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    webView.Navigate(new Uri("ms-appx-web:///html/help.html"));
}

上記のサンプルコードを実行すると、下図のように表示されました。imgタグまでバッチリ再現されています!

注意点

このTipsの注意点としては、ms-appx:スキームまたはms-appxdata:スキームの場合も同様にWebViewでは受け付けてもらえません。すなわち、ms-appx-web:スキームを使う場合はアプリ内リソースである必要があり、ストレージへ保存したhtmlファイルをWebViewに表示させるために使用することはできません。

参照元:ファイル リソースを読み込む方法 (JavaScript と HTML を使った Windows ランタイム アプリ) (Windows) via:@daruyanagi

*1:過去にWindows Phoneで取り組んだ例:http://d.hatena.ne.jp/ch3cooh393/20111114/1321239292