次の方法で共有

デバイス アイコンを表示する方法 (HTML)

  • [アーティクル]

ここでは、デバイス アイコンを表示する方法について説明します。

理解しておく必要があること

テクノロジ

  • Windows Runtime

必要条件

  • HTML と JavaScript について理解している必要があります。

手順

ステップ 1: Microsoft Visual Studio を開く

Visual Studio のインスタンスを開きます。

ステップ 2: 新しいプロジェクトを作る

[新しいプロジェクト] ダイアログ ボックスで、[JavaScript] > [Windows ストア アプリ] プロジェクトの種類から、[新しいアプリケーション] をクリックします。

ステップ 3: HTML を挿入する

Default.html を開き、ファイルの内容を次のコードに置き換えます。

<!DOCTYPE html>
<html>
<head>
    <title>Display the Device Icon</title>
    <script type="text/javascript" src="/js/default.js"> </script>
</head>
<body>

    <h1>Device Icon</h1>

    <div id="statusMessage"></div>
    // The size of the returned icon is 256 X 256.
    <img id="deviceImage"/>

</body>
</html>

ステップ 4: アイコンを表示するための関数を挿入する

Default.js を開き、内容を次のコードに置き換えます。


// Takes a parameter of type DeviceInformation
// and retrieves a DeviceThumbnail to pass to displayImage().
function getImage (device) {   

    var thumbnail = null;
    if (device){
        device.getThumbnailAsync().then(
            function (thumbnail) {
            // A valid thumbnail is always returned.
                displayImage(thumbnail);
            });
    }                                                                                     
}

function displayImage(imageFile) {
   
    try {
        // 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("deviceImage").src = 
            window.URL.createObjectURL(imageFile, false);
    } catch (e) {
        document.getElementById("statusMessage").innerHTML = 
            "Could not display image, error: " + e.message;
    }
                
}

注  または、getThumbnailAsync の呼び出しを getGlyphThumbnailAsync の呼び出しに置き換えて、デバイスのグリフを取得することもできます。

 

ステップ 5: デバイスを列挙するためのコードを追加する

  1. アイコンを表示するデバイスを列挙するコードを Default.js ファイルに追加します。
  2. デバイスの DeviceInformation オブジェクトを、定義した getImage() 関数に渡します。

表示するアイコンで使用可能なデバイスはシステムによって異なります。このコードは、最初のカメラを検索し、ある場合は、その画像を表示します。


(function() {
    var Enum = Windows.Devices.Enumeration;
    Enum.DeviceInformation.findAllAsync(
        Enum.DeviceClass.videoCapture).then(
                    successCallback 
            );
})();

function successCallback(deviceInformationCollection) {
    var numDevices = deviceInformationCollection.length;
    if (numDevices) {
        getImage(deviceInformationCollection[0]);
    } else {
        document.getElementById("statusMessage").innerHTML =
            "No devices found.";
    }
}

注釈

返されるアイコンのサイズは 256 x 256 ピクセルです。

デバイスの本物の写真のようなアイコンを取得するには、getThumbnailAsync を使います。デバイスのグリフを取得するには、getGlyphThumbnailAsync を使います。