チュートリアル:Azure Notification Hubs を使用してユニバーサル Windows プラットフォーム アプリに通知を送信するTutorial: Send notifications to Universal Windows Platform apps 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 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.

次の手順を実行します。You take the following steps:

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

前提条件Prerequisites

  • Azure サブスクリプションAzure subscription. Azure サブスクリプションをお持ちでない場合は、開始する前に無料の Azure アカウントを作成してください。If you don't have an Azure subscription, create a free Azure account before you begin.
  • Microsoft Visual Studio 2017 以降。Microsoft Visual Studio 2017 or later. このチュートリアルの例では、Visual Studio 2019 を使用します。The example in this tutorial uses Visual Studio 2019.
  • UWP アプリ開発ツールがインストールされているUWP app-development tools installed
  • アクティブな Windows ストア アカウントAn active Windows Store account
  • [アプリやその他の送信者からの通知を取得する ] 設定が有効になっていること。Confirm that Get notifications from apps and other senders setting is enabled.
    • お使いのコンピューターの [設定] ウィンドウを起動します。Launch Settings window on your computer.
    • [システム] タイルを選択します。Select the System tile.
    • 左側のメニューから [通知とアクション] を選択します。Select Notifications & actions from the left menu.
    • [アプリやその他の送信者からの通知を取得する ] 設定が有効になっていることを確認します。Confirm that the Get notifications from apps and other senders setting is enabled. 有効になっていない場合は有効にしてください。If it isn't enabled, enable it.

このチュートリアルを完了することは、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. [Product management](製品管理) を展開し、 [WNS/MPNS] を選択してから、 [Live Services site](Live Services サイト) を選択します。Expand Product management, select WNS/MPNS, and then select Live Services site. Microsoft アカウントにサインインする。Sign in to your Microsoft account. アプリケーション登録ページが新しいタブで開きます。あるいは、[マイ アプリケーション] ページに直接移動し、アプリケーション名を選択してこのページを表示できます。The application registration page opens in a new tab. Alternatively, you can navigate directly to the My applications page, and select your application name to get to this page.

    [WNS MPNS] ページ

  4. アプリケーション シークレット パスワードとパッケージ セキュリティ ID (SID) をメモします。Note the Application Secrets 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. 左側のメニューで [すべてのサービス] を選択し、 [モバイル] セクションの [Notification Hubs] を選択します。Select All services on the left menu, and then select Notification Hubs in the Mobile section. サービス名の横にある星のアイコンを選択して、左側のメニューにある [お気に入り] セクションにサービスを追加します。Select the star icon next to the service name to add the service to the FAVORITES section on the left menu. Notification Hubs[お気に入り] に追加した後、左側のメニューでそれを選択します。After you add Notification Hubs to FAVORITES, select it on the left menu.

    Azure portal - Notification Hubs を選択する

  3. [Notification Hubs] ページで、ツール バーの [追加] を選択します。On the Notification Hubs page, select Add on the toolbar.

    Notification Hubs - [追加] ツール バー ボタン

  4. [Notification Hub] ページで、次の手順のようにします。On the Notification Hub page, do the following steps:

    1. [通知ハブ] に名前を入力します。Enter a name in Notification Hub.

    2. [新しい名前空間の作成] に名前を入力します。Enter a name in Create a new namespace. 名前空間には、少なくとも 1 つのハブが存在します。A namespace contains one or more hubs.

    3. [場所] ドロップダウン リスト ボックスで値を選択します。Select a value from the Location drop-down list box. この値には、ハブを作成する場所を指定します。This value specifies the location in which you want to create the hub.

    4. [リソース グループ] で既存のリソース グループを選択します。または、新しいリソース グループに名前を作成します。Select an existing resource group in Resource Group, or create a name for a new resource group.

    5. 作成 を選択します。Select Create.

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

  5. [通知] (ベルのアイコン) を選択し、 [リソースに移動] を選択します。Select Notifications (the bell icon), and then select Go to resource. [Notification Hubs] ページの一覧を最新の情報に更新して、お使いの通知ハブを選択することもできます。You can also refresh the list on the Notification Hubs page and select your hub.

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

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

    重要

    DefaultFullSharedAccessSignature ポリシーはアプリケーションで使用 "しない" でください。Do not use the DefaultFullSharedAccessSignature policy 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)] を選択します。In the NOTIFICATION SETTINGS category, select Windows (WNS).

  2. 前のセクションからメモしたパッケージ SIDセキュリティ キーの値を入力します。Enter values for Package SID and Security Key you noted from the previous section.

  3. ツール バーの [Save](保存) をクリックします。Click 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, open the File menu, select New, and then select Project.

  2. [新しいプロジェクトの作成] ダイアログで、次の手順に従います。In the Create a new project dialog, complete the following steps:

    1. 上部の検索ボックスに「Windows ユニバーサル」と入力します。In the search box at the top, type Windows Universal.

    2. 検索結果で [空白のアプリ (ユニバーサル Windows)] を選択し、 [次へ] を選択します。In the search results, select Blank App (Universal Windows), and then select Next.

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

    3. [新しいプロジェクトの構成] ダイアログで、 [プロジェクト名] を入力し、プロジェクト ファイルの [場所] を入力します。In the Configure your new project dialog, enter a Project name, and a Location for the project files.

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

  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 Publish, 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 プロジェクト ファイルを開き、次のステートメントを追加します。Open the App.xaml.cs project file, and add the following statements:

    using Windows.Networking.PushNotifications;
    using Microsoft.WindowsAzure.Messaging;
    using Windows.UI.Popups;
    
  10. プロジェクトの App.xaml.cs ファイルから App クラスを探し、次の InitNotificationsAsync メソッドの定義を追加します。In the project's App.xaml.cs file, locate the App class, and add the following InitNotificationsAsync method definition. <your hub name> には、Azure portal で作成した通知ハブの名前を、<Your DefaultListenSharedAccessSignature connection string> には、通知ハブの [アクセス ポリシー] ページから取得した DefaultListenSharedAccessSignature 接続文字列を指定します。Replace <your hub name> with the name of the notification hub you created in the Azure portal, and replace <Your DefaultListenSharedAccessSignature connection string> with the DefaultListenSharedAccessSignature connection string from the Access Polices page of your notification hub:

    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.

    注意

    hub name プレースホルダーは、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 launches.

  12. アプリを実行するために、キーボードの F5 キーを押します。To run the app, press the keyboard's F5 key. 登録キーを示すダイアログ ボックスが表示されます。A dialog box containing the registration key will display. ダイアログ ボックスを閉じるには、 [OK] をクリックします。To close the dialog, click 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. 通知メッセージとして、"Test message" がデスクトップに表示されます。You see the notification message: Test message on your desktop.

    通知メッセージ

次のステップNext steps

ポータルまたはコンソール アプリを使用して、すべての Windows デバイスにブロードキャスト通知を送信しました。You have 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: