言語: HTML | XAML

HTML を共有する方法 (HTML)

Applies to Windows and Windows Phone

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());
    }
};

関連トピック

コンテンツ共有ソース アプリ サンプル
データの共有と交換
ファイルを共有する方法
リンクを共有する方法
テキストを共有する方法
クイック スタート: コンテンツの共有
DataPackage
Windows.ApplicationModel.DataTransfer
Windows.ApplicationModel.DataTransfer.Share

 

 

表示:
© 2014 Microsoft