チュートリアル: Azure Notification Hubs を使用してユニバーサル Windows プラットフォーム アプリに通知を送信するTutorial: Send notifications to Universal Windows Platform apps by using Azure Notification Hubs

このチュートリアルでは、ユニバーサル Windows プラットフォーム (UWP) アプリにプッシュ通知を送信するための通知ハブを作成します。In this tutorial, you create a notification hub to send push notifications to a Universal Windows Platform (UWP) app. Windows プッシュ通知サービス (WNS) を使用してプッシュ通知を受信する空の Windows ストア アプリを作成します。You create a blank Windows Store app that receives push notifications by using the Windows Push Notification Service (WNS). その後、通知ハブを使用して、アプリを実行しているすべてのデバイスにプッシュ通知をブロードキャストできます。Then, you can use your notification hub to broadcast push notifications to all devices that are running your app.

注意

このチュートリアルの完成したコードについては、GitHub を参照してください。You can find the completed code for this tutorial on GitHub.

このチュートリアルでは、次の手順を実行します。In this tutorial, you take the following steps:

  • Windows ストアでアプリを作成するCreate an app in Windows Store
  • 通知ハブを作成するCreate a notificaiton hub
  • サンプルの Windows アプリを作成するCreate a sample Windows app
  • テスト通知を送信するSend test notifications

前提条件Prerequisites

このチュートリアルを完了することは、UWP アプリに関する他のすべての Notification Hubs チュートリアルを行うための前提条件になっています。Completing this tutorial is a prerequisite for all other Notification Hubs tutorials for UWP apps.

Windows ストアでアプリを作成するCreate an app in Windows Store

UWP アプリにプッシュ通知を送信するには、アプリを Windows ストアに関連付けます。To send push notifications to UWP apps, associate your app to the Windows Store. 次に、WNS に統合するために通知ハブを構成します。Then, configure your notification hub to integrate with WNS.

  1. Windows デベロッパー センターに移動し、Microsoft アカウントでサインインしてから、[新しいアプリの作成] を選択します。Navigate to the Windows Dev Center, sign in with your Microsoft account, and then select Create a new app.

    [New app] (新しいアプリ) ボタン

  2. アプリの名前を入力し、Reserve product name を選択します。Type a name for your app, and then select Reserve product name. これでアプリの新しい Windows ストア登録が作成されます。Doing so creates a new Windows Store registration for your app.

    ストア アプリ名

  3. [アプリの管理] を展開して、[WNS/MPNS] を選択し、[WNS/MPNS] を選択してから、[Live Services site] (Live Services サイト) を選択します。Expand App Management, select WNS/MPNS, select WNS/MPNS, and then select Live Services site. Microsoft アカウントにサインインする。Sign in to your Microsoft account. アプリケーション登録ポータルが新しいタブで開きます。あるいは、アプリケーション登録ポータルに直接移動し、アプリケーション名を選択してこのページを表示できます。The Application Registration Portal opens in a new tab. Alternatively, you can navigate directly to the Application Registration Portal, select your application name to get to this page.

    [WNS MPNS] ページ

  4. アプリケーション シークレット パスワードとパッケージ セキュリティ ID (SID) をメモします。Note the Application Secret password and the Package security identifier (SID).

    警告

    アプリケーション シークレットおよびパッケージ SID は、重要なセキュリティ資格情報です。The application secret and package SID are important security credentials. これらの値は、他のユーザーと共有したり、アプリケーションで配信したりしないでください。Do not share these values with anyone or distribute them with your app.

通知ハブを作成するCreate a notification hub

  1. Azure Portal にサインインします。Sign in to the Azure portal.

  2. [リソースの作成] > [モバイル] > [通知ハブ] を選択します。Select Create a resource > Mobile > Notification Hub.

    Azure Portal - 通知ハブを作成

  3. [Notification Hub] ボックスに一意の名前を入力します。In the Notification Hub box, type a unique name. リージョンサブスクリプションリソース グループを選択します (既にある場合)。Select your Region, Subscription, and Resource Group (if you have one already).

    まだ Service Bus 名前空間を用意していない場合、ハブ名に基づいて作成される既定の名前を使用できます (その名前空間名が使用できる場合)。If you don't already have a service bus namespace, you can use the default name, which is created based on the hub name (if the namespace name is available).

    ハブを作成する Service Bus 名前空間を既に用意してある場合は、次の手順に従います。If you already have a service bus namespace that you want to create the hub in, follow these steps

    a.a. [名前空間] 領域で、[既存項目の選択] リンクを選択します。In the Namespace area, select the Select Existing link.

    b.b. [作成] を選択します。Select Create.

    Azure Portal - 通知ハブのプロパティを設定

  4. [通知] (ベルのアイコン)、[リソースに移動] の順に選択します。Select Notifications (Bell icon), and select Go to resource.

    Azure Portal > [通知] > [リソースに移動]

  5. リストから [アクセス ポリシー] を選択します。Select Access Policies from the list. 使用可能な 2 つの接続文字列を書き留めてください。Note the two connection strings that are available to you. これらの接続文字列は、後でプッシュ通知を処理するために必要になります。You need them to handle push notifications later.

    重要

    DefaultFullSharedAccessSignature はアプリケーションで使用しないでください。Do NOT use the DefaultFullSharedAccessSignature in your application. これはバックエンドのみで使用します。This is meant to be used in your back-end only.

    Azure Portal - 通知ハブの接続文字列

WNS の設定をハブ用に構成するConfigure WNS settings for the hub

  1. [通知設定] カテゴリで、[Windows (WNS)] を選択します。Select Windows (WNS) in the NOTIFICATION SETTINGS category.
  2. 前のセクションからメモしたパッケージ SIDセキュリティ キーの値を入力します。Enter values for Package SID and Security Key you noted from the previous section.
  3. ツールバーの [保存] を選択します。Select Save on the toolbar.

    [パッケージ SID] ボックスと [セキュリティ キー] ボックス

これで、通知ハブが WNS と連携するように構成されました。Your notification hub is now configured to work with WNS. 接続文字列を使用してアプリを登録し、通知を送信できます。You have the connection strings to register your app and send notifications.

サンプルの Windows アプリを作成するCreate a sample Windows app

  1. Visual Studio で、[ファイル] を選択し、[新規] をポイントして [プロジェクト] を選択します。In Visual Studio, select File, point to New, and select Project.
  2. [新しいプロジェクト] ダイアログ ボックスで、次の操作を行います。In the New Project dialog box, do the following steps:

    1. [Visual C#] を展開します。Expand Visual C#.
    2. [Windows ユニバーサル] を選択します。Select Windows Universal.
    3. [Blank App (Universal Windows)] (空のアプリ (ユニバーサル Windows)) を選択します。Select Blank App (Universal Windows).
    4. プロジェクトの 名前 を入力します。Enter a name for the project.
    5. [OK] を選択します。Select OK.

      [新しいプロジェクト] ダイアログ

  3. ターゲット最小プラットフォーム バージョンの既定値を受け入れ、[OK] を選択します。Accept the defaults for the target and minimum platform versions, and select OK.
  4. ソリューション エクスプローラーで Windows ストア アプリ プロジェクトを右クリックし、[ストア][アプリケーションをストアと関連付ける] の順に選択します。In Solution Explorer, right-click the Windows Store app project, select Store, and then select Associate App with the Store. アプリケーションを Windows ストアと関連付ける ウィザードが表示されます。The Associate Your App with the Windows Store wizard appears.
  5. ウィザードで、自分の Microsoft アカウントでサインインします。In the wizard, sign in with your Microsoft account.
  6. 手順 2. で登録したアプリを選択し、[次へ][関連付け] の順に選択します。Select the app that you registered in step 2, select Next, and then select Associate. この操作により、必要な Windows ストア登録情報がアプリケーション マニフェストに追加されます。Doing so adds the required Windows Store registration information to the application manifest.
  7. Visual Studio でソリューションを右クリックし、[NuGet パッケージの管理] を選択します。In Visual Studio, right-click the solution, and then select Manage NuGet Packages. [NuGet パッケージの管理] ウィンドウが開きます。The Manage NuGet Packages window opens.
  8. 検索ボックスに「WindowsAzure.Messaging.Managed」と入力し、[インストール] を選択して、使用条件に同意します。In the search box, enter WindowsAzure.Messaging.Managed, select Install, and accept the terms of use.

    [NuGet パッケージの管理] ウィンドウ

    この操作によって、Microsoft.Azure.NotificationHubs NuGet パッケージを使用して Windows 用 Azure Notification Hubs ライブラリがダウンロード、インストールされ、ライブラリへの参照が追加されます。This action downloads, installs, and adds a reference to the Azure Notification Hubs library for Windows by using the Microsoft.Azure.NotificationHubs NuGet package.

  9. App.xaml.cs プロジェクト ファイルを開き、次の using ステートメントを追加します。Open the App.xaml.cs project file, and add the following using statements:

     using Windows.Networking.PushNotifications;
     using Microsoft.WindowsAzure.Messaging;
     using Windows.UI.Popups;
    
  10. さらに App.xaml.cs で、次の InitNotificationsAsync メソッドの定義を App クラスに追加します。In App.xaml.cs, also add to the App class the following InitNotificationsAsync method definition:

     private async void InitNotificationsAsync()
     {
         var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
    
         var hub = new NotificationHub("<your hub name>", "<Your DefaultListenSharedAccessSignature connection string>");
         var result = await hub.RegisterNativeAsync(channel.Uri);
    
         // Displays the registration ID so you know it was successful
         if (result.RegistrationId != null)
         {
             var dialog = new MessageDialog("Registration successful: " + result.RegistrationId);
             dialog.Commands.Add(new UICommand("OK"));
             await dialog.ShowAsync();
         }
    
     }
    

    このコードにより、WNS からアプリケーションのチャネル URI が取得され、そのチャネル URI が通知ハブに登録されます。This code retrieves the channel URI for the app from WNS, and then registers that channel URI with your notification hub.

    注意

    • ハブ名プレースホルダーは、Azure Portal に表示される通知ハブの名前に置き換えてください。Replace the hub name placeholder with the name of the notification hub that appears in the Azure portal.
    • さらに、接続文字列プレースホルダーを、前のセクションで通知ハブの [アクセス ポリシー] ページから取得した DefaultListenSharedAccessSignature 接続文字列に置き換えてください。Also replace the connection string placeholder with the DefaultListenSharedAccessSignature connection string that you obtained from the Access Polices page of your notification hub in a previous section.
  11. App.xaml.cs 内で、OnLaunched イベント ハンドラーの先頭に、次に示す新しい InitNotificationsAsync メソッドへの呼び出しを追加します。At the top of the OnLaunched event handler in App.xaml.cs, add the following call to the new InitNotificationsAsync method:

     InitNotificationsAsync();
    

    これにより、アプリケーションが起動するたびに必ずチャネル URI が通知ハブに登録されます。This action guarantees that the channel URI is registered in your notification hub each time the application is launched.

  12. アプリを実行するには、F5 キーを押します。To run the app, select the F5 key. 登録キーを示すダイアログ ボックスが表示されます。A dialog box that contains the registration key is displayed. ダイアログを閉じるには、[OK] を選択します。To close the dialog, select OK.

    登録が成功しました

これで、アプリケーションがトースト通知を受信する準備が整いました。Your app is now ready to receive toast notifications.

テスト通知を送信するSend test notifications

Azure Portal で通知を送信することで、通知の受信をすばやくテストできます。You can quickly test receiving notifications in your app by sending notifications in the Azure portal.

  1. Azure Portal で、[概要] タブに切り替えてから、ツールバーの [テスト送信] を選択します。In the Azure portal, switch to the Overview tab, and select Test Send on the toolbar.

    [テスト送信] ボタン

  2. [テスト送信] ウィンドウで、次のアクションを実行します。In the Test Send window, do the following actions:

    1. [プラットフォーム] として、[Windows] を選択します。For Platforms, select Windows.
    2. 通知の種類 として、[トースト] を選択します。For Notification Type, select Toast.
    3. [送信] を選択します。Select Send.

      [テスト送信] ウィンドウ

  3. ウィンドウの一番下の [結果] 一覧で、[送信] 操作の結果を確認します。See the result of the Send operation in the Result list at the bottom of the window. アラート メッセージも表示されます。You also see an alert message.

    [送信] 操作の結果

  4. 通知メッセージが表示されます。デスクトップ上のテスト メッセージYou see the notification message: Test message on your desktop.

    通知メッセージ

次の手順Next steps

このチュートリアルでは、ポータルまたはコンソール アプリを使用して、すべての Windows デバイスにブロードキャスト通知を送信しました。In this tutorial, you sent broadcast notifications to all your Windows devices by using the portal or a console app. 特定のデバイスにプッシュ通知を送信する方法を学習するには、次のチュートリアルに進んでください。To learn how to push notifications to specific devices, advance to the following tutorial: