Windows Phone Silverlight アプリの Azure Mobile Engagement の概要Get started with Azure Mobile Engagement for Windows Phone Silverlight apps

重要

Azure Mobile Engagement は、2018 年 3 月 31 日に停止されます。Azure Mobile Engagement retires on 3/31/2018. このページは、その後まもなく削除されます。This page will be deleted shortly after.

このトピックでは、Azure Mobile Engagement を使用してアプリの使用状況を把握し、Windows Phone Silverlight アプリケーションのセグメント化されたユーザーにプッシュ通知を送信する方法について説明します。This topic shows you how to use Azure Mobile Engagement to understand your app usage and send push notifications to segmented users of a Windows Phone Silverlight application. このチュートリアルでは、Mobile Engagement を使用した簡単なブロードキャスト シナリオのデモンストレーションを行います。This tutorial demonstrates the simple broadcast scenario using Mobile Engagement. チュートリアル内で空白の Windows Phone Silverlight アプリを作成し、このアプリで基本的なデータを収集して、Microsoft Push Notification Service (MPNS) を使用してプッシュ通知を受信します。In it, you create a blank Windows Phone Silverlight app that collects basic data and receives push notifications using Microsoft Push Notification Service (MPNS).

注意

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.

注意

Windows Phone 8.1 以前のバージョンのプロジェクトは、Visual Studio 2017 でサポートされていません。Windows Phone 8.1 and prior version projects are not supported in Visual Studio 2017. 詳細については、「Visual Studio 2017 の対象プラットフォームと互換性」を参照してください。For more information, see Visual Studio 2017 Platform Targeting and Compatibility.

注意

Windows Phone 8.1 (Silverlight 以外) を対象としている場合は、 Windows Universal チュートリアルを参照してください。If you are targeting Windows Phone 8.1 (non-Silverlight), refer to the Windows Universal tutorial.

このチュートリアルには、次のものが必要です。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.

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

  1. Azure Portal にログオンします。Log on to the Azure Portal.
  2. [リソースの作成][Web + モバイル][Mobile Engagement] の順にクリックします。Click Create a resource, then Web + Mobile, and then Mobile Engagement.

  3. 表示される [New Mobile Engagement App Collection](新しい Mobile Engagement アプリ コレクション) ブレードで、アプリ コレクションを作成します。In the New Mobile Engagement App Collection blade that appears, you will be creating an App Collection. 次の情報を入力します。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. 完全な統合のドキュメントについては、「 Mobile Engagement Windows Phone SDK 統合The complete integration documentation can be found in the Mobile Engagement Windows Phone SDK integration

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

新しい Windows Phone Silverlight プロジェクトを作成するCreate a new Windows Phone Silverlight project

次の手順では、以前のバージョンの Visual Studio と類似した手順で、Visual Studio 2015 を使用します。The following steps assume the use of Visual Studio 2015 though the steps are similar in earlier versions of Visual Studio.

  1. Visual Studio を起動し、ホーム画面で [新しいプロジェクト] を選択します。Start Visual Studio, and in the Home screen, select New Project.
  2. ポップアップで、[Windows 8] -> [Windows Phone] -> [空のアプリ (Windows Phone Silverlight)] の順に選択します。In the pop-up, select Windows 8 -> Windows Phone -> Blank App (Windows Phone Silverlight). アプリの名前ソリューション名を入力し、[OK] をクリックします。Fill in the app Name and Solution name, and then click OK.

  3. ターゲットとして Windows Phone 8.0 または Windows Phone 8.1 を選択できます。You can choose to target either Windows Phone 8.0 or Windows Phone 8.1.

これで、Azure Mobile Engagement SDK を統合する新しい Windows Phone Silverlight アプリが作成されました。You have now created a new Windows Phone Silverlight app into which we will integrate the Azure Mobile Engagement SDK.

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

  1. MicrosoftAzure.MobileEngagement Nuget パッケージをプロジェクトにインストールします。Install the MicrosoftAzure.MobileEngagement nuget package in your project.
  2. WMAppManifest.xml ([プロパティ] フォルダーの下) を開き、<Capabilities /> タグで次が宣言されていることを確認します (宣言されていない場合は追加します)。Open WMAppManifest.xml (under the Properties folder) and make sure the following are declared (add them if they are not) in the <Capabilities /> tag:

     <Capability Name="ID_CAP_NETWORKING" />
     <Capability Name="ID_CAP_IDENTITY_DEVICE" />
    

  3. 先ほどコピーした Mobile Engagement アプリの接続文字列を Resources\EngagementConfiguration.xml ファイルの <connectionString> タグと </connectionString> タグの間に貼り付けます。Now paste the connection string that you copied earlier for your Mobile Engagement app and paste it in the Resources\EngagementConfiguration.xml file, between the <connectionString> and </connectionString> tags:

  4. App.xaml.cs ファイルで次の操作を行います。In the App.xaml.cs file:

    a.[サインオン URL] ボックスに、次のパターンを使用して、ユーザーが RightScale アプリケーションへのサインオンに使用する URL を入力します。a. using ステートメントを追加します。Add the using statement:

         using Microsoft.Azure.Engagement;
    

    b.b. Application_Launching メソッドで SDK を初期化します。Initialize the SDK in the Application_Launching method:

         private void Application_Launching(object sender, LaunchingEventArgs e)
         {
           EngagementAgent.Instance.Init();
         }
    

    c.c. Application_Activated に次を挿入します。Insert the following in the Application_Activated:

         private void Application_Activated(object sender, ActivatedEventArgs e)
         {
            EngagementAgent.Instance.OnActivated(e);
         }
    

リアルタイム監視を有効にするEnable real-time monitoring

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

  1. MainPage.xaml.cs に、using ステートメントを追加します。In the MainPage.xaml.cs, add the using statement:

     using Microsoft.Azure.Engagement;
    
  2. PhoneApplicationPage の前にある MainPage の基本クラスを EngagementPage に置き換えます。Replace the base class of MainPage, which is before PhoneApplicationPage, with EngagementPage.

     class MainPage : EngagementPage 
    
  3. MainPage.xml ファイルで、次の操作を行います。In your MainPage.xml file:

    a.[サインオン URL] ボックスに、次のパターンを使用して、ユーザーが RightScale アプリケーションへのサインオンに使用する URL を入力します。a. 次の内容を名前空間宣言に追加します。Add to your namespaces declarations:

         xmlns:engagement="clr-namespace:Microsoft.Azure.Engagement;assembly=Microsoft.Azure.Engagement.EngagementAgent.WP"
    

    b.b. XML タグ名の phone:PhoneApplicationPageengagement:EngagementPage に置き換えます。Replace phone:PhoneApplicationPage in the XML tag name with engagement:EngagementPage.

リアルタイム監視を使用してアプリを接続する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 and reach your users 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.

アプリが WNS プッシュ通知を受信できるようにするEnable your app to receive MPNS Push Notifications

WMAppManifest.xml ファイルに新しい Capabilities を追加します。Add new Capabilities to your WMAppManifest.xml file:

    ID_CAP_PUSH_NOTIFICATION
    ID_CAP_WEBBROWSERCOMPONENT

REACH SDK を初期化するInitialize the REACH SDK

  1. App.xaml.cs で、エージェントの初期化の直後に、Application_Launching 関数で EngagementReach.Instance.Init(); を呼び出します。In App.xaml.cs, call EngagementReach.Instance.Init(); in the Application_Launching function, right after the agent initialization:

     private void Application_Launching(object sender, LaunchingEventArgs e)
     {
        EngagementAgent.Instance.Init();
        EngagementReach.Instance.Init();
     }
    
  2. App.xaml.cs で、エージェントの初期化の直後に、Application_Activated 関数で EngagementReach.Instance.OnActivated(e); を呼び出します。In App.xaml.cs, call EngagementReach.Instance.OnActivated(e); in the Application_Activated function, right after the agent initialization:

     private void Application_Activated(object sender, ActivatedEventArgs e)
     {
        EngagementAgent.Instance.OnActivated(e);
        EngagementReach.Instance.OnActivated(e);
     }
    

設定が完了しました。You're all set. それでは、この基本的な統合が正しく設定されているかどうかを検証してみましょう。Now we will verify that you have correctly cried out this basic integration.

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

アプリにプッシュ通知を送信する単純なプッシュ通知キャンペーンを作成します。We will now create a simple push notification campaign that sends a push notification to our app.

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

  3. 次の手順に従って、キャンペーンの最初のフィールドを設定します。Set up the first field of your campaign through the following steps:

    a.この問題では、ターゲット (またはクラス) ラベルは "tip_amount" です。a. キャンペーンの 名前 を指定します。Provide a Name for your campaign.

    b.b. [配信時刻] として [任意の時刻] を選択します。Select Delivery time as Any time.

    d.d. 通知テキストに、プッシュ通知内で太字で表示されるタイトルを入力します。In the notification text - type the Title which will be in bold in the push.

    e.e. 次に、メッセージを入力します。Then type your Message

  4. スクロール ダウンし、[コンテンツ] セクションで [通知のみ] を選択します。Scroll down, and in the Content section, select Notification only.

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

アプリが開いている場合、通知はアプリ内通知としてデバイスに表示されます。アプリが開いていない場合は、次のようにトースト通知として表示されます。You should now see a notification on your device which will show up as an in-app notification if the app is open otherwise as a toast notification like the following: