Windows ユニバーサル アプリの Azure Mobile Engagement の概要Get started with Azure Mobile Engagement for Windows Universal Apps

このトピックでは、アプリの使用状況を理解して、プッシュ通知を Windows ユニバーサル アプリケーションのセグメント化されたユーザーに送信するために、Azure モバイル エンゲージメントの使用方法を説明します。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 Universal application. このチュートリアルでは、モバイル エンゲージメントを使用した簡単なブロードキャスト シナリオのデモンストレーションを行います。This tutorial demonstrates the simple broadcast scenario using Mobile Engagement. 基本的なアプリ使用状況データを収集し、Windows 通知サービス (WNS) を使用してプッシュ通知を受信する空の Windows ユニバーサル アプリを作成します。You create a blank Windows Universal App that collects basic app usage data and receives push notifications using Windows Notification Service (WNS).

注意

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.

前提条件Prerequisites

このチュートリアルには、次のものが必要です。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 ユニバーサル アプリの Mobile Engagement の設定Set up Mobile Engagement for your Windows Universal 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. 完全な統合のドキュメントについては、「 Mobile Engagement Windows ユニバーサル SDK の統合」を参照してください。The complete integration documentation can be found in the Mobile Engagement Windows Universal SDK integration.

統合の実例を示すために、Visual Studio で基本的なアプリを作成します。You create a basic app with Visual Studio to demonstrate the integration.

Windows ユニバーサル アプリ プロジェクトを作成するCreate a Windows Universal App 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] -> [ユニバーサル] -> [空のアプリ (ユニバーサル Windows)] の順に選択します。In the pop-up, select Windows -> Universal -> Blank App (Universal Windows). アプリの名前ソリューション名を入力し、[OK] をクリックします。Fill in the app Name and Solution name, and then click OK.

これで、後で Azure Mobile Engagement SDK を統合する Windows ユニバーサル アプリ プロジェクトが作成されました。You have now created a Windows Universal App project into which you next integrate the Azure Mobile Engagement SDK.

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

  1. プロジェクトに MicrosoftAzure.MobileEngagement Nuget パッケージをインストールします。Install the MicrosoftAzure.MobileEngagement Nuget package in your project. Windows と Windows Phone の両方のプラットフォームを対象としている場合、両方のプロジェクトにこれを行う必要があります。If you are targeting both Windows and Windows Phone platforms, you need to do this for both projects. Windows 8.x および Windows Phone 8.1 の場合は、同じ Nuget パッケージによって各プロジェクトに適切なプラットフォーム固有のバイナリが配置されます。For Windows 8.x and Windows Phone 8.1, the same Nuget package places the correct platform-specific binaries in each project.
  2. Package.appxmanifest を開き、そこに次の機能を追加します。Open Package.appxmanifest and make sure that the following capability is added there:

     Internet (Client)
    

  3. 先にコピーした Mobile Engagement アプリの接続文字列を Resources\EngagementConfiguration.xml ファイルの <connectionString> タグと </connectionString> タグの間にコピーします。Now copy 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:

    ヒント

    アプリの対象プラットフォームを Windows と Windows Phone の両方にする場合、2 つの Mobile Engagement アプリケーションを作成する必要があります (サポートされているプラットフォームごとに 1 つずつ)。If your App targets both Windows and Windows Phone platforms, you should still create two Mobile Engagement Applications - one for each supported platform. 2 つのアプリがあれば、対象ユーザーを適切に分け、各プラットフォームに合わせた通知を送信できます。Having two apps ensures that you can create correct segmentation of the audience and can send appropriately targeted notifications for each platform.

    重要

    NuGet は、Windows 10 UWP アプリケーションで SDK のリソースを自動的にコピーしません。NuGet does not automatically copy the SDK resources in your Windows 10 UWP application. NuGet パッケージのインストール時に表示される手順 (readme.txt) に従って、手動で行う必要があります。You have to do it manually following the steps which show up (readme.txt) when the Nuget package is installed.

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

    a.a. using ステートメントを追加します。Add the using statement:

         using Microsoft.Azure.Engagement;
    

    b.b. Engagement を初期化するメソッドを追加します。Add a method that initializes the Engagement:

        private void InitEngagement(IActivatedEventArgs e)
        {
          EngagementAgent.Instance.Init(e);
    
          //... rest of the code
        }
    

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

         protected override void OnLaunched(LaunchActivatedEventArgs e)
         {
           InitEngagement(e);
    
           //... rest of the code
         }
    

    c.c. OnActivated メソッドに次を挿入します。このメソッドがない場合は追加します。Insert the following in the OnActivated method and add the method if it is not already present:

         protected override void OnActivated(IActivatedEventArgs e)
         {
           InitEngagement(e);
    
           //... rest of the code
         }
    

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

データを送信してユーザーがアクティブであることを確認するには、少なくとも 1 つの画面 (アクティビティ) を Mobile Engagement のバックエンドに送信する必要があります。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 following using statement:

    using Microsoft.Azure.Engagement.Overlay;using Microsoft.Azure.Engagement.Overlay;

  2. MainPage の基本クラスを Page から EngagementPageOverlay に変更します。Change the base class of MainPage from Page to EngagementPageOverlay:

     class MainPage : EngagementPageOverlay
    
  3. MainPage.xaml ファイルで次の操作を行います。In the MainPage.xaml file:

    a.a. 次の内容を名前空間宣言に追加します。Add to your namespaces declarations:

     xmlns:engagement="using:Microsoft.Azure.Engagement.Overlay"
    

    b.b. XML タグ名の Pageengagement:EngagementPageOverlay に置き換えます。Replace the Page in the XML tag name with engagement:EngagementPageOverlay

重要

ページが OnNavigatedTo メソッドをオーバーライドする場合は、必ず base.OnNavigatedTo(e) を呼び出します。If your page overrides the OnNavigatedTo method, be sure to call base.OnNavigatedTo(e). そうしないと、アクティビティが報告されません (EngagementPage は、OnNavigatedTo メソッド内で StartActivity を呼び出します)。Otherwise, the activity is not reported EngagementPage calls StartActivity inside its OnNavigatedTo method). これは既定のテンプレートに OnNavigatedTo メソッドがある Windows Phone プロジェクトで特に重要です。This is especially important in a Windows Phone project where the default template has an OnNavigatedTo method.

Windows 10 ユニバーサル アプリの場合は、上記の方法ではなく、「Windows ユニバーサル アプリ Engagement SDK を使用した詳細なレポート」の「推奨される方法: Page クラスをオーバーロードします」で推奨されている方法を使用してください。For Windows 10 Universal apps, use the method recommended in the "Recommended method: overload your Page classes" section of Advanced Reporting with the Windows Universal Apps Engagement SDK, rather than the one mentioned above.

リアルタイム監視を使用してアプリを接続する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 WNS Push Notifications

  1. Package.appxmanifest ファイルの [アプリケーション] タブの [通知][トースト対応:][はい] を設定します。In the Package.appxmanifest file, in the Application tab, under Notifications, set Toast capable: to Yes

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

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

    private void InitEngagement(IActivatedEventArgs e)
    {
       EngagementAgent.Instance.Init(e);
       EngagementReach.Instance.Init(e);
    }

トーストを送信する準備ができました。You're ready to send a toast. それでは、この基本的な統合が正しく設定されているかどうかを検証してみましょう。Next we verify that you have correctly carried out this basic integration.

通知を送信するために Mobile Engagement へのアクセスを許可するGrant access to Mobile Engagement to send notifications

  1. Web ブラウザーで Windows ストア デベロッパー センターを開き、ログインします。必要に応じてアカウントを作成してください。Open [Windows Store Dev Center] in your web browser, login, and create an account if necessary.
  2. 右上隅の [ダッシュボード] をクリックし、左側のパネル メニューで [新しいアプリの作成] をクリックします。Click Dashboard at the top right corner and then click Create a new app from the left panel menu.

  3. アプリの名前を予約して、アプリを作成します。Create your app by reserving its name.

  4. アプリが作成されたら、左側のメニューから [サービス]、[プッシュ通知] の順に進みます。Once the app has been created, navigate to Services -> Push notifications from the left menu.

  5. [プッシュ通知] セクションで、 Live サービス サイト のリンクをクリックします。In the Push notifications section, click the Live Services site link.

  6. プッシュ通知用資格情報セクションに移動します。You navigate to the Push credentials section. [アプリケーション設定] セクションが表示されていることを確認し、[パッケージ SID][クライアント シークレット] をコピーします。Make sure you are in the App Settings section and then copy your Package SID and Client secret

  7. Mobile Engagement ポータルの [設定] に移動し、左側の [ネイティブ プッシュ] セクションをクリックします。Navigate to the Settings of your Mobile Engagement portal, and click the Native Push section on the left. 次に、[編集] ボタンをクリックし、次に示すように、[パッケージ セキュリティ ID (SID)][シークレット キー] に入力します。Then, click the Edit button to enter your Package security identifier (SID) and your Secret Key as shown:

  8. 最後に、アプリ ストアに作成されたこのアプリに Visual Studio アプリケーションが関連付けます。Finally make sure that you have associated your Visual Studio app with this created app in the App store. Visual Studio で [アプリケーションをストアと関連付ける] をクリックします。Click Associate App with Store in Visual Studio.

アプリへ通知を送信する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.

アプリが実行中の場合は、アプリ内通知が表示されます。If the app is running, you see an in-app notification. アプリが閉じている場合は、トースト通知が表示されます。otherwise if the app is closed, you see a toast notification. トースト通知ではなくアプリ内通知が表示され、Visual Studio のデバッグ モードでアプリを実行している場合は、ツール バーの [ライフサイクル イベント]、[中断] の順に選択し、アプリが中断していることを確認します。If you see an in-app notification but not a toast notification, and you are running the app in debug mode in Visual Studio, then try Lifecycle events -> Suspend in the toolbar to ensure that the app is suspended. Visual Studio でアプリケーションをデバッグしているときに [ホーム] ボタンをクリックしただけではアプリケーションは中断されず、アプリ内通知は表示されても、トースト通知は表示されないことがあります。If you clicked the Home button while debugging the application in Visual Studio, then it doesn't always get suspended and while you see the notification as in-app, it doesn't show up as a toast notification.