お待ちかね！ JavaScriptでアプリのコーディング
ここまでに、Amazon CognitoとAmazon Kinesisの設定を行い、Amazon DynamoDBで2つのテーブルを作成しました。クライアント側の処理に必要な準備は完了です。次は、クライアント側の処理をJavaScriptで記述します[5]。
はい。
最初に、Amazon Cognitoからテンポラリの認証情報を取得します。Amazon CognitoのアイデンティティプールのIDを指定してgetメソッドを呼び出すことで、テンポラリのAWS Access Key IDとAWS Secret Access Keyが取得されます。
var params = {
IdentityPoolId: "us-east-1:xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
};
AWS.config.region = 'us-east-1';
AWS.config.credentials = new AWS.CognitoIdentityCredentials(params);
AWS.config.credentials.get(function(err) {
if (!err) {
console.log("Cognito Identity Id: " + AWS.config.credentials.identityId);
document.getElementById("debug-log").value="Cognito Identity Id: " + AWS.config.credentials.identityId;
} else {
console.log("Error:" + err);
document.getElementById("debug-log").value="Cognito error:" + err;
}
});
IdentityPoolIdの値は実際の値に書き換えてください。
ここに入れる値は、アイデンティティプールを作成したときのプール名ですか？
いえ、作成したアイデンティティプールのIDでありアイデンティティプール名ではありません。Amazon Cognitoで作成したアイデンティティプールを選択して右上の「Edit identity pool」をクリックします。
次の画面で［Identity pool ID］にアイデンティティプールIDの値が表示されます。この値をコピーしてJavaScriptのコード内に貼り付けてください。コピーができたら［Cancel］をクリックして変更画面を閉じます。
できました。
続いて、Amazon Cognitoから取得した認証情報を使って、Amazon KinesisとAmazon DynamoDBのクライアントを初期化します。KinesisStreamという変数の値としてAmazon Kinesisで作成したストリーム名をセットします。
AWS.config.region = 'us-east-1'; var kinesis = new AWS.Kinesis(); var kinesisStream = 'xxxxxxxxxx';
Amazon Kinesisで作成したストリーム名ですね……はい、書き換えました。
同様にAmazon DynamoDBのクライアントも初期化します。
AWS.config.region = 'ap-northeast-1'; var dynamodb = new AWS.DynamoDB(); var dynamodbTable = 'lang'; var dynamodbIndex = 'Flag-index';
次にAmazon DynamoDBに対してqueryメソッドを実行し、langテーブルでFlagが1の項目をすべて取得します。取得した項目をもとに、Webページに表示する言語の選択リストを作成します。
/*
/ Selectから言語を選択した時に呼び出される
/ 選択される都度よびだされ、グローバル変数（selected_lang）に格納
*/
function selectedLang(){
selected_lang = document.getElementById("select-lang").value;
console.log(selected_lang);
document.getElementById("selected_lang").innerHTML = selected_lang;
}
/*
/ DynamoDBからFlagが1（正常）の言語を取得
/ 取得後setLangListでHTML selectに格納
*/
function getLangList(){
var params = {
TableName: dynamodbTable,
KeyConditions: {
'Flag': {
ComparisonOperator: 'EQ',
AttributeValueList: [{S: '1'}]
}
},
IndexName: dynamodbIndex
};
dynamodb.query(params,function(err, data) {
if (!err) {
setLangList(data)
} else {
console.log("Error:" + err);
}
});
}
/*
/ DynamoDBからFlagが1（正常）の言語を取得
/ 取得後setLangListでHTML selectに格納
*/
function setLangList(data){
for(var element in data['Items']){
var item = data['Items'][element]['Lang']['S'];
var option = document.createElement("option");
option.text = item;
document.getElementById('select-lang').add(option);
}
}
スマホからindex.htmlにアクセスし、言語を選択して［Next］ボタンをクリックすると、選択した言語の画面が表示されるようにします。ここでスマホを振ったときの加速度センサーの値（X座標、Y座標、Z座標）を取得し、座標の現在値と前回の値、選択された言語、アクションをJSON形式にしてAmazon Kinesisに送ります。実際には、これらのデータを配列に入れ、複数件たまってからputRecordsメソッドでまとめて送っています。このあとに、座標の現在値と前回値を使って集計処理を行います。
-- 中略 --
<div style="display:none">
<div class="jumbotron">
<h1><p id="selected_lang"></p></h1>
<script type="text/javascript">
// 言語が選択されたらモーション起動
window.ondevicemotion = function(event){
motionCallback(event.acceleration.x, event.acceleration.y, event.acceleration.z);
}
</script>
</div>
</div>
-- 中略 --
/*
/ モーションが呼び出された時のCallback
*/
function motionCallback(x,y,z){
var motion_data = {
x: x,
y: y,
z: z,
};
// 言語が選択されていれば、処理を実行
if(selected_lang != ''){
var motion_record = { Previouse: previous_motion_data, Current: motion_data};
/*
/ レコードフォーマット
/ {Lang: 選択された言語, Motion:{Previouse:{x:x軸, y:y軸, z:z軸},Current:{x:x軸, y:y軸, z:z軸}}, Action:加算(Add) or 減算(Sub)}
*/
var record = {
Data: JSON.stringify({Motion: motion_record, Lang: selected_lang, Action: 'Add'}),
// パーティションキーは乱数文字列をセット
PartitionKey: String(Math.random())
};
/*
/ バッファに100個レコードが溜まったらKinesis putRecordsを読み出す
*/
if (records.length < 100){
// グローバル配列に格納
records.push(record);
}else{
send_data(records);
records = [];
}
previous_motion_data = JSON.parse(JSON.stringify(motion_data));
}
}
/*
/ Kinesisへのデータ送信
*/
function send_data(records){
var params = {
Records: records,
StreamName: kinesisStream
};
kinesis.putRecords(params,function(err, data) {
if (!err) {
console.log("Kinesis: " + data);
} else {
console.log("Error:" + err);
document.getElementById("debug-log").value="kinesis.putRecords:" + err;
}
})
};
コードを保存したら、aws s3 syncコマンドでAmazon S3にアップロードします。
[5] 本連載で作成している「スマホフレーフレー言語応援アプリ」の全コードは、AWS Summit Tokyo 2015 デベロッパーカンファレンスの開催後（6月3日以降）に公開します。入手したい方、ご興味のある方は開催後に本連載を再度ご覧ください。
