クイック スタート: タップを使ったメッセージの発行と購読 (HTML)

  • [アーティクル]

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

近接通信により、単純なタップ ジェスチャを使って 2 つのデバイス間でメッセージを発行、受信登録したり、デバイスに静的なタグを書き込んだりすることができます。2 つのデバイスを互いから 3 ～ 4 センチの間隔に近づけると、近接機能によってシステムに通知されます。 ここでは、近接通信を使ってメッセージの発行と受信登録を行う方法について説明します。

目標: 近接通信タップを使ってメッセージの発行と受信登録を行う。

必要条件

Microsoft Visual Studio Express 2012 for Windows 8

手順

1. 新しいプロジェクトを作り、近接通信を有効にする

  1. Visual Studio Express 2012 for Windows 8 を開き、[ファイル] メニューの [新しいプロジェクト] をクリックします。[Javascript] セクションで、[新しいアプリケーション] をクリックします。アプリに ProximityMessages という名前を付け、[OK] をクリックします。
  2. Package.appxmanifest ファイルを開き、[機能] タブをクリックします。[近接通信] を選び、近接通信を有効にします。マニフェスト ファイルを保存して閉じます。

2. HTML UI を追加する

Default.html ファイルを開き、次の HTML を <body> セクションに追加します。


<table>
    <tr>
        <td style="width: 500px;vertical-align: top">
            <button id="publishMessageButton">Publish Message</button>
            <input type="text" id="messageText" />
            <button id="subscribeForMessageButton">Subscribe For Message</button><br />
            <button id="stopPublishingMessageButton">Stop Publishing Message</button>
            <button id="stopSubscribingForMessageButton">Stop Subscribing For Message</button><br />
            Enter a message and click "Publish Message". On another computer, click
            "Subscribe For Message". Enter proximity to transmit the message.
        </td>
        <td><div id="messageDiv" style="width: 500px;vertical-align:top"></div></td>
    </tr>
</table>

3. 初期化コードを追加する

近接通信デバイス間でメッセージの発行と受信登録を行うには、ProximityDevice クラスを使用します。この手順のコードでは、ProximityDevice クラスのインスタンスを作成し、後の手順で追加される関数を、HTML ボタンのクリック イベントのイベント ハンドラーとして関連付けています。ショートカット関数の id は、getElementById 関数への簡単なアクセスを実現するために使います。この初期化関数は、アプリの起動時に呼び出されます。この関数は、メッセージの発行と受信登録を行うために使われる既定の近接通信デバイスへの参照を取得します。さらに、ボタンのイベント ハンドラーを追加します。

js フォルダーを開きます。Default.js ファイルを開き、既定の activated 関数を次のコードで置き換えます。

var proximityDevice;

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        
        initializeProximitySample();

        WinJS.UI.processAll();
    }
};

function id(elementId) {
    return document.getElementById(elementId);
}
    
function initializeProximitySample() {
    proximityDevice = Windows.Networking.Proximity.ProximityDevice.getDefault();

    if (proximityDevice) {
        id("publishMessageButton").addEventListener("click", publishMessage);
        id("subscribeForMessageButton").addEventListener("click", subscribeForMessage);
        id("stopSubscribingForMessageButton").addEventListener("click",
            stopSubScribingForMessage);
        id("stopPublishingMessageButton").addEventListener("click",
        stopPublishingMessage);
    }
    else {
        id("messageDiv").innerHTML += "Failed to initialize proximity device." +
             "Your device may not have proximity hardware.<br />";
    }
}

4. クリック イベント ハンドラーを追加する

この手順では、XAML ボタンのクリック イベントのコードを追加します。この publishMessageButton ボタンのイベント ハンドラーのコードでは、近接通信デバイスにメッセージを発行するために publishMessage メソッドを呼び出しています。この subscribeToMessageButton ボタンのイベント ハンドラーのコードでは、近接通信デバイスから発行された任意のメッセージを受け取るために subscribeToMessage メソッドを呼び出しています。この例では、Windows.SampleMessage 型として識別されたメッセージのみが受信されます。publishMessage メソッドを使って発行された近接メッセージの種類に対しては、必ず Windows. プレフィックスを使う必要があります。このサンプルでは、わかりやすくするために、一度に 1 つのメッセージのみが発行または購読されます。同時に複数のメッセージの発行と受信登録を行うことができます。

PublishUriMessage メソッドを使って URI を発行したり、PublishBinaryMessage メソッドを使ってバイナリ データを発行したりすることもできます。PublishBinaryMessage メソッドを使って発行できるメッセージの種類のリストについては、PublishBinaryMessage(String, IBuffer) をご覧ください。

Default.js ファイルで、initializeProximitySample 関数の後に次のコードを追加します。

var publishedMessageId = -1;
var subscribedMessageId = -1;

function publishMessage() {
    // Stop publishing the current message.
    if (publishedMessageId != -1) {
        proximityDevice.stopPublishingMessage(publishedMessageId);
    }

    publishedMessageId =
    proximityDevice.publishMessage("Windows.SampleMessage", id("messageText").value);
}

function subscribeForMessage() {
    // Only subscribe for the message one time.
    if (subscribedMessageId === -1) {
        subscribedMessageId =
    proximityDevice.subscribeForMessage("Windows.SampleMessage", messageReceived);
    }
}

function messageReceived(device, message) {
    id("messageDiv").innerHTML += "Message received: " + message.dataAsString + "<br />";
}

function stopSubscribingForMessage() {
    proximityDevice.stopSubscribingForMessage(subscribedMessageId);
}

function stopPublishingMessage() {
    proximityDevice.stopPublishingMessage(publishedMessageId);
}

5. アプリを実行する

アプリの動作を調べるために、近接通信が有効な 2 台のデバイス上でアプリを実行します。1 台のデバイス上でメッセージを入力し、[Publish Message] ボタンをクリックします。次に、もう 1 台のデバイス上で [Subscribe For Message] ボタンをクリックし、両方のデバイスを同時にタップします。

重要  

このクイック スタートは、2 台のデバイスで実行する必要があります。タップ ジェスチャを使うシナリオでは、各デバイスに NFC 無線などの近接通信デバイスがインストールされている必要があります。近距離通信 (NFC) 無線などの近接通信タップをサポートするハードウェアがない場合、Windows Driver Kit (WDK) サンプルに含まれる近接通信ドライバー サンプルを使うことができます。サンプル ドライバーを使って、2 台の Windows デバイス間のネットワーク接続でタップ ジェスチャをシミュレートすることができます。WDK のダウンロード方法について詳しくは、Windows Driver Kit (WDK) に関するページをご覧ください。WDK とサンプルをインストールすると、近接通信のドライバー サンプルは、WDK サンプルをインストールした場所の src\nfp ディレクトリに配置されます。シミュレーターを構築し、実行する手順については、src\nfp\net ディレクトリにある NetNfpProvider.html ファイルを参照してください。シミュレーターを起動すると、近接通信アプリがフォアグラウンドで実行されている間、シミュレーターはバックグラウンドで実行されます。タップ シミュレーションが動作するには、アプリがフォアグラウンドに存在している必要があります。

 

要約と次のステップ

このチュートリアルでは、タップを使ってデバイス間でメッセージの発行と受信登録を行うアプリを作成しました。

さらに、タップ ジェスチャを使って、別のデバイスに接続することもできます。例については、「クイック スタート: タップまたは参照によるアプリの接続」をご覧ください。

クイック スタート: タップまたは参照によるアプリの接続

関連トピック

近接通信を使った開発のガイドライン

近接通信とタップのサポート

アプリの近接通信のテストとトラブルシューティング

Windows.Networking.Proximity namespace

サンプル

近接通信のサンプル