Share via

クイック スタート: 自動再生デバイスにアプリを登録する (HTML)

  • [アーティクル]

アプリを自動再生デバイス イベントのオプションとして登録できます。自動再生デバイス イベントは、デバイスがコンピューターに接続されると発生します。

ここでは、PC にカメラが接続されたときに自動再生オプションとしてアプリを識別する方法を示します。アプリは、WPD\ImageSource自動再生イベントのハンドラーとして登録されます。これは、カメラなどのイメージング デバイスが MTP を使う ImageSource であることを通知するときに Windows ポータブル デバイス (WPD) システムによって生成される一般的なイベントです。詳しくは、「Windows ポータブル デバイス」をご覧ください。

デバイスの製造元がデバイスの自動再生ハンドラーとして Windows ストア デバイス アプリを関連付ける場合は、デバイス メタデータでアプリを識別することができます。 アプリをデバイスのエクスペリエンス ID に対応する自動インストールされるアプリとして関連付けた場合は、デバイスが PC に接続されると、オペレーティング システムがその関連付けを検出します。PC にアプリがインストールされていない場合は、オペレーティング システムが自動的にアプリをダウンロードしてインストールします。自動再生は、デバイスのハンドラーとしてユーザーが選ぶ最初のオプションの形式でアプリを提示します。詳しくは、Windows ストア デバイス アプリの自動再生に関するページをご覧ください。

目標: 自動再生デバイス イベントを処理するアプリを作成します。

必要条件

Microsoft Visual Studio

手順

1. 新しいプロジェクトを作成し、自動再生宣言を追加する

  1. Visual Studio を開き、[ファイル] メニューの [新しいプロジェクト] をクリックします。[Javascript] セクションで、[Windows ストア] を選びます。アプリに AutoPlayDevice_Camera という名前を付け、[OK] をクリックします。

  2. Package.appxmanifest ファイルを開き、[機能] タブをクリックします。[リムーバブル ストレージ] 機能をクリックします。これで、アプリはリムーバブル ストレージ ボリューム デバイスとしてカメラ上のデータにアクセスできるようになります。

  3. マニフェスト ファイルで、[宣言] タブをクリックします。[使用可能な宣言] ドロップダウン リストで、[自動再生デバイス] を選び、[追加] をクリックします。[サポートされる宣言] ボックスの一覧に追加された新しい [自動再生デバイス] 項目を選びます。

  4. [自動再生デバイス] 宣言は、自動再生で既知のイベントのデバイス イベントが発生したときに該当のアプリがオプションとして識別されます。

    [起動アクション] セクションに、最初の起動アクションの次の値を入力します。

    設定 値
    動詞 show
    アクションの表示名 画像を表示する
    コンテンツ イベント WPD\ImageSource

     

    [アクションの表示名] 設定では、アプリの自動再生で表示される文字列を指定します。[動詞] 設定では、選んだオプションでアプリに渡される値を指定します。自動再生のイベントの起動アクションは複数指定できます。また、[動詞] 設定を使って、ユーザーがアプリで選んだアクションを確認できます。アプリに渡される起動イベント引数の verb プロパティを調べることでユーザーが選んだオプションを確認できます。[動詞] 設定には任意の値を使うことができます。ただし、予約されている open を除きます。1 つのアプリで複数の動詞を使う例については、「クイック スタート: 自動再生コンテンツにアプリを登録する」をご覧ください。

  5. [使用可能な宣言] ドロップダウン リストで、[ファイルの種類の関連付け] を選び、[追加] をクリックします。新しい [ファイルの種類の関連付け] 宣言の [プロパティ] で、[表示名] フィールドを Show Images from Camera、[名前] フィールドを camera_association1 に設定します。[サポートされるファイルの種類] セクションで、[新規追加] をクリックします。[ファイルの種類] フィールドを .jpg に設定します。[サポートされるファイルの種類] セクションで、[新規追加] をもう一度クリックします。新しいファイルの関連付けの [ファイルの種類] フィールドを .png に設定します。コンテンツ イベントの場合は、自動再生で、アプリに明示的に関連付けられていないファイルの種類はすべて除外されます。

  6. マニフェスト ファイルを保存して閉じます。

2. HTML UI を追加する

  • Default.html ファイルを開き、次の HTML を <body> セクションに挿入します。

    <table>
    <tr>
        <td colspan="2">Device Information</td>
    </tr>
    <tr>
        <td style="vertical-align:top"><div id="deviceInfoDiv" style="width:400px;" /></td>
        <td style="vertical-align:top"><div id="picturesDiv" style="overflow:scroll;width:400px;height:400px" /></td>
    </tr>
</table>

3. ライセンス認証コードを追加する

この手順のコードは、カメラのデバイス情報 ID を fromId メソッドに渡すことによって、カメラを StorageDevice として参照します。カメラのデバイス情報 ID は、onactivated イベント ハンドラーに渡された引数の detail.deviceInformationId プロパティから取得されます。

  • js フォルダーを開きます。Default.js ファイルを開き、既定の onactivated 関数を次のコードで置き換えます。

    app.onactivated = function (args) {
    if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.device) {
        args.setPromise(WinJS.UI.processAll());

        showImages(Windows.Devices.Portable.StorageDevice.fromId(args.detail.deviceInformationId));
    }
};

4. デバイス情報を表示するコードを追加する

カメラに関する情報は、StorageDevice クラスのプロパティから取得できます。この手順のコードは、アプリの実行時にデバイス名などの情報をユーザーに表示します。そして、getImages メソッドを呼び出します。このメソッドは、カメラに格納されている画像のサムネイルを表示するために、次の手順で追加します。

  • Default.js ファイルで、onactivated 関数の後に次のコードを追加します。

    var imagesDiv;

function showImages(folder) {
    var infoDiv = document.getElementById("deviceInfoDiv");
    imagesDiv = document.getElementById("picturesDiv");

    infoDiv.innerHTML = "Display Name = " + folder.displayName + "<br />" +
                        "Display Type =  " + folder.displayType + "<br />" +
                        "FolderRelativeId = " + folder.folderRelativeId + "<br />";

    getImages(folder);
}

5. 画像を表示するコードを追加する

この手順のコードは、カメラに格納されている画像のサムネイルを表示します。このコードは、カメラの非同期呼び出しを行ってサムネイル イメージを取得します。ただし、次の非同期呼び出しは、前の非同期呼び出しが完了するまで行われません。これにより、カメラに対する要求が一度に 1 つだけ実行されるようになります。

  • Default.js ファイルで、showImages 関数の後に次のコードを追加します。

    function getImages(folder) {
    // Find images in the specified folder
    folder.getFilesAsync().done(
        function (files) {
            files.forEach(function (file) {
                file.getThumbnailAsync(
                    Windows.Storage.FileProperties.ThumbnailMode.singleItem,
                    100,
                    Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale).done(

                    function (thumbnail) {
                        // Create an img element to display on the page
                        var element = document.createElement("img");
                        element.src =
                            window.URL.createObjectURL(thumbnail, { oneTimeOnly: true });
                        element.style.height = thumbnail.originalHeight;
                        element.style.width = thumbnail.originalWidth;
                        element.alt = file.name;
                        imagesDiv.appendChild(element);
                    }
                );
            })

            // Find images in subfolders
            folder.getFoldersAsync().done(
                function (folders) {
                    folders.forEach(function (f) {
                        getImages(f);
                    })
                });
        });
}

6. アプリをビルドして実行する

  1. F5 キーを押して、アプリを (デバッグ モードで) ビルドおよび展開します。
  2. アプリを実行するには、PC にカメラを接続します。そして、自動再生オプションの一覧からアプリを選びます。注  すべてのカメラが WPD\ImageSource 自動再生デバイス イベントのためのアドバタイズを行うわけではありません。  

要約

このチュートリアルでは、カメラ デバイスの画像ファイルを表示するアプリを作成しました。自動再生 WPD\ImageSource デバイス イベントにアプリを登録しました。

関連トピック

自動再生による自動起動