クイック スタート: モバイル サービスでのプッシュ通知の追加 (JavaScript)

  • [アーティクル]

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

このクイック スタートでは、Azure モバイル サービスを使用するアプリでプッシュ通知を有効にする方法について説明します。 モバイル サービスでは、Windows プッシュ通知サービス (WNS) を使用することによって、簡単にアプリにプッシュ通知を送信できます。詳しくは、モバイル サービスのデベロッパー センターをご覧ください。Microsoft Visual Studio 2013 を使用すると、モバイル サービス アプリで簡単にプッシュ通知を有効にすることができます。このトピックは、前のトピック「クイック スタート: モバイル サービスの追加」に基づいています。作業が終了すると、新しいモバイル サービスにプッシュ通知が追加され、新しい通知を送信することによってアプリがテストされます。

必要条件

アプリでプッシュ通知を追加および構成する

まず、Visual Studio 2013 のプッシュ通知の追加ウィザードを使用して、Windows ストアでのアプリの登録、プッシュ通知を有効にするモバイル サービスの構成、デバイス チャネルを登録するコードのアプリへの追加を行います。

注  このトピックでは、前のトピックでの作業を完了し、モバイル サービスの接続が既にプロジェクトに追加されていることを前提としています。 モバイル サービスが接続されていない場合、プッシュ通知の追加ウィザードによってこの接続が作成されます。

 

  1. Visual Studio 2013 で、ソリューション エクスプローラーを開き、プロジェクトを右クリックして、[追加]、[プッシュ通知] の順にクリックします。これにより、プッシュ通知の追加ウィザードが開始されます。
  2. [次へ] をクリックし、Windows ストア アカウントにサインインします。次に、[新しい名前の予約] に名前を入力し、[予約] をクリックします。これによって、Windows ストアで新しいアプリの登録が作成されます。
  3. [アプリ名] の一覧で新しい登録をクリックし、[次へ] をクリックします。
  4. 「クイック スタート: モバイル サービスの追加」または「クイック スタート: C++ を使ったモバイル サービスの追加」を完了したときに作成したモバイル サービスを選択し、[次へ]、[完了] の順にクリックします。これにより、モバイル サービスは、Windows プッシュ通知サービス (WNS) と連携して、アプリに通知を送信できるように構成されます。注  アプリがモバイル サービスに接続するようにまだ構成されていない場合、ウィザードによって、「クイック スタート: モバイル サービスの追加」で示されている構成タスクも実行されます。  
  5. (省略可能) 生成された YourMobileService.push.register.js コード ファイルを開き、コードを調べます。このコードによって、アプリがアクティブ化されるたびにデバイス登録が試行されるようになります。また、このコードには、notifyallusers カスタム API への呼び出しが含まれています。
  6. (省略可能) サーバー エクスプローラーで、[モバイル サービス]、サービス名の順に展開し、notifyallusers.js ファイルを開きます。このファイルは、モバイル サービスに格納されており、登録されているすべてのユーザーにプッシュ通知を送信する JavaScript コードを含んでいます。
  7. F5 キーを押してアプリを実行し、通知がモバイル サービスからすぐに受信されることを確認します。

生成されたプッシュ通知のコードを更新する

プッシュ通知の追加ウィザードによって、登録済みのすべてのユーザーへのテスト通知をトリガーするコードが追加されます。これにより、アプリが実行されたときに通知を表示することが容易になりますが、これは一般的に有意義なシナリオではありません。そのため、notifyallusers への呼び出しを削除し、変更を加えたコードに置き換えます。このコードによって、TodoItem テーブルへの挿入の実行時に、登録されているすべてのデバイスに通知が送信されます。

  1. サーバー エクスプローラーで、[モバイル サービス]、サービス名、notifyallusers.js の順に展開します。これには、プッシュ通知を送信するコードが含まれています。 注  プッシュ通知を送信するコードは、登録済みスクリプト ファイルに含めることができます。このスクリプトの場所は、どのように通知がトリガーされるかによって異なります。スクリプトは、テーブルに対する挿入、更新、削除、読み取り操作について、スケジュールされたジョブとして、またはカスタム API として登録できます。詳しくは、モバイル サービスでのサーバー スクリプトの操作に関するページをご覧ください。この場合、このコードは TodoItem テーブルへの挿入操作に対して登録されているスクリプト ファイルに移動します。

     

  2. TodoItem テーブルを展開し、insert.js ファイルを開き、現在の insert 関数を次のコードに置き換えた後、変更を保存します。

    function insert(item, user, request) {
// Define a payload for the Windows Store toast notification.
var payload = '<?xml version="1.0" encoding="utf-8"?><toast><visual>' +    
    '<binding template="ToastText01">  <text id="1">' +
    item.text + '</text></binding></visual></toast>';

request.execute({
    success: function() {
        // If the insert succeeds, send a notification.
        push.wns.send(null, payload, 'wns/toast', {
            success: function(pushResponse) {
                console.log("Sent push:", pushResponse);
                request.respond();
                },              
                error: function (pushResponse) {
                    console.log("Error Sending push:", pushResponse);
                    request.respond(500, { error: pushResponse });
                    }
                });
            }
        });
}

    insert.js ファイルに変更を保存すると、スクリプトの新しいバージョンがモバイル サービスにアップロードされます。

    ここで、新しい TodoItem を挿入すると、新しいプッシュ通知が、挿入を要求したデバイスにすぐに送信されます。

  3. Visual Studio で、F5 キーを押してアプリを実行します。

  4. アプリで、[Insert a TodoItem] にテキストを入力し、[保存] をクリックします。Azure でテーブルに挿入を実行した後、直ちにデバイスに通知が送り返されることに注意してください。

  5. (省略可能) 2 台のコンピューターでアプリを同時に実行し、前の手順を繰り返します。通知が実行中のすべてのアプリのインスタンスに送信されることを確認します。

要約と次のステップ

ここでは、モバイル サービスを使用して、Windows ストア アプリにプッシュ通知機能を追加する方法について説明しました。

次に、モバイル サービスで、Microsoft アカウント、Facebook、Twitter、Google の ID プロバイダーを使用してユーザーを認証する方法について学習することを検討してください。詳しくは、認証の概要に関するページをご覧ください。

関連トピック

モバイル サービスでの定期的なジョブのスケジュールに関するページ

モバイル サービスでのサーバー スクリプトの操作に関するページ