チュートリアル: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 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 Community 2015 以降。Microsoft Visual Studio Community 2015 or later or later.
  • 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. [アプリの管理] を展開し、[WNS/MPNS] を選択してから、[Live Services site](Live Services サイト) を選択します。Expand App Management, 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. 左側のメニューで [すべてのサービス] を選択し、 [モバイル] セクションの [Notification Hubs] を選択します。Select All services on the left menu, and 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 notification 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 select Go to resource. [Notification Hubs] ページの一覧を最新の情報に更新して、お使いの通知ハブを選択してもかまいません。You can also refresh the list on the Notification Hubs page and select your notification hub.

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

  6. リストから [アクセス ポリシー] を選択します。Select Access Policies from the list. 使用可能な 2 つの接続文字列を書き留めてください。Note the two connection strings that are available to you. これらは、後でプッシュ通知を処理するために必要になります。You'll later need them 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 New Project dialog, complete 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 プロジェクト ファイルを開き、次のステートメントを追加します。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:

    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: