빠른 시작: 콘텐츠 자동 실행을 위해 앱 등록(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
자동 실행 콘텐츠 이벤트에 대한 옵션으로 앱을 등록할 수 있습니다. 자동 실행 콘텐츠 이벤트는 카메라 메모리 카드, 썸 드라이브(thumb drive) 또는 DVD 같은 볼륨 장치가 PC에 삽입될 때 발생합니다.
여기서는 카메라에서 볼륨 장치가 삽입될 때 앱을 자동 실행 옵션으로 식별하는 방법을 보여 줍니다.
목표: 자동 실행 콘텐츠 이벤트를 처리할 앱을 만듭니다.
사전 요구 사항
Microsoft Visual Studio
지침
1. 새 프로젝트를 만들고 AutoPlay 선언을 추가합니다.
Visual Studio를 열고 파일 메뉴에서 새 프로젝트를 선택합니다. JavaScript 섹션에서 Windows 스토어를 선택합니다. 앱의 이름을 AutoPlayDisplayOrCopyImages로 지정하고 확인을 클릭합니다.
Package.appxmanifest 파일을 열고 기능 탭을 선택합니다. 이동식 저장소 및 사진 라이브러리 기능을 선택합니다. 이렇게 하면 앱이 카메라 메모리용 이동식 저장 장치와 로컬 사진에 액세스할 수 있습니다.
매니페스트 파일에서 선언 탭을 선택합니다. 사용 가능한 선언 드롭다운 목록에서 자동 실행 콘텐츠를 선택하고 추가를 클릭합니다. 지원되는 선언 목록에 추가된 새 자동 실행 콘텐츠 항목을 선택합니다.
콘텐츠 자동 실행 선언은 자동 실행에서 콘텐츠 이벤트를 발생시킬 때 옵션으로 앱을 식별합니다. 이벤트는 볼륨 장치(예: DVD 또는 USB 드라이브)의 콘텐츠를 기반으로 합니다. 자동 실행은 볼륨 장치의 콘텐츠를 검사한 후 발생시킬 콘텐츠 이벤트를 결정합니다. 볼륨의 루트에 DCIM, AVCHD 또는 PRIVATE\ACHD 폴더가 포함되어 있거나 사용자가 자동 실행 제어판에서 각 미디어 유형으로 수행할 작업 선택을 사용하도록 설정하고 볼륨의 루트에 사진이 있는 경우 자동 실행은 ShowPicturesOnArrival 이벤트를 발생시킵니다.
시작 작업 섹션에서 첫 번째 시작 작업에 대해 다음 값을 입력합니다.
설정 값 동사 show 작업 표시 이름 사진 표시 콘텐츠 이벤트 ShowPicturesOnArrival 작업 표시 이름 설정은 자동 실행이 앱에 대해 표시하는 문자열을 식별합니다. 동사 설정은 선택한 옵션에 대해 앱에 전달된 값을 식별합니다. 자동 실행 이벤트에 대해 여러 개의 시작 작업을 지정하고 동사 설정을 사용하여 사용자가 앱에 대해 선택한 옵션을 확인할 수 있습니다. 앱에 전달된 시작 이벤트 인수의 verb 속성을 확인하여 사용자가 선택한 옵션을 알 수 있습니다. 동사 설정에는 예약된 open을 제외한 모든 값을 사용할 수 있습니다.
콘텐츠 자동 실행 항목의 시작 작업 섹션에서 새로 추가를 클릭하여 두 번째 시작 작업을 추가합니다. 두 번째 시작 작업에 대해 다음 값을 입력합니다.
설정 값 동사 copy 작업 표시 이름 Copy Pictures Into Library(사진을 라이브러리로 복사) 콘텐츠 이벤트 ShowPicturesOnArrival 사용 가능한 선언 드롭다운 목록에서 파일 형식 연결을 선택하고 추가를 클릭합니다. 새 파일 형식 연결 선언에서 표시 이름 필드를 AutoPlay Copy or Show Images로 설정하고 이름 필드를 image_association1로 설정합니다. 지원되는 파일 형식 섹션에서 새로 추가를 클릭합니다. 파일 형식 필드를 .jpg로 설정합니다. 지원되는 파일 형식 섹션에서 새로 추가를 다시 클릭합니다. 새 파일 연결의 파일 형식 필드를 .png로 설정합니다. 콘텐츠 이벤트의 경우 자동 실행이 앱에 명시적으로 연결되지 않은 파일 형식을 필터링합니다.
매니페스트 파일을 저장하고 닫습니다.
2. HTML UI 추가
Default.html 파일을 열고 다음 HTML을 <body> 섹션에 넣습니다.
<label>File List</label> <div id="files" style="position:fixed;top:30px;height:400px;width:600px" ></div>
3. 초기화 코드 추가
이 단계의 코드는 앱에 전달된 시작 인수로부터 verb 속성의 동사 값을 확인합니다. 그러면 코드는 사용자가 선택한 옵션과 관련된 함수를 호출합니다. 카메라 메모리 이벤트의 경우 자동 재생은 앱에 전달된 시작 인수에 카메라 저장소의 루트 폴더를 전달합니다. detail.files 속성의 첫 번째 요소에서 이 폴더를 검색할 수 있습니다.
js 폴더를 엽니다. Default.js 파일을 열고 기본 onactivated 함수를 다음 코드로 바꿉니다.
var filesDiv; app.onactivated = function (args) { if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.file) { filesDiv = document.getElementById("files"); if (args.detail.verb === "show") { // Call displayImages with root folder from camera storage. displayImages(args.detail.files[0]); } else if (args.detail.verb === "copy") { // Call copyImagesToLibrary with root folder from camera storage. copyImagesToLibrary(args.detail.files[0]); } } args.setPromise(WinJS.UI.processAll()); };
4. 이미지 표시 코드 추가
Default.js 파일에서 onactivated 함수 뒤에 다음 코드를 추가합니다.
function displayImages(rootFolder) { // Display images from first folder in root\DCIM. rootFolder.getFolderAsync("DCIM").then( function (dcimFolder) { dcimFolder.getFoldersAsync().then( function (cameraFolders) { cameraFolders[0].getFilesAsync().then( function (files) { files.forEach(function (file) { filesDiv.innerHTML += file.name + "<br />"; displayImage(file); }); }); }); }); } function displayImage(file) { try { var element = document.createElement("img"); element.src = window.URL.createObjectURL(file, { oneTimeOnly: true }); element.height = 100; element.width = 100; filesDiv.appendChild(element); filesDiv.innerHTML += "<br>"; } catch (e) { filesDiv.innerHTML += e.message; } }
5. 이미지 복사 코드 추가
Default.js 파일에서 displayImage 함수 뒤에 다음 코드를 추가합니다.
function copyImagesToLibrary(rootFolder) { try { var now = new Date(); var folderName = "Images " + now.toDateString() + " " + now.getHours() + now.getMinutes() + now.getSeconds(); Windows.Storage.KnownFolders. picturesLibrary.createFolderAsync(folderName).then( function (imageFolder) { // Copy images from first folder in root\DCIM. rootFolder.getFolderAsync("DCIM").then( function (dcimFolder) { dcimFolder.getFoldersAsync().then( function (cameraFolders) { cameraFolders[0].getFilesAsync().then( function (files) { files.forEach(function (file) { copyImage(file, imageFolder); }); }); }); }); }); } catch (e) { filesDiv.innerHTML = "Failed copy images.<br />" + e.message; } } function copyImage(file, imageFolder) { try { file.copyAsync( imageFolder, file.fileName, Windows.Storage.NameCollisionOption.replaceExisting).then( function (newFile) { filesDiv.innerHTML += file.name + " copied.<br />"; }); } catch (e) { filesDiv.innerHTML += "Failed to copy image.<br />" + e.message; } }
6. 앱 빌드 및 실행
- F5를 눌러 앱을 빌드하고 배포합니다(디버그 모드).
- 앱을 실행하려면 카메라 메모리 카드나 카메라의 다른 저장 장치를 PC에 삽입합니다. 그런 다음 자동 실행 옵션 목록에서 package.appxmanifest 파일에 지정한 콘텐츠 이벤트 옵션 중 하나를 선택합니다. 이 샘플 코드에서는 카메라 메모리 카드의 DCIM 폴더에 있는 사진을 표시하거나 복사하기만 합니다. 카메라 메모리 카드에서 사진을 AVCHD 또는 PRIVATE\ACHD 폴더에 저장하는 경우 그에 따라 코드를 업데이트해야 합니다.참고 카메라 메모리 카드가 없는 경우 루트에 DCIM이라는 폴더가 있고 DCIM 폴더에 이미지가 포함된 하위 폴더가 있는 경우 플래시 드라이브를 사용할 수 있습니다.
요약 및 다음 단계
이 자습서에서는 이미지 파일을 표시하거나 사진에 복사하는 앱을 만들었습니다. 그리고 ShowPicturesOnArrival 콘텐츠 자동 실행 이벤트에 대해 앱을 등록했습니다.
자동 실행에서는 근접 연결(탭하기)을 사용하여 PC 간에 공유된 콘텐츠에 대해 콘텐츠 이벤트를 발생시킵니다. 이 빠른 시작의 단계와 코드를 사용하여 근접 연결을 사용하는 PC 간에 공유되는 파일을 처리할 수 있습니다. 다음 표에는 근접 연결을 사용하여 콘텐츠를 공유하는 데 사용할 수 있는 자동 실행 콘텐츠 이벤트가 나열되어 있습니다.
| 작업 | 콘텐츠 자동 실행 이벤트 |
|---|---|
| 음악 공유 | PlayMusicFilesOnArrival |
| 동영상 공유 | PlayVideoFilesOnArrival |
파일이 근접 연결을 사용하여 공유되는 경우 FileActivatedEventArgs 개체의 Files 속성에 모든 공유 파일이 있는 루트 폴더에 대한 참조가 포함됩니다.