クイック スタート: 自動再生を使ってのカメラからの画像取得 (HTML)
このチュートリアルでは、記憶装置が接続されたときに、自動再生イベントを処理してリムーバブル ストレージにアクセスする方法について説明します。
目標: 自動再生アクティブ化イベントをアプリで処理してリムーバブル ストレージにアクセスする方法について説明します。
必要条件
JavaScript と HTML について理解している必要があります。
コンピューターに接続して自動再生イベントをトリガーできるカメラ (またはカメラのメモリ デバイス) が必要です。記憶装置には画像ファイルが格納されている必要があります。このアプリは、記憶装置上の最初の画像を検索して表示します。
完了までの時間: 20 分.
手順
1. Microsoft Visual Studio を開く
Visual Studio のインスタンスを開きます。
2. 新しいプロジェクトを作る
[新しいプロジェクト] ダイアログ ボックスで、JavaScript のプロジェクトの種類から新しいアプリケーションを選びます。
3. リムーバブル ストレージの機能を宣言する
ソリューション エクスプローラーで package.appxmanifest をダブルクリックします。[機能] タブをクリックします。[機能] の一覧で、[リムーバブル ストレージ] をオンにします。
4. ファイルの種類を宣言する
- [宣言] タブの [使用可能な宣言] から [ファイルの種類の関連付け] を選び、[追加] をクリックします。
- [プロパティ] で、Name プロパティを image に設定します。
- [サポートされるファイルの種類] ボックスに .gif を追加します。FileType フィールドに「.gif」と入力してください。
- サポートされるファイルの種類をさらに 2 つ追加します (.jpg と .png)。[新規追加] をクリックして、FileType にそれぞれのファイルの種類を入力してください。
5. 自動再生コンテンツのコントラクトを宣言する
- [宣言] タブの [使用可能な宣言] から [自動再生コンテンツ] を選び、[追加] をクリックします。
- [プロパティ] で、ContentEvent プロパティを CameraMemoryOnArrival に設定し、Verb プロパティを storageDevice に設定します。さらに、自動再生が作動してアプリが起動されたときに表示するアプリの表示名を ActionDisplayName プロパティに設定します。
6. 自動再生デバイスのコントラクトを宣言する
- [宣言] タブの [使用可能な宣言] から [自動再生デバイス] を選び、[追加] をクリックします。
- [プロパティ] で、DeviceEvent プロパティを WPD\ImageSource に設定し、Verb プロパティを wpdImage に設定します。さらに、自動再生が作動してアプリが起動されたときに表示するアプリの表示名を ActionDisplayName プロパティに設定します。
7. HTML と JavaScript を挿入する
Default.html を開き、次のコードをこのファイルにコピーして、元の内容を置き換えます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Using Autoplay</title>
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", initialize, false);
// Add a handler for the activated event so it can
// do something when activated via AutoPlay.
Windows.UI.WebUI.WebUIApplication.addEventListener(
"activated", activatedHandler);
function activatedHandler(eventArgs) {
if (eventArgs.kind ===
Windows.ApplicationModel.Activation.ActivationKind.file) {
// clear any device id so we always use
// the latest connected device
g_autoPlayDeviceId = null;
g_autoPlayDrive = eventArgs.files[0];
document.getElementById("btn").click();
getFirstImageOnAutoPlayStorage();
} else if (eventArgs.kind ===
Windows.ApplicationModel.Activation.ActivationKind.device) {
// clear any saved drive so we always use
// the latest connected device
g_autoPlayDrive = null;
g_autoPlayDeviceId = eventArgs.deviceInformationId;
document.getElementById("btn").click();
getFirstImageOnAutoPlayStorage();
} else {
document.getElementById("status").innerHTML =
"Not activated using Autoplay";
document.getElementById("btn").disabled = true;
}
}
function initialize() {
document.getElementById("btn").addEventListener(
"click", getFirstImageOnAutoPlayStorage, false);
}
function getFirstImageOnAutoPlayStorage() {
document.getElementById("output").innerHTML = "";
if (g_autoPlayDrive) {
document.getElementById("status").innerHTML =
"Activated using Drive Autoplay";
// Drive Autoplay returns a Windows.Storage.StorageFolder
// representing the storage drive
// Construct the query for image files on the device
var queryOptions = new Windows.Storage.Search.QueryOptions(
Windows.Storage.Search.CommonFileQuery.orderByName,
[".jpg", ".png", ".gif"]);
var imageFileQuery =
g_autoPlayDrive.createFileQueryWithOptions(queryOptions);
// Run the query for image files
imageFileQuery.getFilesAsync().
then(
function (items) {
displayFirstImage(items);
},
function (e) {
document.getElementById("output").innerHTML =
"Error when looking for images in '" +
g_autoPlayDrive.name + "': " + e.message;
});
} else if (g_autoPlayDeviceId) {
document.getElementById("output").innerHTML =
"Activated using Device Autoplay";
// Device Autoplay returns a device ID. We take an extra step to
// convert that identifier into a Windows.Storage.StorageFolder.
var autoplayStorageDevice;
try {
autoplayStorageDevice =
Windows.Devices.Portable.StorageDevice.fromId(g_autoPlayDeviceId);
} catch (e) {
document.getElementById("output").innerHTML =
e.message;
}
// Construct the query for image files on the device
var queryOptions = new Windows.Storage.Search.QueryOptions(
Windows.Storage.Search.CommonFileQuery.orderByName,
[".jpg", ".png", ".gif"]);
var imageFileQuery =
autoplayStorageDevice.createFileQueryWithOptions(queryOptions);
imageFileQuery.getFilesAsync().
then(
function (items) {
displayFirstImage(items);
},
function (e) {
document.getElementById("output").innerHTML =
"Error when looking for images in '" +
autoplayStorageDevice.name + "': " + e.message;
});
} else {
document.getElementById("output").innerHTML =
"Not activated via AutoPlay.";
}
}
function displayImage(imageFile) {
document.getElementById("imageNameHolder").innerHTML =
"Image file name: " + imageFile.name + "<br/>";
// Setting 2nd parameter to 'false' cleans up the URL
// after first use. We set this because we only need
// to load the URL into the image tag once.
document.getElementById("imageHolder").src =
window.URL.createObjectURL(imageFile, false);
}
function displayFirstImage(items) {
var found = false;
for (var i = 0, l = items.length; i < l && !found; i++) {
if (items[i].size > 0) { // display the first non-empty file
displayImage(items[i]);
found = true;
}
}
if (!found) {
// No files found matching our criteria
document.getElementById("output").innerHTML =
"No image files found on the removable storage";
}
}
</script>
</head>
<body>
<div id="imageNameHolder"></div>
<img id="imageHolder" alt="image holder" src="" width="256"/><br />
<div id="output"></div>
<div id="status"></div>
<button class="action" id="btn">Get Image File</button>
</body>
</html>
8. アプリケーションをテストする
- [ビルド] メニューの [ソリューションのビルド] をクリックしてソリューションをビルドします。
- [ビルド] メニューの [ソリューションの配置] をクリックしてソリューションを配置します。
- これで、アプリが自動再生ハンドラーとして登録されました。画像ファイルが格納されているカメラ (またはカメラのメモリ) を接続します。デバイスが検出されたときにアプリケーションが起動するように設定します。アプリには、デバイス上の最初の画像が表示されます。
注 エラーが発生した場合は、次の点を確認してください。
- リムーバブル ストレージへのアクセスが有効になっていることを確認します。ソリューション エクスプローラーで package.appxmanifest を開き、[機能] タブの [リムーバブル ストレージ] を確認してください。
要約
画像が格納されているカメラ (またはカメラのメモリ) を接続したときに呼び出される自動再生ハンドラーを登録しました。