この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
1 はじめに
こんにちは、AIソリューション部の平内（SIN）です。
Amazon Lex(以下、Lex)のクライアントは、AWS SDK for JavaScriptを利用して、簡単に作成することができます。 今回は、HTML+JavaScriptでLexクライアントを作ってみました。
最初に、動作しているようすです。
2 AWS SDK for JavaScript
AWS SDK for JavaScriptをブラウザで使用する場合、下記のようにscriptタグで利用可能です。
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.283.1.min.js"></script>後は、Cognitoで作成したプールID（後述）で初期化します。
AWS.config.region = 'us-east-1';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'us-east-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx',
});3 Lex
Lexの利用要領は、概ね以下のとおりです。
const lexruntime = new AWS.LexRuntime();
const params = {
botAlias: botAlias, // エリアス
botName: botName, // ボット名
inputText: message, // 送信するテキスト
userId: userId, // セッションのID
sessionAttributes: sessionAttributes // 属性情報
};
// テキストの送信
lexruntime.postText(params, function(err, data) {
if (err) {
//エラー
}
if (data) {
// Lexからのレスポンス
}
});4 Cognito
ブラウザでAWS SDK for JavaScriptを利用する場合、Cognitoで作成したプールIDが必要になります。この際、IDは、認証されていない場合も利用可能にしておきます。
プールIDには、下記のように、特定のボットにだけアクセスできる最低限のアクセス権を設定しました。
{
"Version": "2012-10-17",
"Statement": [
{
"Action": [
"lex:PostContent",
"lex:PostText"
],
"Effect": "Allow",
"Resource": "arn:aws:lex:us-east-1:*:bot:OrderFlowers:$LATEST"
},
{
"Effect": "Allow",
"Action": [
"mobileanalytics:PutEvents",
"cognito-sync:*"
],
"Resource": [
"*"
]
}
]
}5 HTML+JavaScript
実装したHTML（JavaScript)は、以下のとおりです。formでonsubmitが発行されたタイミングにLexに対してテキストを送信し、レスポンスをログビューに追加表示しているだけです。
<br /><script src="https://sdk.amazonaws.com/js/aws-sdk-2.283.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style language="text/css">
<p>div#logView {<br />
background-color:darkturquoise;<br />
border: 1px solid #ccc;<br />
padding: 4px;<br />
width: 400px;<br />
height: 500px;<br />
overflow: scroll;<br />
}</p>
<p>input#message {<br />
padding: 4px;<br />
font-size: 1em;<br />
width: 400px<br />
}</p>
<p>log {<br />
margin: 4px;<br />
padding: 4px;<br />
border-radius: 4px;<br />
min-width: 50%;<br />
max-width: 85%;<br />
}</p>
<p>log.req {<br />
float: left;<br />
background-color:white;<br />
}</p>
<p>log.res {<br />
text-align: right;<br />
float: right;<br />
background-color:beige;<br />
}<br />
log.err {<br />
text-align: right;<br />
float: right;<br />
color: #f77;<br />
}<br />
</style>
<script>
$('#message').focus();
AWS.config.region = 'us-east-1';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'us-east-1:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx',
});
const lexruntime = new AWS.LexRuntime();
let sessionAttributes = {};
const botAlias = '$LATEST';
const botName = 'OrderFlowers';
const userId = 'id-' + Date.now();
function postText() {
const message = $('#message').val().trim();
if(message.length > 0) {
$('#message').val('');
const params = {
botAlias: botAlias,
botName: botName,
inputText: message,
userId: userId,
sessionAttributes: sessionAttributes
};
appendLog(message, 'req');
lexruntime.postText(params, function(err, data) {
if (err) {
console.log(err, err.stack);
appendLog(err.message, 'err');
}
if (data) {
sessionAttributes = data.sessionAttributes;
appendLog(data.message, 'res');
}
});
}
return false;
}
function appendLog(message, className) {
$('<log>', { class:className, text:message }).appendTo('#logView');
$('#logView').scrollTop(self.innerHeight);
}
</script>
<center>Order Flowers</center>
<div id="logView"></div>
<form><input id="message" size="80" type="text" value="" /></form>6 最後に
今回は、AWS SDK for JavaScriptを利用して、Lexのクライアントを作成してみました。こうしてHTML+JavaScriptで作成することで、何処にでも軽易にチャットボットを配置できます。
次回は、ブラウザからマイクを初期化し、音声入力でLexを使ってみたいと思います。
弊社では、音声を利用した各種ソリューションの導入支援を行っております。お気軽にお問い合わせください。