【Chrome Apps】Packaged AppsでWebコンテンツをロードして表示する

Chrome Packaged Appsはローカルで動作するアプリケーションを作ることができますが、既存のWebサービスをPackaged Appsで提供したい場合のTipsです。

#方法と実装
webviewタグ（公式ドキュメント）を使ってWebからのライブコンテンツをロードして、Chromeのアプリケーションに埋め込みます。

webviewタグを使うには、manifest.jsonの"permissons"の項目で"webview"を許可します。

manifest.json

{
    "manifest_version": 2,
    "name": "Sample",
    "description": "Sample Chrome Packaged App",
    "version": "0.0.1",
    "app": {
        "background": {
            "scripts": ["index.js"]
        }
    },
    "icons": {
        "16": "icon-16.png",
        "48": "icon-48.png",
        "128": "icon-128.png"
    },
    "permissions": [
        "webview"
    ]
}

続いて、アプリケーションのHTML内にwebviewタグを埋め込みます。
<webview src="https://example.com"></webview>

あとはCSSでwebviewの大きさ・配置を調整すればWebサービスをPackaged Appsで提供することができます。

##問題点
ただし、Packaged Appsでは、アプリケーション内でリンクをクリックしても遷移できなかったり、alert()が使えなかったりといくつか機能が制限されているので、そのままでは問題になる場合があります。ここでは、この２点について対応策を書いておきたいと思います。

##解決策
新しいブラウザウィンドウを開こうとしたときのイベント"newwindow"、また、alert()の実行は制限されていますが、"window.alert"、"window.confirm"、"window.prompt"を実行したときに呼ばれるイベント"dialog"はそれぞれ準備されています。これらを使って、

main.js

var webview = document.getElementById('mainWebView');

webview.addEventListener('newwindow', function(e) {
    webview.src = e.targetUrl;
});

webview.addEventListener('dialog', function(e) {
    messageAlert.Alert(e.messageText);
});

とすれば対応することができます。しかしながら、window.alert()に変わるものは用意されていないようなので、アラーとウィンドウは自作する必要がありそうです（例の"messageAlert.Alert(e.messageText)"部分）。

#おまけ
簡単なアラートウィンドウの実装です。messageAlert.Alert()を'dialog'イベントリスナーの中に入れておけばwindow.alert()の代わりに自作アラートウィンドウを表示できます。

index.html

<div id="screenLock"></div>
<div id="alertBox">
    <div id="alertTitle">メッセージ</div>
    <div id="alertBody"></div>
    <div id="alertButton">
        <button id="okBtn">OK</button>
    </div>
</div>

messageAlert.js

var messageAlert = (function() {
    function Hidden(){
        document.getElementById("screenLock").style.visibility = 'hidden';
        document.getElementById("alertBox").style.visibility = 'hidden';
    }

    function Show(){
        document.getElementById("screenLock").style.visibility = 'visible';
        document.getElementById("alertBox").style.visibility = 'visible';
    }

    return {
        Alert: function(messageText){
            document.getElementById("okBtn").style.display = 'inline';
            document.getElementById("alertBody").innerHTML = messageText;
            Show();

            document.getElementById("okBtn").onclick = function(){ Hidden(); };
        }
    }
})();

#Sample
CSSも含めたサンプルはこちらからどうぞ。webviewタグの中を自由に変更してみてください。webviewをウィンドウ全体に最大化しているのでブラウザのように動きますが、戻るボタンがないのでちょっと不便かもしれませんね…。
※"index.html"を直接ブラウザで開いても動作しません。Google Chromeにインストールして試してみてください。インストール方法はこちらの末項。