HTML을 공유하는 방법(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
HTML 콘텐츠 공유는 텍스트, 링크 등의 다른 기본 형식과는 다릅니다. 사용자가 선택하는 콘텐츠는 다른 요소에 대한 참조를 포함할 수 있습니다. HTML 공유를 지원하는 앱은 이러한 참조를 처리하여 사용자가 원하는 콘텐츠를 공유하는지 확인하는 방법을 고려해야 합니다.
HTML 공유 문제를 설명하는 일반적인 경우로는 텍스트와 이미지를 모두 포함하는 콘텐츠가 있습니다. 사용자는 이 콘텐츠를 선택하고 공유 참 메뉴를 탭할 때 텍스트와 이미지를 모두 공유할 것을 기대합니다. 그러나 HTML에는 이미지가 포함되어 있지 않으며 대신 이미지가 있는 위치를 가리키는 img 태그가 포함되어 있습니다. 대상 앱이 로컬에 저장된 이미지와 같은 이미지 참조에 액세스할 수 없는 경우 리소스 맵을 설정해야 합니다.
사용자가 원하는 방식으로 HTML을 공유할 수 있도록 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());
}
};