シナリオ前提条件タスクウェブページの定義 SDK の設定バケット内のアルバムの一覧表示アルバムの表示

ブラウザからの Amazon S3 バケット内の写真の表示

JavaScript code example that applies to browser execution

このブラウザスクリプトコード例では以下を示します。

Amazon Simple Storage Service (Amazon S3) バケットにフォトアルバムを作成し、認証されていないユーザーに写真の表示を許可する方法。

シナリオ

この例では、シンプルな HTML ページにより、フォトアルバム内の写真を表示するブラウザベースのアプリケーションを提供しています。フォトアルバムは、写真がアップロードされる Amazon S3 バケットにあります。

フォトアルバムに Amazon S3 バケットを使用したブラウザスクリプト内の JavaScript。

ブラウザスクリプトは、SDK for JavaScript を使用して Amazon S3 バケットと連携します。このスクリプトは、Amazon S3 クライアントクラスの listObjects メソッドを使用して、フォトアルバムを表示できるようにします。

前提条件タスク

この例をセットアップして実行するには、まず次のタスクを完了します。

注記

この例では、Amazon S3 バケットと Amazon Cognito アイデンティティプールの両方に同じ AWS リージョンを使用する必要があります。

Amazon S3 コンソールで、アルバムと写真を保存できる Amazon S3 バケットを作成します。コンソールを使用して S3 バケットを作成する方法の詳細については、Amazon Simple Storage Service ユーザーガイドの「バケットの作成」を参照してください。

S3 バケットを作成したら、必ず以下の操作を行います。

バケット名をメモして、後続の前提条件タスク「ロールのアクセス許可を設定する」で使用できるようにします。
バケットを作成する AWS リージョンを選択します。これは、後続の前提条件タスク「アイデンティティプールを作成する」で Amazon Cognito アイデンティティプールの作成に使用するリージョンと同じリージョンであることが必要です。
バケットのアクセス許可を設定するには、「Amazon Simple Storage Service ユーザーガイド」の「ウェブサイトアクセスのアクセス許可の設定」を参照してください。

「ブラウザスクリプトの使用開始」トピックの「ステップ 1: Amazon Cognito アイデンティティプールを作成」で説明されているように、Amazon Cognito コンソールで、Amazon Cognito アイデンティティプールを作成します。

アイデンティティプールを作成する際に、アイデンティティプール名と、認証されていないアイデンティティのロール名をメモします。

アルバムと写真の表示を許可するには、先ほど作成したアイデンティティプールの IAM ロールに許可を追加する必要があります。以下のようにポリシーを作成することから始めます。

[IAM コンソール] を開きます。
左側のナビゲーションペインで [ポリシー] を選択してから、[ポリシーの作成] ボタンを選択します。

[JSON] タブで、以下の JSON 定義を入力しますが、BUCKET_NAME はバケットの名前に置き換えます。


{
   "Version": "2012-10-17",
   "Statement": [
      {
         "Effect": "Allow",
         "Action": [
            "s3:ListBucket"
         ],
         "Resource": [
            "arn:aws:s3:::BUCKET_NAME"
         ]
      }
   ]
}

[ポリシーの確認] ボタンを選択し、ポリシーに名前を付けて、説明を入力したら (必要に応じて)、[ポリシーの作成] ボタンを選択します。

名前をメモして、後で見つけて IAM ロールにアタッチできるようにします。

ポリシーが作成されたら、IAM コンソールに戻ります。先ほどの前提条件タスク「アイデンティティプールを作成する」で Amazon Cognito によって作成された認証されていないアイデンティティの IAM ロールを見つけます。先ほど作成したポリシーを使用して、このアイデンティティにアクセス許可を追加します。

通常、このタスクのワークフローはブラウザスクリプトの使用開始トピックのステップ 2: 作成した IAM ロールにポリシーを追加と同じですが、注意すべきいくつかの違いがあります。

Amazon Polly のポリシーではなく、先ほど作成した新しいポリシーを使用します。
許可を添付ページで新しいポリシーをすばやく見つけるには、[Filter policies] (ポリシーのファイル処理) リストを開き、[Customer managed] (カスタマー管理) を選択します。

IAM ロールの作成の詳細については、IAM ユーザーガイドのAWS のサービスに許可を委任するロールの作成を参照してください。

ブラウザスクリプトが Amazon S3 バケットにアクセスする前に、以下のように CORS 設定を設定する必要があります。

重要

新しい S3 コンソールでは、CORS 設定は JSON である必要があります。

この例では、ユーザーはバケット内の既存の写真の表示しか許可されないため、バケットにアルバムをいくつか作成してそれらに写真をアップロードしておく必要があります。

注記

この例では、写真ファイルのファイル名は 1 つのアンダースコア (_) で始まる必要があります。この文字は後でフィルター処理に重要になります。また、写真の所有者の著作権を尊重してください。

Amazon S3 コンソールで、先ほど作成したバケットを開きます。
[Overview] (概要) タブで、[フォルダの作成] ボタンを選択してフォルダを作成します。この例では、フォルダに「album1」、「album2」、「album3」という名前を付けます。
[album1] で、次に [album2] で、フォルダを選択し、以下のように写真をアップロードします。
1. [Upload] (アップロード) ボタンを選択します。
2. 使用する写真ファイルをドラッグまたは選択してから、[Next] (次へ) を選択します。
3. [Manage public permissions] (パブリックアクセス許可の管理) で、[Grant public read access to this object(s)] (このオブジェクトに対するパブリック読み取りアクセス許可を付与) を選択します。
4. 左下隅にある [アップロード] ボタンを選択します。
[album3] は空のままにします。

ウェブページの定義

写真表示アプリケーションの HTML は <div> 要素で構成されており、その中でブラウザスクリプトが表示インターフェイスを作成します。最初の <script> 要素は SDK をブラウザスクリプトに追加します。2 番目の <script> 要素はブラウザのスクリプトコードを保持する外部 JavaScript ファイルを追加します。

この例では、そのファイルは PhotoViewer.js という名前で、HTML ファイルと同じフォルダにあります。最新の SDK_VERSION_NUMBER を確認するには、AWS SDK for JavaScriptAPI リファレンスガイドで SDK for JavaScript の API リファレンスを参照してください。


<!DOCTYPE html>
<html>
  <head>
    <!-- **DO THIS**: -->
    <!--   Replace SDK_VERSION_NUMBER with the current SDK version number -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-SDK_VERSION_NUMBER.js"></script>
    <script src="./PhotoViewer.js"></script>
    <script>listAlbums();</script>
  </head>
  <body>
    <h1>Photo Album Viewer</h1>
    <div id="viewer" />
  </body>
</html>

SDK の設定

CognitoIdentityCredentials メソッドを呼び出して、SDK を設定するために必要な認証情報を取得します。Amazon Cognito アイデンティティプール ID を提供する必要があります。その後、AWS.S3 サービスオブジェクトを作成します。


// **DO THIS**:
//   Replace BUCKET_NAME with the bucket name.
//
var albumBucketName = "BUCKET_NAME";

// **DO THIS**:
//   Replace this block of code with the sample code located at:
//   Cognito -- Manage Identity Pools -- [identity_pool_name] -- Sample Code -- JavaScript
//
// Initialize the Amazon Cognito credentials provider
AWS.config.region = "REGION"; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
  IdentityPoolId: "IDENTITY_POOL_ID",
});

// Create a new service object
var s3 = new AWS.S3({
  apiVersion: "2006-03-01",
  params: { Bucket: albumBucketName },
});

// A utility function to create HTML.
function getHtml(template) {
  return template.join("\n");
}

この例の残りのコードは、バケット内のアルバムと写真に関する情報を収集して表示するための以下の関数を定義します。

listAlbums
viewAlbum

バケット内のアルバムの一覧表示

バケット内の既存のアルバムをすべて一覧表示するために、アプリケーションの listAlbums 関数が AWS.S3 サービスオブジェクトの listObjects メソッドを呼び出します。この関数は CommonPrefixes プロパティを使用しているため、呼び出されると、アルバムとして使用されているオブジェクト (つまりフォルダ) のみを返します。

関数の残りの部分は、Amazon S3 バケットからアルバムのリストを取得し、ウェブページにアルバムのリストを表示するために必要な HTML を生成します。


// List the photo albums that exist in the bucket.
function listAlbums() {
  s3.listObjects({ Delimiter: "/" }, function (err, data) {
    if (err) {
      return alert("There was an error listing your albums: " + err.message);
    } else {
      var albums = data.CommonPrefixes.map(function (commonPrefix) {
        var prefix = commonPrefix.Prefix;
        var albumName = decodeURIComponent(prefix.replace("/", ""));
        return getHtml([
          "<li>",
          '<button style="margin:5px;" onclick="viewAlbum(\'' +
            albumName +
            "')\">",
          albumName,
          "</button>",
          "</li>",
        ]);
      });
      var message = albums.length
        ? getHtml(["<p>Click on an album name to view it.</p>"])
        : "<p>You do not have any albums. Please Create album.";
      var htmlTemplate = [
        "<h2>Albums</h2>",
        message,
        "<ul>",
        getHtml(albums),
        "</ul>",
      ];
      document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
    }
  });
}

アルバムの表示

Amazon S3 バケット内のアルバムの内容を表示するために、アプリケーションの viewAlbum 関数は、アルバム名を取得して、そのアルバムの Amazon S3 キーを作成します。この関数は、AWS.S3 サービスオブジェクトの listObjects メソッドを呼び出して、アルバム内のすべてのオブジェクト (写真) のリストを取得します。

関数の残りの部分は、アルバム内のオブジェクトのリストを取得し、ウェブページに写真を表示するために必要な HTML を生成します。


// Show the photos that exist in an album.
function viewAlbum(albumName) {
  var albumPhotosKey = encodeURIComponent(albumName) + "/";
  s3.listObjects({ Prefix: albumPhotosKey }, function (err, data) {
    if (err) {
      return alert("There was an error viewing your album: " + err.message);
    }
    // 'this' references the AWS.Request instance that represents the response
    var href = this.request.httpRequest.endpoint.href;
    var bucketUrl = href + albumBucketName + "/";

    var photos = data.Contents.map(function (photo) {
      var photoKey = photo.Key;
      var photoUrl = bucketUrl + encodeURIComponent(photoKey);
      return getHtml([
        "<span>",
        "<div>",
        "<br/>",
        '<img style="width:128px;height:128px;" src="' + photoUrl + '"/>',
        "</div>",
        "<div>",
        "<span>",
        photoKey.replace(albumPhotosKey, ""),
        "</span>",
        "</div>",
        "</span>",
      ]);
    });
    var message = photos.length
      ? "<p>The following photos are present.</p>"
      : "<p>There are no photos in this album.</p>";
    var htmlTemplate = [
      "<div>",
      '<button onclick="listAlbums()">',
      "Back To Albums",
      "</button>",
      "</div>",
      "<h2>",
      "Album: " + albumName,
      "</h2>",
      message,
      "<div>",
      getHtml(photos),
      "</div>",
      "<h2>",
      "End of Album: " + albumName,
      "</h2>",
      "<div>",
      '<button onclick="listAlbums()">',
      "Back To Albums",
      "</button>",
      "</div>",
    ];
    document.getElementById("viewer").innerHTML = getHtml(htmlTemplate);
    document
      .getElementsByTagName("img")[0]
      .setAttribute("style", "display:none;");
  });
}

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

Amazon S3 ブラウザの例

Amazon S3 バケット内の写真の表示: 完全なコード