Xamarin.iOS アプリ用 Azure Mobile Engagement の使用Get Started with Azure Mobile Engagement for Xamarin.iOS Apps

このトピックでは、Azure Mobile Engagement を使用してアプリの使用状況を把握し、Xamarin.iOS アプリケーションのセグメント化されたユーザーにプッシュ通知を送信する方法について説明します。This topic shows you how to use Azure Mobile Engagement to understand your app usage and send push notifications to segmented users in a Xamarin.iOS application. このチュートリアルでは、基本的なデータを収集し、Apple Push Notification System (APNS) を使ってプッシュ通知を受信する空の Xamarin.iOS アプリケーションを作成します。In this tutorial, you create a blank Xamarin.iOS app that collects basic data and receives push notifications using Apple Push Notification System (APNS).

注意

Azure Mobile Engagement サービスは 2018 年 3 月に停止予定であり、現在は既存のお客様のみご利用いただけます。The Azure Mobile Engagement service will be retired March 2018 and is currently only available to existing customers. 詳細については、「Mobile Engagement」を参照してください。For more information, see Mobile Engagement.

このチュートリアルには、次のものが必要です。This tutorial requires the following:

注意

このチュートリアルを完了するには、アクティブな Azure アカウントが必要です。To complete this tutorial, you must have an active Azure account. アカウントがない場合は、無料試用版のアカウントを数分で作成することができます。If you don't have an account, you can create a free trial account in just a couple of minutes. 詳細については、「Azure の無料試用版サイト」をご覧ください。For details, see Azure Free Trial.

iOS アプリ用に Mobile Engagement を設定するSetup Mobile Engagement for your iOS app

  1. Azure Portal にログオンします。Log on to the Azure Portal.
  2. [新規][Web + モバイル][Mobile Engagement] の順にクリックします。Click on New, then Web + Mobile, and then Mobile Engagement.

  3. 表示される [New Mobile Engagement App Collection (新しい Mobile Engagement アプリ コレクション)] ブレードで、Azure クラシック ポータルで作成するように、アプリではなくアプリ コレクションを作成します。In the New Mobile Engagement App Collection blade that appears, you will be creating an App Collection instead of an App like in the Azure classic portal. 次の情報を入力します。Enter the following information:

    • 名前: 名前 of your アプリケーション コレクションName: Name of your application collection
    • プラットフォーム: クリックすると開く [プラットフォーム] ブレードでアプリのターゲット プラットフォームを選択します。Platforms: Select target platforms for your app on the Platforms blade which will open up. 例:E.g. アプリを iOS と Android の両方に対応させる場合は、両方のプラットフォームを選択すると、このアプリ コレクションの下に 2 つのアプリが作成されます。if you want an app for both iOS & Android then select both platforms and you will get two apps created under this app collection.

    • サブスクリプション: Azure サブスクリプションを選択します。Subscription: Select the Azure subscription.
    • リソース グループ: この Azure リソース (Mobile Engagement アプリ コレクション) を追加する Azure リソース グループを選択します。Resource group: Select the Azure Resource group in which you want this Azure resource (Mobile Engagement App Collection). 新しいリソース グループを作成することもできます。You can choose to create a new one.
    • 場所: このアプリ コレクションとアプリについてのデータが格納されるリージョン。Location: Region where the data about this app collection & app will be stored.
  4. [参照] をクリックし、"Mobile Engagement" を検索して Mobile Engagement アプリ コレクションを参照します。Browse through the Mobile Engagement app collections by clicking Browse and search for Mobile Engagement

  5. Mobile Engagement アプリ コレクションの一覧が表示されるので、アプリ コレクションを作成した同じ Azure サブスクリプションがあることを確認します。You will be shown a list of Mobile Engagement App Collections - make sure you have the same Azure subscription where you created your App Collection.

  6. 前の手順で作成したアプリ コレクションをクリックして、アプリ コレクション リソースのブレードを開きます。ブレードには、このアプリ コレクション内に存在するさまざまなアプリが表示されます。Click on the App Collection that you created in the prior step to open up the App Collection resource blade which will show the different apps present inside this app collection.

  7. 開発対象とするプラットフォーム向けに作成したアプリをクリックします。Click on the App created for the platform you are developing for.

  8. 上部の [接続情報] コマンド ボタンをクリックして [接続情報] ブレードを開き、そこに表示される接続文字列をコピーします。Click on Connection Info command button at the top to open up the Connection Info blade and copy the connection string from there.

アプリを Mobile Engagement のバックエンドに接続しますConnect your app to the Mobile Engagement backend

このチュートリアルでは、データを収集してプッシュ通知を送信するために必要な最小限のセットである「基本的な統合」について説明します。This tutorial presents a "basic integration" which is the minimal set required to collect data and send a push notification.

統合のデモンストレーションを行うために、Xamarin で基本的なアプリを作成します。We will create a basic app with Xamarin to demonstrate the integration:

新しい Xamarin.iOS プロジェクトを作成するCreate a new Xamarin.iOS project

  1. Xamarin Studio を起動します。Launch Xamarin Studio. [File (ファイル)] -> [New (新規)] -> [Solution (ソリューション)] の順に移動します。Go to File -> New -> Solution

  2. [Single View App (単一ビュー アプリ)] を選択し、選択されている言語が [C#] であることを確認してから、[Next (次へ)] をクリックします。Select Single View App, make sure the selected language is C# and then click Next.

  3. [App Name (アプリ名)][Organization Identifier (組織 ID)] を入力し、[Next (次へ)] をクリックします。Fill in the App Name and the Organization Identifier and then click Next.

    重要

    iOS アプリのデプロイに最終的に使用する発行プロファイルでは、ここに表示されたバンドル識別子と完全に一致するアプリ ID を必ず使用してください。Make sure that the publishing profile you eventually use to deploy your iOS app is using an App ID which matches exactly with the Bundle Identifier you have here.

  4. 必要に応じて [Project Name (プロジェクト名)][Solution Name (ソリューション名)][Location (位置)] を変更し、[Create (作成)] をクリックします。Update the Project Name, Solution Name and Location if required and click Create.

Xamarin Studio で、Mobile Engagement の統合先のデモ アプリが作成されます。Xamarin Studio will create the demo app in which we will integrate Mobile Engagement.

アプリを Mobile Engagement のバックエンドに接続するConnect your app to Mobile Engagement backend

  1. [Solution (ソリューション)] ウィンドウの Packages フォルダーを右クリックし、[Add Packages (パッケージの追加)] を選択します。Right click the Packages folder in the Solution windows and select Add Packages...

  2. Microsoft Azure Mobile Engagement Xamarin SDK を探してソリューションに追加します。Search for the Microsoft Azure Mobile Engagement Xamarin SDK and add it to your solution.

  3. AppDelegate.cs を開き、次の using ステートメントを追加します。Open AppDelegate.cs and add the following using statement:

     using Microsoft.Azure.Engagement.Xamarin;
    
  4. FinishedLaunching メソッドに、Mobile Engagement バックエンドとの接続を初期化する次のコードを追加します。In the FinishedLaunching method, add the following to initialize the connection with Mobile Engagement backend. ConnectionStringを必ず追加してください。Make sure to add your ConnectionString. また、次のコードでは、Mobile Engagement SDK によって追加されるダミーの NotificationIcon も使用されています。これは、置き換えることができます。This code also uses a dummy NotificationIcon which is added by the Mobile Engagement SDK which you may want to replace.

     EngagementConfiguration config = new EngagementConfiguration {
                     ConnectionString = "YourConnectionStringFromAzurePortal",
                     NotificationIcon = UIImage.FromBundle("close")
                 };
     EngagementAgent.Init (config);
    

リアルタイム監視の有効化Enabling real-time monitoring

データを送信してユーザーがアクティブであることを確認するには、少なくとも 1 つの画面を Mobile Engagement のバックエンドに送信する必要があります。In order to start sending data and ensuring the users are active, you must send at least one screen to the Mobile Engagement backend.

  1. ViewController.cs を開き、次の using ステートメントを追加します。Open ViewController.cs and add the following using statement:

     using Microsoft.Azure.Engagement.Xamarin;
    
  2. ViewController の継承元となるクラスを UIViewController から EngagementViewController に置き換えます。Replace the class from which ViewController inherits from UIViewController to EngagementViewController.

リアルタイム監視を使用してアプリを接続するConnect app with real-time monitoring

このセクションでは、Mobile Engagement のリアルタイム監視機能を使用して、アプリを Mobile Engagement バックエンドに接続する方法について説明します。This section shows you how to connect your app to the Mobile Engagement backend by using the Mobile Engagement's real-time monitoring feature.

  1. Azure Mobile Engagement アカウントで、Mobile Engagement ポータルで監視および管理するアプリを選択していることを確認します。In your Azure Mobile Engagement account, make sure you select the app you wish to monitor and manage in the Mobile Engagement portal. 下部にある [エンゲージ] ボタンをクリックして、Mobile Engagement ポータルに移動します。Navigate to your Mobile Engagement portal by clicking the Engage button at the bottom.

  2. Mobile Engagement ポータルに移動します。You will land in the Mobile Engagement portal. [監視] タブが選択されていない場合は、 [監視]をクリックします。If the Monitor tab is not selected, click on the Monitor.
  3. モニターがアプリを起動するデバイスをリアルタイムで表示する準備が整いました。The monitor is ready to show you any device in real time, which will start your app.
  4. アプリを起動します。Start your app now. 統合が適切に行われていれば、モニターには 1 つのセッションが表示されます。これは、アプリが Mobile Engagement バックエンドに接続され、バックエンドにデータを送信していることを意味します。You should see one session in the monitor if your integration is correct which means that your app is now connected to the Mobile Engagement backend and is sending data to it.

プッシュ通知とアプリ内メッセージングを有効にするEnable push notifications and in-app messaging

Mobile Engagement により、ユーザーと通信を行い、キャンペーンに関するプッシュ通知とアプリ内メッセージングを届けることができます。Mobile Engagement allows you to interact with your users and REACH with push notifications and in-app messaging in the context of campaigns. このモジュールは、Mobile Engagement ポータルで REACH として呼び出されます。This module is called REACH in the Mobile Engagement portal. 次のセクションでは、それらを受信するようにアプリをセットアップします。The following sections set up your app to receive them.

アプリケーション デリゲートを変更するModify your Application Delegate

  1. AppDelegate.cs を開き、次の using ステートメントを追加します。Open the AppDelegate.cs and add the following using statement:

     using System; 
    
  2. ここで、FinishedLaunching メソッド内の EngagementAgent.init(...) の後に、プッシュ メッセージを登録する次のコードを追加します。Now inside the FinishedLaunching method, add the following to register for push messages after EngagementAgent.init(...)

     if (UIDevice.CurrentDevice.CheckSystemVersion(8,0))
     {
         var pushSettings = UIUserNotificationSettings.GetSettingsForTypes (
             (UIUserNotificationType.Badge |
                 UIUserNotificationType.Sound |
                 UIUserNotificationType.Alert),
             null);
         UIApplication.SharedApplication.RegisterUserNotificationSettings (pushSettings);
         UIApplication.SharedApplication.RegisterForRemoteNotifications ();
     }
     else
     {
         UIApplication.SharedApplication.RegisterForRemoteNotificationTypes (
             UIRemoteNotificationType.Badge |
             UIRemoteNotificationType.Sound |
             UIRemoteNotificationType.Alert);
     }
    
  3. 最後に、次のメソッドを更新するか、追加します。Finally - update or add the following methods:

     public override void DidReceiveRemoteNotification (UIApplication application, NSDictionary userInfo, 
         Action<UIBackgroundFetchResult> completionHandler)
     {
         EngagementAgent.ApplicationDidReceiveRemoteNotification(userInfo, completionHandler);
     }
    
     public override void RegisteredForRemoteNotifications (UIApplication application, NSData deviceToken)
     {
         // Register device token on Engagement
         EngagementAgent.RegisterDeviceToken(deviceToken);
     }
    
     public override void FailedToRegisterForRemoteNotifications(UIApplication application, NSError error)
     {
         Console.WriteLine("Failed to register for remote notifications: Error '{0}'", error);
     }
    
  4. ソリューションの Info.plist ファイルで、バンドル識別子が、Apple Dev Center のプロビジョニング プロファイルにあるアプリ ID と一致していることを確認します。In your Info.plist file in the solution, confirm that the Bundle Identifier matches with the App ID you have in your provisioning profile in the Apple Dev Center.

  5. その Info.plist ファイルで、[Enable Background Modes (バックグラウンド モードを有効にする)][Remote Notifications (リモート通知)] のチェック ボックスがオンになっていることを確認します。In the same Info.plist file, make sure that you have checked the Enable Background Modes and Remote Notifications.

  6. この発行プロファイルに関連付けたデバイスでアプリを実行します。Run the app on the device you have associated with this publishing profile.

Mobile Engagement にプッシュ証明書へのアクセスを許可するGrant access to your Push Certificate to Mobile Engagement

Mobile Engagement がユーザーに代わりプッシュ通知を送信できるようにするには、Mobile Engagement に証明書へのアクセスを許可する必要があります。To allow Mobile Engagement to send Push Notifications on your behalf, you need to grant it access to your certificate. このためには、証明書を Mobile Engagement ポータルに構成および入力します。This is done by configuring and entering your certificate into the Mobile Engagement portal. Apple のドキュメントMake sure you obtain your .p12 certificate as explained in Apple's documentation

  1. Mobile Engagement ポータルに移動します。Navigate to your Mobile Engagement portal. このプロジェクト用に使用しているアプリを対象にしていることを確認し、下部にある [エンゲージ] ボタンをクリックします。Ensure you're in the correct and then click on the Engage button at the bottom:

  2. Engagement ポータルで [設定] ページをクリックします。Click on the Settings page in your Engagement Portal. このページで、p12 証明書をアップロードするために [ネイティブ プッシュ通知] セクションをクリックします。From there click on the Native Push section to upload your p12 certificate:

  3. p12 を選択してアップロードし、パスワードを入力しますSelect your p12, upload it and type your password:

アプリへ通知を送信するSend a notification to your app

プッシュ通知をアプリに送る簡単なプッシュ通知キャンペーンを作成してみましょう。We will now create a simple Push Notification campaign that will send a push to our app:

  1. Mobile Engagement ポータルで [ リーチ ] タブに移動します。Navigate to the Reach tab in your Mobile Engagement portal.
  2. [新しいお知らせ] をクリックして、プッシュ キャンペーンを作成します。Click New Announcement to create your push campaign

  3. キャンペーンの最初のフィールドを設定しますSetup the first fields of your campaign:

    • キャンペーンの 名前 を指定します。Provide a Name for your campaign
    • [配信時刻] として [アプリ外のみ] を選択します。これはテキストを扱う単純な種類の Apple プッシュ通知です。Select the Delivery time as Out of app only: this is the simple Apple push notification type that features some text.
    • 通知テキストとして、プッシュ通知の 1 行目になる [タイトル] を入力します。In the notification text, type first the Title which will be the first line in the push.
    • 次に、2 行目になる [メッセージ] を入力します。Then type your Message which will be the second line
  4. スクロール ダウンし、コンテンツ セクションで 通知のみScroll down, and in the content section select Notification only

  5. 最も基本的なキャンペーンの設定が完了しました。You're done setting the most basic campaign. 下にスクロールし、 [作成] ボタンをクリックしてプッシュ通知キャンペーンを保存します。Now scroll down and click on Create button to save your push notification campaign.
  6. 最後に、 [アクティブ化] をクリックしてプッシュ通知を送信します。Finally - click on Activate to send push notification.

  7. 次のような通知センターの iOS デバイスで通知を受信することができます。You will be able receive the notification on your iOS device in the notification center like the following:

  8. この iOS デバイスと組み合わせて使用する Apple Watch がある場合は、Apple Watch に通知が表示されます。If you have an Apple Watch paired with this iOS device then you will see the notification on your Apple Watch: