[Windows 10]UWPアプリでWebViewコントロールを使ってみた。

ホーム
Windows 10, Windows関連, Microsoft Edge
[Windows 10]UWPアプリでWebViewコントロールを使ってみた。

2015.08.28

[Windows 10]UWPアプリでWebViewコントロールを使ってみた。

Microsoft Edge Dev Blogに「Creating your own browser with HTML and JavaScript」という記事がアップされました。

これを見ると、何やらWebViewコントロールとやらを使えば、ユニバーサル Windows プラットフォーム (UWP) アプリでMicrosoft Edgeのレンダリングエンジン「EdgeHTML」を使ってWebページを表示できるようになるとのこと。

これは中々面白そう！
・・・ということで、さっそく検証用のアプリを作ってみました。

開発環境

Windows 10 Pro x64
Visual Studio Community 2015
テンプレート：空白のアプリ (ユニバーサル Windows) JavaScript

コード

default.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>App1</title>

    <!-- WinJS 参照 -->
    <link href="WinJS/css/ui-dark.css" rel="stylesheet" />
    <script src="WinJS/js/base.js"></script>
    <script src="WinJS/js/ui.js"></script>

    <!-- App1 参照 -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body class="win-type-body">
    <input id="url" type="url" size="40" value="http://www.useragentstring.com/" />
    <button id="btnGo">GO</button>
    <button id="btnFullscreen">FullScreen</button>
    <x-ms-webview id="webview" src="http://www.yahoo.co.jp/"></x-ms-webview>
</body>
</html>

default.css

#webview {
    width: 100%;
    height: 100%;
}

default.js

(function () {
    "use strict";
    
    var webviewControl;
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                //TODO: このアプリケーションは新しく起動しました。ここでアプリケーションを初期化します。
                webviewControl = document.getElementById("webview");
                document.getElementById("btnGo").addEventListener("click", goToUrl, false);
                document.getElementById("btnFullscreen").addEventListener("click", toggleFullscreen, false);
            } else {
                // TODO: このアプリケーションは中断されてから終了しました。
                // スムーズなユーザー エクスペリエンスとなるよう、ここでアプリケーション状態を復元し、アプリが停止したようには見えないようにします。
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
        //TODO: このアプリケーションは中断しようとしています。ここで中断中に維持する必要のある状態を保存します。
        // WinJS.Application.sessionState オブジェクトを使用している可能性があります。このオブジェクトは、中断の間自動的に保存され、復元されます。
        //ご使用のアプリケーションを中断する前に非同期の操作を完了する必要がある場合は、args.setPromise() を呼び出してください。
    };

    app.start();

    function goToUrl() {
        try{
            var url = document.getElementById("url").value;
            webviewControl.navigate(url);
        } catch (e) {
            console.log(e);
        }
    }

    function toggleFullscreen() {
        var view = Windows.UI.ViewManagement.ApplicationView.getForCurrentView();
        if (view.isFullScreen == true) {
            view.exitFullScreenMode();
        } else {
            view.tryEnterFullScreenMode();
        }
    }
})();

作ったといっても、そこはUWPアプリを作ったことのないド素人、デフォルトのテンプレートにx-ms-webview要素をちょこっと追加しただけです。

それでも一応、下図のようにちゃんと動作確認できました。
User agentもちゃんとEdge(EdgeHTML)のものになっています。