Share via

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

  • [アーティクル]

アプリを自動再生コンテンツ イベントのオプションとして登録できます。自動再生コンテンツ イベントは、カメラのメモリ カード、サム ドライブ、DVD などのボリューム デバイスが PC に挿入されたときに発生します。

ここでは、カメラのボリューム デバイスが挿入されたときに自動再生オプションとしてアプリを識別する方法を示します。

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

必要条件

Microsoft Visual Studio

手順

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

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

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

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

  4. [自動再生コンテンツ] 宣言は、自動再生でコンテンツ イベントが発生したときに該当のアプリがオプションとして識別されます。イベントは DVD やサム ドライブなどのボリューム デバイスのコンテンツに基づきます。自動再生ではボリューム デバイスのコンテンツを調べて、発生させるコンテンツ イベントを決定します。ボリュームのルートに DCIM、AVCHD、または PRIVATE\ACHD フォルダーが含まれる場合、または自動再生コントロール パネルで [各 メディア タイプの処理方法を選択する] を有効にしていてボリュームのルートで画像が見つかった場合、自動再生で ShowPicturesOnArrival イベントが発生します。

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

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

     

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

  5. [自動再生コンテンツ] 項目の [起動アクション] セクションで、[新規追加] をクリックし、2 つ目の起動アクションを追加します。2 つ目の起動アクションについて次の値を入力します。

    設定 値
    動詞 copy
    アクションの表示名 ライブラリに画像をコピーする
    コンテンツ イベント ShowPicturesOnArrival

     

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

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

2. HTML UI を追加する

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

    <label>File List</label>
<div id="files" style="position:fixed;top:30px;height:400px;width:600px" ></div>

3. 初期化コードを追加する

この手順のコードでは、アプリに渡された起動引数から verb プロパティの verb 値をチェックします。次に、ユーザーが選んだオプションに関連する関数が呼び出されます。カメラのメモリ イベントの場合、自動再生により、アプリに渡された起動引数でカメラ ストレージのルート フォルダーが渡されます。このフォルダーは detail.files プロパティの最初の要素から取得できます。

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

    var filesDiv;

app.onactivated = function (args) {
    if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.file) {
        filesDiv = document.getElementById("files");

        if (args.detail.verb === "show") {
            // Call displayImages with root folder from camera storage.
            displayImages(args.detail.files[0]);
        }
        else if (args.detail.verb === "copy") {
            // Call copyImagesToLibrary with root folder from camera storage.
            copyImagesToLibrary(args.detail.files[0]);
        }
    }
    args.setPromise(WinJS.UI.processAll());
};

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

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

    function displayImages(rootFolder) {
    // Display images from first folder in root\DCIM.
    rootFolder.getFolderAsync("DCIM").then(
    function (dcimFolder) {
        dcimFolder.getFoldersAsync().then(
        function (cameraFolders) {
            cameraFolders[0].getFilesAsync().then(
            function (files) {
                files.forEach(function (file) {
                    filesDiv.innerHTML += file.name + "<br />";
                    displayImage(file);
                });
            });
        });
    });
}

function displayImage(file) {
    try {
        var element = document.createElement("img");
        element.src = window.URL.createObjectURL(file, { oneTimeOnly: true });
        element.height = 100;
        element.width = 100;
        filesDiv.appendChild(element);
        filesDiv.innerHTML += "<br>";
    }
    catch (e) {
        filesDiv.innerHTML += e.message;
    }
}

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

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

    function copyImagesToLibrary(rootFolder) {
    try {
        var now = new Date();
        var folderName =
            "Images " + now.toDateString() + " " + now.getHours() +
                        now.getMinutes() + now.getSeconds();

        Windows.Storage.KnownFolders.
        picturesLibrary.createFolderAsync(folderName).then(
                function (imageFolder) {
                    // Copy images from first folder in root\DCIM.
                    rootFolder.getFolderAsync("DCIM").then(
                function (dcimFolder) {
                    dcimFolder.getFoldersAsync().then(
                function (cameraFolders) {
                    cameraFolders[0].getFilesAsync().then(
                function (files) {
                    files.forEach(function (file) {
                        copyImage(file, imageFolder);
                    });
                });
                });
                });
                });
    } catch (e) {
        filesDiv.innerHTML = "Failed copy images.<br />" + e.message;
    }
}

function copyImage(file, imageFolder) {
    try {
        file.copyAsync(
            imageFolder, file.fileName,
                Windows.Storage.NameCollisionOption.replaceExisting).then(
                    function (newFile) {
                        filesDiv.innerHTML += file.name + " copied.<br />";
                    });
    } catch (e) {
        filesDiv.innerHTML += "Failed to copy image.<br />" + e.message;
    }
}

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

  1. F5 キーを押して、アプリを (デバッグ モードで) ビルドおよび展開します。
  2. アプリを実行するには、カメラのメモリ カードまたはカメラの他のストレージ デバイスを PC に挿入します。次に、自動再生のオプションの一覧から package.appxmanifest ファイルで指定したコンテンツ イベント オプションのいずれかを選びます。このサンプル コードは、カメラのメモリ カードの DCIM フォルダーにある画像の表示またはコピーのみを行います。カメラのメモリ カードの AVCHD または PRIVATE\ACHD フォルダーに画像が格納される場合は、適宜コードを更新する必要があります。注  カメラのメモリ カードがない場合は、ルートに DCIM という名前のフォルダーがあり、DCIM フォルダーに画像が含まれるサブフォルダーがあれば、フラッシュ ドライブを使うことができます。  

要約と次のステップ

このチュートリアルでは、画像ファイルを表示したり、ピクチャにそれらの画像をコピーしたりするアプリを作成しました。自動再生 ShowPicturesOnArrival コンテンツ イベントにアプリを登録しました。

自動再生では、近接通信 (タップ) を使って PC 間で共有されるコンテンツのコンテンツ イベントが発生します。このクイック スタートで説明した手順とコードを使って、近接通信を使用する PC 間で共有されるファイルを処理できます。次の表に、近接通信を使ってコンテンツを共有できる自動再生コンテンツ イベントを示します。

アクション 自動再生コンテンツ イベント
音楽の共有 PlayMusicFilesOnArrival
ビデオの共有 PlayVideoFilesOnArrival

 

ファイルが近接通信を使って共有されている場合、FileActivatedEventArgs オブジェクトの Files プロパティには、すべての共有ファイルを含むルート フォルダーへの参照が含まれます。

関連トピック

自動再生による自動起動