チュートリアル:Azure Notification Hubs を使用して Windows アプリにローカライズしたプッシュ通知を送信するTutorial: Send localized push notifications to Windows apps using Azure Notification Hubs

概要Overview

このチュートリアルでは、Notification Hubs サービスに登録されているモバイル デバイスにローカライズしたプッシュ通知を送信する方法を示します。This tutorial shows you how to push localized notifications to mobile devices registered with the Notification Hubs service. このチュートリアルでは、特定のデバイスに通知を送信するチュートリアル (ユニバーサル Windows プラットフォーム) で作成したアプリケーションを、次のシナリオをサポートするように更新します。In the tutorial, you update applications created in the Tutorial: Send notifications to specific devices (Universal Windows Platform) to support the following scenarios:

  • Windows ストア アプリを使用すると、クライアント デバイスは言語を指定したり、さまざまなニュース速報カテゴリにサブスクライブしたりできます。The Windows Store app allows client devices to specify a language, and to subscribe to different breaking news categories.
  • バックエンド アプリは、Azure Notification Hubs のタグおよびテンプレート機能を使用して通知をブロードキャストします。The back-end app broadcasts notifications, using the tag and template features of Azure Notification Hubs.

このチュートリアルを完了すると、モバイル アプリケーションを使用して、関心のあるカテゴリに登録したり、また通知を受信する言語を指定したりすることもできます。When you complete the tutorial, the mobile application lets you register for categories you are interested in, and also specify a language in which to receive the notifications. バックエンド アプリケーションは、言語およびデバイスごとにローカライズされた通知を送信します。The backend application sends notifications that are localized by language and device.

このチュートリアルでは、以下の内容を学習します。In this tutorial, you learn how to:

  • ロケール情報をサポートするように Windows アプリを更新するUpdate Windows app to support locale information
  • ローカライズした通知を送信するようにバックエンド アプリを更新するUpdate back-end app to send localized notifications
  • アプリケーションをテストするTest the app

前提条件Prerequisites

チュートリアル: 特定のデバイスに通知を送信するチュートリアル (ユニバーサル Windows プラットフォーム) のために作成した Visual Studio ソリューションを開きます。Complete the Tutorial: Send notifications to specific devices (Universal Windows Platform).

特定のデバイスに通知を送信するチュートリアル (ユニバーサル Windows プラットフォーム) では、タグを使用してさまざまなニュースカテゴリの通知にサブスクライブするアプリを構築しました。In the Tutorial: Send notifications to specific devices (Universal Windows Platform), you built an app that used tags to subscribe to notifications for different news categories. このチュートリアルでは、Notification Hubs のテンプレート機能を使用して、ローカライズしたニュース速報通知を簡単に配信します。In this tutorial, you use the template feature of Notification Hubs to easily deliver localized breaking news notifications.

高いレベルでは、テンプレートは、特定のデバイスが通知を受信する形式を指定するための方法です。At a high level, templates are a way to specify the format in which a specific device should receive a notification. テンプレートは、アプリケーション バックエンドにより送信されるメッセージの一部となっているプロパティを参照することで、正確なペイロードを指定します。The template specifies the exact payload format by referring to properties that are part of the message sent by your app back-end. このチュートリアルでは、バックエンド アプリケーションは、サポートされるすべての言語を含む、ロケールにとらわれないメッセージを送信します。In this tutorial, the backend application sends a locale-agnostic message containing all supported languages:

{
    "News_English": "...",
    "News_French": "...",
    "News_Mandarin": "..."
}

各デバイスは、適切なプロパティを参照するテンプレートに登録します。The devices register with a template that refers to the correct property. たとえば、トースト メッセージを英語で受信しようとする Windows ストア アプリは、対応するタグを含む次のテンプレートに登録します。For instance, a Windows Store app that wants to receive a toast message in English registers for the following template with any corresponding tags:

<toast>
    <visual>
    <binding template=\"ToastText01\">
        <text id=\"1\">$(News_English)</text>
    </binding>
    </visual>
</toast>

テンプレートの詳細については、プッシュ テンプレートに関するページを参照してください。To learn more about templates, see Push Templates.

ロケール情報をサポートするように Windows アプリを更新するUpdate Windows app to support locale information

  1. 特定のデバイスに通知を送信するチュートリアル (ユニバーサル Windows プラットフォーム) のために作成した Visual Studio ソリューションを開きます。Open the Visual Studio solution you created for the Tutorial: Send notifications to specific devices (Universal Windows Platform).

  2. ソリューションの MainPage.xaml ファイルを更新してロケール コンボ ボックスを追加します。Update the solution's MainPage.xaml file to include a locale combobox:

    <Grid Margin="120, 58, 120, 80"  
            Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition />
            <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"/>
        <ComboBox Name="Locale" HorizontalAlignment="Left" VerticalAlignment="Center" Width="200" Grid.Row="1" Grid.Column="0">
            <x:String>English</x:String>
            <x:String>French</x:String>
            <x:String>Mandarin</x:String>
        </ComboBox>
        <ToggleSwitch Header="World" Name="WorldToggle" Grid.Row="2" Grid.Column="0"/>
        <ToggleSwitch Header="Politics" Name="PoliticsToggle" Grid.Row="3" Grid.Column="0"/>
        <ToggleSwitch Header="Business" Name="BusinessToggle" Grid.Row="4" Grid.Column="0"/>
        <ToggleSwitch Header="Technology" Name="TechnologyToggle" Grid.Row="2" Grid.Column="1"/>
        <ToggleSwitch Header="Science" Name="ScienceToggle" Grid.Row="3" Grid.Column="1"/>
        <ToggleSwitch Header="Sports" Name="SportsToggle" Grid.Row="4" Grid.Column="1"/>
        <Button Content="Subscribe" HorizontalAlignment="Center" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" Click="SubscribeButton_Click" />
    </Grid>
    
  3. Notifications クラスの StoreCategoriesAndSubscribe メソッドと SubscribeToCategories メソッドにロケール パラメーターを追加します。In the Notifications class, add a locale parameter to the StoreCategoriesAndSubscribe and SubscribeToCategories methods.

    public async Task<Registration> StoreCategoriesAndSubscribe(string locale, IEnumerable<string> categories)
    {
        ApplicationData.Current.LocalSettings.Values["categories"] = string.Join(",", categories);
        ApplicationData.Current.LocalSettings.Values["locale"] = locale;
        return await SubscribeToCategories(locale, categories);
    }
    
    public async Task<Registration> SubscribeToCategories(string locale, IEnumerable<string> categories = null)
    {
        var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
    
        if (categories == null)
        {
            categories = RetrieveCategories();
        }
    
        // Using a template registration. This makes supporting notifications across other platforms much easier.
        // Using the localized tags based on locale selected.
        string templateBodyWNS = String.Format("<toast><visual><binding template=\"ToastText01\"><text id=\"1\">$(News_{0})</text></binding></visual></toast>", locale);
    
        return await hub.RegisterTemplateAsync(channel.Uri, templateBodyWNS, "localizedWNSTemplateExample", categories);
    }
    

    RegisterNativeAsync メソッドを呼び出す代わりに、RegisterTemplateAsync を呼び出します。Instead of calling the RegisterNativeAsync method, call RegisterTemplateAsync. テンプレートがロケールによって異なる特定の通知形式を登録します。You register a specific notification format in which the template depends on the locale. 複数のテンプレート (たとえば、トースト通知用に 1 つとタイル用に 1 つ) を登録することもできるため、テンプレートの名前 ("localizedWNSTemplateExample") も指定します。You also provide a name for the template ("localizedWNSTemplateExample"), because you might want to register more than one template (for instance one for toast notifications and one for tiles). これらの名前はまた、テンプレートを更新または削除するときにも指定する必要があります。You also need to name them to update or delete them.

    デバイスが同じタグを持つ複数のテンプレートを登録している場合は、そのタグを対象にした受信メッセージにより、そのデバイスに複数の通知 (テンプレートごとに 1 つ) が配信されます。If a device registers multiple templates with the same tag, an incoming message targeting that tag results in multiple notifications delivered to the device (one for each template). この動作は、同じ論理メッセージによって複数のビジュアル通知を生成する必要がある場合に役立ちます。たとえば、Windows ストア アプリケーションにバッジとトーストの両方を表示する場合などです。This behavior is useful when the same logical message has to result in multiple visual notifications, for instance showing both a badge and a toast in a Windows Store application.

  4. 次のメソッドを追加して、格納されたロケールを取得します。Add the following method to retrieve the stored locale:

    public string RetrieveLocale()
    {
        var locale = (string) ApplicationData.Current.LocalSettings.Values["locale"];
        return locale != null ? locale : "English";
    }
    
  5. MainPage.xaml.cs ファイルで、ボタン クリック ハンドラーを更新します。ロケール コンボ ボックスの現在の値を取得して、それを Notifications クラスの呼び出しに渡すようにします。In the MainPage.xaml.cs file, update the button click handler to retrieve the current value of the Locale combo box and provide it to the call to the Notifications class:

    private async void SubscribeButton_Click(object sender, RoutedEventArgs e)
    {
        var locale = (string)Locale.SelectedItem;
    
        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(locale,
                categories);
    
        var dialog = new MessageDialog("Locale: " + locale + " Subscribed to: " + 
            string.Join(",", categories) + " on registration Id: " + result.RegistrationId);
        dialog.Commands.Add(new UICommand("OK"));
        await dialog.ShowAsync();
    }
    
  6. 最後に、App.xaml.cs ファイルの InitNotificationsAsync メソッドを更新します。サブスクライブする際にロケールを取得して使用するようにします。Finally, in the App.xaml.cs file, update the InitNotificationsAsync method to retrieve the locale and use it when subscribing:

    private async void InitNotificationsAsync()
    {
        var result = await notifications.SubscribeToCategories(notifications.RetrieveLocale());
    
        // 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();
        }
    }
    

UWP アプリケーションを実行するRun the UWP application

  1. ユニバーサル Windows プラットフォーム アプリケーションを実行します。Run the Universal Windows Platform application. 登録が成功しましたというメッセージが表示されるまで待ちます。Wait until you see the Registration successful message.

    モバイル アプリケーションと登録

  2. カテゴリロケールを選択し、 [Subscribe](サブスクライブ) をクリックします。Select the categories and locale, and click Subscribe. アプリケーションにより、選択されたカテゴリがタグに変換され、選択されたタグの新しいデバイス登録が通知ハブから要求されます。The app converts the selected categories into tags and requests a new device registration for the selected tags from the notification hub.

    モバイル アプリケーション

  3. サブスクリプションに関する確認メッセージが表示されます。You see a confirmation message about the subscriptions.

    サブスクリプション メッセージ

ローカライズした通知を送信するようにコンソール アプリを更新するUpdate console app to send localized notifications

テンプレート通知を送信する場合は、一連のプロパティを指定するだけで済みます。このチュートリアルでは、バックエンド アプリケーションが、現在のニュースのローカライズ版を含む一連のプロパティを送信します。次に例を示します。When you send template notifications you only need to provide a set of properties, in this tutorial, the backend application sends the set of properties containing the localized version of the current news, for instance:

{
    "News_English": "World News in English!",
    "News_French": "World News in French!",
    "News_Mandarin": "World News in Mandarin!"
}

このセクションでは、ソリューション内のコンソール アプリケーション プロジェクトを更新します。In this section, you update the console application project in the solution. 次のコードを使用して、前に作成したコンソール アプリ内の SendTemplateNotificationAsync メソッドを変更します。Modify the SendTemplateNotificationAsync method in the console app you previously created with the following code:

重要

コード内で、通知ハブに対するフル アクセスを持つ名前と接続文字列を指定します。Specify the name and connection string with full access for your notification hub in the code.

private static async void SendTemplateNotificationAsync()
{
    // Define the notification hub.
    NotificationHubClient hub = NotificationHubClient.CreateClientFromConnectionString(
        "<connection string with full access>", "<hub name>");

    // Sending the notification as a template notification. All template registrations that contain
    // "messageParam" or "News_<local selected>" and the proper tags will receive the notifications.
    // This includes APNS, FCM, WNS, and MPNS template registrations.
    Dictionary<string, string> templateParams = new Dictionary<string, string>();

    // Create an array of breaking news categories.
    var categories = new string[] { "World", "Politics", "Business", "Technology", "Science", "Sports"};
    var locales = new string[] { "English", "French", "Mandarin" };

    foreach (var category in categories)
    {
        templateParams["messageParam"] = "Breaking " + category + " News!";

        // Sending localized News for each tag too...
        foreach( var locale in locales)
        {
            string key = "News_" + locale;

            // Your real localized news content would go here.
            templateParams[key] = "Breaking " + category + " News in " + locale + "!";
        }

        await hub.SendTemplateNotificationAsync(templateParams, category);
    }
}

通知ハブが適切なネイティブ ペイロードを構築し、特定のタグにサブスクライブしているすべてのデバイスに配信するため、この単純な呼び出しにより、プラットフォームには関係なく、ローカライズされたニュースがすべてのデバイスに配信されます。This simple call delivers the localized piece of news to all devices, irrespective of the platform, as your Notification Hub builds and delivers the correct native payload to all the devices subscribed to a specific tag.

ローカライズした通知を送信するコンソール アプリを実行するRun console app to send localized notification

コンソール アプリを実行して、カテゴリごとの通知をサポートされる各言語で送信します。Run the console app to send notifications for each category and in each supported language. サブスクライブしているカテゴリの通知のみを受信すること、およびメッセージが選択したロケールに対するものであることを確認します。Verify that you only receive a notification for the categories you have subscribed to and the message is for the locale you selected.

Notification messages

次のステップNext steps

このチュートリアルでは、タグが登録に関連付けられている特定のデバイスにローカライズしたプッシュ通知を送信する方法を学習しました。In this tutorial, you learned how to push localized notifications to specific devices that have tags associated with their registrations. 複数のデバイスを使用している可能性のある特定のユーザーにプッシュ通知を送信する方法を学習するには、次のチュートリアルに進んでください。To learn how to push notifications to specific users who may be using more than one device, advance to the following tutorial: