Cordova/Phonegap 用 Azure Mobile Engagement の使用Get Started with Azure Mobile Engagement for Cordova/Phonegap

重要

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

このトピックでは、Azure Mobile Engagement を使用して、アプリの使用状況を把握する方法と、Cordova を使用して開発されたモバイル アプリケーションのセグメント化されたユーザーにプッシュ通知を送信する方法について説明します。This topic shows you how to use Azure Mobile Engagement to understand your app usage and send push notifications to segmented users for a mobile application developed with Cordova.

このチュートリアルでは、Mac を使用して空の Cordova アプリを作成してから、Mobile Engagement SDK と統合します。In this tutorial, we will create a blank Cordova app using Mac and then integrate Mobile Engagement SDK. このアプリは、基本的な分析データを収集し、iOS では Apple Push Notification System (APNS)、Android では Google Cloud Messaging (GCM) を使用してプッシュ通知を受信します。It collects basic analytics data and receives push notifications using Apple Push Notification System (APNS) for iOS and Google Cloud Messaging (GCM) for Android. このアプリを、テスト用に iOS デバイスまたは Android デバイスにデプロイします。We will deploy this to an iOS or Android device for testing.

注意

このチュートリアルを完了するには、アクティブな 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.

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

  • XCode (iOS へのデプロイ用)。Mac App Store からインストールできます。XCode, which you can install from Mac App Store (for deploying to iOS)
  • Android SDK およびエミュレーター (Android へのデプロイ用)Android SDK & Emulator (for deploying to Android)
  • APNS のプッシュ通知証明書 (.p12)。Apple Dev Center から入手できます。Push notification certificate (.p12) that you can obtain from Apple Dev Center for APNS
  • GCM 用の GCM プロジェクト番号。Google デベロッパー コンソールから入手できます。GCM Project number that you can obtain from your Google Developer Console for GCM
  • Mobile Engagement 用の Cordoca プラグインMobile Engagement Cordova Plugin

注意

Cordova プラグインのソース コードと ReadMe ファイルは、GitHub にあります。You can find the source code and the ReadMe for the Cordova plugin on GitHub

Cordova アプリ用に Mobile Engagement を設定するSetup Mobile Engagement for your Cordova 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 のバックエンドに接続するConnecting 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.

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

新しい Cordova プロジェクトを作成します。Create a new Cordova project

  1. Mac コンピューターで [Terminal] ウィンドウを起動して次を入力し、既定のテンプレートから新しい Cordova プロジェクトを作成する次のコードを入力します。Launch Terminal window on your Mac machine and type the following which will create a new Cordova project from the default template. iOS アプリのデプロイに最終的に使用する発行プロファイルが、App ID として「com.mycompany.myapp」を使用していることを確認します。Make sure that the publishing profile you eventually use to deploy your iOS app is using 'com.mycompany.myapp' as the App ID.

     $ cordova create azme-cordova com.mycompany.myapp
     $ cd azme-cordova
    
  2. 次を実行して iOS のプロジェクトを構成し、その構成を iOS シミュレーターで実行します。Execute the following to configure your project for iOS and run it in the iOS Simulator:

     $ cordova platform add ios 
     $ cordova run ios
    
  3. 次のコマンドを実行して Android のプロジェクトを構成し、その構成を Android エミュレーターで実行します。Execute the following to configure your project for Android and run it in the Android emulator. Android SDK エミュレーターで、ターゲットが Google API (Google Inc.) に、CPU/ABI が Google API ARM に設定されていることを確認してください。Make sure that your Android SDK Emulator settings have its Target as Google APIs (Google Inc.) with the CPU / ABI as Google APIs ARM.

     $ cordova platform add android
     $ cordova run android
    
  4. Cordova Console プラグインを追加します。Add the Cordova Console plugin.

    $ cordova plugin add cordova-plugin-console
    

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

  1. Azure Mobile Engagement Cordova プラグインに変数値を設定しながら、このプラグインをインストールします。Install the Azure Mobile Engagement Cordova plugin while providing the variable values to configure the plugin:

     cordova plugin add cordova-plugin-ms-azure-mobile-engagement    
          --variable AZME_IOS_CONNECTION_STRING=<iOS Connection String> 
         --variable AZME_IOS_REACH_ICON=... (icon name WITH extension) 
         --variable AZME_ANDROID_CONNECTION_STRING=<Android Connection String> 
         --variable AZME_ANDROID_REACH_ICON=... (icon name WITHOUT extension)       
         --variable AZME_ANDROID_GOOGLE_PROJECT_NUMBER=... (From your Google Cloud console for sending push notifications) 
         --variable AZME_ACTION_URL =... (URL scheme which triggers the app for deep linking)
         --variable AZME_ENABLE_NATIVE_LOG=true|false
         --variable AZME_ENABLE_PLUGIN_LOG=true|false
    

"Android Reach アイコン": 拡張子も描画可能なプレフィックスも付いていないリソース名を指定する必要があります (例: mynotificationicon)。また、アイコン ファイルは Android プロジェクトにコピーする必要があります (platforms/android/res/drawable)。Android Reach Icon : must be the name of the resource without any extension, nor drawable prefix (ex: mynotificationicon), and the icon file must be copied into your android project (platforms/android/res/drawable)

"iOS Reach アイコン": 拡張子付きのリソース名を指定する必要があります (例: mynotificationicon.png)。また、アイコン ファイルは ([フィールドの追加] メニューを使用して) XCode と共に iOS プロジェクトに追加する必要があります。iOS Reach Icon : must be the name of the resource with its extension (ex: mynotificationicon.png), and the icon file must be added into your iOS project with XCode (using the Add Files Menu)

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

  1. Cordova プロジェクトで、 www/js/index.js を編集して、 deviceReady イベントが受信された場合に新しいアクティビティを宣言する Mobile Engagement への呼び出しを追加します。In the Cordova project - edit www/js/index.js to add the call to Mobile Engagement to declare a new activity once the deviceReady event is received.

      onDeviceReady: function() {
             Engagement.startActivity("myPage",{});
         }
    
  2. アプリケーションを実行します。Run the application:

    • iOS の場合For iOS

      [ Terminal ] ウィンドウで次を実行して、新しいシミュレーター インスタンスでアプリを起動します。In Terminal window launch your app in a new Simulator instance by executing the following:

        cordova run ios
      
    • Android の場合For Android

      [ Terminal ] ウィンドウで次を実行して、新しいエミュレーター インスタンスでアプリを起動します。In Terminal window launch your app in a new emulator instance by executing the following:

        cordova run android
      
  3. コンソールのログでは、次のことを確認できます。You can see the following in the console logs:

     [Engagement] Agent: Session started
     [Engagement] Agent: Activity 'myPage' started
     [Engagement] Connection: Established
     [Engagement] Connection: Sent: appInfo
     [Engagement] Connection: Sent: startSession
     [Engagement] Connection: Sent: activity name='myPage'
    

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

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

Mobile Engagement を導入すると、キャンペーンとの関連でプッシュ通知とアプリ内メッセージングを利用し、ユーザーとのやり取りを行うことができます。Mobile Engagement allows you to interact with your users using 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 will setup your app to receive them.

Mobile Engagement のプッシュの資格情報を設定するConfigure Push credentials for Mobile Engagement

Mobile Engagement がユーザーに代わりプッシュ通知を送信できるようにするには、Mobile Engagement に Apple iOS 証明書または GCM サーバーの API キーへのアクセスを許可する必要があります。To allow Mobile Engagement to send Push Notifications on your behalf, you need to grant it access to your Apple iOS certificate or GCM Server API Key.

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

  2. Engagement ポータルの設定ページが表示されます。You will land in the settings page in your Engagement Portal. ここで、 [ネイティブ プッシュ通知] セクションをクリックします。From there click on the Native Push section:

  3. iOS の証明書/GCM サーバーの API キーの設定Configure iOS Certificate/GCM Server API Key

    (iOS)[iOS]

    a.[サインオン URL] ボックスに、次のパターンを使用して、ユーザーが RightScale アプリケーションへのサインオンに使用する URL を入力します。a. .p12 を選択してアップロードし、パスワードを入力します。Select your .p12, upload it and type your password:

    (Android)[Android]

    a.[サインオン URL] ボックスに、次のパターンを使用して、ユーザーが RightScale アプリケーションへのサインオンに使用する URL を入力します。a. [GCM 設定] セクションの [API キー] の前にある編集アイコンをクリックし、表示されたポップアップの中に GCM サーバー キーを貼り付け、[OK] をクリックします。Click the edit icon in front of API Key in the GCM Settings section and in the popup which shows up, paste the GCM Server Key and click OK.

Cordova アプリでのプッシュ通知の有効化Enable push notifications in the Cordova app

www/js/index.js を編集して、プッシュ通知の要求とハンドラーの宣言を行う Mobile Engagement への呼び出しを追加します。Edit www/js/index.js to add the call to Mobile Engagement to request push notifications and declare a handler:

 onDeviceReady: function() {
       Engagement.initializeReach(  
             // on OpenUrl  
             function(_url) {   
             alert(_url);   
             });  
        Engagement.startActivity("myPage",{});  
    }

アプリの実行Run the app

(iOS)[iOS]

  1. iOS では実在するデバイスへのプッシュ通知だけが許可されているため、XCode を使用してアプリをビルドし、デバイスにデプロイして、プッシュ通知をテストします。We will use XCode to build and deploy the app on the device to test push notifications since iOS only allows push notifications to an actual device. Cordova プロジェクトを作成した場所の ...\platforms\ios に移動します。Go to the location where your Cordova project is created and navigate to ...\platforms\ios location. XCode でネイティブ .xcodeproj ファイルを開きます。Open up the native .xcodeproj file in XCode.
  2. 先ほど Mobile Engagement ポータルにアップロードした証明書と、Cordova アプリの作成中に指定した App Id を含むプロビジョニング プロファイルが設定されたアカウントを使用して、Cordova アプリをビルドして iOS デバイスにデプロイします。Build and deploy the Cordova app to the iOS device using the account which has the provisioning profile containing the certificate you just uploaded to the Mobile Engagement portal and the App Id which matches the one you provided while creating the Cordova app. XCode で Resources*-info.plist ファイルの Bundle ID をチェックアウトして、照合することができます。You can check out the Bundle identifier in your Resources*-info.plist file in XCode to match it up.
  3. デバイスに、アプリが通知を送信する許可を要求したことを示す標準の iOS ポップアップが表示されます。You will see the standard iOS popup on your device saying that the app requests permission to send notifications. 送信を許可します。Grant the permission.

(Android)[Android]

GCM 通知は Android エミュレーターでサポートされているため、エミュレーターを使用するだけで Android アプリを実行することができます。You can simply use the emulator to run the Android app as GCM notifications are supported on the Android emulator.

cordova run android

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

デバイスで実行されているアプリにプッシュ通知を送る簡単なプッシュ通知キャンペーンを作成してみましょう。We will now create a simple Push Notification campaign that will send a push to your app running on the device:

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

  3. 情報を入力してキャンペーン (Android)Provide inputs to create your campaign [Android]

    • キャンペーンの 名前 を指定します。Provide a Name for your campaign.
    • [配信タイプ] として [システム通知][シンプル] を選択します。Select the Delivery Type as System notification Simple
    • [配信時刻] として [任意の時刻]Select the Delivery time as "Any Time"
    • プッシュ通知の 1 行目になる [タイトル] を指定します。Provide a Title for your notification which will be the first line in the push.
    • [メッセージ] に、通知のメッセージ本文となるテキストを入力します。Provide a Message for your notification which will serve as the message body.

  4. 情報を入力してキャンペーン (iOS)Provide inputs to create your campaign [iOS]

    • キャンペーンの 名前 を指定します。Provide a Name for your campaign.
    • [配信時刻] として [アプリ外のみ]Select the Delivery time as "Out of app only"
    • プッシュ通知の 1 行目になる [タイトル] を指定します。Provide a Title for your notification which will be the first line in the push.
    • [メッセージ] に、通知のメッセージ本文となるテキストを入力します。Provide a Message for your notification which will serve as the message body.

  5. スクロール ダウンし、コンテンツ セクションで 通知のみScroll down, and in the content section select Notification only

  6. (オプション) アクション URL を指定することもできます。[Optional] You can also provide an Action URL. この URL では、プラグインの AZME_REDIRECT_URL 変数の構成時に指定した URL スキームを必ず使用します (例: myapp://test)。Make sure that it uses a URL scheme provided while configuring the plugin's AZME_REDIRECT_URL variable e.g. myapp://test.
  7. 最も基本的なキャンペーンの設定が完了しました。You're done setting the most basic campaign possible. もう一度下にスクロールし、 [作成] ボタンをクリックしてキャンペーンを保存します。Now scroll down again and click the Create button to save your campaign.
  8. 最後に、キャンペーンを アクティブ化 します。Finally Activate your campaign

  9. このキャンペーンでは、デバイスまたはエミュレーターにプッシュ通知が表示されるはずです。You should now see a push notification on your device or emulator as part of this campaign.

次のステップNext Steps

Cordova Mobile Engagement SDK で使用できるすべてのメソッドの概要Overview of all methods available with Cordova Mobile Engagement SDK