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

  • [アーティクル]

概要

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 アプリを更新する

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

  2. ソリューションの 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>

  3. 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 ストア アプリケーションにバッジとトーストの両方を表示する場合などです。

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

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

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

  6. 最後に、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 アプリケーションを実行する

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

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

  2. カテゴリとロケールを選択し、[Subscribe]\(サブスクライブ) をクリックします。 アプリケーションにより、選択されたカテゴリがタグに変換され、選択されたタグの新しいデバイス登録が通知ハブから要求されます。

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

  3. サブスクリプションに関する確認メッセージが表示されます。

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

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

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

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

次のステップ

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

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