Xamarin.Forms アプリにプッシュ通知を追加するAdd push notifications to your Xamarin.Forms app

概要Overview

このチュートリアルでは、Xamarin.Forms クイック スタートで作成したすべてのプロジェクトにプッシュ通知を追加します。In this tutorial, you add push notifications to all the projects that resulted from the Xamarin.Forms quick start. つまり、レコードが挿入されるたびにすべてのクロスプラットフォーム クライアントに対してプッシュ通知が送信されるようにします。This means that a push notification is sent to all cross-platform clients every time a record is inserted.

ダウンロードしたクイック スタートのサーバー プロジェクトを使用しない場合は、プッシュ通知拡張機能パッケージを追加する必要があります。If you do not use the downloaded quick start server project, you will need the push notification extension package. 詳細については、「Azure Mobile Apps 用 .NET バックエンド サーバー SDK の操作」を参照してください。For more information, see Work with the .NET backend server SDK for Azure Mobile Apps.

前提条件Prerequisites

iOS については、Apple Developer Program メンバーシップと物理 iOS デバイスが必要です。For iOS, you will need an Apple Developer Program membership and a physical iOS device. iOS シミュレーターでは、プッシュ通知はサポートされていませんThe iOS simulator does not support push notifications.

通知ハブを構成するConfigure a notification hub

Azure App Service の Mobile Apps 機能は Azure Notification Hubs を使用してプッシュを送信するため、ここではモバイル アプリの通知ハブを構成します。The Mobile Apps feature of Azure App Service uses Azure Notification Hubs to send pushes, so you will be configuring a notification hub for your mobile app.

  1. Azure Portal で、[App Services] に移動し、アプリ バックエンドを選択します。In the Azure portal, go to App Services, and then select your app back end. [設定][プッシュ] を選択します。Under Settings, select Push.
  2. 通知ハブ リソースをアプリに追加するには、[接続] を選択します。To add a notification hub resource to the app, select Connect. ハブを作成することも、既存のハブに接続することもできます。You can either create a hub or connect to an existing one.

    ハブの構成

これで、通知ハブが Mobile Apps のバックエンド プロジェクトに接続されました。Now you have connected a notification hub to your Mobile Apps back-end project. 後でこの通知ハブを構成して、デバイスにプッシュ通知を送信するプラットフォーム通知システム (PNS) に接続します。Later you configure this notification hub to connect to a platform notification system (PNS) to push to devices.

プッシュ通知を送信するようにサーバー プロジェクトを更新するUpdate the server project to send push notifications

このセクションでは、Mobile Apps の既存のバックエンド プロジェクトのコードを更新して、新しい項目が追加されるたびにプッシュ通知を送信するようにします。In this section, you update code in your existing Mobile Apps back-end project to send a push notification every time a new item is added. このプロセスは、Azure Notification Hubs のテンプレート機能を使用しており、クロスプラットフォームのプッシュを有効にします。This process is powered by the template feature of Azure Notification Hubs, which enables cross-platform pushes. テンプレートを使用してさまざまなクライアントがプッシュ通知に登録されるため、1 つの汎用プッシュがすべてのクライアント プラットフォームに届きます。The various clients are registered for push notifications using templates, and a single universal push can get to all client platforms.

バックエンド プロジェクトの種類 (.NET バックエンドまたは Node.js バックエンド) に応じた次のいずれかの手順を選択します。Choose one of the following procedures that matches your back-end project type—either .NET back end or Node.js back end.

.NET バックエンド プロジェクト.NET back-end project

  1. Visual Studio で、サーバー プロジェクトを右クリックします。In Visual Studio, right-click the server project. 次に、[NuGet パッケージの管理] を選択します。Then select Manage NuGet Packages. Microsoft.Azure.NotificationHubs を検索し、[インストール] を選択します。Search for Microsoft.Azure.NotificationHubs, and then select Install. このプロセスにより、バックエンドから通知を送信するための Notification Hubs ライブラリがインストールされます。This process installs the Notification Hubs library for sending notifications from the back end.
  2. サーバー プロジェクトで、[コントローラー] > [TodoItemController.cs] の順に開きます。In the server project, open Controllers > TodoItemController.cs. 次の using ステートメントを追加します。Then add the following using statements:

     using System.Collections.Generic;
     using Microsoft.Azure.NotificationHubs;
     using Microsoft.Azure.Mobile.Server.Config;
    
  3. PostTodoItem メソッドで、次のコードを InsertAsync に対する呼び出しの後ろに追加します。In the PostTodoItem method, add the following code after the call to InsertAsync:

     // Get the settings for the server project.
     HttpConfiguration config = this.Configuration;
     MobileAppSettingsDictionary settings =
         this.Configuration.GetMobileAppSettingsProvider().GetMobileAppSettings();
    
     // Get the Notification Hubs credentials for the mobile app.
     string notificationHubName = settings.NotificationHubName;
     string notificationHubConnection = settings
         .Connections[MobileAppSettingsKeys.NotificationHubConnectionString].ConnectionString;
    
     // Create a new Notification Hub client.
     NotificationHubClient hub = NotificationHubClient
     .CreateClientFromConnectionString(notificationHubConnection, notificationHubName);
    
     // Send the message so that all template registrations that contain "messageParam"
     // receive the notifications. This includes APNS, GCM, WNS, and MPNS template registrations.
     Dictionary<string,string> templateParams = new Dictionary<string,string>();
     templateParams["messageParam"] = item.Text + " was added to the list.";
    
     try
     {
         // Send the push notification and log the results.
         var result = await hub.SendTemplateNotificationAsync(templateParams);
    
         // Write the success result to the logs.
         config.Services.GetTraceWriter().Info(result.State.ToString());
     }
     catch (System.Exception ex)
     {
         // Write the failure result to the logs.
         config.Services.GetTraceWriter()
             .Error(ex.Message, null, "Push.SendAsync Error");
     }
    

    このプロセスにより、新しい項目が挿入されたときに、item.Text を含むテンプレート通知が送信されます。This process sends a template notification that contains the item.Text when a new item is inserted.

  4. サーバー プロジェクトを発行します。Republish the server project.

Node.js バックエンド プロジェクトNode.js back-end project

  1. これをまだ行っていない場合は、クイック スタート バックエンド プロジェクトをダウンロードするか、Azure Portal でオンライン エディターを使用します。If you haven't already done so, download the quickstart back-end project, or else use the online editor in the Azure portal.
  2. todoitem.js 内の既存のコードを、次のコードに置き換えます。Replace the existing code in todoitem.js with the following code:

     var azureMobileApps = require('azure-mobile-apps'),
     promises = require('azure-mobile-apps/src/utilities/promises'),
     logger = require('azure-mobile-apps/src/logger');
    
     var table = azureMobileApps.table();
    
     table.insert(function (context) {
     // For more information about the Notification Hubs JavaScript SDK,
     // see http://aka.ms/nodejshubs.
     logger.info('Running TodoItem.insert');
    
     // Define the template payload.
     var payload = '{"messageParam": "' + context.item.text + '" }';  
    
     // Execute the insert. The insert returns the results as a promise.
     // Do the push as a post-execute action within the promise flow.
     return context.execute()
         .then(function (results) {
             // Only do the push if configured.
             if (context.push) {
                 // Send a template notification.
                 context.push.send(null, payload, function (error) {
                     if (error) {
                         logger.error('Error while sending push notification: ', error);
                     } else {
                         logger.info('Push notification sent successfully!');
                     }
                 });
             }
             // Don't forget to return the results from the context.execute().
             return results;
         })
         .catch(function (error) {
             logger.error('Error while running context.execute: ', error);
         });
     });
    
     module.exports = table;  
    

    このプロセスにより、新しい項目が挿入されたときに、item.text を含むテンプレート通知が送信されます。This process sends a template notification that contains the item.text when a new item is inserted.

  3. ローカル コンピューターでファイルを編集するときは、サーバー プロジェクトを再発行します。When you edit the file on your local computer, republish the server project.

Android プロジェクトを構成して実行する (省略可能)Configure and run the Android project (optional)

このセクションを完了すると、Android 用の Xamarin.Forms Droid プロジェクトのプッシュ通知を有効にすることができます。Complete this section to enable push notifications for the Xamarin.Forms Droid project for Android.

Firebase Cloud Messaging (FCM) を有効にするEnable Firebase Cloud Messaging (FCM)

  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. 次に、表示される手順に従います。Then follow the instructions that are provided. google-services.json ファイルをダウンロードします。Download google-services.json file.

    Android アプリへの Firebase の追加

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

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

  4. プロジェクト設定で [General](一般) タブを選択します。Select the General tab in your project settings. サーバーの API キーとクライアント ID が含まれた google-services.json ファイルをダウンロードします。Then download the google-services.json file that contains the Server API key and Client ID.
  5. プロジェクト設定の [Cloud Messaging](クラウド メッセージ) タブを選択し、[Legacy server key](レガシ サーバー キー) の値をコピーします。Select the Cloud Messaging tab in your project settings, and then copy the value of the Legacy server key. この値を使用して通知ハブのアクセス ポリシーを構成します。You use this value to configure the notification hub access policy.

FCM を使用してプッシュ要求を送信するように Mobile Apps バックエンドを構成するConfigure the Mobile Apps back end to send push requests by using FCM

  1. Azure Portal[すべて参照] > [App Services] の順に選択します。In the Azure portal, select Browse All > App Services. 次に、Mobile Apps バックエンドを選択します。Then select your Mobile Apps back end.
  2. [設定][プッシュ] を選択します。Under Settings, select Push. 次に、[プッシュ通知サービスを構成する] を選択します。Then select Configure push notification services.
  3. [Google (GCM)] に移動します。Go to Google (GCM). Firebase コンソールから取得した FCM レガシー サーバー キーを入力し、[保存] を選択します。Enter the FCM legacy server key that you obtained from the Firebase console, and then select Save.

これで、Firebase Cloud Messaging と連携するようにサービスが構成されました。Your service is now configured to work with Firebase Cloud Messaging.

Android プロジェクトにプッシュ通知を追加するAdd push notifications to the Android project

FCM を使用してバックエンドを構成すると、コンポーネントとコードをクライアントに追加して FCM に登録できます。With the back end configured with FCM, you can add components and codes to the client to register with FCM. Mobile Apps バックエンドを通じて Azure Notification Hubs によるプッシュ通知に登録し、通知を受信することもできます。You can also register for push notifications with Azure Notification Hubs through the Mobile Apps back end, and receive notifications.

  1. Droid プロジェクトで、[参照] > [NuGet パッケージの管理...] の順に右クリックします。In the Droid project, right-click References > Manage NuGet Packages ....
  2. [NuGet パッケージ マネージャー] ウィンドウで [Xamarin.Firebase.Messaging] パッケージを検索して、プロジェクトに追加します。In the NuGet Package Manager window, search for the Xamarin.Firebase.Messaging package and add it to the project.
  3. Droid プロジェクトのプロジェクト プロパティで、Android バージョン 7.0 以降を使用してコンパイルするようにアプリを設定します。In the project properies for the Droid project, set the app to compile using Android version 7.0 or higher.
  4. Firebase コンソールからダウンロードした google-services.json ファイルを Droid プロジェクトのルートに追加して、ビルド アクションを GoogleServicesJson に設定します。Add the google-services.json file, downloaded from the Firebase console, to the root of the Droid project and set its build action to GoogleServicesJson. 詳細については、Google Services JSON ファイルの追加に関する記事をご覧ください。For more information, see Add the Google Services JSON File.

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>
    

Firebase インスタンス ID サービスの実装Implementing the Firebase Instance ID Service

  1. FirebaseRegistrationService という名前の Droid プロジェクトに新しいクラスを追加します。次の using ステートメントはファイルの先頭に配置してください。Add a new class to the Droid project named FirebaseRegistrationService, and make sure that the following using statements are present at the top of the file:

     using System.Threading.Tasks;
     using Android.App;
     using Android.Util;
     using Firebase.Iid;
     using Microsoft.WindowsAzure.MobileServices;
    
  2. 空の FirebaseRegistrationService クラスを次のコードに置き換えます。Replace the empty FirebaseRegistrationService class with the following code:

     [Service]
     [IntentFilter(new[] { "com.google.firebase.INSTANCE_ID_EVENT" })]
     public class FirebaseRegistrationService : FirebaseInstanceIdService
     {
         const string TAG = "FirebaseRegistrationService";
    
         public override void OnTokenRefresh()
         {
             var refreshedToken = FirebaseInstanceId.Instance.Token;
             Log.Debug(TAG, "Refreshed token: " + refreshedToken);
             SendRegistrationTokenToAzureNotificationHub(refreshedToken);
         }
    
         void SendRegistrationTokenToAzureNotificationHub(string token)
         {
             // Update notification hub registration
             Task.Run(async () =>
             {
                 await AzureNotificationHubService.RegisterAsync(TodoItemManager.DefaultManager.CurrentClient.GetPush(), token);
             });
         }
     }
    

    FirebaseRegistrationService クラスは、FCM にアクセスするアプリケーションを認証するセキュリティ トークンを生成する役割を担いますThe FirebaseRegistrationService class is responsible for generating security tokens that authorize the application to access FCM. OnTokenRefresh メソッドは、アプリケーションが FCM から登録トークンを受信するときに呼び出されます。The OnTokenRefresh method is invoked when the application receives a registration token from FCM. メソッドは、FCM によって非同期で更新された FirebaseInstanceId.Instance.Token プロパティからトークンを受信します。The method retrieves the token from the FirebaseInstanceId.Instance.Token property, which is asynchronously updated by FCM. トークンはアプリケーションがインストールまたはアンインストールされたとき、ユーザーがアプリケーション データを削除したとき、アプリケーションがインスタンス ID を消去したとき、またはトークンのセキュリティが侵害されたときにだけ更新されるため、OnTokenRefresh メソッドが呼び出される頻度は高くありません。The OnTokenRefresh method is infrequently invoked, because the token is only updated when the application is installed or uninstalled, when the user deletes application data, when the application erases the Instance ID, or when the security of the token has been compromised. さらに、FCM インスタンス ID サービスでは、アプリケーションによって定期的にトークンが更新されること (通常は 6 か月ごと) を必要とします。In addition, the FCM Instance ID service will request that the application refreshes its token periodically, typically every 6 months.

    また、OnTokenRefresh メソッドは SendRegistrationTokenToAzureNotificationHub メソッドを呼び出します。このメソッドは、ユーザーの登録トークンを Azure Notification Hub と関連付けるために使用されます。The OnTokenRefresh method also invokes the SendRegistrationTokenToAzureNotificationHub method, which is used to associate the user's registration token with the Azure Notification Hub.

Azure Notification Hub による登録Registering with the Azure Notification Hub

  1. AzureNotificationHubService という名前の Droid プロジェクトに新しいクラスを追加します。次の using ステートメントはファイルの先頭に配置してください。Add a new class to the Droid project named AzureNotificationHubService, and make sure that the following using statements are present at the top of the file:

     using System;
     using System.Threading.Tasks;
     using Android.Util;
     using Microsoft.WindowsAzure.MobileServices;
     using Newtonsoft.Json.Linq;
    
  2. 空の AzureNotificationHubService クラスを次のコードに置き換えます。Replace the empty AzureNotificationHubService class with the following code:

     public class AzureNotificationHubService
     {
         const string TAG = "AzureNotificationHubService";
    
         public static async Task RegisterAsync(Push push, string token)
         {
             try
             {
                 const string templateBody = "{\"data\":{\"message\":\"$(messageParam)\"}}";
                 JObject templates = new JObject();
                 templates["genericMessage"] = new JObject
                 {
                     {"body", templateBody}
                 };
    
                 await push.RegisterAsync(token, templates);
                 Log.Info("Push Installation Id: ", push.InstallationId.ToString());
             }
             catch (Exception ex)
             {
                 Log.Error(TAG, "Could not register with Notification Hub: " + ex.Message);
             }
         }
     }
    

    RegisterAsync メソッドは単純な通知メッセージ テンプレートを JSON として作成し、Firebase 登録トークンを使用して通知ハブからテンプレート通知を受け取るように登録を行います。The RegisterAsync method creates a simple notification message template as JSON, and registers to receive template notifications from the notification hub, using the Firebase registration token. これにより、Azure Notification Hub から送信された通知はすべて、登録トークンによって提示されたデバイスを対象とします。This ensures that any notifications sent from the Azure Notification Hub will target the device represented by the registration token.

プッシュ通知の内容の表示Displaying the Contents of a Push Notification

  1. FirebaseNotificationService という名前の Droid プロジェクトに新しいクラスを追加します。次の using ステートメントはファイルの先頭に配置してください。Add a new class to the Droid project named FirebaseNotificationService, and make sure that the following using statements are present at the top of the file:

     using Android.App;
     using Android.Content;
     using Android.Media;
     using Android.Support.V7.App;
     using Android.Util;
     using Firebase.Messaging;
    
  2. 空の FirebaseNotificationService クラスを次のコードに置き換えます。Replace the empty FirebaseNotificationService class with the following code:

     [Service]
     [IntentFilter(new[] { "com.google.firebase.MESSAGING_EVENT" })]
     public class FirebaseNotificationService : FirebaseMessagingService
     {
         const string TAG = "FirebaseNotificationService";
    
         public override void OnMessageReceived(RemoteMessage message)
         {
             Log.Debug(TAG, "From: " + message.From);
    
             // Pull message body out of the template
             var messageBody = message.Data["message"];
             if (string.IsNullOrWhiteSpace(messageBody))
                 return;
    
             Log.Debug(TAG, "Notification message body: " + messageBody);
             SendNotification(messageBody);
         }
    
         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)
                 .SetSmallIcon(Resource.Drawable.ic_stat_ic_notification)
                 .SetContentTitle("New Todo Item")
                 .SetContentText(messageBody)
                 .SetContentIntent(pendingIntent)
                 .SetSound(RingtoneManager.GetDefaultUri(RingtoneType.Notification))
                 .SetAutoCancel(true);
    
             var notificationManager = NotificationManager.FromContext(this);
             notificationManager.Notify(0, notificationBuilder.Build());
         }
     }
    

    アプリケーションが FCM から通知を受け取るときに呼び出される OnMessageReceived メソッドは、メッセージのコンテンツを抽出し、SendNotification メソッドを呼び出します。The OnMessageReceived method, which is invoked when an application receives a notification from FCM, extracts the message content, and calls the SendNotification method. このメソッドは、通知領域に表示された通知を使用して、メッセージのコンテンツを、アプリケーションの実行中に起動されたローカル通知に変換します。This method converts the message content into a local notification that's launched while the application is running, with the notification appearing in the notification area.

これで、Android デバイスまたはエミュレーターで実行されているアプリでプッシュ通知をテストする準備が整いました。Now, you are ready test push notifications in the app running on an Android device or the emulator.

Android アプリでプッシュ通知をテストするTest push notifications in your Android app

最初の 2 つの手順は、エミュレーターでテストする場合にのみ必要です。The first two steps are required only when you're testing on an emulator.

  1. 必ず Google Play 開発者サービスで構成されたデバイスまたはエミュレーターに対してデプロイまたはデバッグします。Make sure that you are deploying to or debugging on a device or emulator that is configured with Google Play Services. これを確かめるには、Play アプリがデバイスまたはエミュレーターにインストールされていることを確認します。This can be verified by checking that the Play apps are installed on the device or emulator.
  2. [アプリ] > [設定] > [アカウントの追加] をクリックして Android デバイスに Google アカウントを追加します。Add a Google account to the Android device by clicking Apps > Settings > Add account. プロンプトに従って既存の Google アカウントをデバイスに追加するか、新たにアカウントを作成します。Then follow the prompts to add an existing Google account to the device, or to create a new one.
  3. Visual Studio または Xamarin Studio で、Droid プロジェクトを右クリックし、[スタートアップ プロジェクトに設定] をクリックします。In Visual Studio or Xamarin Studio, right-click the Droid project and click Set as startup project.
  4. [実行] をクリックしてプロジェクトをビルドし、Android デバイスまたはエミュレーターでアプリを起動します。Click Run to build the project and start the app on your Android device or emulator.
  5. アプリケーションで、タスクを入力し、プラス (+) アイコンをクリックします。In the app, type a task, and then click the plus (+) icon.
  6. 項目が追加されたときに、通知が受信されていることを確認します。Verify that a notification is received when an item is added.

iOS プロジェクトを構成して実行する (省略可能)Configure and run the iOS project (optional)

このセクションでは、iOS デバイス用の Xamarin iOS プロジェクトを実行します。This section is for running the Xamarin iOS project for iOS devices. iOS デバイスを使用していない場合は、このセクションを省略できます。You can skip this section if you are not working with iOS devices.

証明書の署名要求ファイルを生成するGenerate the certificate signing request file

Apple Push Notification Service (APNS) では、証明書を使用してプッシュ通知を認証します。The Apple Push Notification Service (APNS) uses certificates to authenticate your push notifications. 次の手順に従って、通知を送受信するために必要なプッシュ証明書を作成します。Follow these instructions to create the necessary push certificate to send and receive notifications. これらの概念の詳細については、Apple Push Notification Service の公式ドキュメントを参照してください。For more information on these concepts, see the official Apple Push Notification Service documentation.

Apple が署名済みのプッシュ証明書を生成するために使用する、証明書署名要求 (CSR: Certificate Signing Request) ファイルを生成します。Generate the Certificate Signing Request (CSR) file, which is used by Apple to generate a signed push certificate.

  1. Mac で、キーチェーン アクセス ツールを実行します。On your Mac, run the Keychain Access tool. これは、Launchpad の [Utilities] フォルダーまたは [Other] フォルダーから開くことができます。It can be opened from the Utilities folder or the Other folder on the launch pad.
  2. [Keychain Access] をクリックし、[Certificate Assistant] を展開して、[Request a Certificate from a Certificate Authority] をクリックします。Click Keychain Access, expand Certificate Assistant, then click Request a Certificate from a Certificate Authority....

  3. [User Email Address][Common Name] を選択し、[Saved to disk] が選択されていることを確認して、[Continue] をクリックします。Select your User Email Address and Common Name, make sure that Saved to disk is selected, and then click Continue. 必要ではないため、" CA 電子メール アドレス " フィールドを空白のままにします。Leave the CA Email Address field blank as it is not required.

  4. [Save As] に証明書署名要求 (CSR) ファイルの名前を入力し、[Where] で保存場所を選択して [Save] をクリックします。Type a name for the Certificate Signing Request (CSR) file in Save As, select the location in Where, then click Save.

    このアクションで、指定選択した場所に CSR ファイルが保存されます。既定の場所は [Desktop] です。This action saves the CSR file in the selected location; the default location is in the Desktop. ファイル用に選択した場所を忘れないでください。Remember the location chosen for the file.

次に、アプリケーションを Apple に登録し、プッシュ通知を有効にし、エクスポートした CSR をアップロードしてプッシュ通知を作成します。Next, you register your app with Apple, enable push notifications, and upload the exported CSR to create a push certificate.

アプリケーションをプッシュ通知に登録するRegister your app for push notifications

iOS アプリケーションにプッシュ通知を送信できるようにするには、アプリケーションを Apple に登録し、プッシュ通知にも登録する必要があります。To be able to send push notifications to an iOS app, you must register your application with Apple and also register for push notifications.

  1. アプリをまだ登録していない場合は、Apple Developer センターで iOS Provisioning Portal に移動し、Apple ID でサインインして、[Identifiers] をクリックし、[App IDs] をクリックします。最後に、+ 記号をクリックして新しいアプリを登録します。If you have not already registered your app, navigate to the iOS Provisioning Portal at the Apple Developer Center, sign in with your Apple ID, click Identifiers, then click App IDs, and finally click on the + sign to register a new app.

  2. 新しいアプリの次の 3 つのフィールドを更新し、 [Continue] をクリックします。Update the following three fields for your new app and then click Continue:

    • Name: [App ID Description] セクションの [Name] フィールドに、アプリのわかりやすい名前を入力します。Name: Type a descriptive name for your app in the Name field in the App ID Description section.
    • Bundle Identifier: [Explicit App ID] セクションに、アプリ ディストリビューション ガイドで説明したように <Organization Identifier>.<Product Name> の形式でバンドル ID を入力します。Bundle Identifier: Under the Explicit App ID section, enter a Bundle Identifier in the form <Organization Identifier>.<Product Name> as mentioned in the App Distribution Guide. 使用する "組織 ID" と "製品名" は XCode プロジェクトを作成する際に使用する組織 ID と製品名に一致させる必要があります。The Organization Identifier and Product Name you use must match the organization identifier and product name you use when you create your XCode project. 以下のスクリーンショットでは、組織 ID として NotificationHubs、製品名として GetStarted を使用しています。In the following screenshot NotificationHubs is used as an organization identifier and GetStarted is used as the product name. この値と、XCode プロジェクトで使用する値が一致していることを確認することで、XCode で正しい発行プロファイルが使用できるようになります。Making sure this value matches the value you use in your XCode project allows you to use the correct publishing profile with XCode.
    • [Push Notifications (プッシュ通知)]: [App Services (アプリ サービス)] セクションの [Push Notifications (プッシュ通知)] オプションを選択します。Push Notifications: Check the Push Notifications option in the App Services section.

      このアクションで、アプリケーションID が生成され、情報の確認が求められます。This action generates your App ID and requests you to confirm the information. [Register (登録)] をクリックして新しいアプリケーション ID を確定します。Click Register to confirm the new App ID.

      [Register] をクリックすると、以下の図にあるような [Registration complete] 画面が表示されます。Once you click Register, you see the Registration complete screen, as shown in the following image. [Done] をクリックします。Click Done.

  3. Developer センターで、アプリケーション ID の一覧から作成したアプリケーション ID を見つけ、その行をクリックします。In the Developer Center, under App IDs, locate the app ID that you created, and click on its row.

    アプリ ID をクリックすると、アプリの詳細が表示されます。Clicking on the app ID displays the app details. 画面の下部にある [Edit] をクリックします。Click the Edit button at the bottom.

  4. 画面の下部までスクロールし、[Development Push SSL Certificate] セクションの [Create Certificate] ボタンをクリックします。Scroll to the bottom of the screen, and click the Create Certificate... button under the section Development Push SSL Certificate.

    [Add iOS Certificate] アシスタントが表示されます。You see the "Add iOS Certificate" assistant.

    注意

    このチュートリアルでは開発証明書を使用します。This tutorial uses a development certificate. 運用証明書の場合も同じ処理を行います。The same process is used when registering a production certificate. 通知の送信と同じ証明書の種類を使用するようにします。Just make sure that you use the same certificate type when sending notifications.

  5. [Choose File] をクリックして、最初の作業で CSR ファイルを保存した場所に移動し、[Generate] をクリックします。Click Choose File, browse to the location where you saved the CSR file that you created in the first task, then click Generate.

  6. ポータルで証明書が作成されたら [Download] ボタンをクリックし、[Done] をクリックします。After the certificate is created by the portal, click the Download button, and click Done.

    証明書がダウンロードされ、コンピューターの Downloads フォルダーに保存されます。It downloads the certificate and saves it to your computer in your Downloads folder.

    注意

    既定では、ダウンロードした開発証明書ファイルの名前は aps_development.cer になっています。By default, the downloaded file a development certificate is named aps_development.cer.

  7. ダウンロードしたプッシュ証明書 aps_development.cer をダブルクリックします。Double-click the downloaded push certificate aps_development.cer.

    このアクションで、以下の図のように、新しい証明書がキーチェーンにインストールされます:This action installs the new certificate in the Keychain, as shown in the following image:

    注意

    証明書の名前は異なることがありますが、名前の前に Apple Development iOS Push Servicesが付けられます。The name in your certificate might be different, but it will be prefixed with Apple Development iOS Push Services.

  8. Keychain Access の [Certificates] カテゴリで、作成した新しいプッシュ証明書を右クリックします。In Keychain Access, right-click the new push certificate that you created in the Certificates category. [Export] をクリックし、ファイルに名前を付けて、.p12 形式を選択します。次に、[Save] をクリックします。Click Export, name the file, select the .p12 format, and then click Save.

    エクスポートした .p12 証明書のファイル名と場所を書き留めます。Make a note of the file name and location of the exported .p12 certificate. APNS での認証には、これが使用されます。It is used to enable authentication with APNS.

    注意

    このチュートリアルでは QuickStart.p12 ファイルを作成します。This tutorial creates a QuickStart.p12 file. ファイル名と場所は同じである必要はありません。Your file name and location might be different.

アプリケーションのプロビジョニング プロファイルを作成するCreate a provisioning profile for the app

  1. iOS Provisioning Portal に戻って [Provisioning Profiles] を選択し、[All] を選択してから + ボタンをクリックして、新しいプロファイルを作成します。Back in the iOS Provisioning Portal, select Provisioning Profiles, select All, and then click the + button to create a new profile. これにより、Add iOS Provisiong Profile ウィザードが表示されますYou see the Add iOS Provisioning Profile Wizard

  2. [Development (開発)] でプロビジョニング プロファイルの種類として [iOS App Development (iOS アプリ開発)] を選択し、[Continue (続行)] をクリックします。Select iOS App Development under Development as the provisioning profile type, and click Continue.
  3. 次に、[App ID (アプリ ID)] ドロップダウン リストから作成したアプリ ID を選択し、[Continue (続行)] をクリックしますNext, select the app ID you created from the App ID drop-down list, and click Continue

  4. [Select certificates] 画面で、コードの署名に使用される通常の開発証明書を選択して、[Continue] をクリックします。In the Select certificates screen, select your usual development certificate used for code signing, and click Continue. これは証明書であり、作成したプッシュ証明書ではありません。This certificate is not the push certificate you created.

  5. 次に、テストに使用するデバイスを選択し、[Continue] をクリックしますNext, select the Devices to use for testing, and click Continue

  6. 最後に、[Profile Name] でプロファイルの名前を選択し、[Generate] をクリックします。Finally, pick a name for the profile in Profile Name, click Generate.

  7. 新しいプロビジョニング プロファイルが作成されたら、それをクリックしてダウンロードし、Xcode の開発用コンピューターにインストールします。When the new provisioning profile is created click to download it and install it on your Xcode development machine. 次に、 [Done] をクリックします。Then click Done.

APNS 用に通知ハブを構成するConfigure the notification hub for APNS

  1. お使いの Mac で、 Keychain Accessを起動します。On your Mac, launch Keychain Access. 左側のナビゲーション バーで、[分類][自分の証明書] を開きます。On the left navigation bar, under Category, open My Certificates. 前のセクションでダウンロードした SSL 証明書を見つけ、その内容を開示します。Find the SSL certificate that you downloaded in the previous section, and then disclose its contents. (秘密キーを選択せずに) 証明書のみを選択します。Select only the certificate (do not select the private key). 次に、それをエクスポートします。Then export it.
  2. Azure Portal[すべて参照] > [App Services] の順に選択します。In the Azure portal, select Browse All > App Services. 次に、Mobile Apps バックエンドを選択します。Then select your Mobile Apps back end.
  3. [設定][App Service Push](App Service プッシュ) を選択します。Under Settings, select App Service Push. 次に、通知ハブの名前を選択します。Then select your notification hub name.
  4. [Apple Push Notification Service] > [証明書のアップロード] の順に選択します。Go to Apple Push Notification Services > Upload Certificate. (前の手順のクライアント SSL 証明書が実稼働環境用かサンドボックス用かに応じて) 適切なモードを選択して、.p12 ファイルをアップロードします。Upload the .p12 file, selecting the correct Mode (depending on whether your client SSL certificate from earlier is production or sandbox). すべての変更を保存します。Save any changes.

これで、iOS のプッシュ通知と連携するようにサービスが構成されました。Your service is now configured to work with push notifications on iOS.

次に、Xamarin Studio または Visual Studio で iOS のプロジェクト設定を構成します。Next, you will configure the iOS project setting in Xamarin Studio or Visual Studio.

Xamarin Studio での iOS プロジェクトの構成Configure the iOS project in Xamarin Studio

  1. Xamarin.Studio で Info.plist を開き、新しい App ID で前に作成した Bundle ID で [Bundle Identifier (バンドル識別子)] を更新します。In Xamarin.Studio, open Info.plist, and update the Bundle Identifier with the bundle ID that you created earlier with your new app ID.

  2. 下にスクロールして [Background Modes (バックグラウンド モード)] に移動します。Scroll down to Background Modes. [Enable Background Modes (バックグラウンド モードを有効にする)][Remote notifications (リモート通知)] の各チェック ボックスをオンにします。Select the Enable Background Modes box and the Remote notifications box.

  3. ソリューション パネルでプロジェクトをダブルクリックし、[Project Options (プロジェクト オプション)] を開きます。Double-click your project in the Solution Panel to open Project Options.
  4. [Build (ビルド)][iOS Bundle Signing (iOS バンドル署名)] を選択し、対応する ID とこのプロジェクトに対して設定したプロビジョニング プロファイルを選択します。Under Build, choose iOS Bundle Signing, and select the corresponding identity and provisioning profile you just set up for this project.

    これで、プロジェクトではコード署名のために新しいプロファイルを使用するようになります。This ensures that the project uses the new profile for code signing. 公式の Xamarin デバイス プロビジョニングのドキュメントについては、 Xamarin デバイス プロビジョニングに関するページを参照してください。For the official Xamarin device provisioning documentation, see Xamarin Device Provisioning.

Visual Studio での iOS プロジェクトの構成Configure the iOS project in Visual Studio

  1. Visual Studio で、プロジェクトを右クリックし、 [プロパティ] をクリックします。In Visual Studio, right-click the project, and then click Properties.
  2. [プロパティ] ページで、[iOS アプリケーション] タブをクリックし、前に作成した ID で [識別子] を更新します。In the properties pages, click the iOS Application tab, and update the Identifier with the ID that you created earlier.

  3. [iOS Bundle Signing (iOS バンドル署名)] タブで、対応する ID とこのプロジェクトに対して設定したプロビジョニング プロファイルを選択します。In the iOS Bundle Signing tab, select the corresponding identity and provisioning profile you just set up for this project.

    これで、プロジェクトではコード署名のために新しいプロファイルを使用するようになります。This ensures that the project uses the new profile for code signing. 公式の Xamarin デバイス プロビジョニングのドキュメントについては、 Xamarin デバイス プロビジョニングに関するページを参照してください。For the official Xamarin device provisioning documentation, see Xamarin Device Provisioning.

  4. Info.plist をダブルクリックして開き、[Background Modes (バックグラウンド モード)]RemoteNotifications を有効にします。Double-click Info.plist to open it, and then enable RemoteNotifications under Background Modes.

iOS アプリへのプッシュ通知の追加Add push notifications to your iOS app

  1. iOS プロジェクトで AppDelegate.cs を開き、次のステートメントをコード ファイルの先頭に追加します。In the iOS project, open AppDelegate.cs and add the following statement to the top of the code file.

     using Newtonsoft.Json.Linq;
    
  2. AppDelegate クラスで、通知に登録するために RegisteredForRemoteNotifications イベントのオーバーライドを追加します。In the AppDelegate class, add an override for the RegisteredForRemoteNotifications event to register for notifications:

     public override void RegisteredForRemoteNotifications(UIApplication application,
         NSData deviceToken)
     {
         const string templateBodyAPNS = "{\"aps\":{\"alert\":\"$(messageParam)\"}}";
    
         JObject templates = new JObject();
         templates["genericMessage"] = new JObject
             {
               {"body", templateBodyAPNS}
             };
    
         // Register for push with your mobile app
         Push push = TodoItemManager.DefaultManager.CurrentClient.GetPush();
         push.RegisterAsync(deviceToken, templates);
     }
    
  3. AppDelegate に次の DidReceiveRemoteNotification イベント ハンドラーのオーバーライドも追加します。In AppDelegate, also add the following override for the DidReceiveRemoteNotification event handler:

     public override void DidReceiveRemoteNotification(UIApplication application,
         NSDictionary userInfo, Action<UIBackgroundFetchResult> completionHandler)
     {
         NSDictionary aps = userInfo.ObjectForKey(new NSString("aps")) as NSDictionary;
    
         string alert = string.Empty;
         if (aps.ContainsKey(new NSString("alert")))
             alert = (aps[new NSString("alert")] as NSString).ToString();
    
         //show alert
         if (!string.IsNullOrEmpty(alert))
         {
             UIAlertView avAlert = new UIAlertView("Notification", alert, null, "OK", null);
             avAlert.Show();
         }
     }
    

    このメソッドは、アプリの実行中に受信した通知を処理します。This method handles incoming notifications while the app is running.

  4. AppDelegate クラスの FinishedLaunching メソッドに次のコードを追加します。In the AppDelegate class, add the following code to the FinishedLaunching method:

     // Register for push notifications.
     var settings = UIUserNotificationSettings.GetSettingsForTypes(
         UIUserNotificationType.Alert
         | UIUserNotificationType.Badge
         | UIUserNotificationType.Sound,
         new NSSet());
    
     UIApplication.SharedApplication.RegisterUserNotificationSettings(settings);
     UIApplication.SharedApplication.RegisterForRemoteNotifications();
    

    これによってリモート通知のサポートが有効になり、プッシュ登録の要求が行われます。This enables support for remote notifications and requests push registration.

これで、アプリケーションがプッシュ通知をサポートするように更新されました。Your app is now updated to support push notifications.

iOS アプリでプッシュ通知をテストするTest push notifications in your iOS app

  1. iOS プロジェクトを右クリックし、[スタートアップ プロジェクトに設定] をクリックします。Right-click the iOS project, and click Set as StartUp Project.
  2. Visual Studio で [実行] または F5 キーを押してプロジェクトをビルドし、iOS デバイスでアプリを起動します。Press the Run button or F5 in Visual Studio to build the project and start the app in an iOS device. [OK] をクリックして、プッシュ通知を受け入れます。Then click OK to accept push notifications.

    注意

    アプリケーションからのプッシュ通知を明示的に受け入れる必要があります。You must explicitly accept push notifications from your app. これが必要であるのは、初めてアプリケーションを実行するときだけです。This request only occurs the first time that the app runs.

  3. アプリケーションで、タスクを入力し、プラス (+) アイコンをクリックします。In the app, type a task, and then click the plus (+) icon.
  4. 通知が受信されたことを確認し、[OK] をクリックして通知を破棄します。Verify that a notification is received, and then click OK to dismiss the notification.

Windows プロジェクトを構成して実行する (省略可能)Configure and run Windows projects (optional)

このセクションでは、Windows デバイス用の Xamarin.Forms WinApp プロジェクトと Xamarin.Forms WinPhone81 プロジェクトを実行します。This section is for running the Xamarin.Forms WinApp and WinPhone81 projects for Windows devices. 次の手順では、ユニバーサル Windows プラットフォーム (UWP) プロジェクトもサポートされています。These steps also support Universal Windows Platform (UWP) projects. Windows デバイスを使用していない場合は、このセクションを省略できます。You can skip this section if you are not working with Windows devices.

Windows Notification Service (WNS) によるプッシュ通知に Windows アプリを登録するRegister your Windows app for push notifications with Windows Notification Service (WNS)

  1. Visual Studio ソリューション エクスプローラーで、Windows Store アプリ プロジェクトを右クリックします。In Visual Studio Solution Explorer, right-click the Windows Store app project. [ストア] > [アプリケーションをストアと関連付ける] の順にクリックします。Then select Store > Associate App with the Store.

    アプリを Windows ストアと関連付ける

  2. ウィザードで [次へ] を選択します。In the wizard, select Next. 次に、Microsoft アカウントを使ってサインインします。Then sign in with your Microsoft account. [新しいアプリケーション名の予約] で、アプリの名前を入力し、[予約] を選択します。In Reserve a new app name, type a name for your app, and then select Reserve.
  3. アプリの登録が正常に作成されたら、新しいアプリ名を選択します。After the app registration is successfully created, select the new app name. [次へ][関連付け] の順に選択します。Select Next, and then select Associate. このプロセスにより、必要な Windows ストア登録情報がアプリケーション マニフェストに追加されます。This process adds the required Windows Store registration information to the application manifest.
  4. Windows ストア アプリ用に以前に作成したものと同じ登録を使用して、Windows Phone ストア アプリ プロジェクトに対して手順 1. と 3. を繰り返します。Repeat steps 1 and 3 for the Windows Phone Store app project by using the same registration you previously created for the Windows Store app.
  5. Windows デベロッパー センターに移動し、Microsoft アカウントでサインインします。Go to the Windows Dev Center, and then sign in with your Microsoft account. [マイ アプリ] で、新しいアプリの登録を選択します。In My apps, select the new app registration. 次に、[サービス] > [プッシュ通知] の順に展開します。Then expand Services > Push notifications.
  6. [プッシュ通知] ページで、[Windows Push Notification Services (WNS) and Microsoft Azure Mobile Apps](Windows プッシュ通知サービス (WNS) と Microsoft Azure Mobile Apps)[Live Services site](Live サービス サイト) を選択します。On the Push notifications page, under Windows Push Notification Services (WNS) and Microsoft Azure Mobile Apps, select Live Services site. [パッケージ SID] の値と [アプリケーション シークレット] の "現在" の値を書き留めておきます。Make a note of the values of the Package SID and the current value in Application Secret.

    デベロッパー センターでのアプリの設定

    重要

    アプリケーション シークレットおよびパッケージ SID は、重要なセキュリティ資格情報です。The application secret and package SID are important security credentials. こうした値は、他のユーザーと共有したり、アプリケーションで配布したりしないでください。Don't share these values with anyone or distribute them with your app.

WNS 用に通知ハブを構成するConfigure the notification hub for WNS

  1. Azure Portal[すべて参照] > [App Services] の順に選択します。In the Azure portal, select Browse All > App Services. 次に、Mobile Apps バックエンドを選択します。Then select your Mobile Apps back end. [設定][App Service Push](App Service プッシュ) を選択します。Under Settings, select App Service Push. 次に、通知ハブの名前を選択します。Then select your notification hub name.
  2. [Windows (WNS)] に移動します。Go to Windows (WNS). 次に、Live サービス サイトから取得したセキュリティ キー (クライアント シークレット) とパッケージ SID を入力します。Then enter the Security key (client secret) and Package SID that you obtained from the Live Services site. 次に、[保存] を選択します。Next, select Save.

    ポータルで WNS キーを設定する

バックエンドは WNS を使用してプッシュ通知を送信するよう構成されました。Your back end is now configured to use WNS to send push notifications.

Windows アプリにプッシュ通知を追加するAdd push notifications to your Windows app

  1. Visual Studio で、Windows プロジェクトの App.xaml.cs を開き、次のステートメントを追加します。In Visual Studio, open App.xaml.cs in a Windows project, and add the following statements.

     using Newtonsoft.Json.Linq;
     using Microsoft.WindowsAzure.MobileServices;
     using System.Threading.Tasks;
     using Windows.Networking.PushNotifications;
     using <your_TodoItemManager_portable_class_namespace>;
    

    <your_TodoItemManager_portable_class_namespace> を、TodoItemManager クラスが含まれているポータブル プロジェクトの名前空間に置き換えます。Replace <your_TodoItemManager_portable_class_namespace> with the namespace of your portable project that contains the TodoItemManager class.

  2. App.xaml.cs で、次の InitNotificationsAsync メソッドを追加します。In App.xaml.cs, add the following InitNotificationsAsync method:

     private async Task InitNotificationsAsync()
     {
         var channel = await PushNotificationChannelManager
             .CreatePushNotificationChannelForApplicationAsync();
    
         const string templateBodyWNS =
             "<toast><visual><binding template=\"ToastText01\"><text id=\"1\">$(messageParam)</text></binding></visual></toast>";
    
         JObject headers = new JObject();
         headers["X-WNS-Type"] = "wns/toast";
    
         JObject templates = new JObject();
         templates["genericMessage"] = new JObject
         {
             {"body", templateBodyWNS},
             {"headers", headers} // Needed for WNS.
         };
    
         await TodoItemManager.DefaultManager.CurrentClient.GetPush()
             .RegisterAsync(channel.Uri, templates);
     }
    

    このメソッドによって、プッシュ通知チャネルが取得され、対象の通知ハブからテンプレート通知を受け取るためのテンプレートが登録されます。This method gets the push notification channel, and registers a template to receive template notifications from your notification hub. messageParam をサポートするテンプレート通知がこのクライアントに配信されるようになります。A template notification that supports messageParam will be delivered to this client.

  3. App.xaml.cs で、async 修飾子を追加して、OnLaunched イベント ハンドラー メソッドの定義を更新します。In App.xaml.cs, update the OnLaunched event handler method definition by adding the async modifier. 次に、メソッドの末尾に次のコード行を追加します。Then add the following line of code at the end of the method:

     await InitNotificationsAsync();
    

    これにより、アプリの起動時に毎回プッシュ通知登録が作成または更新されるようになります。This ensures that the push notification registration is created or refreshed every time the app is launched. これを行うことは、WNS プッシュ チャネルが常にアクティブであることを保証するために重要です。It's important to do this to guarantee that the WNS push channel is always active.

  4. Visual Studio のソリューション エクスプローラーで、Package.appxmanifest ファイルを開き、[通知][トースト対応][はい] に設定します。In Solution Explorer for Visual Studio, open the Package.appxmanifest file, and set Toast Capable to Yes under Notifications.
  5. アプリをビルドし、エラーがないことを確認します。Build the app and verify you have no errors. これで、クライアント アプリが、Mobile Apps バックエンドから送信されるテンプレート通知に登録されました。Your client app should now register for the template notifications from the Mobile Apps back end. ソリューションのすべての Windows プロジェクトについて、このセクションを繰り返します。Repeat this section for every Windows project in your solution.

Windows アプリでプッシュ通知をテストするTest push notifications in your Windows app

  1. Visual Studio で、Windows プロジェクトを右クリックし、[スタートアップ プロジェクトに設定] をクリックします。In Visual Studio, right-click a Windows project, and click Set as startup project.
  2. [実行] ボタンを押してプロジェクトをビルドし、アプリケーションを開始します。Press the Run button to build the project and start the app.
  3. アプリで新しい todoitem の名前を入力し、プラス (+) アイコンをクリックして追加します。In the app, type a name for a new todoitem, and then click the plus (+) icon to add it.
  4. 項目が追加されたときに、通知が受信されていることを確認します。Verify that a notification is received when the item is added.

次の手順Next steps

プッシュ通知についてさらに学ぶことができます。You can learn more about push notifications:

次のチュートリアルのいずれかに進むこともできます。You can also continue on to one of the following tutorials:

  • アプリへの認証の追加 Add authentication to your app
    ID プロバイダーを使用してアプリのユーザーを認証する方法について説明します。Learn how to authenticate users of your app with an identity provider.
  • アプリのオフライン同期の有効化Enable offline sync for your app
    Mobile Apps バックエンドを使用してオフライン サポートをアプリに追加する方法について説明します。Learn how to add offline support for your app by using a Mobile Apps back end. オフライン同期を使用すると、ユーザーはネットワークにアクセスできなくても、データの表示、追加、変更など、モバイル アプリケーションとやり取りできます。With offline sync, users can interact with a mobile app—viewing, adding, or modifying data—even when there is no network connection.