翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# Amazon Simple Storage Service とコンポーネントおよびオートメーションの操作
<a name="automations-s3"></a>

App Studio アプリからさまざまな Amazon S3 オペレーションを呼び出すことができます。たとえば、シンプルな管理パネルを作成して、ユーザーと注文を管理し、Amazon S3 からメディアを表示できます。Invoke アクションを使用して任意の Amazon S3 **オペレーションを呼び出す AWS**ことができますが、Amazon S3 バケットとオブジェクトで一般的なオペレーションを実行するために、アプリのオートメーションに追加できる専用の Amazon S3 アクションが 4 つあります。4 つのアクションとそのオペレーションは次のとおりです。
+ **Put Object**: `Amazon S3 PutObject`オペレーションを使用して、Amazon S3 バケットにオブジェクトを追加します。
+ **オブジェクトの取得**: `Amazon S3 GetObject`オペレーションを使用して Amazon S3 バケットからオブジェクトを取得します。
+ **オブジェクトの一覧表示**: `Amazon S3 ListObjects`オペレーションを使用して、Amazon S3 バケット内のオブジェクトを一覧表示します。
+ **オブジェクトの削除**: `Amazon S3 DeleteObject`オペレーションを使用して、Amazon S3 バケットからオブジェクトを削除します。

アクションに加えて、アプリケーションのページに追加できる **S3 アップロード**コンポーネントがあります。ユーザーは、このコンポーネントを使用してアップロードするファイルを選択できます。コンポーネントは `Amazon S3 PutObject` を呼び出して、設定されたバケットとフォルダにファイルをアップロードします。このチュートリアルでは、スタンドアロンの **Put Object** オートメーションアクションの代わりにこのコンポーネントを使用します。(スタンドアロンアクションは、アップロード前またはアップロード後に実行する追加のロジックまたはアクションを含む、より複雑なシナリオで使用する必要があります）。

## 前提条件
<a name="automations-s3-prerequisites"></a>

このガイドでは、次の前提条件を満たしていることを前提としています。

1. Amazon S3 を App Studio と正常に統合するために、Amazon S3 バケット、IAM ロールとポリシー、Amazon S3 コネクタを作成および設定しました。コネクタを作成するには、管理者ロールが必要です。詳細については、「[Amazon Simple Storage Service (Amazon S3) に接続する](connectors-s3.md)」を参照してください。

## 空のアプリケーションを作成する
<a name="automations-s3-create-app"></a>

以下のステップを実行して、このガイド全体で使用する空のアプリケーションを作成します。

**空のアプリケーションを作成するには**

1. ナビゲーションペインで、**アプリケーション**を選択します。

1. \+ **アプリの作成**を選択します。

1. **アプリの作成**ダイアログボックスで、アプリケーションに名前を付け、**最初から開始**を選択し、**次へ**を選択します。

1. **既存のデータに接続**ダイアログボックスで、**スキップ**を選択してアプリケーションを作成します。

1. 新しい**アプリケーションのキャンバスに移動するアプリの編集**を選択します。ここでは、コンポーネント、オートメーション、データを使用して、アプリケーションのルックと機能を設定できます。

## ページの作成
<a name="automations-s3-create-pages"></a>

アプリケーションに 3 つのページを作成して、情報を収集または表示します。

**ページを作成するには**

1. 必要に応じて、キャンバスの上部にある**ページ**タブを選択します。

1. 左側のナビゲーションには、アプリで作成されたページが 1 つあります。**\+ 追加**を 2 回選択して、さらに 2 つのページを作成します。ナビゲーションペインには合計 3 ページが表示されます。

1. 次の手順を実行して、**Page1** ページの名前を更新します。

   1. 楕円アイコンを選択し、**ページプロパティ**を選択します。

   1. 右側の**プロパティ**メニューで、鉛筆アイコンを選択して名前を編集します。

   1. **FileList** を入力して **Enter** を押します。

1. 前のステップを繰り返して、2 ページ目と 3 ページ目を次のように更新します。
   + **Page2** の名前を に変更します**UploadFile**。
   + **Page3** の名前を に変更します**FailUpload**。

これで、アプリには **FileList**、**UploadFile**、**FailUpload** という 3 つのページがあり、左側の **Pages** パネルに表示されます。

次に、Amazon S3 とやり取りするオートメーションを作成して設定します。

## オートメーションの作成と設定
<a name="automations-s3-automations"></a>

Amazon S3 とやり取りするアプリケーションの自動化を作成します。次の手順を使用して、次のオートメーションを作成します。
+ Amazon S3 バケット内のオブジェクトを一覧表示する **getFiles** オートメーション。テーブルコンポーネントを埋めるために使用されます。
+ Amazon S3 バケットからオブジェクトを削除する **deleteFile** オートメーション。テーブルコンポーネントに削除ボタンを追加するために使用されます。
+ Amazon S3 バケットからオブジェクトを取得して表示する **viewFile** オートメーション。テーブルコンポーネントから選択された 1 つのオブジェクトに関する詳細を表示するために使用されます。

### `getFiles` オートメーションを作成する
<a name="automations-s3-get-files"></a>

指定された Amazon S3 バケット内のファイルを一覧表示するオートメーションを作成します。

1. キャンバスの上部にある**オートメーション**タブを選択します。

1. **「」と「オートメーションの追加**」を選択します。

1. 右側のパネルで、**プロパティ**を選択します。

1. 鉛筆アイコンを選択してオートメーション名を更新します。**getFiles** を入力して **Enter** を押します。

1. 次の手順を実行して、**オブジェクトのリスト**アクションを追加します。

   1. 右側のパネルで、**アクション**を選択します。

   1. オブジェクト**のリスト**を選択してアクションを追加します。アクションには という名前を付ける必要があります`ListObjects1`。

1. 次の手順を実行して、 アクションを設定します。

   1. キャンバスからアクションを選択して、右側の**プロパティ**メニューを開きます。

   1. **Connector** では、前提条件から作成した Amazon S3 コネクタを選択します。

   1. **設定** には、次のテキストを入力し、{{bucket\_name}} を前提条件で作成したバケットに置き換えます。

      ```
      {
        "Bucket": "{{bucket_name}}",
        "Prefix": ""
      }
      ```
**注記**  
`Prefix` フィールドを使用して、指定された文字列で始まるオブジェクトにレスポンスを制限できます。

1. この自動化の出力は、Amazon S3 バケットのオブジェクトをテーブルコンポーネントに入力するために使用されます。ただし、デフォルトでは、オートメーションは出力を作成しません。次の手順を実行して、オートメーション出力を作成するようにオートメーションを設定します。

   1. 左側のナビゲーションで、**getFiles** オートメーションを選択します。

   1. 右側の**プロパティ**メニューの **Automation 出力**で、**\+ Add output** を選択します。

   1. Output には****、 と入力します**{{results.ListObjects1.Contents}}**。この式は アクションの内容を返し、テーブルコンポーネントの入力に使用できるようになりました。

### `deleteFile` オートメーションを作成する
<a name="automations-s3-delete-file"></a>

指定された Amazon S3 バケットからオブジェクトを削除するオートメーションを作成します。

1. 左側の **Automations** パネルで、 **\+ 追加** を選択します。

1. **「\+ オートメーションの追加**」を選択します。

1. 右側のパネルで、**プロパティ**を選択します。

1. 鉛筆アイコンを選択してオートメーション名を更新します。**deleteFile** を入力して **Enter** を押します。

1. 以下のステップを実行して、オートメーションにデータを渡すために使用されるオートメーションパラメータを追加します。

   1. 右側の **Properties** メニューの **Automation パラメータ**で \+ **Add** を選択します。

   1. 鉛筆アイコンを選択して、オートメーションパラメータを編集します。パラメータ名を に更新**fileName**し、**Enter **キーを押します。

1. 次の手順を実行して、**オブジェクトの削除**アクションを追加します。

   1. 右側のパネルで、**アクション**を選択します。

   1. **オブジェクトの削除**を選択してアクションを追加します。アクションには という名前を付ける必要があります`DeleteObject1`。

1. 次の手順を実行して、 アクションを設定します。

   1. キャンバスからアクションを選択して、右側の**プロパティ**メニューを開きます。

   1. **Connector** では、前提条件から作成した Amazon S3 コネクタを選択します。

   1. **設定** には、次のテキストを入力し、{{bucket\_name}} を前提条件で作成したバケットに置き換えます。

      ```
      {
        "Bucket": "{{bucket_name}}",
        "Key": params.fileName
      }
      ```

### `viewFile` オートメーションを作成する
<a name="automations-s3-view-file"></a>

指定された Amazon S3 バケットから単一のオブジェクトを取得するオートメーションを作成します。後で、この自動化をファイルビューワーコンポーネントで設定して、オブジェクトを表示します。

1. 左側の **Automations** パネルで、 **\+ 追加** を選択します。

1. **「」＋「オートメーションの追加**」を選択します。

1. 右側のパネルで、**プロパティ**を選択します。

1. 鉛筆アイコンを選択してオートメーション名を更新します。**viewFile** を入力して **Enter** を押します。

1. 以下のステップを実行して、オートメーションにデータを渡すために使用されるオートメーションパラメータを追加します。

   1. 右側の **Properties** メニューの **Automation パラメータ**で \+ **Add** を選択します。

   1. 鉛筆アイコンを選択して、オートメーションパラメータを編集します。パラメータ名を に更新**fileName**し、**Enter **キーを押します。

1. 次の手順を実行して、**オブジェクトの取得**アクションを追加します。

   1. 右側のパネルで、**アクション**を選択します。

   1. **オブジェクトの取得** を選択してアクションを追加します。アクションには という名前を付ける必要があります`GetObject1`。

1. 次の手順を実行して、 アクションを設定します。

   1. キャンバスからアクションを選択して、右側の**プロパティ**メニューを開きます。

   1. **Connector** では、前提条件から作成した Amazon S3 コネクタを選択します。

   1. **設定** に次のテキストを入力し、{{bucket\_name}} を前提条件で作成したバケットに置き換えます。

      ```
      {
        "Bucket": "{{bucket_name}}",
        "Key": params.fileName
      }
      ```

1. デフォルトでは、オートメーションは出力を作成しません。次の手順を実行して、オートメーション出力を作成するようにオートメーションを設定します。

   1. 左側のナビゲーションで、**viewFile** オートメーションを選択します。

   1. 右側の **Properties** メニューの **Automation 出力**で \+ **Add output** を選択します。

   1. Output には****、 と入力します**{{results.GetObject1.Body.transformToWebStream()}}**。この式は、 アクションの内容を返します。
**注記**  
のレスポンスは`S3 GetObject`、次の方法で読み取ることができます。  
`transformToWebStream`: データを取得するために消費する必要があるストリームを返します。自動化出力として使用すると、自動化によって処理され、出力はイメージまたは PDF ビューワーコンポーネントのデータソースとして使用できます。また、 などの別のオペレーションへの入力としても使用できます`S3 PutObject`。
`transformToString`: オートメーションの raw データを返します。ファイルに JSON データなどのテキストコンテンツが含まれている場合は、JavaScript アクションで使用する必要があります。次の例のように、待機している必要があります。 `await results.GetObject1.Body.transformToString();`
`transformToByteArray`: 8 ビットの符号なし整数の配列を返します。このレスポンスは、バイナリデータのストレージと操作を可能にするバイト配列の目的を果たします。次の例のように、待機している必要があります。 `await results.GetObject1.Body.transformToByteArray();`

次に、前に作成したページにコンポーネントを追加し、ユーザーがアプリを使用してファイルを表示および削除できるようにオートメーションでコンポーネントを設定します。

## ページコンポーネントの追加と設定
<a name="automations-s3-components"></a>

アプリケーションのビジネスロジックと機能を定義するオートメーションを作成したら、コンポーネントを作成し、両方を接続します。

### **FileList** ページにコンポーネントを追加する
<a name="automations-s3-components-filelist-page"></a>

前に作成した **FileList** ページは、設定された Amazon S3 バケット内のファイルのリストと、リストから選択されたファイルの詳細を表示するために使用されます。そのためには、以下を実行します。

1. ファイルのリストを表示するテーブルコンポーネントを作成します。テーブルの行を、以前に作成した **getFiles** オートメーションの出力で埋めるように設定します。

1. PDF ビューワーコンポーネントを作成して、1 つの PDF を表示します。バケットからファイルを取得するために以前に作成した **viewFile** オートメーションを使用して、テーブルから選択されたファイルを表示するようにコンポーネントを設定します。

****FileList** ページにコンポーネントを追加するには**

1. キャンバスの上部にある**ページ**タブを選択します。

1. 左側の**ページ**パネルで、**FileList** ページを選択します。

1. 右側の**コンポーネント**ページで、**テーブル**コンポーネントを見つけ、キャンバスの中央までドラッグします。

1. ページに追加したテーブルコンポーネントを選択します。

1. 右側の**プロパティ**メニューで、**ソース**ドロップダウンを選択し、**オートメーション**を選択します。

1. **自動化**ドロップダウンを選択し、**getFiles** 自動化を選択します。このテーブルは、**getFiles** オートメーションの出力をコンテンツとして使用します。

1. ファイルの名前で埋める列を追加します。

   1. 右側の**プロパティ**メニューで、**列**の横にある **\+ 追加**を選択します。

   1. 追加した **Column1** 列の右側にある矢印アイコンを選択します。

   1. **列ラベル**で、列の名前を に変更します**Filename**。

   1. **[Value]** (値) に「**{{currentRow.Key}}**」と入力します。

   1. パネルの上部にある矢印アイコンを選択して、メインの**プロパティ**パネルに戻ります。

1. テーブルアクションを追加して、行内のファイルを削除します。

   1. 右側の**プロパティ**メニューで、**アクション**の横にある **\+ 追加**を選択します。

   1. **アクション**で、**ボタン**の名前を に変更します**Delete**。

   1. 先ほど名前を変更した**削除**アクションの右側にある矢印アイコンを選択します。

   1. **クリック時に** \+ **アクションを追加** を選択し、**オートメーションを呼び出す **を選択します。

   1. 追加したアクションを選択して設定します。

   1. **[アクション名]** に「**DeleteRecord**」と入力します。

   1. **オートメーションを呼び出す**で、 を選択します**deleteFile**。

   1. パラメータテキストボックスに、 と入力します**{{currentRow.Key}}**。

   1. **[Value]** (値) に「**{{currentRow.Key}}**」と入力します。

1. 右側のパネルで、**コンポーネント**を選択してコンポーネントメニューを表示します。ファイルを表示するには、次の 2 つの選択肢があります。
   + `.png`、、`.jpeg`または `.jpg`拡張子を持つファイルを表示する**イメージビューワー**。
   + PDF ファイルを表示する PDF **ビューワー**コンポーネント。

   このチュートリアルでは、**PDF ビューワー**コンポーネントを追加および設定します。

1. **PDF ビューワー**コンポーネントを追加します。

   1. 右側の**コンポーネント**ページで、**PDF ビューワー**コンポーネントを見つけ、テーブルコンポーネントの下のキャンバスにドラッグします。

   1. 追加した **PDF ビューワー**コンポーネントを選択します。

   1. 右側の**プロパティ**メニューで、**ソース**ドロップダウンを選択し、**オートメーション**を選択します。

   1. **自動化**ドロップダウンを選択し、**viewFile** 自動化を選択します。テーブルは、**viewFile** オートメーションの出力をコンテンツとして使用します。

   1. パラメータテキストボックスに、 と入力します**{{ui.table1.selectedRow["Filename"]}}**。

   1. 右側のパネルには、**ファイル名**フィールドもあります。このフィールドの値は、PDF ビューワーコンポーネントのヘッダーとして使用されます。前のステップと同じテキストを入力します: **{{ui.table1.selectedRow["Filename"]}}**。

### **UploadFile** ページにコンポーネントを追加する
<a name="automations-s3-components-uploadfile-page"></a>

**UploadFile** ページには、設定された Amazon S3 バケットへのファイルの選択とアップロードに使用できるファイルセレクタが含まれています。**S3 アップロード**コンポーネントをページに追加します。ユーザーはこれを使用してファイルを選択してアップロードできます。

1. 左側の**ページ**パネルで、**UploadFile** ページを選択します。

1. 右側の**コンポーネント**ページで、**S3 アップロード**コンポーネントを見つけ、キャンバスの中央までドラッグします。

1. ページに追加した S3 アップロードコンポーネントを選択します。

1. 右側の**プロパティ**メニューで、コンポーネントを設定します。

   1. **Connector** ドロップダウンで、前提条件で作成された Amazon S3 コネクタを選択します。

   1. **バケット**には、Amazon S3 バケットの名前を入力します。

   1. **[ファイル名]** に **{{ui.s3Upload1.files[0]?.nameWithExtension}}** と入力します。

   1. **最大ファイルサイズ**については、テキストボックス**5**に を入力し、ドロップダウンで **MB** が選択されていることを確認します。

   1. **トリガー**セクションで、次の手順を実行して、アップロードが成功または失敗した後に実行されるアクションを追加します。

      アップロードが成功した後に実行されるアクションを追加するには:

      1. **成功したら**、 **\+ アクションを追加** を選択し、**ナビゲート** を選択します。

      1. 追加したアクションを選択して設定します。

      1. **ナビゲーションタイプ**で、**ページ**を選択します。

      1. **「ナビゲート**」で、「」を選択します**FileList**。

      1. パネルの上部にある矢印アイコンを選択して、メインの**プロパティ**パネルに戻ります。

      アップロードに失敗した後に実行されるアクションを追加するには:

      1. **「失敗時**」で、**「アクションの追加**」を選択し、**「ナビゲート**」を選択します。

      1. 追加したアクションを選択して設定します。

      1. **ナビゲーションタイプ**で、**ページ**を選択します。

      1. **「ナビゲート**」で、「」を選択します**FailUpload**。

      1. パネルの上部にある矢印アイコンを選択して、メインの**プロパティ**パネルに戻ります。

### **FailUpload** ページにコンポーネントを追加する
<a name="automations-s3-components-failupload-page"></a>

**FailUpload** ページは、アップロードが失敗したことをユーザーに知らせるテキストボックスを含むシンプルなページです。

1. 左側の**ページ**パネルで、**FailUpload** ページを選択します。

1. 右側の**コンポーネント**ページで、**テキスト**コンポーネントを見つけ、キャンバスの中央までドラッグします。

1. ページに追加したテキストコンポーネントを選択します。

1. 右側の****「プロパティ」メニューの**「値**」に「」と入力します**Failed to upload, try again**。

## アプリのセキュリティ設定を更新する
<a name="automations-s3-components-app-security-settings"></a>

App Studio のすべてのアプリケーションには、外部メディアやリソースを制限するために使用できるコンテンツセキュリティ設定、またはオブジェクトをアップロードできる Amazon S3 のドメインがあります。デフォルト設定では、すべてのドメインをブロックします。アプリケーションから Amazon S3 にオブジェクトをアップロードするには、オブジェクトをアップロードするドメインを許可するように 設定を更新する必要があります。

**Amazon S3 へのオブジェクトのアップロードをドメインに許可するには**

1. **アプリ設定**タブを選択します。

1. **コンテンツセキュリティ設定**タブを選択します。

1. **Connect ソース**で、**すべての接続を許可する** を選択します。

1. **[保存]** を選択します。

## 次のステップ: テスト用にアプリケーションをプレビューして公開する
<a name="automations-s3-preview-publish-test"></a>

これで、アプリケーションをテストする準備が整いました。アプリケーションのプレビューと公開の詳細については、「」を参照してください[アプリケーションのプレビュー、公開、共有](applications-preview-publish-share.md)。