チュートリアル:Notification Hubs を使用して Xamarin.Android アプリにプッシュ通知を送信するTutorial: Send push notifications to Xamarin.Android apps using Notification Hubs

概要Overview

このチュートリアルでは、Azure Notification Hubs を使用して Xamarin.Android アプリケーションにプッシュ通知を送信する方法について説明します。This tutorial shows you how to use Azure Notification Hubs to send push notifications to a Xamarin.Android application. Firebase Cloud Messaging (FCM) を使用してプッシュ通知を受信する空の Xamarin.Android アプリを作成します。You create a blank Xamarin.Android app that receives push notifications by using Firebase Cloud Messaging (FCM). 通知ハブを使用して、アプリを実行しているすべてのデバイスにプッシュ通知をブロードキャストします。You use your notification hub to broadcast push notifications to all the devices running your app. 完成したコードは、NotificationHubs アプリ サンプルで参照できます。The finished code is available in the NotificationHubs app sample.

このチュートリアルでは、次の手順を実行します。In this tutorial, you take the following steps:

  • Firebase プロジェクトを作成し、Firebase Cloud Messaging を有効にするCreate a Firebase project and enable Firebase Cloud Messaging
  • 通知ハブを作成するCreate a notification hub
  • Xamarin.Android アプリを作成し、それを通知ハブに接続するCreate a Xamarin.Android app and connect it to the notification hub
  • Azure Portal からテスト通知を送信するSend test notifications from the Azure portal

前提条件Prerequisites

Firebase プロジェクトを作成し、Firebase Cloud Messaging を有効にするCreate a Firebase project and enable Firebase Cloud Messaging

  1. Firebase コンソールにサインインします。Sign in to the Firebase console. Firebase プロジェクトがまだない場合は、新しく作成します。Create a new Firebase project if you don't already have one.

  2. プロジェクトを作成した後、 [Add Firebase to your Android app](Android アプリに Firebase を追加する) を選択します。After you create your project, select Add Firebase to your Android app.

    Android アプリへの Firebase の追加

  3. [Android アプリへの Firebase の追加] ページで、次の手順を実行します。On the Add Firebase to your Android app page, take the following steps:

    1. [Android パッケージ名] に、お使いのパッケージの名前を入力します。For the Android package name, enter a name for your package. (例: tutorials.tutoria1.xamarinfcmapp)。For example: tutorials.tutoria1.xamarinfcmapp.

      パッケージ名を指定する

    2. [アプリの登録] を選択します。Select Register app.

    3. [google-services.json のダウンロード] を選択します。Select Download google-services.json. 次に、プロジェクトのフォルダーにファイルを保存し、 [次へ] を選択します。Then save the file into the folder of your project and select Next. まだ Visual Studio プロジェクトを作成していない場合は、プロジェクトの作成後にこの手順を実行できます。If you haven't created the Visual Studio project yet, you can do this step after you create the project.

      google-services.json をダウンロードする

    4. [次へ] を選択します。Select Next.

    5. [この手順をスキップする] を選択します。Select Skip this step.

      最後の手順をスキップする

  4. Firebase コンソールで、プロジェクトの歯車アイコンを選択します。In the Firebase console, select the cog for your project. 次に、 [Project Settings](プロジェクト設定) を選択します。Then select Project Settings.

    [Project Settings](プロジェクト設定) の選択

  5. google-services.json ファイルをダウンロードしていない場合は、このページでダウンロードできます。If you haven't downloaded the google-services.json file, you can do download it on this page.

    [全般] タブから google services. json をダウンロードする

  6. 上部にある [クラウド メッセージング] タブに切り替えます。Switch to the Cloud Messaging tab at the top. 後で使用するために、サーバー キーをコピーし、保存します。Copy and save the Server key for later use. この値を使用して通知ハブを構成します。You use this value to configure your notification hub.

    サーバー キーのコピー

通知ハブを作成するCreate a notification hub

  1. Azure portal にサインインするSign in to the Azure portal.

  2. 左側のメニューで [すべてのサービス] を選択し、 [モバイル] セクションの [Notification Hubs] を選択します。Select All services on the left menu, and then 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 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 then select Go to resource. [Notification Hubs] ページの一覧を最新の情報に更新して、お使いの通知ハブを選択することもできます。You can also refresh the list on the Notification Hubs page and select your hub.

    Azure portal - リソースに移動

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

GCM/FCM の設定を通知ハブ用に構成するConfigure GCM/FCM settings for the notification hub

  1. 左側のメニューの [設定] で、 [Google (GCM/FCM)] を選択します。Select Google (GCM/FCM)/ in the Settings section on the left menu.

  2. Google Firebase Console からメモした サーバー キー を入力します。Enter the server key you noted down from the Google Firebase Console.

  3. ツールバーの [保存] を選択します。Select Save on the toolbar.

    Google G C M F C M オプションが強調表示され、赤線で囲まれた、Azure portal の通知ハブのスクリーンショット。

通知ハブが FCM と連動するように構成されました。接続文字列により、アプリが通知を受信すると共に、プッシュ通知を送信するように登録されます。Your notification hub is configured to work with FCM, and you have the connection strings to both register your app to receive notifications and to send push notifications.

Xamarin.Android アプリを作成し、それを通知ハブに接続するCreate a Xamarin.Android app and connect it to notification hub

Visual Studio プロジェクトを作成し、NuGet パッケージを追加するCreate Visual Studio project and add NuGet packages

注意

このチュートリアルに記載されている手順は、Visual Studio 2017 を対象としています。The steps documented in this tutorial are for Visual Studio 2017.

  1. Visual Studio の [ファイル] メニューを開き、 [新規作成][プロジェクト] の順に選択します。In Visual Studio, open the File menu, select New , and then select Project . [新しいプロジェクト] ウィンドウで、次の手順のようにします。In the New Project window, do these steps:

    1. [インストール済み][Visual C#] の順に展開し、 [Android] をクリックします。Expand Installed , Visual C# , and then click Android .

    2. 一覧から [Android アプリ (Xamarin)] を選択します。Select Android App (Xamarin) from the list.

    3. プロジェクトの 名前 を入力します。Enter a name for the project.

    4. プロジェクトの 場所 を選択します。Select a location for the project.

    5. [OK] を選択します。Select OK

      [新しいプロジェクト] ダイアログ

  2. [New Android App](新しい Android アプリ) ダイアログ ボックスで [空のアプリ] を選択し、 [OK] を選択します。On the New Android App dialog box, select Blank App , and select OK .

    [空のアプリ] テンプレートが強調表示されているスクリーンショット。

  3. ソリューション エクスプローラー ウィンドウで、 [プロパティ] を展開し、 [AndroidManifest.xml] をクリックします。In the Solution Explorer window, expand Properties , and click AndroidManifest.xml . Google Firebase Console でプロジェクトに Firebase Cloud Messaging を追加するときに入力したパッケージ名に一致するようにパッケージ名を更新します。Update the package name to match the package name you entered when adding Firebase Cloud Messaging to your project in the Google Firebase Console.

    GCM でのパッケージ名

  4. 次の手順に従って、プロジェクトのターゲット Android バージョンを Android 9.0 (pie) に設定します。Set the target Android version for the project to Android 9.0 (pie) by following these steps:

    1. プロジェクトを右クリックし、 [プロパティ] を選択します。Right-click your project, and select Properties .
    2. [Android バージョンを使用したコンパイル:(ターゲット フレームワーク)] フィールドで、 [Android 9.0 (Pie)] を選択します。For the Compile using Android version: (Target framework) field, select Android 9.0 (Pie) .
    3. ターゲット フレームワークの変更を続行するには、メッセージ ボックスで [はい] を選択します。Select Yes on the message box to continue with changing the target framework.
  5. 次の手順に従って、必要な NuGet パッケージをプロジェクトに追加します。Add required NuGet packages to the project by following these steps:

    1. プロジェクトを右クリックし、 [NuGet パッケージの管理...] を選択します。Right-click your project, and select Manage NuGet Packages... .

    2. [インストール済み] タブに切り替えて、 [Xamarin.Android.Support.Design] を選択し、右側のウィンドウで [更新] を選択して、パッケージを最新バージョンに更新します。Switch to the Installed tab, select Xamarin.Android.Support.Design , and select Update in the right pane to update the package to the latest version.

    3. [参照] タブに切り替えます。 Xamarin.GooglePlayServices.Base を検索します。Switch to the Browse tab. Search for Xamarin.GooglePlayServices.Base . 結果の一覧で [Xamarin.GooglePlayServices.Base] を選択します。Select Xamarin.GooglePlayServices.Base in the result list. その後、 [インストール] を選択します。Then, select Install .

      Google Play 開発者サービス NuGet

    4. [NuGet パッケージ マネージャー] ウィンドウで、 Xamarin.Firebase.Messaging を検索します。In the NuGet Package Manager window, search for Xamarin.Firebase.Messaging . 結果の一覧で [Xamarin.Firebase.Messaging] を選択します。Select Xamarin.Firebase.Messaging in the result list. その後、 [インストール] を選択します。Then, select Install .

    5. 次に、 Xamarin.Azure.NotificationHubs.Android を検索します。Now, search for Xamarin.Azure.NotificationHubs.Android . 結果の一覧で [Xamarin.Azure.NotificationHubs.Android] を選択します。Select Xamarin.Azure.NotificationHubs.Android in the result list. その後、 [インストール] を選択します。Then, select Install .

Google Services JSON ファイルを追加するAdd the Google Services JSON File

  1. Google Firebase Console からダウンロードした google-services.json ファイルをプロジェクト フォルダーにコピーします。Copy the google-services.json file that you downloaded from the Google Firebase Console to the project folder.

  2. プロジェクトに google-services.json を追加します。Add google-services.json to the project.

  3. [ソリューション エクスプローラー] ウィンドウで google-services.json を選択します。Select google-services.json in the Solution Explorer window.

  4. [プロパティ] ウィンドウで、ビルド アクションを [GoogleServicesJson] に設定します。In the Properties pane, set the Build Action to GoogleServicesJson . [GoogleServicesJson] が表示されない場合は、Visual Studio を閉じて再起動し、プロジェクトを再度開いて再試行します。If you don't see GoogleServicesJson , close Visual Studio, relaunch it, reopen the project, and retry.

    GoogleServicesJson ビルド アクション

プロジェクトで Notification Hubs を設定するSet up notification hubs in your project

Firebase Cloud Messaging の登録Registering with Firebase Cloud Messaging

  1. AndroidManifest.xml ファイルを開き、次の <receiver> 要素を <application> 要素に挿入します。Open the AndroidManifest.xml file and insert the following <receiver> elements into the <application> element:

    <receiver android:name="com.google.firebase.iid.FirebaseInstanceIdInternalReceiver" android:exported="false" />
    <receiver android:name="com.google.firebase.iid.FirebaseInstanceIdReceiver" android:exported="true" android:permission="com.google.android.c2dm.permission.SEND">
        <intent-filter>
        <action android:name="com.google.android.c2dm.intent.RECEIVE" />
        <action android:name="com.google.android.c2dm.intent.REGISTRATION" />
        <category android:name="${applicationId}" />
        </intent-filter>
    </receiver>
    
  2. application 要素の前 に、以下のステートメントを追加します。Add the following statements before the application element.

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS"/>
    
  3. Android アプリケーションと通知ハブについて次の情報を収集します。Gather the following information for your Android app and notification hub:

    • 接続文字列のリッスン : Azure portal のダッシュボードで [接続文字列の表示] を選択します。Listen connection string : On the dashboard in the Azure portal, choose View connection strings . この値に使用するための DefaultListenSharedAccessSignature 接続文字列をコピーします。Copy the DefaultListenSharedAccessSignature connection string for this value.
    • ハブ名 : Azure portal からのハブの名前。Hub name : Name of your hub from the Azure portal. たとえば、 mynotificationhub2 です。For example, mynotificationhub2 .
  4. [ソリューション エクスプローラー] ウィンドウで、該当する プロジェクト を右クリックし、 [追加] を選択して、 [クラス] を選択します。In the Solution Explorer window, right-click your project , select Add , and then select Class .

  5. Xamarin プロジェクトの Constants.cs クラスを作成し、このクラスに次の定数値を定義します。Create a Constants.cs class for your Xamarin project and define the following constant values in the class. プレースホルダーを実際の値に置き換えます。Replace the placeholders with your values.

    public static class Constants
    {
        public const string ListenConnectionString = "<Listen connection string>";
        public const string NotificationHubName = "<hub name>";
    }
    
  6. 次の using ステートメントを MainActivity.cs に追加します。Add the following using statements to MainActivity.cs:

    using Android.Util;
    using Android.Gms.Common;
    
  7. MainActivity クラスに以下のプロパティを追加します。Add the following properties to the MainActivity class. アプリを実行しているときにアラート ダイアログを表示するために、TAG 変数が使用されます。The TAG variable will be used to show an alert dialog when the app is running:

    public const string TAG = "MainActivity";
    internal static readonly string CHANNEL_ID = "my_notification_channel";
    
  8. MainActivity クラスに次のメソッドを追加します。Add the following method to the MainActivity class. デバイスで Google Play 開発者サービス が使用できるかどうかを確認します。It checks whether Google Play Services are available on the device.

    public bool IsPlayServicesAvailable()
    {
        int resultCode = GoogleApiAvailability.Instance.IsGooglePlayServicesAvailable(this);
        if (resultCode != ConnectionResult.Success)
        {
            if (GoogleApiAvailability.Instance.IsUserResolvableError(resultCode))
                Log.Debug(TAG, GoogleApiAvailability.Instance.GetErrorString(resultCode));
            else
            {
                Log.Debug(TAG, "This device is not supported");
                Finish();
            }
            return false;
        }
    
        Log.Debug(TAG, "Google Play Services is available.");
        return true;
    }
    
  9. MainActivity クラスに、通知チャネルを作成する次のメソッドを追加します。Add the following method to the MainActivity class that creates a notification channel.

    private void CreateNotificationChannel()
    {
        if (Build.VERSION.SdkInt < BuildVersionCodes.O)
        {
            // Notification channels are new in API 26 (and not a part of the
            // support library). There is no need to create a notification
            // channel on older versions of Android.
            return;
        }
    
        var channelName = CHANNEL_ID;
        var channelDescription = string.Empty;
        var channel = new NotificationChannel(CHANNEL_ID, channelName, NotificationImportance.Default)
        {
            Description = channelDescription
        };
    
        var notificationManager = (NotificationManager)GetSystemService(NotificationService);
        notificationManager.CreateNotificationChannel(channel);
    }
    
  10. MainActivity.cs で、次のコードを OnCreate (base.OnCreate(savedInstanceState) の後) に追加します。In MainActivity.cs, add the following code to OnCreate after base.OnCreate(savedInstanceState):

    if (Intent.Extras != null)
    {
        foreach (var key in Intent.Extras.KeySet())
        {
            if(key!=null)
            {
                var value = Intent.Extras.GetString(key);
                Log.Debug(TAG, "Key: {0} Value: {1}", key, value);
            }
        }
    }
    
    IsPlayServicesAvailable();
    CreateNotificationChannel();
    
  11. MyFirebaseMessagingService という名前のクラスをプロジェクトに追加します。Add a class named MyFirebaseMessagingService to your project.

  12. 次の using ステートメントを MyFirebaseMessagingService.cs に追加します。Add the following using statements to MyFirebaseMessagingService.cs.

    using Android.Util;
    using Firebase.Messaging;
    using Android.Support.V4.App;    
    using WindowsAzure.Messaging;
    
  13. クラスの宣言の上に次のコードを追加し、クラスが FirebaseMessagingService から継承するようにします。Add the following above your class declaration, and have your class inherit from FirebaseMessagingService:

    [Service]
    [IntentFilter(new[] { "com.google.firebase.MESSAGING_EVENT" })]
    [IntentFilter(new[] { "com.google.firebase.INSTANCE_ID_EVENT" })]
    public class MyFirebaseMessagingService : FirebaseMessagingService
    
  14. 次のコードを MyFirebaseMessagingService クラス内に追加して、受信したメッセージを処理します。Add the following code inside MyFirebaseMessagingService class, to process messages that are received.

        const string TAG = "MyFirebaseMsgService";
        NotificationHub hub;
    
        public override void OnMessageReceived(RemoteMessage message)
        {
            Log.Debug(TAG, "From: " + message.From);
            if (message.GetNotification() != null)
            {
                //These is how most messages will be received
                Log.Debug(TAG, "Notification Message Body: " + message.GetNotification().Body);
                SendNotification(message.GetNotification().Body);
            }
            else
            {
                //Only used for debugging payloads sent from the Azure portal
                SendNotification(message.Data.Values.First());
    
            }
        }
    
        void SendNotification(string messageBody)
        {
            var intent = new Intent(this, typeof(MainActivity));
            intent.AddFlags(ActivityFlags.ClearTop);
            var pendingIntent = PendingIntent.GetActivity(this, 0, intent, PendingIntentFlags.OneShot);
    
            var notificationBuilder = new NotificationCompat.Builder(this, MainActivity.CHANNEL_ID);
    
            notificationBuilder.SetContentTitle("FCM Message")
                        .SetSmallIcon(Resource.Drawable.ic_launcher)
                        .SetContentText(messageBody)
                        .SetAutoCancel(true)
                        .SetShowWhen(false)
                        .SetContentIntent(pendingIntent);
    
            var notificationManager = NotificationManager.FromContext(this);
    
            notificationManager.Notify(0, notificationBuilder.Build());
        }
    
  15. 次のメソッドを MyFirebaseMessagingService クラス (前の手順で追加されたコードのすぐ下) に追加して、FCM 登録トークンを受信し、それを Notification Hubs インスタンス (ハブ) に送信します。Add the following methods to the MyFirebaseMessagingService class (right below the code added in the previous step) to receive the FCM registration token and send it to the Notification Hubs instance (hub).

        public override void OnNewToken(string token)
        {
            Log.Debug(TAG, "FCM token: " + token);
            SendRegistrationToServer(token);
        }
    
        void SendRegistrationToServer(string token)
        {
            // Register with Notification Hubs
            hub = new NotificationHub(Constants.NotificationHubName,
                                        Constants.ListenConnectionString, this);
    
            var tags = new List<string>() { };
            var regID = hub.Register(token, tags.ToArray()).RegistrationId;
    
            Log.Debug(TAG, $"Successful registration of ID {regID}");
        }
    
  16. プロジェクトを 構築しますBuild your project.

  17. デバイスまたは読み込まれたエミュレーターでアプリを 実行するRun your app on your device or loaded emulator

Azure Portal からテスト通知を送信するSend test notification from the Azure portal

アプリの通知の受信をテストするには、 Azure Portal[テスト送信] オプションを使用します。You can test receiving notifications in your app with the Test Send option in the Azure portal. これは、デバイスにテスト プッシュ通知を送信します。It sends a test push notification to your device.

Azure Portal - テスト送信

プッシュ通知は通常、互換性のあるライブラリを使用して Mobile Services などのバックエンド サービスや ASP.NET に送信されます。Push notifications are normally sent in a back-end service like Mobile Services or ASP.NET through a compatible library. ライブラリがバックエンドに使用できない場合は、REST API を直接使用して通知メッセージを送信することもできます。If a library isn't available for your back-end, you can also use the REST API directly to send notification messages.

次のステップNext steps

このチュートリアルでは、バックエンドに登録されているすべての Android デバイスにブロードキャスト通知を送信しました。In this tutorial, you sent broadcast notifications to all your Android devices registered with the backend. 特定の Android デバイスにプッシュ通知を送信する方法を学習するには、次のチュートリアルに進んでください。To learn how to push notifications to specific Android devices, advance to the following tutorial: