빠른 시작: 홈 그룹 콘텐츠 액세스(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
사진, 음악, 비디오 등 사용자의 홈 그룹 폴더에 저장된 콘텐츠에 액세스합니다.
사전 요구 사항
JavaScript로 작성한 Windows 런타임 앱의 비동기 프로그래밍 이해
비동기 앱 작성 방법에 대한 자세한 내용은 빠른 시작: JavaScript에서 promise 사용을 참조하세요.
앱 기능 선언
홈 그룹 콘텐츠에 액세스하려면 사용자의 컴퓨터에 홈 그룹이 설정되어 있고 앱에는 사진 라이브러리, 음악 라이브러리 또는 비디오 라이브러리 접근 권한 값 중 하나 이상이 있어야 합니다. 앱에서 홈 그룹 폴더에 연결하면 앱의 매니페스트에 선언된 접근 권한 값에 해당하는 라이브러리만 표시됩니다. 이러한 접근 권한 값에 대한 자세한 내용은 앱 접근 권한 값 선언을 참조하세요.
참고 홈 그룹의 문서 폴더에 있는 콘텐츠는 앱의 매니페스트에 선언된 접근 권한 값 및 사용자의 공유 설정에 관계없이 앱에 표시되지 않습니다.
파일 선택기 사용 방법 이해
일반적으로 파일 선택기를 사용하여 홈 그룹의 파일 및 폴더에 액세스합니다. 파일 선택기 사용 방법에 대한 자세한 내용은 빠른 시작: 파일 선택기를 사용하여 파일에 액세스를 참조하세요.
파일 및 폴더 쿼리 이해
쿼리를 사용하여 홈 그룹의 파일 및 폴더를 열거할 수 있습니다. 파일 및 폴더 쿼리에 대한 자세한 내용은 빠른 시작: 프로그래밍 방식으로 파일 액세스를 참조하세요.
홈 그룹에서 파일 선택기 열기
사용자가 홈 그룹에서 파일 및 폴더를 선택할 수 있도록 하는 파일 선택기 인스턴스를 열려면 다음 단계를 수행하세요.
파일 선택기 만들기 및 사용자 지정
fileOpenPicker를 사용하여 파일 선택기를 만든 다음 선택기의 SuggestedStartLocation을 PickerLocationId.homeGroup으로 설정합니다. 사용자 및 앱과 관련된 다른 속성도 설정합니다. 파일 선택기 사용자 지정 방법을 결정하는 데 도움이 되는 지침은 파일 선택기에 대한 지침 및 검사 목록을 참조하세요.
다음 예에서는 홈 그룹에서 열리는 파일 선택기를 만들고 모든 형식의 파일을 포함하며 파일을 미리 보기 이미지로 표시합니다.
var picker = new Windows.Storage.Pickers.FileOpenPicker(); picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.homeGroup; picker.fileTypeFilter.replaceAll(["*"]); picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;파일 선택기 표시
파일 선택기를 만들어 사용자 지정한 후 fileOpenPicker.pickSingleFileAsync를 호출하여 사용자가 파일 하나를 선택하도록 할 수 있습니다. 또는 fileOpenPicker.pickMultipleFilesAsync를 호출하여 여러 파일을 선택하도록 할 수 있습니다.
다음 예에서는 사용자가 파일 하나를 선택할 수 있는 파일 선택기를 표시하는 방법과 처리하기 위해 선택한 파일을 캡처하는 방법을 보여 줍니다.
picker.pickSingleFileAsync().then(function (file) { if (file) { // The app now has read/write access to the picked file. WinJS.log && WinJS.log("1 file selected: \"" + file.path + "\"", "sample", "status"); // If the returned file was an image, show it to the user. if ((".JPG" === file.fileType) || (".jpg" === file.fileType) || (".JPEG" === file.fileType) || (".jpeg" === file.fileType) || (".PNG" === file.fileType) || (".png" === file.fileType) || (".BMP" === file.fileType) || (".bmp" === file.fileType)) { document.getElementById("returnedImage").src = URL.createObjectURL(file, { oneTimeOnly: true }); document.getElementById("returnedImage").style.visibility = "visible"; } else { // The returned file wasn't an image, so hide the container where it // would have appeared. document.getElementById("returnedImage").style.visibility = "hidden"; } } }, function (file) { // An error occurred. WinJS.log && WinJS.log("File was not returned", "sample", "error"); });
홈 그룹에서 파일 검색
이 섹션에서는 사용자가 제공한 쿼리 용어와 일치하는 홈 그룹 항목을 찾는 방법을 보여 줍니다.
사용자의 쿼리 용어를 가져옵니다.
여기서는 사용자가 입력 필드에 입력한 쿼리 용어를 가져옵니다.
var query = document.getElementById("queryString").value;쿼리 옵션 및 검색 필터를 설정합니다.
쿼리 옵션은 검색 결과를 정렬하는 방식을 결정하고 검색 필터는 검색 결과에 포함되는 항목을 결정합니다.
다음 예에서는 검색 결과를 관련성순으로 정렬한 다음 수정한 날짜순으로 정렬하는 쿼리 옵션을 설정합니다. 검색 필터는 사용자가 이전 단계에서 입력한 쿼리 용어입니다.
var options = new Windows.Storage.Search.QueryOptions( Windows.Storage.Search.CommonFileQuery.orderBySearchRank, ["*"]); options.userSearchFilter = query;쿼리를 실행하고 결과를 처리합니다.
다음 예에서는 검색 쿼리를 실행하고 일치하는 파일의 이름으로 문자열 목록으로 저장합니다.
try { var queryResult = Windows.Storage.KnownFolders.homeGroup.createFileQueryWithOptions(options); queryResult.getFilesAsync().then(function (files) { // If no matching files were found, show appropriate output and turn // off the progress ring. if (files.size === 0) { WinJS.log && WinJS.log("No files found for \"" + query + "\"", "sample", "status"); document.getElementById("searchProgress").style.visibility = "hidden"; } // We found matching files. Show them and turn off the progress ring. else { var outputString = (files.size === 1) ? (files.size + " file found\n") : (files.size + " files found\n"); files.forEach(function (file) { outputString = outputString.concat(file.name, "\n"); }); WinJS.log && WinJS.log(outputString, "sample", "status"); document.getElementById("searchProgress").style.visibility = "hidden"; } }); } catch (e) { // An error occurred. Show and log the error. document.getElementById("searchProgress").style.visibility = "hidden"; WinJS.log && WinJS.log(e.message, "sample", "error"); }
홈 그룹에서 특정 사용자의 공유 파일 검색
이 섹션에서는 특정 사용자가 공유하는 홈 그룹을 찾는 방법을 보여 줍니다.
홈 그룹 사용자 컬렉션을 가져옵니다.
홈 그룹에 있는 각각의 첫 번째 수준 폴더는 개별 홈 그룹 사용자를 나타냅니다. 따라서 홈 그룹 사용자 컬렉션을 가져오기 위해 GetFoldersAsync를 호출하여 최상위 수준의 홈 그룹 폴더를 검색하고 나서 검색된 폴더를 반복하여 개별 사용자를 가져옵니다.
var hg = Windows.Storage.KnownFolders.homeGroup; hg.getFoldersAsync().then(function (users) { users.forEach(function (user) { // TODO: Do something with the user name. }); }파일 쿼리를 만들고 범위를 특정 사용자로 지정합니다.
다음 예제에서는 검색 결과를 관련성순으로 정렬한 다음 수정한 날짜순으로 정렬하는 쿼리 옵션을 설정합니다. 그러고 나면 이 쿼리가 특정 사용자로 지정된 검색 범위에 적용됩니다.
var options = new Windows.Storage.Search.QueryOptions( Windows.Storage.Search.CommonFileQuery.orderBySearchRank, ["*"]); var query = user.createFileQueryWithOptions(options);쿼리를 실행하고 결과 파일을 처리합니다.
이 예제에서는 검색 쿼리를 실행하고 특정 사용자와 일치하는 파일의 이름을 문자열 목록으로 저장합니다.
query.getFilesAsync().then(function (files) { // If we don't find any shared files for the specified user, // hide the progress indicator and notify the user. if (files.size === 0) { document.getElementById("searchProgress").style.visibility = "hidden"; // In the following line, userToSearch is a name specified by // the app user. outputString = "No files shared by " + userToSearch + ""; } // We found shared files for this user. Hide the progress indicator // and process the files. else { document.getElementById("searchProgress").style.visibility = "hidden"; outputString = (files.size === 1) ? (files.size + " file found\n") : (files.size + " files shared by "); outputString = outputString.concat(userToSearch, "\n"); files.forEach(function (file) { outputString = outputString.concat(file.name, "\n"); }); } });
홈 그룹에서 비디오 스트리밍
홈 그룹에서 비디오 콘텐츠를 스트리밍하려면 다음 단계를 수행하세요.
앱 HTML 페이지에 비디오 요소를 포함합니다.
video 요소는 앱에서 재생할 비디오 콘텐츠를 지정합니다.
<div data-win-control="SdkSample.ScenarioOutput"> <video id="player" height="338" width="600" controls style="visibility: hidden">Unable to play video file</video> </div>홈 그룹에서 파일 선택기를 열고 앱이 지원하는 형식으로 비디오 파일을 포함하는 필터를 적용합니다.
다음 예에서는 파일 열기 선택기에 .mp4 및 .wmv 파일을 포함합니다.
var picker = new Windows.Storage.Pickers.FileOpenPicker(); picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail; picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.homeGroup; picker.fileTypeFilter.replaceAll([".mp4", ".wmv"]);사용자가 선택한 파일을 URL로 변환하고 해당 URL을 비디오 요소의 원본으로 설정합니다.
다음 예에서는 비디오 요소를 검색하고 표시되지 않고 일시 중지된 상태로 있도록 초기화합니다. 사용자가 비디오 파일을 선택하면 이 예에서는 파일의 URL을 검색하고 video 요소의 원본으로 설정한 다음 비디오 요소를 표시하고 비디오 재생을 시작합니다.
var vidPlayer = document.getElementById("player"); vidPlayer.style.visibility = "hidden"; vidPlayer.pause(); picker.pickSingleFileAsync().then(function (file) { if (file) { // The video tag has built in capabilities to stream the video over // the network. vidPlayer.src = URL.createObjectURL(file, { oneTimeOnly: true }); vidPlayer.style.visibility = "visible"; vidPlayer.play(); } }, function (file) { WinJS.log && WinJS.log("File was not returned", "sample", "error"); });
요약
이제 홈 그룹의 콘텐츠에 액세스하는 방법을 이해해야 합니다.
관련 항목
참조