Windows 10

[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)のものになっています。

UWPApp_Using_WebViewControl_01

詳しくは調べていないのですが、WebViewコントロールはiframeでは出来ない色々なことができるそうで、それがこうして簡単に利用できるのは、とても便利なことだと思います。
(HTML + JavaScript というのも手軽で良いですね!)

ちなみに、Edge Dev Blogの記事にも載っているのですが、サンプルアプリソースコードがGitHubで公開されているので、WebViewコントロールを使ったアプリ開発に興味がある方は是非ご参照ください。

関連記事

  1. Windows 10

    [Windows 10]Update Complianceで端末のアップデート管理を行う方法

    システム担当者にとって、高度・多様化するサイバー攻撃に対し、OSのアッ…

  2. Windows関連

    [Windows 8]スタートスクリーンの背景色を変更する。

    ※ 下記はWindows Developer Preview(英語版・…

  3. Windows 10

    PowerShellでMicrosoft Edgeを操作する

    前回の記事でWebDriverを使ってMicrosoft Edgeを操…

  4. Windows 10

    Microsoft Edgeの拡張機能でHello Worldしてみた。

    「【Windows 10ユーザーズ・ワークベンチ】Edgeの拡張機能サ…

  5. Windows 10

    Microsoft Edgeを操作するVBAマクロ(WebDriver編)

    Microsoft Edge Dev Blogに「Bringing a…

  6. Windows関連

    右クリックメニューからフォルダを管理者権限で開く(コマンド プロンプト)

    フォルダをShiftキーを押しながら右クリックすると、「コマンド ウィ…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP