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

[アーティクル]
06/01/2023

概要

Note

Microsoft プッシュ通知サービス (MPNS) は非推奨となり、サポートされなくなりました。

このチュートリアルでは、Notification Hubs サービスに登録されているモバイルデバイスにローカライズしたプッシュ通知を送信する方法を示します。このチュートリアルでは、「チュートリアル: 特定のデバイスに通知を送信する (ユニバーサル Windows プラットフォーム)」で作成されたアプリケーションを、次のシナリオをサポートするように更新します。

Windows ストアアプリを使用すると、クライアントデバイスは言語を指定したり、さまざまなニュース速報カテゴリにサブスクライブしたりできます。
バックエンドアプリは、Azure Notification Hubs のタグおよびテンプレート機能を使用して通知をブロードキャストします。

このチュートリアルを完了すると、モバイルアプリケーションを使用して、関心のあるカテゴリに登録したり、また通知を受信する言語を指定したりすることもできます。バックエンドアプリケーションは、言語およびデバイスごとにローカライズされた通知を送信します。

このチュートリアルでは、以下の内容を学習します。

ロケール情報をサポートするように Windows アプリを更新する
ローカライズした通知を送信するようにバックエンドアプリを更新する
アプリケーションをテストする

前提条件

「チュートリアル: 特定のデバイスに通知を送信する (ユニバーサル Windows プラットフォーム)」を完了してください。

「チュートリアル: 特定のデバイスに通知を送信する (ユニバーサル Windows プラットフォーム)」では、タグを使用してさまざまなニュースカテゴリの通知にサブスクライブするアプリを構築しました。このチュートリアルでは、Notification Hubs のテンプレート機能を使用して、ローカライズしたニュース速報通知を簡単に配信します。

高いレベルでは、テンプレートは、特定のデバイスが通知を受信する形式を指定するための方法です。テンプレートは、アプリケーションバックエンドにより送信されるメッセージの一部となっているプロパティを参照することで、正確なペイロードを指定します。このチュートリアルでは、バックエンドアプリケーションは、サポートされるすべての言語を含む、ロケールにとらわれないメッセージを送信します。

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

各デバイスは、適切なプロパティを参照するテンプレートに登録します。たとえば、トーストメッセージを英語で受信しようとする Windows ストアアプリは、対応するタグを含む次のテンプレートに登録します。

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

テンプレートの詳細については、プッシュテンプレートに関するページを参照してください。

ロケール情報をサポートするように Windows アプリを更新する

「チュートリアル: 特定のデバイスに通知を送信する (ユニバーサル Windows プラットフォーム)」のために作成した Visual Studio ソリューションを開きます。

ソリューションの MainPage.xaml ファイルを更新してロケールコンボボックスを追加します。

<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>

Notifications クラスの StoreCategoriesAndSubscribe メソッドと SubscribeToCategories メソッドにロケールパラメーターを追加します。
```
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 を呼び出します。テンプレートがロケールによって異なる特定の通知形式を登録します。複数のテンプレート (たとえば、トースト通知用に 1 つとタイル用に 1 つ) を登録することもできるため、テンプレートの名前 ("localizedWNSTemplateExample") も指定します。これらの名前はまた、テンプレートを更新または削除するときにも指定する必要があります。

デバイスが同じタグを持つ複数のテンプレートを登録している場合は、そのタグを対象にした受信メッセージにより、そのデバイスに複数の通知 (テンプレートごとに 1 つ) が配信されます。この動作は、同じ論理メッセージによって複数のビジュアル通知を生成する必要がある場合に役立ちます。たとえば、Windows ストアアプリケーションにバッジとトーストの両方を表示する場合などです。

次のメソッドを追加して、格納されたロケールを取得します。

public string RetrieveLocale()
{
    var locale = (string) ApplicationData.Current.LocalSettings.Values["locale"];
    return locale != null ? locale : "English";
}

MainPage.xaml.cs ファイルで、ボタンクリックハンドラーを更新します。ロケールコンボボックスの現在の値を取得して、それを Notifications クラスの呼び出しに渡すようにします。

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();
}

最後に、App.xaml.cs ファイルの InitNotificationsAsync メソッドを更新します。サブスクライブする際にロケールを取得して使用するようにします。

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 アプリケーションを実行する

ユニバーサル Windows プラットフォームアプリケーションを実行します。 登録が成功しましたというメッセージが表示されるまで待ちます。
カテゴリとロケールを選択し、[Subscribe]\(サブスクライブ) をクリックします。アプリケーションにより、選択されたカテゴリがタグに変換され、選択されたタグの新しいデバイス登録が通知ハブから要求されます。
サブスクリプションに関する確認メッセージが表示されます。

ローカライズした通知を送信するようにコンソールアプリを更新する

テンプレート通知を送信する場合は、一連のプロパティを指定するだけで済みます。このチュートリアルでは、バックエンドアプリケーションが、現在のニュースのローカライズ版を含む一連のプロパティを送信します。次に例を示します。

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

このセクションでは、ソリューション内のコンソールアプリケーションプロジェクトを更新します。次のコードを使用して、前に作成したコンソールアプリ内の SendTemplateNotificationAsync メソッドを変更します。

重要

コード内で、通知ハブに対するフルアクセスを持つ名前と接続文字列を指定します。

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);
    }
}

通知ハブが適切なネイティブペイロードを構築し、特定のタグにサブスクライブしているすべてのデバイスに配信するため、この単純な呼び出しにより、プラットフォームには関係なく、ローカライズされたニュースがすべてのデバイスに配信されます。

ローカライズした通知を送信するコンソールアプリを実行する

コンソールアプリを実行して、カテゴリごとの通知をサポートされる各言語で送信します。サブスクライブしているカテゴリの通知のみを受信すること、およびメッセージが選択したロケールに対するものであることを確認します。

Notification messages

次のステップ

このチュートリアルでは、タグが登録に関連付けられている特定のデバイスにローカライズしたプッシュ通知を送信する方法を学習しました。複数のデバイスを使用している可能性のある特定のユーザーにプッシュ通知を送信する方法を学習するには、次のチュートリアルに進んでください。

特定のユーザーにプッシュ通知を送信する

次の方法で共有

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

概要

前提条件

ロケール情報をサポートするように Windows アプリを更新する

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

ローカライズした通知を送信するようにコンソールアプリを更新する

ローカライズした通知を送信するコンソールアプリを実行する

次のステップ

フィードバック

その他のリソース

次の方法で共有

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

概要

前提条件

ロケール情報をサポートするように Windows アプリを更新する

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

ローカライズした通知を送信するようにコンソール アプリを更新する

ローカライズした通知を送信するコンソール アプリを実行する

次のステップ

フィードバック

その他のリソース

ローカライズした通知を送信するようにコンソールアプリを更新する

ローカライズした通知を送信するコンソールアプリを実行する