このページは、2020 年にサポートが終了した Chrome アプリプラットフォームに関するドキュメントの一部です。Enterprise および Education のお客様については、少なくとも 2025 年 1 月までは ChromeOS で引き続きサポートされます。詳しくは、アプリの移行をご覧ください。

このページは Cloud Translation API によって翻訳されました。

Sencha Ext JS でアプリを作成する

このドキュメントは、Sencha Ext JS を使用した Chrome アプリの構築を開始することを目的としています。説明します。この目標を達成するために、Sencha が構築したメディアプレーヤーアプリについて詳しく説明します。参照元コードと API ドキュメントは GitHub から入手できます。

このアプリは、ユーザーが利用可能なメディアサーバーを検出します。これには、PC に接続されているメディアデバイス、ネットワーク上でメディアを管理するソフトウェアです。メディアのブラウジング、ネットワーク経由での再生、保存を行えるオフラインです。

Sencha Ext JS を使用してメディアプレーヤーアプリを構築するには、次のことを行う必要があります。

マニフェスト manifest.json を作成します。
イベントページ background.js を作成します。
サンドボックスアプリのロジック。
Chrome アプリとサンドボックス化されたファイルの間で通信を行います。
メディアサーバーを検出します。
メディアを探して再生。
メディアをオフラインに一時保存します。

マニフェストを作成

すべての Chrome アプリで必要なマニフェストファイルには、Chrome の起動に必要な情報が含まれています。マニフェストに示されているように、メディアプレーヤーアプリは「offline_enabled」です。メディアアセットは接続性に関係なく、ローカルに保存し、アクセス、再生します。

「サンドボックス」フィールドを使用して、アプリのメインロジックを一意のオリジンでサンドボックス化します。すべてサンドボックス化のコンテンツは Chrome アプリのコンテンツセキュリティポリシーの対象外ですが、 Chrome App API。マニフェストには "socket" も含まれており、権限メディアプレーヤーアプリは socket API。ネットワーク経由でメディアサーバーに接続します。

{
    "name": "Video Player",
    "description": "Features network media discovery and playlist management",
    "version": "1.0.0",
    "manifest_version": 2,
    "offline_enabled": true,
    "app": {
        "background": {
            "scripts": [
                "background.js"
            ]
        }
    },
    ...

    "sandbox": {
        "pages": ["sandbox.html"]
    },
    "permissions": [
        "experimental",
        "http://*/*",
        "unlimitedStorage",
        {
            "socket": [
                "tcp-connect",
                "udp-send-to",
                "udp-bind"
            ]
        }
    ]
}

イベント作成ページ

すべての Chrome アプリでこのアプリを起動するには、background.js が必要です。メディアプレーヤーのメインページ index.html は、指定されたディメンションのウィンドウで開きます。

chrome.app.runtime.onLaunched.addListener(function(launchData) {
    var opt = {
        width: 1000,
        height: 700
    };

    chrome.app.window.create('index.html', opt, function (win) {
        win.launchData = launchData;
    });

});

サンドボックスアプリのロジック

Chrome アプリは、厳格なコンテンツセキュリティポリシーが適用される管理された環境で実行されます。（CSP）をご覧ください。メディアプレーヤーアプリで Ext JS コンポーネントをレンダリングするには、より高い権限が必要です。宛先 CSP に準拠してアプリロジックを実行すると、アプリのメインページ（index.html）で iframe が作成され、サンドボックス環境として機能します。

<iframe id="sandbox-frame" sandbox="allow-scripts" src="sandbox.html"></iframe>

iframe は、Ext JS に必要なファイルを含む sandbox.html を参照します。アプリケーション:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="resources/css/app.css" />'
    <script src="sdk/ext-all-dev.js"></script>'
    <script src="lib/ext/data/PostMessage.js"></script>'
    <script src="lib/ChromeProxy.js"></script>'
    <script src="app.js"></script>
</head>
<body></body>
</html>

app.js スクリプトはすべての Ext JS コードを実行し、メディアプレーヤービューをレンダリングします。これがスクリプトはサンドボックス化されているため、Chrome App API に直接アクセスすることはできません。app.js 間の通信サンドボックス化されていないファイルは、HTML5 Post Message API を使用して作成されます。

ファイル間で通信する

メディアプレーヤーアプリが Chrome アプリの API（ネットワークへのメディアの照会など）にアクセスするには、 app.js がメッセージを index.js に送信します。サンドボックス化された app.js とは異なり、index.js は Chrome アプリ API に直接アクセスできます。

index.js が iframe を作成します。

var iframe = document.getElementById('sandbox-frame');

iframeWindow = iframe.contentWindow;

また、サンドボックス化されたファイルからのメッセージをリッスンします。

window.addEventListener('message', function(e) {
    var data= e.data,
        key = data.key;

    console.log('[index.js] Post Message received with key ' + key);

    switch (key) {
        case 'extension-baseurl':
            extensionBaseUrl(data);
            break;

        case 'upnp-discover':
            upnpDiscover(data);
            break;

        case 'upnp-browse':
            upnpBrowse(data);
            break;

        case 'play-media':
            playMedia(data);
            break;

        case 'download-media':
            downloadMedia(data);
            break;

        case 'cancel-download':
            cancelDownload(data);
            break;

        default:
            console.log('[index.js] unidentified key for Post Message: "' + key + '"');
    }
}, false);

次の例では、app.js が index.js にメッセージを送信し、鍵をリクエストします。 'extension-baseurl':

Ext.data.PostMessage.request({
    key: 'extension-baseurl',
    success: function(data) {
        //...
    }
});

index.js がリクエストを受信して結果を割り当て、ベース URL を返して応答します。

function extensionBaseUrl(data) {
    data.result = chrome.extension.getURL('/');
    iframeWindow.postMessage(data, '*');
}

メディアサーバーを検出する

メディアサーバーの検出には多くの作業が伴います。調査ワークフローの概要は次のとおりです使用可能なメディアサーバーを検索するユーザーの操作によって開始されます。MediaServer コントローラ index.js さんにメッセージを投稿しました。index.js はこのメッセージをリッスンし、メッセージを受信すると、 Upnp.js。

Upnp library は、Chrome アプリの Socket API を使用して、メディアプレーヤーアプリを任意のネットワークに接続します。メディアサーバーを検出し、そのメディアサーバーからメディアデータを受信します。Upnp.js では次も使用しています: soapclient.js: メディアサーバーのデータを解析します。このセクションの残りの部分では、詳しく説明します。

メッセージを投稿

ユーザーがメディアプレーヤーアプリの中央にあるメディアサーバーボタンをクリックすると、MediaServers.js discoverServers() を呼び出します。この関数は、まず未処理の検出リクエストの有無を確認し、 true の場合、それらを中止して新しいリクエストを開始できるようにします。次に、コントローラがメッセージをキー upnp-discovery と 2 つのコールバックリスナーを持つ index.js:

me.activeDiscoverRequest = Ext.data.PostMessage.request({
    key: 'upnp-discover',
    success: function(data) {
        var items = [];
        delete me.activeDiscoverRequest;

        if (serversGraph.isDestroyed) {
            return;
        }

        mainBtn.isLoading = false;
        mainBtn.removeCls('pop-in');
        mainBtn.setIconCls('ico-server');
        mainBtn.setText('Media Servers');

        //add servers
        Ext.each(data, function(server) {
            var icon,
                urlBase = server.urlBase;

            if (urlBase) {
                if (urlBase.substr(urlBase.length-1, 1) === '/'){
                        urlBase = urlBase.substr(0, urlBase.length-1);
                }
            }

            if (server.icons && server.icons.length) {
                if (server.icons[1]) {
                    icon = server.icons[1].url;
                }
                else {
                    icon = server.icons[0].url;
                }

                icon = urlBase + icon;
            }

            items.push({
                itemId: server.id,
                text: server.friendlyName,
                icon: icon,
                data: server
            });
        });

        ...
    },
    failure: function() {
        delete me.activeDiscoverRequest;

        if (serversGraph.isDestroyed) {
            return;
        }

        mainBtn.isLoading = false;
        mainBtn.removeCls('pop-in');
        mainBtn.setIconCls('ico-error');
        mainBtn.setText('Error...click to retry');
    }
});

upnpDiscover() を呼び出す

index.js が「upnp-discover」をリッスンするapp.js さんからメッセージが届き、 upnpDiscover()。メディアサーバーが検出されると、index.js はメディアサーバーのドメインを抽出しますサーバーをローカルに保存し、メディアサーバーのデータをフォーマットして、 MediaServer コントローラ。

メディアサーバーデータを解析する

Upnp.js は、新しいメディアサーバーを検出すると、デバイスの説明を取得して、メディアサーバーのデータを参照および解析する Soaprequestsoapclient.js はメディア要素を解析します。ドキュメントに変換します。

メディアサーバーに接続

Upnp.js は、検出されたメディアサーバーに接続し、Chrome アプリソケットを使用してメディアデータを受信します。 API:

socket.create("udp", {}, function(info) {
    var socketId = info.socketId;

    //bind locally
    socket.bind(socketId, "0.0.0.0", 0, function(info) {

        //pack upnp message
        var message = String.toBuffer(UPNP_MESSAGE);

        //broadcast to upnp
        socket.sendTo(socketId, message, UPNP_ADDRESS, UPNP_PORT, function(info) {

            // Wait 1 second
            setTimeout(function() {

                //receive
                socket.recvFrom(socketId, function(info) {

                    //unpack message
                    var data        = String.fromBuffer(info.data),
                        servers     = [],
                        locationReg = /^location:/i;

                    //extract location info
                    if (data) {
                        data = data.split("\r\n");

                        data.forEach(function(value) {
                            if (locationReg.test(value)){
                                servers.push(value.replace(locationReg, "").trim());
                            }
                        });
                    }

                    //success
                    callback(servers);
                });

            }, 1000);
        });
    });
});

メディアを探して再生する

MediaExplorer コントローラは、メディアサーバーフォルダ内のすべてのメディアファイルを一覧表示し、メディアプレーヤーアプリウィンドウのパンくずリストナビゲーションを更新します。ユーザーがメディアファイルを選択すると、コントローラは「play-media」で index.js にメッセージを投稿します。key:

onFileDblClick: function(explorer, record) {
    var serverPanel, node,
        type    = record.get('type'),
        url     = record.get('url'),
        name    = record.get('name'),
        serverId= record.get('serverId');

    if (type === 'audio' || type === 'video') {
        Ext.data.PostMessage.request({
            key     : 'play-media',
            params  : {
                url: url,
                name: name,
                type: type
            }
        });
    }
},

index.js がこの投稿メッセージをリッスンし、playMedia() を呼び出して応答します。

function playMedia(data) {
    var type        = data.params.type,
        url         = data.params.url,
        playerCt    = document.getElementById('player-ct'),
        audioBody   = document.getElementById('audio-body'),
        videoBody   = document.getElementById('video-body'),
        mediaEl     = playerCt.getElementsByTagName(type)[0],
        mediaBody   = type === 'video' ? videoBody : audioBody,
        isLocal     = false;

    //save data
    filePlaying = {
        url : url,
        type: type,
        name: data.params.name
    };

    //hide body els
    audioBody.style.display = 'none';
    videoBody.style.display = 'none';

    var animEnd = function(e) {

        //show body el
        mediaBody.style.display = '';

        //play media
        mediaEl.play();

        //clear listeners
        playerCt.removeEventListener( 'transitionend', animEnd, false );
        animEnd = null;
    };

    //load media
    mediaEl.src = url;
    mediaEl.load();

    //animate in player
    playerCt.addEventListener( 'transitionend', animEnd, false );
    playerCt.style.transform = "translateY(0)";

    //reply postmessage
    data.result = true;
    sendMessage(data);
}

メディアをオフラインに保存する

メディアをオフラインに保存するための処理のほとんどは、filer.js ライブラリを使用して行われます。続きを読むこのライブラリについては、filer.js の概要をご覧ください。

このプロセスは、ユーザーが 1 つ以上のファイルを選択して [オフラインにする] を開始すると開始されます。できます。 MediaExplorer コントローラは、キー「download-media」を含むメッセージを index.js に送信します。 index.js はこのメッセージをリッスンし、downloadMedia() 関数を呼び出してダウンロードプロセス:

function downloadMedia(data) {
        DownloadProcess.run(data.params.files, function() {
            data.result = true;
            sendMessage(data);
        });
    }

DownloadProcess ユーティリティメソッドは、メディアサーバーからデータを取得する xhr リクエストを作成し、完了ステータスを待ちます。これにより、受信したコンテンツをチェックする onload コールバックが開始します。 filer.js 関数を使用してデータをローカルに保存します。

filer.write(
    saveUrl,
    {
        data: Util.arrayBufferToBlob(fileArrayBuf),
        type: contentType
    },
    function(fileEntry, fileWriter) {

        console.log('file saved!');

        //increment downloaded
        me.completedFiles++;

        //if reached the end, finalize the process
        if (me.completedFiles === me.totalFiles) {

            sendMessage({
                key             : 'download-progresss',
                totalFiles      : me.totalFiles,
                completedFiles  : me.completedFiles
            });

            me.completedFiles = me.totalFiles = me.percentage = me.downloadedFiles = 0;
            delete me.percentages;

            //reload local
            loadLocalFiles(callback);
        }
    },
    function(e) {
        console.log(e);
    }
);

ダウンロードプロセスが完了すると、MediaExplorer がメディアファイルのリストとメディアを更新します。プレーヤーツリーパネルが開きます。