クイックスタート: ホームグループコンテンツへのアクセス (HTML)

[アーティクル]
12/22/2015

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

ユーザーのホームグループフォルダー (ピクチャ、ミュージック、ビデオなど) に格納されているコンテンツにアクセスします。

必要条件

JavaScript を使った Windows ランタイムアプリの非同期プログラミングについての理解

非同期アプリの作成方法については、「クイックスタート: JavaScript での promise の使用」をご覧ください。
アプリ機能の宣言

ホームグループコンテンツにアクセスするには、ユーザーのコンピューターにホームグループがセットアップされ、アプリに画像ライブラリ、音楽ライブラリ、ビデオライブラリのうちの少なくとも 1 つの機能が備わっている必要があります。アプリは、ホームグループフォルダーを取得すると、アプリのマニフェストで宣言されている機能に対応するライブラリだけを参照します。これらの機能について詳しくは、「アプリ機能の宣言」をご覧ください。

注ホームグループのドキュメントフォルダーのコンテンツは、アプリのマニフェストで宣言されている機能や、ユーザーの共有設定にかかわらず、アプリからは参照できません。
ファイルピッカーの使い方についての理解

ホームグループのファイルやフォルダーにアクセスするには、通常、ファイルピッカーを使います。ファイルピッカーの使い方については、「クイックスタート: ファイルピッカーによるファイルへのアクセス」をご覧ください。
ファイルとフォルダーのクエリについての理解

ホームグループのファイルやフォルダーを列挙するには、クエリを使うことができます。ファイルとフォルダーのクエリについて詳しくは、「クイックスタート: プログラムによるファイルへのアクセス」をご覧ください。

ホームグループでファイルピッカーを開く

以下の手順に従って、ユーザーがホームグループのファイルとフォルダーを選ぶことができるファイルピッカーのインスタンスを開きます。

ファイルピッカーを作成してカスタマイズする

fileOpenPicker を使ってファイルピッカーを作成し、ピッカーの SuggestedStartLocation を PickerLocationId.homeGroup に設定します。また、ユーザーとアプリに関連するその他のプロパティを設定します。ファイルピッカーのカスタマイズ方法を判断するためのガイドラインについては、「ファイルピッカーのガイドラインとチェックリスト」をご覧ください。

次の例では、ホームグループで開かれ、すべての種類のファイルを含み、ファイルをサムネイルイメージとして表示するファイルピッカーを作成しています。
```
var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.homeGroup;
picker.fileTypeFilter.replaceAll(["*"]);
picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
```

ファイルピッカーを表示します。

ファイルピッカーを作り、カスタマイズしたら、fileOpenPicker.pickSingleFileAsync を呼び出してユーザーが 1 つのファイルを選べるようにします。または fileOpenPicker.pickMultipleFilesAsync を呼び出して複数のファイルを選べるようにします。

次の例は、ユーザーが 1 つのファイルを選べるファイルピッカーを表示する方法と、選択されたファイルを処理のためにキャプチャする方法を示しています。

picker.pickSingleFileAsync().then(function (file) {
    if (file) {
        // The app now has read/write access to the picked file.
        WinJS.log && WinJS.log("1 file selected: \"" + file.path + "\"", 
            "sample", "status");

        // If the returned file was an image, show it to the user.
        if ((".JPG" === file.fileType) || (".jpg" === file.fileType) || 
            (".JPEG" === file.fileType) || (".jpeg" === file.fileType) || 
            (".PNG" === file.fileType) || (".png" === file.fileType) || 
            (".BMP" === file.fileType) || (".bmp" === file.fileType)) {
                document.getElementById("returnedImage").src = 
                    URL.createObjectURL(file, { oneTimeOnly: true });
                document.getElementById("returnedImage").style.visibility = "visible";
        } else {
            // The returned file wasn't an image, so hide the container where it 
            // would have appeared.
            document.getElementById("returnedImage").style.visibility = "hidden";
        }
    }
},

function (file) {
    // An error occurred.
    WinJS.log && WinJS.log("File was not returned", "sample", "error");
});

ホームグループでファイルを検索する

このセクションでは、ユーザーが指定したクエリ語句に一致するホームグループ項目を見つける方法を示します。

ユーザーからクエリ語句を取得します。

ここでは、ユーザーが入力フィールドに入力したクエリ語句を取得します。
```
var query = document.getElementById("queryString").value;
```

クエリオプションと検索フィルターを設定します。

クエリオプションは、検索結果をどのように並べ替えるかを決めます。検索フィルターは、どの項目が検索結果に含まれるかを決めます。

次の例は、検索結果をまず関連性で、次に更新日で並べ替えるクエリオプションを設定します。検索フィルターは、ユーザーが前の手順で入力したクエリ語句です。

var options = new Windows.Storage.Search.QueryOptions(
    Windows.Storage.Search.CommonFileQuery.orderBySearchRank, ["*"]);
options.userSearchFilter = query;

クエリを実行し、結果を処理します。

次の例は、検索クエリを実行し、一致するファイルの名前を文字列の一覧として保存します。

try {
    var queryResult = 
        Windows.Storage.KnownFolders.homeGroup.createFileQueryWithOptions(options);

    queryResult.getFilesAsync().then(function (files) {
        // If no matching files were found, show appropriate output and turn 
        // off the progress ring.
        if (files.size === 0) {
            WinJS.log && WinJS.log("No files found for \"" + query + "\"", 
                "sample", "status");
            document.getElementById("searchProgress").style.visibility = "hidden";
        }

        // We found matching files. Show them and turn off the progress ring.
        else {
            var outputString = (files.size === 1) ? 
                (files.size + " file found\n") : (files.size + " files found\n");
            files.forEach(function (file) {
                outputString = outputString.concat(file.name, "\n");
            });
            WinJS.log && WinJS.log(outputString, "sample", "status");
            document.getElementById("searchProgress").style.visibility = "hidden";
        }
    });
}
catch (e) {
    // An error occurred. Show and log the error.
    document.getElementById("searchProgress").style.visibility = "hidden";
    WinJS.log && WinJS.log(e.message, "sample", "error");
}

ホームグループで特定のユーザーの共有ファイルを検索する

このセクションでは、特定のユーザーによって共有されているホームグループファイルを見つける方法を示します。

ホームグループユーザーのコレクションを取得します。

ホームグループの第 1 レベルのフォルダーは、それぞれが個々のホームグループユーザーを表しています。そのため、ホームグループユーザーのコレクションを取得するには、GetFoldersAsync を呼び出し、第 1 レベルのホームグループフォルダーを取得して、それらのフォルダーを反復処理することによって個々のユーザーを得ます。
```
var hg = Windows.Storage.KnownFolders.homeGroup;
hg.getFoldersAsync().then(function (users) {
    users.forEach(function (user) {

    // TODO: Do something with the user name. 

    });
}
```
ファイルクエリを作成し、スコープを特定のユーザーに設定します。

次の例は、検索結果をまずは関連性で、次に更新日で並べ替えるように、クエリオプションを設定します。クエリオプションは、特定のユーザーをスコープにした検索クエリに適用されます。
```
var options = new Windows.Storage.Search.QueryOptions(
    Windows.Storage.Search.CommonFileQuery.orderBySearchRank, ["*"]);
var query = user.createFileQueryWithOptions(options);
```

クエリを実行し、結果のファイルを処理します。

次の例は、検索クエリを実行し、特定のユーザーに一致するファイルの名前を文字列の一覧として保存します。

query.getFilesAsync().then(function (files) {

    // If we don't find any shared files for the specified user, 
    // hide the progress indicator and notify the user. 
    if (files.size === 0) {
        document.getElementById("searchProgress").style.visibility = "hidden";

        // In the following line, userToSearch is a name specified by
        // the app user.
        outputString = "No files shared by " + userToSearch + ""; 
    }

    // We found shared files for this user. Hide the progress indicator
    // and process the files.  
    else {
        document.getElementById("searchProgress").style.visibility = "hidden";
        outputString = (files.size === 1) ? 
            (files.size + " file found\n") : (files.size + " files shared by ");
        outputString = outputString.concat(userToSearch, "\n");
        files.forEach(function (file) {
            outputString = outputString.concat(file.name, "\n");
        });
    }
});

ホームグループからビデオをストリーミングする

ホームグループからビデオコンテンツをストリーミングするには、次の手順を実行します。

アプリの HTML ページに video 要素を含めます。

video 要素に、アプリで再生するビデオコンテンツを指定します。

<div data-win-control="SdkSample.ScenarioOutput">
    <video id="player" height="338" width="600" controls style="visibility: hidden">Unable to play video file</video>
</div>

ファイルピッカーをホームグループで開き、アプリでサポートされている形式のビデオファイルを含めるフィルターを適用します。

次の例では、ファイルオープンピッカーに .mp4 ファイルと .wmv ファイルが含まれます。
```
var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.homeGroup;
picker.fileTypeFilter.replaceAll([".mp4", ".wmv"]);
```

ユーザーのファイル選択を URL に変換し、URL を video 要素のソースとして設定します。

次の例は、video 要素を取得し、非表示で一時停止の状態に初期化します。ユーザーがビデオファイルを選んだ後、ファイルの URL を取得し、video 要素のソースとして設定して、video 要素を表示し、ビデオの再生を始めます。

var vidPlayer = document.getElementById("player");
vidPlayer.style.visibility = "hidden";
vidPlayer.pause();
picker.pickSingleFileAsync().then(function (file) {
    if (file) {
        // The video tag has built in capabilities to stream the video over 
        // the network.
        vidPlayer.src = URL.createObjectURL(file, { oneTimeOnly: true });
        vidPlayer.style.visibility = "visible";
        vidPlayer.play();
    }
},
function (file) {
    WinJS.log && WinJS.log("File was not returned", "sample", "error");
});

要約

ホームグループのコンテンツにアクセスする方法について説明しました。

Share via

クイックスタート: ホームグループコンテンツへのアクセス (HTML)

必要条件

ホームグループでファイルピッカーを開く

ホームグループでファイルを検索する

ホームグループで特定のユーザーの共有ファイルを検索する

ホームグループからビデオをストリーミングする

要約

関連トピック

その他のリソース

Share via

クイック スタート: ホームグループ コンテンツへのアクセス (HTML)

必要条件

ホームグループでファイル ピッカーを開く

ホームグループでファイルを検索する

ホームグループで特定のユーザーの共有ファイルを検索する

ホームグループからビデオをストリーミングする

要約

関連トピック

その他のリソース

クイックスタート: ホームグループコンテンツへのアクセス (HTML)

ホームグループでファイルピッカーを開く