プル操作のサポート方法 (HTML)

  • [アーティクル]

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

多くの場合、アプリは共有データを datarequested イベント ハンドラーからすぐに提供します。しかし、場合によっては、データを共有する準備に時間がかかることがあります。そのような場合、サポートされている形式の一覧は提示しても、コンテンツの準備と提供はターゲット アプリが要求するまで遅らせることができます。ターゲット アプリが要求するまでコンテンツの提供を遅らせることを、プル操作 (または遅延共有) と呼びます。

プル操作をサポートするには、まず、ユーザーが共有するデータをパッケージ化する関数を作ります。次に、実際のデータをターゲット アプリに提供する代わりに、デリゲート関数を提供します。ターゲット アプリがデータを取得しようとすると、システムはデリゲート関数を呼び出します。この場合の利点は、アプリが見えないところでデータを共有できるので、ユーザーはアプリを他の操作に引き続き使うことができるという点です。

理解しておく必要があること

テクノロジ

必要条件

  • Visual Studio と関連するテンプレートについて理解している必要があります。
  • JavaScript について理解している必要があります。
  • FileOpenPicker を使った、ファイルとデータの取得方法について理解している必要があります。詳しくは、「ファイル ピッカーによるファイルへのアクセス」をご覧ください。

手順

ステップ 1: ユーザーが画像ファイルを選べるようにするためのボタン ハンドラー関数を作成する

次のボタン ハンドラー コードは、ユーザーが画像ファイルを選べるようにします。このファイルは、このクイック スタートの残りの手順でも使われます。

注  

次のコードでは pickSingleFileAsync を使っています。Windows Phone 8.1 では、代わりに pickSingleFileAndContinue を使う必要があります。

var imageFile = null;
function pickImageFile() {
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().done(function (file) {
        imageFile = file;
    });
}

ステップ 2: ユーザーが共有するコンテンツを提供するデリゲート関数を作成する。

デリゲート関数の正確な特性は、アプリによって異なります。次に例を示します。

function onDeferredImageRequested(request) {
    if (imageFile) {
        var imageStreamRef = Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile);
        request.setData(imageStreamRef);
    }
}

デリゲート関数は、setBitmap や setStorageItems などの形式固有の関数ではなく、setData を使ってコンテンツを追加します。デリゲート関数を使うときは、setData を使ってコンテンツを提供する必要があります。

ステップ 3: 共有ソースとしてアプリをセットアップする

DataTransferManager オブジェクトは、共有操作のメインの出発点となります。ユーザーが "共有" を起動するときに呼び出される DataRequested イベント ハンドラーを追加します。Windows ストア アプリでは、ユーザーが共有チャームを起動すると自動的にこのイベントが発生します。Windows Phone 用の開発を行っている場合は、組み込みの共有チャームがないため、ユーザーがタップするコントロールを追加してハンドラーをトリガーする必要があります。

var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", sharePullHandler);

残りの手順は、sharePullHandler 関数を実装する手順です。

ステップ 4: DataRequest オブジェクトを取得する

datarequested イベントが発生すると、アプリは DataRequest オブジェクトを受け取ります。通常は、このオブジェクトに含まれている DataPackage を使って、ユーザーが共有するコンテンツを提供することができます。ただし、プル操作では、実際のデータの代わりにデリゲート関数を指定します。

var request = e.request;

ステップ 5: タイトルと説明のプロパティを設定する

request.data.properties.title = "Share Pull Example";
request.data.properties.description = "Demonstrates how to pull operations in share.";

ステップ 6: 必要に応じてファイルの種類を設定します。

デリゲート関数を使ってファイルを共有する場合は、アプリがサポートするファイルの種類を指定する必要があります。

request.data.properties.fileTypes.replaceAll([".jpg", ".bmp", ".gif", ".png"]);

ステップ 7: DataPackage オブジェクトにデリゲート関数を追加する

setDataProvider メソッドで、実際のコンテンツを提供する作成済みのデリゲート関数を指定します。

request.data.setDataProvider(Windows.ApplicationModel.DataTransfer.StandardDataFormats.bitmap, onDeferredImageRequested);

この時点で、ユーザーが共有チャームをタップすると、アプリはデリゲート関数が含まれている DataPackage オブジェクトを即座に返すことができます。これで、共有操作を見えないところで続けることができるようになり、ユーザーは他のやりたい操作を引き続き行うことができます。

setStorageItems メソッドを使ってファイルを共有している場合は、このメソッドによって、共有する読み取り専用の StorageFile オブジェクトが作られ、元のオブジェクトに保持されることに留意してください。つまり、setStorageItems メソッドを呼び出した後に元のファイルに拡張プロパティを追加した場合、これらの新しいプロパティは共有されている StorageFile オブジェクトに含まれません。そのため、準備が完了するまでファイルを追加しないことをお勧めします。

注釈

ページ間でのナビゲーションを避けるために、遅延レンダリングを使ってデータを共有するアプリは単一のページ アプリにする必要があります。また、アプリがフレーム内でのナビゲーションをサポートしている場合は、フレーム レベルでデリゲートを登録するのではなく、トップレベルのスクリプト コンテキストを使ってデリゲート関数を登録する必要があります。ナビゲーションを使うとスクリプト コンテキストが失われ、デリゲート関数が無効になり、遅延レンダリングが失敗します。

完全な例

var imageFile = null;
function pickImageFile() {
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().done(function (file) {
        imageFile = file;
    });
}

function onDeferredImageRequested(request) {
    if (imageFile) {
        var imageStreamRef = Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile);
        request.setData(imageStreamRef);
    }
}

function sharePullHandler(e) {
    var request = e.request;
    request.data.properties.title = "Share Pull Example";
    request.data.properties.description = "Demonstrates how to support pull operations in share.";
    request.data.properties.fileTypes.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    request.data.setDataProvider(Windows.ApplicationModel.DataTransfer.StandardDataFormats.bitmap, onDeferredImageRequested);
}

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // This app is newly launched; register it as a share source.
            var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
            dataTransferManager.addEventListener("datarequested", sharePullHandler);
            // Set up the button handler to pick an image file.
            document.getElementById("chooseImageButton").addEventListener("click", pickImageFile, false);
        } else {
            // TODO: This app was reactivated from suspension.
            // Restore the app state here.
        }
        args.setPromise(WinJS.UI.processAll());
    }
};

関連トピック

コンテンツ共有ソース アプリ サンプル

データの共有と交換

要求されたデータを非同期的に生成する方法

クイック スタート: コンテンツの共有

DataPackage

Windows.ApplicationModel.DataTransfer

Windows.ApplicationModel.DataTransfer.Share