AWSにはいろいろなサービスがあります。いままでサーバーサイドが必要であった機能の実装もAWSだけで構築できるようになりました。
サーバーサイドがあったほうがセキュリティは向上しますが、クライアントサイドだけで構築できるとかなり効率化につながりますよね。
この記事では、クライアントサイドJavaScriptだけでAWSサービス Amazon Polly を実行する方法を紹介します。
1 Amazon Cognito から IDプールを作成する
AWS Console にログインし、Amazon Cognito からIDプールの管理をクリックします。
注意事項を読み、「新しいIDプールの作成」をクリックします。
IDプール名を入力し、「認証されていないIDに対してアクセスを有効にする」にチェックを入れます。
認証されたロール（Auth_Role）と認証されていないロール（Unauth_Role）を作成しますので、「許可」をクリックします。
IDプールが作成されます。
2 AWS認証情報を取得する
プラットフォームに「JavaScript」を選択し、AWS認証情報の取得に表示されている以下の情報をメモします。この認証情報は、クライアントサイドJavaScriptのソースコードとして使用します。
AWS.config.region = 'XXXXXXXXXX'; // リージョン
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'XXXXXXXXX:YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY',
});
3 認証されていないロールにAmazon Pollyのアクセス権を許可する
さきほど作成したUnauth_Roleに、以下のアクセス権を許可します。
- AmazonPollyReadOnlyAccess
4 クライアントサイドJavaScriptおよびHTMLのコーディング
以下がコーディング例になります。Javascriptオンコーディング部分の先頭に、「2 AWS認証情報を取得する」で取得した、Cognitoから生成されたAWS認証情報を貼りつけてください。
<div id="textToSynth">
<input autofocus size="23" type="text" id="textEntry" value="こんにちは、Useful Edge ブログへようこそ"/>
<button class="btn default" onClick="speakText()" id="SynthesizeButton">音声データ生成</button>
<p id="result">テキストを入力して、「音声データ生成」ボタンをクリックしてください</p>
</div>
<audio id="audioPlayback" controls>
<source id="audioSource" type="audio/mp3" src="">
</audio>
<!\-\- (script elements go here) -->
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.657.0.min.js"></script>
<script type="text/javascript">
// Initialize the Amazon Cognito credentials provider
// Cognito から生成されたAWS認証情報を貼りつけ
// Function invoked by button click
function speakText() {
// Create the JSON parameters for getSynthesizeSpeechUrl
var speechParams = {
OutputFormat: "mp3",
SampleRate: "16000",
Text: "",
TextType: "text",
VoiceId: "Mizuki"
};
speechParams.Text = document.getElementById("textEntry").value;
// Create the Polly service object and presigner object
var polly = new AWS.Polly({apiVersion: '2016-06-10'});
var signer = new AWS.Polly.Presigner(speechParams, polly)
// Create presigned URL of synthesized speech file
signer.getSynthesizeSpeechUrl(speechParams, function(error, url) {
if (error) {
document.getElementById('result').innerHTML = error;
} else {
document.getElementById('audioSource').src = url;
document.getElementById('audioPlayback').load();
document.getElementById('result').innerHTML = "再生可能になりました";
document.getElementById("SynthesizeButton").disabled = true;
}
});
}
</script>
5 懸念事項
この記事の実装方法では、ウェブページのドメインを制限する機能がありません。そのため、安易に公開すると、AWSサービスをタダ乗りされてしまう可能性があります。
ユーザープールを作成してドメインを制限することができるようですので、こちらで実装確認ができたらブログで公開したいと思います。
コメント