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

注意

Visual Studio App Center では、モバイル アプリ開発の中心となるエンドツーエンドの統合サービスをサポートしています。Visual Studio App Center supports end to end and integrated services central to mobile app development. 開発者は、ビルドテスト配布のサービスを使用して、継続的インテグレーションおよびデリバリー パイプラインを設定できます。Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. アプリがデプロイされたら、開発者は分析および診断のサービスを利用してアプリの状態と使用状況を監視し、プッシュ サービスを利用してユーザーと関わることができます。Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. また、開発者は Auth を利用してユーザーを認証し、データ サービスを利用してクラウド内のアプリ データを保持および同期することもできます。Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud. モバイル アプリケーションにクラウド サービスを統合することを検討している場合は、今すぐ App Center にサインアップしてください。If you are looking to integrate cloud services in your mobile application, sign up with App Center App Center today.

概要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. バックエンド プロジェクトを設定します。Set up your backend project.

  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 https://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.

    Android アプリへの Firebase の追加

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

    1. [Android package name](Android パッケージ名) については、お使いのアプリケーションの build.gradle ファイル内にある applicationId の値をコピーします。For Android package name, copy the value of your applicationId in your application's build.gradle file. この例では com.fabrikam.fcmtutorial1app です。In this example, it's com.fabrikam.fcmtutorial1app.

      パッケージ名を指定する

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

  4. [google-services.json をダウンロード] を選択し、プロジェクトの app フォルダーにファイルを保存して、 [次へ] をクリックします。Select Download google-services.json, save the file into the app folder of your project, and then select Next.

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

  5. Android Studio で、プロジェクトに次の構成変更を加えます。Make the following configuration changes to your project in Android Studio.

    1. プロジェクト レベルの build.gradle ファイル (<project>/build.gradle) で、dependencies セクションに次のステートメントを追加します。In your project-level build.gradle file (<project>/build.gradle), add the following statement to the dependencies section.

      classpath 'com.google.gms:google-services:4.0.1'
      
    2. アプリレベルの build.gradle ファイル (<project>/<app-module>/build.gradle) で、dependencies セクションに次のステートメントを追加します。In your app-level build.gradle file (<project>/<app-module>/build.gradle), add the following statements to the dependencies section.

      implementation 'com.google.firebase:firebase-core:16.0.8'
      implementation 'com.google.firebase:firebase-messaging:17.3.4'
      
    3. アプリ レベルの build.gradle ファイルの最後の dependencies セクションの末尾に次の行を追加します。Add the following line to the end of the app-level build.gradle file after the dependencies section.

      apply plugin: 'com.google.gms.google-services'
      
    4. ツールバーの [今すぐ同期] を選択します。Select Sync now on the toolbar.

      build.gradle の構成変更

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

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

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

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

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

  9. google-services.json ファイルをお使いの Android Studio プロジェクトの app フォルダーにダウンロードしていない場合は、このページでダウンロードできます。If you haven't downloaded the google-services.json file into the app folder of your Android Studio project, you can do so on this page.

  10. 上部にある [クラウド メッセージング] タブに切り替えます。Switch to the Cloud Messaging tab at the top.

  11. 後で使用するために、サーバー キーをコピーし、保存します。Copy and save the Server key for later use. この値を使用して、ハブを構成します。You use this value to configure your hub.

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

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

  1. Mac で、キーチェーン アクセス ツールを実行します。On your Mac, run the Keychain Access tool. これは、Launchpad のユーティリティ フォルダーまたはその他フォルダーから開くことができます。It can be opened from the Utilities folder or the Other folder on the Launchpad.

  2. [キーチェーン アクセス] を選択し、 [証明書アシスタント] を展開して、 [認証局に証明書を要求] を選択します。Select Keychain Access, expand Certificate Assistant, and then select Request a Certificate from a Certificate Authority.

    Keychain Access を使用して新しい証明書を要求する

  3. [ユーザーのメール アドレス] を選択し、 [通称] の値を入力します。 [ディスクに保存] を指定したことを確認してから、 [続ける] を選択します。Select your User Email Address, enter your Common Name value, make sure that you specify Saved to disk, and then select Continue. [CA のメール アドレス] は、必要がないため空白のままにします。Leave CA Email Address blank as it isn't required.

    必要な証明書情報

  4. [名前] に CSR ファイルの名前を入力し、 [場所] で保存先を選択してから、 [保存] を選択します。Enter a name for the CSR file in Save As, select the location in Where, and then select Save.

    証明書のファイル名を選択する

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

次に、アプリを Apple に登録し、プッシュ通知を有効にして、エクスポートした CSR をアップロードしてプッシュ証明書を作成します。Next, 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 push notifications to an iOS app, register your application with Apple and also register for push notifications.

  1. ご自分のアプリをまだ登録していない場合は、Apple Developer Center の iOS Provisioning Portal に移動します。If you haven't already registered your app, browse to the iOS Provisioning Portal at the Apple Developer Center. その後、Apple ID を使ってサインインし、 [Identifiers](識別子)[App IDs](アプリ ID) の順に選択します。最後に + を選択して、新しいアプリを登録します。After that, sign in with your Apple ID, select Identifiers, select App IDs, and finally select + to register a new app.

    iOS Provisioning Portal の [App IDs](アプリ ID) ページ

  2. 新しいアプリで次の 3 つの値を更新してから、 [Continue](続行) を選択します。Update the following three values for your new app, and then select Continue:

    • [名前] : [App ID Description](アプリ ID の説明) セクションの [Name](名前) ボックスに、アプリのわかりやすい名前を入力します。Name: Type a descriptive name for your app in the Name box in the App ID Description section.

    • [Bundle Identifier](バンドル識別子) : [Explicit App ID](明示的なアプリ ID) セクションで、アプリ ディストリビューション ガイドの説明のとおりに <Organization Identifier>.<Product Name> の形式でバンドル識別子を入力します。Bundle Identifier: In the Explicit App ID section, enter a Bundle Identifier of the form <Organization Identifier>.<Product Name> as mentioned in the App Distribution Guide. <組織 ID> と <製品名> の値は Xcode プロジェクトを作成する際に使用する組織 ID と製品名に一致させる必要があります。The Organization Identifier and Product Name values must match the organization identifier and product name you use when you create your Xcode project. 次のスクリーンショットでは、NotificationHubs という値が組織 ID として使用され、GetStarted という値が製品名として使用されています。In the following screenshot, the NotificationHubs value is used as an organization identifier and the GetStarted value is used as the product name. Xcode で正しい発行プロファイルが使用されるように、 [Bundle Identifier](バンドル識別子) の値はご自分の Xcode プロジェクトの値と一致させるようにしてください。Make sure the Bundle Identifier value matches the value in your Xcode project, so that Xcode will use the correct publishing profile.

    • [Push Notifications](プッシュ通知) : [App Services](アプリ サービス) セクションの [Push Notifications](プッシュ通知) オプションを選択します。Push Notifications: Check the Push Notifications option in the App Services section.

      新しいアプリ ID を登録するフォーム

      このアクションにより、アプリ ID が生成され、その情報を確認するよう求められます。This action generates your App ID and requests that you confirm the information. [Register](登録) を選択して、新しいアプリ ID を確定します。Select Register to confirm the new App ID.

      [Register](登録) を選択すると、次の図のような [Registration complete](登録完了) 画面が表示されます。After you select Register, you see the Registration complete screen as shown in the following image. [完了] を選択します。Select Done.

      エンタイトルメントが表示されるアプリ ID の登録完了

  3. Developer Center にある [App ID](アプリ ID) で、自分が作成したアプリ ID を見つけ、その行を選択します。In the Developer Center, under App IDs, locate the app ID that you created and select its row.

    アプリ ID リスト

    アプリ ID を選択してアプリの詳細を表示し、下部にある [Edit](編集) ボタンを選択します。Select the app ID to display the app details, and then select the Edit button at the bottom.

    アプリ ID の編集ページ

  4. 画面の下部までスクロールし、 [Development Push SSL Certificate](開発プッシュ SSL 証明書) セクションの [Create Certificate](証明書の作成) ボタンを選択します。Scroll to the bottom of the screen and select the Create Certificate button under the Development Push SSL Certificate section.

    アプリ ID の証明書の作成ボタン

    ここで [Add iOS Certificate](iOS 証明書の追加) アシスタントが表示されます。You now 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](生成) を選択します。Select Choose File, browse to the location where you saved the CSR file from the first task, and then select Generate.

    生成された証明書の CSR アップロード ページ

  6. ポータルで証明書が作成されたら、 [Download](ダウンロード) ボタンを選択してから [Done](完了) を選択します。After the portal creates the certificate, select the Download button and then select Done.

    生成された証明書のダウンロード ページ

    証明書がダウンロードされ、自分のコンピューターのダウンロード フォルダーに保存されます。The certificate is downloaded and saved to your computer in your Downloads folder.

    Downloads フォルダーの証明書ファイルを見つける

    注意

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

  7. ダウンロードしたプッシュ証明書 aps_development.cer を選択します。Select 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 が付けられます。Although the name in your certificate might be different, the name 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. [書き出す] を選択し、ファイルに名前を付けて、 .p12 形式を選択します。次に、 [保存] を選択します。Select Export, name the file, select the .p12 format, and then select Save.

    p12 形式として証明書をエクスポートする

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

    注意

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

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

  1. iOS Provisioning Portal で、 [Provisioning Profiles](プロビジョニング プロファイル) を選択し、 [All](すべて) を選択してから、 + を選択して新しいプロファイルを作成します。In the iOS Provisioning Portal, select Provisioning Profiles, select All, and then select + to create a new profile. [Add iOS Provisiong Profile](iOS プロビジョニング プロファイルの追加) ウィザードが表示されます。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 select Continue.

  3. 次に、 [App ID](アプリ ID) ドロップダウン リストで、自分が作成したアプリ ID を選択し、 [Continue](続行) を選択します。Next, select the app ID you created from the App ID drop-down list, and select Continue.

    アプリ ID を選択する

  4. [Select certificates](証明書の選択) ウィンドウで、コード署名に使用した通常の開発証明書を選択して、 [Continue](続行) を選択します。In the Select certificates window, select your usual development certificate that you used for code signing, and select Continue. この証明書は、作成したプッシュ証明書ではありません。This certificate isn't the push certificate you created.

    証明書を選択する

  5. 次に、テストに使用するデバイスを選択し、 [Continue](続行) を選択します。Next, select the devices to use for testing, and select Continue.

    デバイスを選択する

  6. 最後に、 [Profile Name](プロファイル名) でプロファイルの名前を選択し、 [Generate](生成) を選択します。Finally, pick a name for the profile in Profile Name, and select Generate.

    プロビジョニング プロファイル名を選択する

  7. 新しいプロビジョニング プロファイルが作成されたら、それをダウンロードして Xcode の開発用マシンにインストールすることを選択します。When the new provisioning profile is created, choose to download and install it on your Xcode development machine. [完了] を選択します。Then select Done.

    プロビジョニング プロファイルをダウンロードする

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

このセクションでは、前に作成した .p12 プッシュ証明書を使用して、通知ハブを作成し、APNs での認証を構成します。In this section, you create a notification hub and configure authentication with APNs by using the .p12 push certificate that you previously created. 既に作成した通知ハブを使用する場合は、手順 5. に進んでください。If you want to use a notification hub that you've already created, you can skip to step 5.

  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 - 通知ハブの接続文字列

APNs 情報を使用して通知ハブを構成するConfigure your notification hub with APNs information

  1. [Notification Services] で、 [Apple (APNS)] を選択します。Under Notification Services, select Apple (APNS).

  2. [Certificate] を選択します。Select Certificate.

  3. ファイル アイコンを選択します。Select the file icon.

  4. 先ほどエクスポートした .p12 ファイルを選択します。Select the .p12 file that you exported earlier.

  5. 正しいパスワードを指定します。Specify the correct password.

  6. [サンドボックス] モードを選択します。Select Sandbox mode. [Production] (運用) モードは、ストアからアプリを購入したユーザーにプッシュ通知を送信する場合にのみ使用します。Use the Production mode only if you want to send push notifications to users who purchased your app from the store.

    Azure portal で APNs 証明書を構成する

これで、APNs での通知ハブの構成が完了しました。You've now configured your notification hub with APNs. 接続文字列を使用してアプリを登録し、プッシュ通知を送信することもできます。You also have the connection strings to register your app and send push notifications.

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.