クイック スタート: ポインター デバイスの識別 (HTML)

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

このクイック スタートでは、ユーザーのシステムに接続されている入力デバイスの識別について説明します。また、ユーザーとアプリケーションの対話方法に影響を与える各デバイスの機能と属性を取得する方法についても説明します。

Windows 8 ではポインター デバイスとは、マウス、ペン/スタイラス、またはタッチ機能を提供するデバイスの種類のことを言います。

これに関して次のデバイスがサポートされます。

目標: 接続されている入力デバイスとその機能を識別する方法を学習する。

必要条件

JavaScript 用 Windows ライブラリのテンプレートが使われた JavaScript を使った基本的な Windows ストア アプリの作成経験が必要です。

このチュートリアルを行うには、次の作業を行う必要があります。

• Windows 8 をインストールします。
• Microsoft Visual Studio をインストールします。
• 開発者用ライセンスを取得します。詳しくは、「Visual Studio 2013 を使った開発」をご覧ください。
• JavaScript を使って初めての Windows ストア アプリを作成します。
• WinJS のオブジェクトとコントロールについて詳しくは、「クイックスタート: WinJS コントロールとスタイルの追加」をご覧ください。

手順

1. マウスのプロパティを取得する

接続されているマウスによって公開されているプロパティを取得するには、Windows.Devices.Input 名前空間の MouseCapabilities クラスを使います。新しい MouseCapabilities オブジェクトを作成し、目的のプロパティを取得するだけです。

注  ここで説明するプロパティによって返される値は、接続されているすべてのマウスに基づきます。ブール型プロパティは、少なくとも 1 つのマウスが特定の機能をサポートする場合は true を返し、数値プロパティは、いずれか 1 つのマウスで公開されている最大値を返します。

次のコードでは、一連の div 要素を使って、個別のマウスのプロパティと値を表示しています。

function getMouseProperties() {
  var mouseCapabilities = new Windows.Devices.Input.MouseCapabilities();
  id("mousePresent").innerHTML = (mouseCapabilities.mousePresent == true ? "True" : "False");
  id("verticalWheelPresent").innerHTML = (mouseCapabilities.verticalWheelPresent == true ? "True" : "False");
  id("horizontalWheelPresent").innerHTML = (mouseCapabilities.horizontalWheelPresent == true ? "True" : "False");
  id("swapButtons").innerHTML = (mouseCapabilities.swapButtons == true ? "True" : "False");
  id("numberOfButtons").innerHTML = mouseCapabilities.numberOfButtons;
}

2. キーボードのプロパティを取得する

キーボードが接続されているかどうかを取得するには、Windows.Devices.Input 名前空間の KeyboardCapabilities クラスを使います。新しい KeyboardCapabilities オブジェクトを作成し、KeyboardPresent プロパティを取得するだけです。

次のコードでは、div 要素を使って、キーボードのプロパティと値を表示しています。

function getKeyboardProperties() {
  var keyboardCapabilities = new Windows.Devices.Input.KeyboardCapabilities();
  id("keyboardPresent").innerHTML = (keyboardCapabilities.keyboardPresent == true ? "True" : "False");
}

3. タッチのプロパティを取得する

タッチ デジタイザーが接続されているかどうかを取得するには、Windows.Devices.Input 名前空間の TouchCapabilities クラスを使います。新しい TouchCapabilities オブジェクトを作成し、目的のプロパティを取得するだけです。

注  ここで説明するプロパティによって返される値は、接続されているすべてのタッチ デジタイザーに基づきます。ブール型プロパティは、少なくとも 1 つのデジタイザーが特定の機能をサポートする場合は true を返し、数値プロパティは、いずれか 1 つのデジタイザーで公開されている最大値を返します。

次のコードでは、一連の div 要素を使って、タッチのプロパティと値を表示しています。

function getTouchProperties() {
  var touchCapabilities = new Windows.Devices.Input.TouchCapabilities();
  id("touchPresent").innerHTML = (touchCapabilities.touchPresent == true ? "True" : "False");
  id("contacts").innerHTML = touchCapabilities.contacts;
}

4. ポインターのプロパティを取得する

ポインター入力をサポートするデバイス (タッチ、ペン、マウス) が接続されているかどうかを取得するには、Windows.Devices.Input 名前空間の PointerDevice クラスを使います。新しい PointerDevice オブジェクトを作成し、目的のプロパティを取得するだけです。

注  ここで説明するプロパティによって返される値は、接続されているすべてのポインター デバイスに基づきます。ブール型プロパティは、少なくとも 1 つのデバイスが特定の機能をサポートする場合は true を返し、数値プロパティは、いずれか 1 つのポインター デバイスで公開されている最大値を返します。

次のコードでは、テーブルを使って、各ポインター デバイスのプロパティと値を表示しています。

function getPointerDeviceProperties() 
{
  var pointerDevices = Windows.Devices.Input.PointerDevice.getPointerDevices();
  var htmlWrite = "";
  for (i = 0; i < pointerDevices.size; i++) 
  {
    var displayIndex = i + 1;
    htmlWrite += "<tr><td>(" + displayIndex + ") Pointer Device Type</td>  <td>" + 
      getPointerDeviceType(pointerDevices[i].pointerDeviceType) + "</td></tr>";
    htmlWrite += "<tr><td>(" + displayIndex + ") Is External</td><td>" + 
      (pointerDevices[i].isIntegrated == true ? "False" : "True") + "</td></tr>";
    htmlWrite += "<tr><td>(" + displayIndex + ") Max Contacts</td><td>" + 
      pointerDevices[i].maxContacts + "</td></tr>";
    htmlWrite += "<tr><td>(" + displayIndex + ") Physical Device Rect</td><td>" +
      pointerDevices[i].physicalDeviceRect.x + "," +
      pointerDevices[i].physicalDeviceRect.y + "," +
      pointerDevices[i].physicalDeviceRect.width + "," +
      pointerDevices[i].physicalDeviceRect.height + "</td></tr>";
    htmlWrite += "<tr><td>(" + displayIndex + ") Screen Rect</td><td>" +
      pointerDevices[i].screenRect.x + "," +
      pointerDevices[i].screenRect.y + "," +
      pointerDevices[i].screenRect.width + "," +
      pointerDevices[i].screenRect.height + "</td></tr>";
  }
  id("pointerDevices").innerHTML = htmlWrite;
}

詳しい例については、入力: デバイス機能のサンプルに関するページをご覧ください。

要約

このクイック スタートでは、アプリで使用できる入力デバイスとそのプロパティを識別する一連の基本関数を作成しました。

関連トピック

概念

ユーザー操作への応答

Windows ストア アプリの開発 (JavaScript と HTML)

タッチ操作の設計

辞書/リファレンス

Windows.Devices.Input

サンプル (DOM)

HTML のスクロール、パン、ズームのサンプルに関するページ

入力: DOM ポインター イベント処理のサンプルに関するページ

入力: インスタンス化できるジェスチャのサンプルに関するページ

サンプル (Windows ストア アプリ API)

入力: デバイス機能のサンプルに関するページ