読者です 読者をやめる 読者になる 読者になる

ひだまりソケットは壊れない

ソフトウェア開発に関する話を書きます。 最近は主に Android アプリ、Windows アプリ (UWP アプリ)、Java 関係です。

まじめなことを書くつもりでやっています。 適当なことは 「一角獣は夜に啼く」 に書いています。

Windows 8.1 なら HTML + JS で書かれたストアアプリでも WebView が使用できる

Windows 8.1 Windows ストアアプリ Windows

Windows 8 向けの Windows ストアアプリの中に web ページを表示する必要があるとき、XAMLC#C++ などを使って開発する場合は WebView を使用することができました。 しかし、HTML + JS で開発する場合は、WebView の代わりに iframe を使うしかありませんでした。

Windows 8.1 では、HTML + JS でも WebView が使えるようになります! 非常にうれしいですね!!!

(Windows 8.1 Preview の情報をもとに記述しています。 Windows 8.1 の正式リリース版でも WebView は使えると思いますが、この記事はあくまで Preview 版での情報であることにご注意ください。)

iframe の代わりに WebView を使う

HTML 文書中に x-ms-webview というタグを記述することで WebView を設置できます。

<x-ms-webview id="webview" src="http://vividcode.hatenablog.com/" style="width: 640px; height: 800px; border: solid 1px white;"></x-ms-webview>

何が嬉しいの?

iframe ではいろいろと制約があったので、それらの制約がなくなることが嬉しいところです。

たとえば、はてなブログの HTTP レスポンスヘッダには X-Frame-Options: DENY が含まれているため、iframe 内に表示することはできませんでした。 WebView を使えば、そんな X-Frame-Options: DENY な web ページもストアアプリ中に表示できます。

あとはページの遷移などのナビゲーションをアプリのプログラム側から行えるようになるといったこともあります。

ブラウジングの機能: JS からの操作

たとえば以下のようにして前のページに戻すことができます。

var webview = document.getElementById("webview");
webview.goBack();
  • goBack()goForward() メソッドで履歴の移動
  • canGoBackcanGoForward プロパティで履歴の移動が可能かどうかわかる
  • あとは refresh() メソッドで更新、stop() メソッドで読み込み停止とか

XAML + C# などの WebView だとページ遷移の際に発火するイベントなども定義されていますが、ドキュメントに書かれてないので HTML + JS の WebView だと使えないかもしれないですね。し、JS では、XAML + C# などで使われるイベント名の頭に 「MSWebView」 をつけたイベント名でイベントを扱えるみたいです。

サンプルコードより: HTML WebView control sample (Windows 8.1) in C#, C++, JavaScript for Visual Studio 2013

var webviewControl = document.getElementById("webview");
webviewControl.addEventListener("MSWebViewNavigationStarting", navigationStarting);
webviewControl.addEventListener("MSWebViewContentLoading", contentLoading);
webviewControl.addEventListener("MSWebViewDOMContentLoaded", domContentLoaded);
webviewControl.addEventListener("MSWebViewNavigationCompleted", navigationCompleted);
webviewControl.addEventListener("MSWebViewUnviewableContentIdentified", unviewableContentIdentified);

そのほかにできること; 参考文献

Local state directories に web ページをダウンロードしてきてオフラインでも WebView 上に表示できるようにするとか、web ページのスクリーンショットを撮るとかできるみたいです。 詳しくは下記ドキュメントをご覧ください。