Amazon Cognitoによるデータの同期

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

htmlファイルの作成

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

htmlファイルを２つ作成していきます。
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>