チュートリアル:ユニバーサル Windows プラットフォーム アプリケーションを実行している特定のデバイスに通知を送信するTutorial: Send notifications to specific devices running Universal Windows Platform applications

概要Overview

このチュートリアルでは、Azure Notification Hubs を使用してニュース速報通知をブロードキャストする方法を示します。This tutorial shows you how to use Azure Notification Hubs to broadcast breaking news notifications. このチュートリアルでは、Windows ストアまたは Windows Phone 8.1 (Silverlight 以外) アプリケーションについて取り上げます。This tutorial covers Windows Store or Windows Phone 8.1 (non-Silverlight) applications. Windows Phone 8.1 Silverlight をターゲットにしている場合は、「Azure Notification Hubs を使用して特定の Windows Phone デバイスにプッシュ通知を送信する」を参照してください。If you're targeting Windows Phone 8.1 Silverlight, see Push notifications to specific Windows Phone devices by using Azure Notification Hubs.

このチュートリアルでは、Azure Notification Hubs を使用して、ユニバーサル Windows プラットフォーム (UWP) アプリケーションを実行している特定の Windows デバイスにプッシュ通知を送信する方法について学習します。In this tutorial, you learn how to use Azure Notification Hubs to push notifications to specific Windows devices running a Universal Windows Platform (UWP) application. このチュートリアルの完了後、興味があるニュース速報のカテゴリを登録できます。After you complete the tutorial, you can register for the breaking news categories that you're interested in. それらのカテゴリのプッシュ通知のみが届きます。You'll receive push notifications for those categories only.

ブロードキャストのシナリオに対応するには、通知ハブに登録を作成するときに "タグ" (複数可) を追加します。To enable broadcast scenarios, include one or more tags when you create a registration in the notification hub. 通知がタグに送信されると、タグに登録されたすべてのデバイスが通知を受信します。When notifications are sent to a tag, all devices that are registered for the tag receive the notification. タグの詳細については、「ルーティングとタグ式」を参照してください。For more information about tags, see Routing and tag expressions.

注意

Visual Studio 2019 では、Windows ストアと Windows Phone のバージョン 8.1 以前のプロジェクトはサポートされていません。Windows Store and Windows Phone project versions 8.1 and earlier are not supported in Visual Studio 2019. 詳細については、「Visual Studio 2019 の対象プラットフォームと互換性」を参照してください。For more information, see Visual Studio 2019 Platform Targeting and Compatibility.

このチュートリアルでは、次のタスクを行います。In this tutorial, you do the following tasks:

  • モバイル アプリにカテゴリ選択を追加するAdd category selection to the mobile app
  • 通知を登録するRegister for notifications
  • タグ付けされた通知を送信するSend tagged notifications
  • アプリケーションを実行して通知を生成するRun the app and generate notifications

前提条件Prerequisites

チュートリアル: Azure Notification Hubs を使用してユニバーサル Windows プラットフォーム アプリに通知を送信する」を完了してください。Complete the Tutorial: Send notifications to Universal Windows Platform apps by using Azure Notification Hubs before starting this tutorial.

アプリケーションにカテゴリ選択を追加するAdd category selection to the app

最初の手順は、既存のメイン ページに UI 要素を追加して、登録するカテゴリをユーザーが選択できるようにすることです。The first step is to add UI elements to your existing main page so that users can select categories to register. 選択されたカテゴリはデバイスに格納されます。The selected categories are stored on the device. アプリが起動すると、通知ハブにデバイス登録が作成され、選択されたカテゴリがタグとして追加されます。When the app starts, it creates a device registration in your notification hub, with the selected categories as tags.

  1. MainPage.xaml プロジェクト ファイルを開き、Grid 要素に次のコードをコピーします。Open the MainPage.xaml project file, and then copy the following code in the Grid element:

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  TextWrapping="Wrap" Text="Breaking News" FontSize="42" VerticalAlignment="Top" HorizontalAlignment="Center"/>
        <ToggleSwitch Header="World" Name="WorldToggle" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center"/>
        <ToggleSwitch Header="Politics" Name="PoliticsToggle" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center"/>
        <ToggleSwitch Header="Business" Name="BusinessToggle" Grid.Row="3" Grid.Column="0" HorizontalAlignment="Center"/>
        <ToggleSwitch Header="Technology" Name="TechnologyToggle" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center"/>
        <ToggleSwitch Header="Science" Name="ScienceToggle" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center"/>
        <ToggleSwitch Header="Sports" Name="SportsToggle" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Center"/>
        <Button Name="SubscribeButton" Content="Subscribe" HorizontalAlignment="Center" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Click="SubscribeButton_Click"/>
    </Grid>
    
  2. ソリューション エクスプローラーで、プロジェクトを右クリックし、 [追加] > [クラス] の順に選択します。In Solution Explorer, right-click the project, select Add > Class. [新しい項目の追加] で、クラスに Notifications という名前を付けて、 [追加] を選択します。In Add New Item, name the class Notifications, and select Add. 必要に応じてクラス定義に public 修飾子を追加します。If necessary, add the public modifier to the class definition.

  3. 次の using ステートメントを新しいファイルに追加します。Add the following using statements to the new file:

    using Windows.Networking.PushNotifications;
    using Microsoft.WindowsAzure.Messaging;
    using Windows.Storage;
    using System.Threading.Tasks;
    
  4. 新しい Notifications クラスに次のコードをコピーします。Copy the following code to the new Notifications class:

    private NotificationHub hub;
    
    public Notifications(string hubName, string listenConnectionString)
    {
        hub = new NotificationHub(hubName, listenConnectionString);
    }
    
    public async Task<Registration> StoreCategoriesAndSubscribe(IEnumerable<string> categories)
    {
        ApplicationData.Current.LocalSettings.Values["categories"] = string.Join(",", categories);
        return await SubscribeToCategories(categories);
    }
    
    public IEnumerable<string> RetrieveCategories()
    {
        var categories = (string) ApplicationData.Current.LocalSettings.Values["categories"];
        return categories != null ? categories.Split(','): new string[0];
    }
    
    public async Task<Registration> SubscribeToCategories(IEnumerable<string> categories = null)
    {
        var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
    
        if (categories == null)
        {
            categories = RetrieveCategories();
        }
    
        // Using a template registration to support notifications across platforms.
        // Any template notifications that contain messageParam and a corresponding tag expression
        // will be delivered for this registration.
    
        const string templateBodyWNS = "<toast><visual><binding template=\"ToastText01\"><text id=\"1\">$(messageParam)</text></binding></visual></toast>";
    
        return await hub.RegisterTemplateAsync(channel.Uri, templateBodyWNS, "simpleWNSTemplateExample",
                categories);
    }
    

    このクラスは、ローカル記憶域を使用して、このデバイスが受信する必要があるニュースのカテゴリを格納します。This class uses the local storage to store the categories of news that this device must receive. RegisterNativeAsync メソッドを呼び出す代わりに、RegisterTemplateAsync を呼び出して、テンプレート登録を使用してカテゴリを登録します。Instead of calling the RegisterNativeAsync method, call RegisterTemplateAsync to register for the categories by using a template registration.

    1 つ以上のテンプレートを登録する場合、テンプレート名 (たとえば、simpleWNSTemplateExample) を指定します。If you want to register more than one template, provide a template name, for example, simpleWNSTemplateExample. テンプレートを更新または削除できるように、テンプレートに名前を付けます。You name the templates so that you can update or delete them. 複数 (トースト通知用に 1 つとタイル用に 1 つ) のテンプレートを登録することもあるでしょう。You might register more than one template to have one for toast notifications and one for tiles.

    注意

    Notification Hubs では、デバイスが同じタグを使用して複数のテンプレートを登録できます。With Notification Hubs, a device can register multiple templates by using the same tag. この場合、そのタグをターゲットとするメッセージが受信されると複数の通知がデバイスに配信されます (テンプレートごとに 1 つずつ)。In this case, an incoming message that targets the tag results in multiple notifications being delivered to the device, one for each template. このプロセスにより、複数のビジュアル通知に同じメッセージを表示することが可能になります (Windows ストア アプリでバッジとトースト通知の両方として表示するなど)。により、複数のビジュアル通知に同じメッセージを表示することが可能になります (Windows ストア アプリでバッジとトースト通知の両方として表示するなど)。This process enables you to display the same message in multiple visual notifications, such as both as a badge and as a toast notification in a Windows Store app.

    詳細については、「 テンプレート」を参照してください。For more information, see Templates.

  5. App.xaml.cs プロジェクト ファイルで、次のプロパティを App クラスに追加します。In the App.xaml.cs project file, add the following property to the App class:

    public Notifications notifications = new Notifications("<hub name>", "<connection string with listen access>");
    

    このプロパティを使用して、Notifications インスタンスを作成してアクセスします。You use this property to create and access a Notifications instance.

    コードのプレースホルダーである <hub name><connection string with listen access> を、通知ハブの名前と既に取得してある DefaultListenSharedAccessSignature の接続文字列に置き換えます。In the code, replace the <hub name> and <connection string with listen access> placeholders with your notification hub name and the connection string for DefaultListenSharedAccessSignature, which you obtained earlier.

    注意

    クライアント アプリを使用して配布される資格情報は一般にセキュリティで保護されないため、クライアント アプリではリッスン アクセス用のキーだけを配布してください。Because credentials that are distributed with a client app are not usually secure, distribute only the key for listen access with your client app. リッスン アクセスでは、通知用にアプリを登録できますが、既存の登録を変更することはできず、通知を送信することはできません。With listen access, your app can register for notifications, but existing registrations cannot be modified, and notifications cannot be sent. 通知を送信し既存の登録を変更するセキュリティで保護されたバックエンド サービスでは、フル アクセス キーが使用されます。The full access key is used in a secured back-end service for sending notifications and changing existing registrations.

  6. MainPage.xaml.cs ファイルに、次の行を追加します。In the MainPage.xaml.cs file, add the following line:

    using Windows.UI.Popups;
    
  7. MainPage.xaml.cs ファイルに、次のメソッドを追加します。In the MainPage.xaml.cs file, add the following method:

    private async void SubscribeButton_Click(object sender, RoutedEventArgs e)
    {
        var categories = new HashSet<string>();
        if (WorldToggle.IsOn) categories.Add("World");
        if (PoliticsToggle.IsOn) categories.Add("Politics");
        if (BusinessToggle.IsOn) categories.Add("Business");
        if (TechnologyToggle.IsOn) categories.Add("Technology");
        if (ScienceToggle.IsOn) categories.Add("Science");
        if (SportsToggle.IsOn) categories.Add("Sports");
    
        var result = await ((App)Application.Current).notifications.StoreCategoriesAndSubscribe(categories);
    
        var dialog = new MessageDialog("Subscribed to: " + string.Join(",", categories) + " on registration Id: " + result.RegistrationId);
        dialog.Commands.Add(new UICommand("OK"));
        await dialog.ShowAsync();
    }
    

    このメソッドは、カテゴリのリストを作成し、Notifications クラスを使用してリストをローカル記憶域に格納します。This method creates a list of categories and uses the Notifications class to store the list in the local storage. さらに、対応するタグを通知ハブに登録します。It also registers the corresponding tags with your notification hub. カテゴリが変更されると、新しいカテゴリで登録が再作成されます。When the categories change, the registration is re-created with the new categories.

これで、アプリは、デバイス上のローカル記憶域にカテゴリ セットを格納できます。Your app can now store a set of categories in local storage on the device. アプリは、ユーザーがカテゴリの選択を変更するたびに、通知ハブに登録します。The app registers with the notification hub whenever users change the category selection.

通知を登録するRegister for notifications

このセクションでは、ローカル記憶域に格納されたカテゴリを使用して、起動時に通知ハブに通知します。In this section, you register with the notification hub on startup by using the categories that you've stored in local storage.

注意

Windows Notification Service (WNS) によって割り当てられたチャネル URI はいつでも変更される可能性があるため、通知を頻繁に登録して通知エラーを回避する必要があります。Because the channel URI that's assigned by the Windows Notification Service (WNS) can change at any time, you should register for notifications frequently to avoid notification failures. この例では、アプリケーションが起動するたびに通知を登録します。This example registers for notification every time that the app starts. 頻繁に (たとえば 1 日に複数回) 実行されるアプリでは、前回の登録から 1 日経過していない場合は、帯域幅を節約するために登録をスキップすることもできます。For apps that you run frequently, say, more than once a day, you can probably skip registration to preserve bandwidth if less than a day has passed since the previous registration.

  1. notifications クラスを使用してカテゴリに基づいてサブスクライブするには、App.xaml.cs ファイルを開き、InitNotificationsAsync メソッドを更新します。To use the notifications class to subscribe based on categories, open the App.xaml.cs file, and then update the InitNotificationsAsync method.

    // *** Remove or comment out these lines **_
    //var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
    //var hub = new NotificationHub("your hub name", "your listen connection string");
    //var result = await hub.RegisterNativeAsync(channel.Uri);
    
    var result = await notifications.SubscribeToCategories();
    

    このプロセスにより、アプリが起動されたときに確実にローカル記憶域からカテゴリが取得されます。This process ensures that when the app starts, it retrieves the categories from local storage. その後、それらのカテゴリの登録が要求されます。It then requests registration of these categories. InitNotificationsAsync メソッドは、「Azure Notification Hubs を使用してユニバーサル Windows プラットフォーム アプリに通知を送信する」のチュートリアルの中で作成しました。You created the InitNotificationsAsync method as part of the Send notifications to Universal Windows Platform apps by using Azure Notification Hubs tutorial.

  2. MainPage.xaml.cs プロジェクト ファイルで、OnNavigatedTo メソッドに次のコードを追加します。In the MainPage.xaml.cs project file, add the following code to the OnNavigatedTo method:

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        var categories = ((App)Application.Current).notifications.RetrieveCategories();
    
        if (categories.Contains("World")) WorldToggle.IsOn = true;
        if (categories.Contains("Politics")) PoliticsToggle.IsOn = true;
        if (categories.Contains("Business")) BusinessToggle.IsOn = true;
        if (categories.Contains("Technology")) TechnologyToggle.IsOn = true;
        if (categories.Contains("Science")) ScienceToggle.IsOn = true;
        if (categories.Contains("Sports")) SportsToggle.IsOn = true;
    }
    

    このコードは、以前に保存されたカテゴリの状態に基づいてメイン ページを更新します。This code updates the main page, based on the status of previously saved categories.

これでアプリは完成しました。The app is now complete. デバイスのローカル記憶域に一連のカテゴリを格納することができます。It can store a set of categories in the device local storage. ユーザーがカテゴリの選択を変更すると、保存済みのカテゴリを使用して通知ハブへの登録が行われます。When users change the category selection, the saved categories are used to register with the notification hub. 次のセクションでは、このアプリにカテゴリ通知を送信できるバックエンドを定義します。In the next section, you define a back end that can send category notifications to this app.

UWP アプリを実行するRun the UWP app

  1. Visual Studio で、F5 キーを押して、アプリのコンパイルと起動を行います。In Visual Studio, select F5 to compile and start the app. アプリの UI には、購読するカテゴリを選択できる一連の切り替えボタンが表示されます。The app UI provides a set of toggles that lets you choose the categories to subscribe to.

    ニュース速報アプリ

  2. 1 つ以上のカテゴリ切り替えボタンを有効にし、 [購読] を選択します。Enable one or more category toggles, and then select Subscribe.

    アプリケーションにより、選択されたカテゴリがタグに変換され、選択されたタグの新しいデバイス登録が通知ハブから要求されます。The app converts the selected categories into tags and requests a new device registration for the selected tags from the notification hub. 登録済みのカテゴリがダイアログ ボックスに表示されます。The app displays the registered categories in a dialog box.

    カテゴリの切り替えと [購読] ボタン

タグ付けされた通知を送信するコンソール アプリを作成するCreate a console app to send tagged notifications

このセクションでは、.NET コンソール アプリから、タグ付けされたテンプレート通知としてニュース速報を送信します。In this section, you send breaking news as tagged template notifications from a .NET console app.

  1. Visual Studio で、Visual C# の新しいコンソール アプリケーションを作成します。In Visual Studio, create a new Visual C# console application:

    1. メニューで、 [ファイル] > [新規作成] > [プロジェクト] を選択します。On the menu, select File > New > Project.
    2. [新しいプロジェクトの作成] で、テンプレートのリストで C# の [コンソール アプリ (.NET Framework)] を選択し、 [次へ] を選択します。In Create a new project, select Console App (.NET Framework) for C# in the list of templates, and select Next.
    3. アプリの名前を入力します。Enter a name for the app.
    4. [ソリューション] で、 [ソリューションに追加] を選択し、 [作成] を選択してプロジェクトを作成します。For Solution, choose Add to solution, and select Create to create the project.
  2. [ツール] > [NuGet Package Manager] > [パッケージ マネージャー コンソール] の順に選択してから、コンソール ウィンドウで次のコマンドを実行します。Select Tools > NuGet Package Manager > Package Manager Console and then, in the console window, run the following command:

    Install-Package Microsoft.Azure.NotificationHubs
    

    この操作によって、Microsoft.Azure.NotificationHubs パッケージを使用して Azure Notification Hubs SDK への参照が追加されます。This action adds a reference to the Azure Notification Hubs SDK by using the Microsoft.Azure.NotificationHubs package.

  3. Program.cs ファイルを開き、次の using ステートメントを追加します。Open the Program.cs file, and add the following using statement:

    using Microsoft.Azure.NotificationHubs;
    
  4. Program クラス内で、次のメソッドを追加するか、既にメソッドが指定されている場合は置き換えます。In the Program class, add the following method, or replace it if it already exists:

    private static async void SendTemplateNotificationAsync()
    {
        // Define the notification hub.
        NotificationHubClient hub = NotificationHubClient.CreateClientFromConnectionString("<connection string with full access>", "<hub name>");
    
        // Apple requires the apns-push-type header for all requests
        var headers = new Dictionary<string, string> {{"apns-push-type", "alert"}};
    
        // Create an array of breaking news categories.
        var categories = new string[] { "World", "Politics", "Business", "Technology", "Science", "Sports"};
    
        // Send the notification as a template notification. All template registrations that contain
        // "messageParam" and the proper tags will receive the notifications.
        // This includes APNS, GCM/FCM, WNS, and MPNS template registrations.
    
        Dictionary<string, string> templateParams = new Dictionary<string, string>();
    
        foreach (var category in categories)
        {
            templateParams["messageParam"] = "Breaking " + category + " News!";
            await hub.SendTemplateNotificationAsync(templateParams, category);
        }
    }
    

    このコードでは、文字列の配列の 6 つのタグのそれぞれに対するテンプレート通知が送信されます。This code sends a template notification for each of the six tags in the string array. タグを使用することで、デバイスは登録されているカテゴリに関する通知のみを確実に受信できます。The use of tags ensures that devices receive notifications only for the registered categories.

  5. 上記のコードでは、プレースホルダー <hub name><connection string with full access> を、通知ハブの名前と通知ハブのダッシュボードから得た DefaultFullSharedAccessSignature の接続文字列に置き換えます。In the preceding code, replace the <hub name> and <connection string with full access> placeholders with your notification hub name and the connection string for DefaultFullSharedAccessSignature from the dashboard of your notification hub.

  6. Main() メソッド内に、次の行を追加します。In the Main() method, add the following lines:

     SendTemplateNotificationAsync();
     Console.ReadLine();
    
  7. コンソール アプリケーションをビルドします。Build the console app.

タグ付けされた通知を送信するコンソール アプリを実行するRun the console app to send tagged notifications

前のセクションで作成したアプリを実行します。Run the app created in the previous section. 選択されたカテゴリの通知がトースト通知として表示されます。Notifications for the selected categories appear as toast notifications.

次のステップNext steps

このチュートリアルでは、ニュース速報をカテゴリごとにブロードキャストする方法について説明しました。In this article, you learned how to broadcast breaking news by category. バックエンド アプリケーションは、そのタグの通知を受信するように登録されているデバイスに、タグ付けされた通知をプッシュします。The back-end application pushes tagged notifications to devices that have registered to receive notifications for that tag. 使用されているデバイスに関係なく、特定のユーザーにプッシュ通知を送信する方法については、次のチュートリアルに進んでください。To learn how to push notifications to specific users independent of what device they use, advance to the following tutorial: