#はじめに
・タイトル通りですが、S3に格納されているテキストデータを読み込み、JavaScriptでブラウザに表示させる方法です。
S3とhtmlをつなぐ
・AWS SDK for JavaScriptというAPIを使用してs3から情報を取得します。
・これを使用するためにAmazon Cognito アイデンティティプールIDが必要なので、下記公式ドキュメントを参考に事前に作成します。
Amazon Cognito アイデンティティを使用してユーザーを認証する
コードはこんな感じになります。
index.html
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.991.0.min.js"></script>
<script>
var albumBucketName = '******'; //S3のbucket名
AWS.config.region = 'ap-northeast-1';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: '******', //事前に作成したAmazon CognitoのID
});
// Create a new service object
var s3 = new AWS.S3({
apiVersion: '2006-03-01',
params: {Bucket: albumBucketName}
});
</script>
これでSDKが使えるようになりました！
##バケット内の特定のファイルの中身を取得しブラウザ表示
file_nameの部分に「S3内に置いているファイル名」を定義してファイルの中身を取得します。
今回のファイルの中身は、「LINEから送られてきた情報が入っている」と想定しています。
具体的には、下記のようになっているとします。
test.txt
テキスト内容**=**ユーザー名**=**ユーザーアイコンURL
ちなみに今回はこれ(**=**)を区切り文字とします。イビツですが。
この情報を受け取り、ブラウザ表示させるまでの方法を書いていきます。
index.html
<div class="text_contents text_container"></div>
<template id="new_text_template">
<div class="text_content">
<div class="faceicon">
<img src="">
</div>
<p class="new_text text"></p>
</div>
</template>
<script>
// 1. albumBucketName内のfile_nameにあるテキストを取得
function S3_getObject(bucket, key) {
return new Promise( (resolve, reject) => {
// getObject関数で必要なファイルの中身を取得！！！！！
s3.getObject(
{Bucket: albumBucketName, Key: file_name },
(err, response) => {
if(err) { reject(err); }
else { resolve(response); }
}
);
});
}
// 2. ブラウザに表示
// テキストデータには「LINEから送信された内容」「ユーザー名」「ユーザーアイコンURL」が入っており、それを表示させるという目的だったので、それらをテンプレートにいれて表示させていきます。
// テキスト内の**=**を区切り文字として活用します。
function displayNewText(text) {
let $text_template = $("#new_text_template").html();
let text_device = text.split('**=**');
$('.text_contents').append($text_template);
let $target_text = $('div .text_content:last');
let word = text_device[0]; //LINEメッセージの内容
let name = text_device[1]; //ユーザー名
let new_pic_url = text_device[2]; //ユーザーアイコンURL
$target_text.find('.new_text').text(word + name);
$target_text.find('img').attr('src', new_pic_url);
}
(async ()=> {
// ①S3_getObjectでalbumBucketName内のfile_nameにあるテキストを取得します。
let response = await S3_getObject(albumBucketName, file_name);
// ②テキストの内容をutf-8にします
let text = response.Body.toString("utf-8");
// ③ブラウザに表示します！
displayNewText(text);
})()
</script>
S3からオブジェクトを取得し、テキストの内容をutf-8に変換し、ブラウザに表示する一連の流れになります。
詳しい内容はインラインで記載しています。
ちなみに、テキスト内容をutf-8にする際に参考にした記事は[こちら] (https://kz-works.blogspot.com/2018/05/aws-s3-get-object-body.html)。
まとめ
・これで、S3に格納されているテキストデータを読み込みブラウザに表示されるはず、、！
・表示されなかったらAWSの権限あたりがあやしいかもしれない。