Apache Cordovaを使ったハイブリッドHTML5アプリにAmazon Mobile Analyticsを導入する


iOSとAndroid向けのアプリ開発を効率化することができる注目の[Apache Cordova](http://cordova.apache.org/)
HTML5でのアプリケーション開発においてもそのアプリの利用状況を把握したい！
ということで、Apache CordovaのアプリにAWS Javascript SDKを使ってAmazon Mobile Analyticsのインプリしてみます。


##Amazon Congnitoの設定
Amazon Mobile Analyticsを使うためにCognitoの設定を行います。
Amazon Cognitoの画面からCreate identity Poolをクリックします。

![Kobito.s7IpwG.png](https://qiita-image-store.s3.amazonaws.com/0/60724/10879ee2-89bf-d6fc-0c57-62a5296d6ad7.png "Kobito.s7IpwG.png")

今回は、Unauthenticated Identitesを使うので、チェックボックスをオンにします。

作成されたUnauthenticatedのIAMロールにMobile AnalyticsへのPut Eventを許可する権限を付与します。
IAMのコンソールで当該のロール開いて、Attach Policyを選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/60724/52612cf7-cfd0-7806-4f46-eb7c175925a4.png "image.png")

Inline Policiesにロールを追加します。
Create Role Policy → Policy Generatorを開きます。
Amazon Mobile AnalyticsのPutEventを許可（今回リソースは*にしました。厳密には、ARNを指定すること）
![Kobito.05B35U.png](https://qiita-image-store.s3.amazonaws.com/0/60724/cc5ccc64-c820-2fff-993d-aaadb862f34e.png "Kobito.05B35U.png")

##Amazon Mobile Analyticsの設定
マネジメントコンソールからAmazon Mobile Analyticsを選択します。
Create Mobile Analytics Appをクリックし、アプリケーション名を入力します。
あとで、App IDが必要になるのでApp IDをメモ帳などにコピーしておいてください。


##Apache Cordovaアプリ開発
Intel Edisonの開発でIntel XDK for IoTを使ってた背景で、Intel社が提供しているIntel XDKを使ってみます。
Intel XDKの使い方などは[こちら](https://software.intel.com/en-us/xdk/docs/intel-xdk-overview)をご覧ください。

新しいプロジェクトを作ります。
HTML5 + Cordovaを選択してください。

![Kobito.l3FthO.png](https://qiita-image-store.s3.amazonaws.com/0/60724/e518f367-a6c2-c449-fdfe-5da804890e28.png "Kobito.l3FthO.png")

Developタブを開いて実装します。
[AWS SDK for Javascript](http://aws.amazon.com/jp/sdk-for-browser/)及ぶ[Amazon Mobile Analytics SDK for JavaScript](https://github.com/aws/aws-sdk-mobile-analytics-js)をダウンロードしてプロジェクトフォルダ内のwww¥jsにいれます。

実装は、この[ブログ](https://mobile.awsblog.com/post/TxCMBFPXR2XWOF/Use-Amazon-Mobile-Analytics-with-your-JavaScript-enabled-apps)を参考に実装します。
変更点は以下の部分です。

```Javascript:index.html(抜粋)
        console.log('Analytics initializing');
        AWS.config.region = 'us-east-1';
        AWS.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: 'CognitoのIdentityPoolIDを入れてください',
            RoleArn:'MobileAnlyticsのRole ARNを入れてください',
        });
  
        var options = {
            appId : 'Mobile AnalyticsのApp ID',
            platform: 'iPhoneOS',
            autoSubmitEvents: true,
            autoSubmitInterval: 1000
        };
        this.mobileAnalyticsClient = new AMA.Manager(options);
```

あとは、Run My Appをクリックしてエミュレータを起動します。

![Kobito.0e2RmH.png](https://qiita-image-store.s3.amazonaws.com/0/60724/e74f2844-f210-4bb1-43bb-30bf32ae7189.png "Kobito.0e2RmH.png")


![Kobito.V7xdt0.png](https://qiita-image-store.s3.amazonaws.com/0/60724/db4648a0-c008-4e07-b840-420d56cc6573.png "Kobito.V7xdt0.png")

ブログのソースでは、スクリーンをタッチするだけでカスタムイベントが飛ぶようになってます。
Mobile Analyticsのマネジメントコンソールでは以下のようなグラフで確認できます。

![Kobito.1i3ZY8.png](https://qiita-image-store.s3.amazonaws.com/0/60724/6bb35ee6-9ca5-7d37-4d23-b4e8e3f0413b.png "Kobito.1i3ZY8.png")

![Kobito.icOAPz.png](https://qiita-image-store.s3.amazonaws.com/0/60724/1d24289d-11b4-5569-6618-ab0544d676fe.png "Kobito.icOAPz.png")

# 最後に
Amazon Mobile Analytics SDK for JavascriptがでたことでブラウザはもちろんHTML5アプリケーション上での分析もMobile Analyticsを用いることができます。
Amazon Mobile Analyticsは、S3やRedshiftへのロードも自動的にできるようになっているので、マネジメントコンソールでの確認だけでなく他のデータと合わせた分析を行うこともできます。

# 免責
こちらは個人の意見で、所属する企業や団体は関係ありません。