HTML を共有する方法 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
HTML コンテンツの共有は、テキストやリンクなどの他の基本形式とは異なります。最も大きな課題は、他の要素への参照を含むコンテンツをユーザーが共有しようとした場合の処理です。HTML の共有をサポートするアプリでは、ユーザーが必要なコンテンツを共有できるように、それらの参照の処理方法を考える必要があります。
HTML の共有でよく課題となるのは、コンテンツにテキストと画像の両方が含まれている場合です。そのようなコンテンツを選んで共有チャームをタップするとき、ユーザーはテキストと画像の両方を共有できるものと考えています。しかし、HTML に含まれているのは画像の場所を参照する img タグであり、画像自体は含まれていません。ローカルに格納された画像のように、画像の参照がターゲット アプリからアクセスできない場合は、リソース マップをセットアップする必要があります。
ユーザーが期待する方法で HTML を共有できるように、Windows.ApplicationModel.DataTransfer 名前空間のいくつかの関数を使って、画像などの参照される要素をキャプチャすることができます。ここではその方法について説明します。
理解しておく必要があること
テクノロジ
必要条件
- Visual Studio と関連するテンプレートについて理解している必要があります。
- JavaScript について理解している必要があります。
- ユーザーが選んだ HTML を JavaScript で識別し、その中から img タグなどの子要素を見つける方法を理解している必要があります。
手順
ステップ 1: 共有ソースとしてアプリをセットアップする
DataTransferManager オブジェクトは、共有操作のメインの出発点となります。ユーザーが "共有" を起動するときに呼び出される DataRequested イベント ハンドラーを追加します。Windows ストア アプリでは、ユーザーが共有チャームを起動すると自動的にこのイベントが発生します。Windows Phone 用の開発を行っている場合は、組み込みの共有チャームがないため、ユーザーがタップするコントロールを追加してハンドラーをトリガーする必要があります。
var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", shareHtmlHandler);
残りの手順は、shareHtmlHandler 関数を実装する手順です。
ステップ 2: DataRequest オブジェクトを取得する
datarequested イベントが発生すると、アプリは DataRequest オブジェクトを受け取ります。このオブジェクトに含まれている DataPackage を使って、ユーザーが共有するコンテンツを提供することができます。
var request = e.request;
ステップ 3: タイトルと説明のプロパティを設定する
request.data.properties.title = "Share Html Example";
request.data.properties.description =
"Demonstrates how to share an HTML fragment with a local image.";
ステップ 4: createHtmlFormat メソッドを使ってフラグメントを生成する
createHtmlFormat 関数を使って、HTML 形式とコンテンツを共有するためにシステムで必要なヘッダーなどの情報をラップします。
var localImage = "ms-appx:///images/logo.png";
var htmlExample = "<p>Here is a local image: <img src=\"" + localImage + "\">.</p>";
var htmlFormat =
Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(htmlExample);
ステップ 5: DataPackage に HTML を追加する
HTML を追加するには、setHtmlFormat 関数を使います。
request.data.setHtmlFormat(htmlFormat);
ステップ 6: ローカル画像の RandomAccessStreamReference を作成する
var streamRef =
Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(new Windows.Foundation.Uri(localImage));
ステップ 7: RandomAccessStreamReference をリソース マップに追加する
画像ファイルを追加するには、resourceMap プロパティを使います。
request.data.resourceMap[localImage] = streamRef;
共有している HTML フラグメントに複数のローカル画像が含まれる場合は、各ローカル画像でこの手順を繰り返します。
完全な例
HTML をユーザーが共有できるように設定する関数の例を次に示します。完全なコード例については、コード ギャラリーのサンプルをご覧ください。
function shareHtmlHandler(e) {
var localImage = "ms-appx:///images/logo.png";
var htmlExample = "<p>Here is a local image: <img src=\"" + localImage + "\">.</p>";
var request = e.request;
request.data.properties.title = "Share Html Example";
request.data.properties.description = "Demonstrates how to share an HTML fragment with a local image.";
var htmlFormat = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(htmlExample);
request.data.setHtmlFormat(htmlFormat);
var streamRef = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(new Windows.Foundation.Uri(localImage));
request.data.resourceMap[localImage] = streamRef;
}
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// This app is newly launched; register the app as a share source.
var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", shareHtmlHandler);
} else {
// TODO: This app was reactivated from suspension.
// Restore the app state here.
}
args.setPromise(WinJS.UI.processAll());
}
};