HTML을 공유하는 방법(HTML)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

HTML 콘텐츠 공유는 텍스트, 링크 등의 다른 기본 형식과는 다릅니다. 사용자가 선택하는 콘텐츠는 다른 요소에 대한 참조를 포함할 수 있습니다. HTML 공유를 지원하는 앱은 이러한 참조를 처리하여 사용자가 원하는 콘텐츠를 공유하는지 확인하는 방법을 고려해야 합니다.

HTML 공유 문제를 설명하는 일반적인 경우로는 텍스트와 이미지를 모두 포함하는 콘텐츠가 있습니다. 사용자는 이 콘텐츠를 선택하고 공유 참 메뉴를 탭할 때 텍스트와 이미지를 모두 공유할 것을 기대합니다. 그러나 HTML에는 이미지가 포함되어 있지 않으며 대신 이미지가 있는 위치를 가리키는 img 태그가 포함되어 있습니다. 대상 앱이 로컬에 저장된 이미지와 같은 이미지 참조에 액세스할 수 없는 경우 리소스 맵을 설정해야 합니다.

사용자가 원하는 방식으로 HTML을 공유할 수 있도록 Windows.ApplicationModel.DataTransfer 네임스페이스에는 이미지 등과 같은 참조되는 요소를 캡처할 수 있는 몇 가지 함수가 포함되어 있습니다. 방법을 보여 드리겠습니다.

알아야 할 사항

기술

Windows.ApplicationModel.DataTransfer

사전 요구 사항

Visual Studio 및 관련 템플릿을 잘 알고 있어야 합니다.
JavaScript에 대해 잘 알고 있어야 합니다.
JavaScript를 사용하여 사용자가 선택한 HTML을 식별하고 해당 선택 항목에서 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());
    }
};