Amazon Cognitoによるデータの同期

こんにちは。アプリチームのtakahashiです。
今回は、二つのブラウザ間でデータを同期する方法を紹介します。
Amazon Cognitoを使って、サーバーなどを用意することなく手軽に実装してみましょう。

htmlファイルの作成

作成フォルダ
┝ index.html
┝ identity.html
aws-sdk.js
amazon-cognito.min.js

htmlファイルを2つ作成していきます。
aws-sdk.js / amazon-cognito.min.js
については上記リンクからダウンロードしてください。

 

① index.html

<!doctype html>
<html>
<head>
    <script src="aws-sdk.js"></script>
    <script src="amazon-cognito.min.js"></script>
    <script>
        //Cognito設定時に記述
    </script>
</head>
<body onload="init()"> 

<form>
    message
    <input type="text" id="message" style="width:500px;"/>
    <input type="submit" />
    <input type="button" id="receive" value="Receive" />
</form>
 
</body>
</html>

 

② identity.html

<!doctype html>
<html>
<head>
    <script src="aws-sdk.js"></script>
    <script src="amazon-cognito.min.js"></script>
    <script>
        //Cognito設定時に記述
    </script>
</head>
</html>

 

index.htmlを開き、画面が作成されたことを確認します。

それでは、テキストボックスの中身を同期するように設定を進めていきましょう。

 

Cognitoの設定

Cognitoは次のような構造で値を保持できます。

次の手順でこれらを作成していきます。

 

・IdentityPoolIdの作成

Cognitoの管理画面を開いてください。 Manage Federated Identities

 

Create new Identity pool

 

Identity pool name は管理用の名前なので好きな名前で構いません。

誰とでも同期できるように、Unauthenticated Identitiy には必ずチェックを入れてください。 Create PoolでIdentityPoolIdが作成されます。

 

・Identity Id、DataSetの作成

「1.htmlファイルの作成」で作成したidentity.htmlの<script></script>の間にSample codeの中身を丸々貼り付けます。PlatformはJavascriptを選択してください。 ※Sample codeは作成したIdentity poolによって自動的に使用できる値に変わります。

 

identity.html

<!doctype html>
<html>
<head>
    <script src="aws-sdk.js"></script>
    <script src="amazon-cognito.min.js"></script>
    <script>
            AWS.config.region = 'ap-northeast-1'; // Region
            AWS.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: '//上記で作成された値',
            });
             AWS.config.credentials.get(function(){
              var syncClient = new AWS.CognitoSyncManager();
              syncClient.openOrCreateDataset('myDataset', function(err, dataset) {
               dataset.put('myKey', 'myValue', function(err, record){
                dataset.synchronize({
                 onSuccess: function(data, newRecords) {
                 }
                });
               });
              });
             });
   </script>
</head>
</html>

 

編集したidentitiy.htmlをブラウザで開くとIdentity Idが作成されます。

Identity browserで作成されたIDを確認しましょう。

 

ここまでで、Cognitoの設定は完了です。

 

・同期機能の組み込み

「1.htmlファイルの作成」で作成したindex.htmlの<script></script>の間を次のように書き換えてください。
「IdentityPoolId」と「AWS.config.credentials.params.IdentityId」には、これまでに作成した自分のIDを指定します。

 

index.html

<!doctype html>
<html>
<head>
    <script src="aws-sdk.js"></script>
    <script src="amazon-cognito.min.js"></script>
    <script>
            function init() {
             AWS.config.region = 'ap-northeast-1';
              AWS.config.credentials = new AWS.CognitoIdentityCredentials({
               IdentityPoolId: '//作成したIdentity Pool Idを指定'
              });
              var receiveWrite = function(mode) {
               //identity.htmlで作ったデータセットを開く
               AWS.config.credentials.params.IdentityId = '//作成したIdentity Idを指定';
               AWS.config.credentials.get(function(errGet) {
                var syncClient = new AWS.CognitoSyncManager();
                syncClient.openOrCreateDataset('myDataset',
                  function(errOpenOrCreateDataset, dataset) {
                 dataset.synchronize({
                  onSuccess: function(dataset, newRecords) {
                   if (mode == 'write') {
                    //データセットの項目に書く
                    dataset.put('myKey', 
                     document.getElementById('message').value, function(err, 
                      record) {dataset.synchronize();
                    });
                   }
                   if (mode == 'receive') {
                    //データセットの項目を取得する
                    dataset.get('myKey', function(err, value) {
                     document.getElementById('message').value = value;
                    });
                   }
                  }
                 });
                });
               });
              };
              //イベントの登録
              document.getElementById('receive').addEventListener("click", 
                function(event) {
                 receiveWrite('receive');
                 event.preventDefault();
              });
              document.getElementsByTagName('form')[0].addEventListener("submit", 
                function(event) {
                 receiveWrite('write');
                 event.preventDefault();
              });
            }
    </script>
</head>
<body onload="init()">
    
    <form>
        message
        <input type="text" id="message" style="width:500px;"/>
        <input type="submit" />
        <input type="button" id="receive" value="Receive" />
    </form>

</body>
</html>

 

ブラウザ間で同期する動作確認

ブラウザを二つ立ち上げて動作確認をしてみましょう。

 

片方のブラウザで文字を送信し、もう片方のブラウザのReceiveボタンを押すと・・・

入力した文字がテキストボックスに表示されます。 二つのブラウザ間でデータが同期されたことが確認できました。

おわりに

今回は、送信ボタンやReceiveボタンを使って手動で同期する方法を紹介しましたが、スマートフォンAPIを使用すれば自動的に同期することが可能になります。
そちらの方法ついては、またの機会に紹介したいと思います。