AWS SDK for JavaScript v2 はサポート終了となりました。[AWS SDK for JavaScript v3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/) に移行することをお勧めします。その他の詳細、移行方法については、こちらの[発表内容](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/)を参照してください。

# ブラウザからの Amazon S3 バケット内の写真の表示
<a name="s3-example-photos-view"></a>

![\[JavaScript code example that applies to browser execution\]](http://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/images/browsericon.png)

**このブラウザスクリプトコード例では以下を示します。**
+ Amazon Simple Storage Service (Amazon S3) バケットにフォトアルバムを作成し、認証されていないユーザーに写真の表示を許可する方法。

## シナリオ
<a name="s3-example-photos-view-scenario"></a>

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

![\[フォトアルバムに Amazon S3 バケットを使用したブラウザスクリプト内の JavaScript。\]](http://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/images/s3-photo-album-example.png)


ブラウザスクリプトは、SDK for JavaScript を使用して Amazon S3 バケットと連携します。このスクリプトは、Amazon S3 クライアントクラスの [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#listObjects-property) メソッドを使用して、フォトアルバムを表示できるようにします。

## 前提条件タスク
<a name="s3-example-photos-view-scenario-prerequisites"></a>

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

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

### バケットを作成する
<a name="s3-example-photos-view-prereq-bucket"></a>

[Amazon S3 コンソール](https://console.aws.amazon.com/s3/)で、アルバムと写真を保存できる Amazon S3 バケットを作成します。コンソールを使用して S3 バケットを作成する方法の詳細については、*Amazon Simple Storage Service ユーザーガイド*の「[バケットの作成](https://docs.aws.amazon.com/AmazonS3/latest/userguide/create-bucket.html)」を参照してください。

S3 バケットを作成したら、必ず以下の操作を行います。
+ バケット名をメモして、後続の前提条件タスク「ロールのアクセス許可を設定する」で使用できるようにします。
+ バケットを作成する AWS リージョンを選択します。これは、後続の前提条件タスク「アイデンティティプールを作成する」で Amazon Cognito アイデンティティプールの作成に使用するリージョンと同じリージョンであることが必要です。
+ バケットのアクセス許可を設定するには、「Amazon Simple Storage Service ユーザーガイド」の「[ウェブサイトアクセスのアクセス許可の設定](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html)」を参照してください。**

### アイデンティティプールの作成
<a name="s3-example-photos-view-prereq-idpool"></a>

「ブラウザスクリプトの使用開始」トピックの「[ステップ 1: Amazon Cognito アイデンティティプールを作成](getting-started-browser.md#getting-started-browser-create-identity-pool)」で説明されているように、[Amazon Cognito コンソール](https://console.aws.amazon.com/cognito/)で、Amazon Cognito アイデンティティプールを作成します。**

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

### ロールのアクセス許可を設定する
<a name="s3-example-photos-view-prereq-perms"></a>

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

1. [[IAM コンソール]](https://console.aws.amazon.com/iam/) を開きます。

1. 左側のナビゲーションペインで [**ポリシー**] を選択してから、[**ポリシーの作成**] ボタンを選択します。

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

------
#### [ JSON ]

****  

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

------

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

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

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

通常、このタスクのワークフローは*ブラウザスクリプトの使用開始*トピックの [ステップ 2: 作成した IAM ロールにポリシーを追加](getting-started-browser.md#getting-started-browser-iam-role) と同じですが、注意すべきいくつかの違いがあります。
+ Amazon Polly のポリシーではなく、先ほど作成した新しいポリシーを使用します。
+ **許可を添付**ページで新しいポリシーをすばやく見つけるには、[**Filter policies**] (ポリシーのファイル処理) リストを開き、[**Customer managed**] (カスタマー管理) を選択します。

IAM ロールの作成の詳細については、*IAM ユーザーガイド*の[AWS のサービスに許可を委任するロールの作成](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html)を参照してください。

### CORS を設定する
<a name="s3-example-photos-view-cors-configuration"></a>

ブラウザスクリプトが Amazon S3 バケットにアクセスする前に、以下のように [CORS 設定](cors.md#configuring-cors-s3-bucket)を設定する必要があります。

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

------
#### [ JSON ]

```
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ]
    }
]
```

------
#### [ XML ]

```
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
```

------

### アルバムを作成して写真をアップロードする
<a name="s3-example-photos-view-create-albums"></a>

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

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

1. [Amazon S3 コンソール](https://console.aws.amazon.com/s3/)で、先ほど作成したバケットを開きます。

1. [**Overview**] (概要) タブで、[**フォルダの作成**] ボタンを選択してフォルダを作成します。この例では、フォルダに「album1」、「album2」、「album3」という名前を付けます。

1. [**album1**] で、次に [**album2**] で、フォルダを選択し、以下のように写真をアップロードします。

   1. [**Upload**] (アップロード) ボタンを選択します。

   1. 使用する写真ファイルをドラッグまたは選択してから、[**Next**] (次へ) を選択します。

   1. [**Manage public permissions**] (パブリックアクセス許可の管理) で、[**Grant public read access to this object(s)**] (このオブジェクトに対するパブリック読み取りアクセス許可を付与) を選択します。

   1. 左下隅にある [**アップロード**] ボタンを選択します。

1. [**album3**] は空のままにします。

## ウェブページの定義
<a name="s3-example-photos-view-html"></a>

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

この例では、そのファイルは `PhotoViewer.js` という名前で、HTML ファイルと同じフォルダにあります。最新の SDK\$1VERSION\$1NUMBER を確認するには、[AWS SDK for JavaScriptAPI リファレンスガイド](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/)で 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 の設定
<a name="s3-example-photos-view-config"></a>

`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`

## バケット内のアルバムの一覧表示
<a name="s3-example-photos-view-list-albums"></a>

バケット内の既存のアルバムをすべて一覧表示するために、アプリケーションの `listAlbums` 関数が `listObjects` サービスオブジェクトの `AWS.S3` メソッドを呼び出します。この関数は `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);
    }
  });
}
```

## アルバムの表示
<a name="s3-example-photos-view-viewing-album"></a>

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

関数の残りの部分は、アルバム内のオブジェクトのリストを取得し、ウェブページに写真を表示するために必要な 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;");
  });
}
```