ファイルを共有する方法 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
多くのユーザーは、ファイルを他のユーザーやアプリと共有して使います。たとえば、同僚にメールでファイルを送る場合も、家族の休暇の写真を共有する場合も、共有機能を使えばそれらの作業を簡単にサポートできます。
ファイルの共有のような操作をアプリでサポートする場合は、ファイルを準備できるタイミングを考慮する必要があります。ほとんどの場合、アプリでファイルの共有準備をすることになります。このトピックでは、そのような場合の手順を示します。ファイルの形式を変換するなど、ファイルを準備するために必要なその他の作業については、「プル操作のサポート方法」をご覧ください。このトピックには、デリゲート関数を使って、共有するコンテンツをアプリからプッシュする代わりに、ターゲット アプリの方からプルできるようにする方法が記載されています。
理解しておく必要があること
テクノロジ
必要条件
- 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: 共有ソースとしてアプリをセットアップする
DataTransferManager オブジェクトは、共有操作のメインの出発点となります。ユーザーが "共有" を起動するときに呼び出される DataRequested イベント ハンドラーを追加します。Windows ストア アプリでは、ユーザーが共有チャームを起動すると自動的にこのイベントが発生します。Windows Phone 用の開発を行っている場合は、組み込みの共有チャームがないため、ユーザーがタップするコントロールを追加してハンドラーをトリガーする必要があります。
var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", shareStorageItemsHandler);
残りの手順は、shareStorageItemsHandler 関数を実装する手順です。
ステップ 3: DataRequest オブジェクトを取得する
datarequested イベントが発生すると、アプリは DataRequest オブジェクトを受け取ります。このオブジェクトに含まれている DataPackage を使って、ユーザーが共有するコンテンツを提供することができます。
var request = e.request;
ステップ 4: タイトルと説明のプロパティを設定する
request.data.properties.title = "Share StorageItems Example";
request.data.properties.description = "Demonstrates how to share files.";
ステップ 5: DataPackage にファイルを追加する
DataPackage にファイルを追加するには、setStorageItems メソッドを使います。
request.data.setStorageItems([imageFile]);
注釈
既定では、setStorageItems は、ターゲット アプリと共有するために storageItems の読み取り専用 "クローン" を提供します。setStorageItems を呼び出した後は、複製された項目に個々のストレージ項目に対して設定した新しいプロパティは反映されません。そのため、DataPackage にファイルを追加する前に、それらのファイルを共有するための準備が完了していることを確認してください。
また、storageItems でターゲット アプリに読み取り/書き込み機能を持たせる場合は、setStorageItems メソッドのオーバーロードされたバージョンを使って読み取り専用または読み取り/書き込みを指定できます。たとえば、ターゲットに貼り付け時に削除する操作を求めるソース アプリでは、ソース ファイルをコピーした後にターゲットがソース ファイルを削除できるよう、読み取り/書き込みを指定します。
アプリが非同期操作を使って画像またはサムネイルを用意する必要がある場合は、保留パターンを使うことになります。その方法については、「datarequested ハンドラーで非同期呼び出しを行う方法」で説明しています。
ファイルの準備に時間がかかる (200 ミリ秒を超える) 場合は、デリゲート関数を使って共有する必要があります。この方法については、「プル操作のサポート方法」をご覧ください。デリゲート関数を使う場合は、ファイル自体を追加する前に、DataPackage の FileTypes プロパティを設定する必要があります。
完全な例
ファイルをユーザーが共有できるように設定する関数の例を次に示します。完全なコード例については、コード ギャラリーのサンプルをご覧ください。
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 shareStorageItemsHandler(e) {
var request = e.request;
request.data.properties.title = "Share StorageItems Example";
request.data.properties.description = "Demonstrates how to share files.";
request.data.setStorageItems([imageFile]);
}
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", shareStorageItemsHandler);
// Setup the button handler to pick 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());
}
};