#はじめに
・タイトル通りですが、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の権限あたりがあやしいかもしれない。