翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。 # チュートリアル **Topics** + [Amazon Bedrock を使用して AI テキストサマリアプリを構築する](tutorial-conversational-bedrock.md) + [Amazon Simple Storage Service とコンポーネントおよびオートメーションの操作](automations-s3.md) + [App Studio アプリでの Lambda 関数の呼び出し](tutorial-lambda.md) # Amazon Bedrock を使用して AI テキストサマリアプリを構築する このチュートリアルでは、Amazon Bedrock を使用してエンドユーザーからのテキスト入力の簡潔な概要を提供するアプリケーションを App Studio で構築します。アプリケーションには、ユーザーが要約したいテキストを入力できるシンプルなユーザーインターフェイスが含まれています。これには、会議メモ、記事の内容、調査結果、またはその他のテキスト情報が含まれます。ユーザーがテキストを入力したら、ボタンを押してテキストを Amazon Bedrock に送信できます。Amazon Bedrock は Claude 3 Sonnet モデルを使用してテキストを処理し、要約されたバージョンを返します。 **Contents** + [前提条件](#tutorial-conversational-bedrock-prerequisites) + [ステップ 1: IAM ロールと App Studio コネクタを作成して設定する](#tutorial-conversational-bedrock-steps-create-role-connector) + [ステップ 2: アプリケーションを作成する](#tutorial-conversational-bedrock-steps-create-application) + [ステップ 3: オートメーションを作成して設定する](#tutorial-conversational-bedrock-steps-create-automation) + [ステップ 4: ページとコンポーネントを作成する](#tutorial-conversational-bedrock-steps-user-interface) + [デフォルトページの名前を変更する](#tutorial-conversational-bedrock-steps-user-interface-create-page) + [ページにコンポーネントを追加する](#tutorial-conversational-bedrock-steps-user-interface-add-components) + [ページコンポーネントを設定する](#tutorial-conversational-bedrock-steps-user-interface-configure-components) + [ステップ 5: アプリケーションを**テスト**環境に公開する](#tutorial-conversational-bedrock-steps-publish) + [(オプション) クリーンアップする](#tutorial-conversational-bedrock-steps-cleanup) ## 前提条件 開始する前に、以下の前提条件を確認して完了してください。 + AWS App Studio へのアクセス。このチュートリアルでは、コネクタを作成するには管理者ロールが必要です。 + オプション: [AWS App Studio の概念](concepts.md)と を確認して[チュートリアル: 空のアプリから構築を開始する](getting-started-tutorial-empty.md)、App Studio の重要な概念を理解します。 ## ステップ 1: IAM ロールと App Studio コネクタを作成して設定する App Studio に Amazon Bedrock モデルへのアクセスを提供するには、以下を行う必要があります。 1. アプリで使用する Amazon Bedrock モデルを有効にします。このチュートリアルでは **Claude 3 Sonnet **を使用するため、そのモデルを有効にしてください。 1. Amazon Bedrock への適切なアクセス許可を持つ IAM ロールを作成します。 1. アプリで使用する IAM ロールを使用して App Studio コネクタを作成します。 詳細な手順[Amazon Bedrock に接続する](connectors-bedrock.md)については、「」を参照してください。ステップに従ってコネクタを作成したら、このチュートリアルに戻ります。 ## ステップ 2: アプリケーションを作成する テキストサマリアプリに組み込む App Studio で空のアプリを作成するには、次の手順に従います。 1. App Studio にサインインします。 1. ビルダーハブに移動し、**\$1 アプリケーション**の作成を選択します。 1. **[最初から開始]** を選択します。 1. **アプリ名**フィールドに、 などのアプリの名前を入力します**Text Summarizer**。 1. データソースまたはコネクタを選択するように求められた場合は、このチュートリアルの目的で**スキップ**を選択します。 1. **次へ** をクリックして先に進みます。 1. (オプション): App Studio でアプリケーションを構築する方法の概要については、ビデオチュートリアルをご覧ください。 1. **「アプリの編集**」を選択すると、アプリケーションスタジオに移動します。 ## ステップ 3: オートメーションを作成して設定する App Studio アプリのロジックと動作を*オートメーションで定義します*。自動化は、*アクション*と呼ばれる個々のステップ、他のリソースからアクションにデータを渡すために使用される*パラメータ*、および他の自動化やコンポーネントで使用できる*出力*で構成されます。このステップでは、以下を使用して Amazon Bedrock とのやり取りを処理するオートメーションを作成します。 + 入力: ユーザーからオートメーションにテキスト入力を渡すパラメータ。 + アクション: Amazon Bedrock にテキスト入力を送信し、出力テキストの概要を返す 1 つの **GenAI プロンプト**アクション。 + 出力: アプリで使用できる Amazon Bedrock から処理された概要で構成される自動化出力。 **Amazon Bedrock にプロンプトを送信し、概要を処理して返すオートメーションを作成して設定するには** 1. キャンバスの上部にある**オートメーション**タブを選択します。 1. **「\$1 オートメーションの追加**」を選択します。 1. 右側のパネルで、**プロパティ**を選択します。 1. 鉛筆アイコンを選択してオートメーション名を更新します。**InvokeBedrock** を入力して **Enter** を押します。 1. 以下のステップを実行して、ユーザーからのテキストプロンプト入力を Amazon Bedrock へのリクエストで使用するオートメーションに渡すために使用されるパラメータをオートメーションに追加します。 1. キャンバスのパラメータボックスで \$1 **追加** を選択します。 1. [**名前**] に「**input**」と入力します。 1. **説明** に、 などの説明を入力します**Text to be sent to Amazon Bedrock**。 1. Type で****、**String** を選択します。 1. **追加** を選択して パラメータを作成します。 1. 次の手順を実行して **GenAI プロンプト**アクションを追加します。 1. 右側のパネルで、**アクション**を選択します。 1. **GenAI プロンプト**を選択してアクションを追加します。 1. 次の手順を実行して、 アクションを設定します。 1. キャンバスからアクションを選択して、右側の**プロパティ**メニューを開きます。 1. 鉛筆アイコン**PromptBedrock**を選択し、名前を入力し、Enter キーを押して、アクションの名前を に変更します。 1. **Connector** で、 で作成されたコネクタを選択します[ステップ 1: IAM ロールと App Studio コネクタを作成して設定する](#tutorial-conversational-bedrock-steps-create-role-connector)。 1. **Model** で、プロンプトの処理に使用する Amazon Bedrock モデルを選択します。このチュートリアルでは、**Claude 3.5 Sonnet **を選択します。 1. **ユーザープロンプト**で、「」と入力します`{{params.input}}`。これは、前に作成した `input`パラメータを表し、アプリユーザーによるテキスト入力が含まれます。 1. **システムプロンプト**で、Amazon Bedrock に送信するシステムプロンプトの指示を入力します。このチュートリアルでは、次のように入力します。 ``` You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas. ``` 1. **リクエスト設定**を選択して展開し、次のフィールドを更新します。 + **「温度**」に「」と入力します`0`。テンピアリングは、0～10 のスケールで出力のランダム性または創造性を決定します。数値が大きいほど、レスポンスはよりクリエイティブになります。 + **最大トークン**で、 と入力`4096`してレスポンスの長さを制限します。 1. この自動化の出力は要約されたテキストになりますが、デフォルトでは自動化は出力を作成しません。次のステップを実行して、オートメーション出力を作成するようにオートメーションを設定します。 1. 左側のナビゲーションで、**InvokeBedrock** オートメーションを選択します。 1. 右側の**プロパティ**メニューの**出力**で、 **\$1 追加**を選択します。 1. Output ****に と入力します**\$1\$1results.PromptBedrock.text\$1\$1**。この式は、 `processResults`アクションの内容を返します。 ## ステップ 4: ページとコンポーネントを作成する App Studio では、各ページは、ユーザーが操作するアプリケーションのユーザーインターフェイス (UI) の画面を表します。これらのページ内で、テーブル、フォーム、ボタンなどのさまざまなコンポーネントを追加して、必要なレイアウトと機能を作成できます。 ### デフォルトページの名前を変更する このチュートリアルのテキストサマリアプリには、1 ページのみが含まれます。新しく作成されたアプリケーションにはデフォルトのページがあるため、追加するのではなく名前を変更します。 **デフォルトページの名前を変更するには** 1. 上部のバーナビゲーションメニューで、**ページ**を選択します。 1. 左側のパネルで Page**Page1** を選択し、右側のパネルで **Properties** パネルを選択します。 1. 鉛筆アイコンを選択し、 と入力し**TextSummarizationTool**、**Enter **キーを押します。 1. **ナビゲーションラベル**に「」と入力します**TextSummarizationTool**。 ### ページにコンポーネントを追加する このチュートリアルでは、テキストサマリアプリに次のコンポーネントを含む 1 ページがあります。 + エンドユーザーが要約されるプロンプトの入力に使用する**テキスト入力**コンポーネント。 + Amazon Bedrock にプロンプトを送信するために使用される**ボタン**コンポーネント。 + Amazon Bedrock の概要を表示する**テキストエリア**コンポーネント。 要約される**テキストプロンプトの入力**にユーザーが使用するページにテキスト入力コンポーネントを追加します。 **テキスト入力コンポーネントを追加するには** 1. 右側の**コンポーネント**パネルで、**テキスト入力**コンポーネントを見つけ、キャンバスにドラッグします。 1. キャンバス内のテキスト入力を選択して選択します。 1. 右側の**プロパティ**パネルで、次の設定を更新します。 1. 鉛筆アイコンを選択して、テキスト入力の名前を に変更します**inputPrompt**。 1. Label に****「」と入力します**Prompt**。 1. **プレースホルダー**に「」と入力します**Enter text to be summarized**。 次に、ユーザーがプロンプトを Amazon Bedrock に送信することを選択する**ボタン**コンポーネントを追加します。 **ボタンコンポーネントを追加するには** 1. 右側の**コンポーネント**パネルで、**ボタン**コンポーネントを見つけてキャンバスにドラッグします。 1. キャンバス内のボタンを選択して選択します。 1. 右側の**プロパティ**パネルで、次の設定を更新します。 1. 鉛筆アイコンを選択して、ボタンの名前を に変更します**sendButton**。 1. **ボタンラベル**に「」と入力します**Send**。 ここで、Amazon Bedrock から返された概要を表示する**テキストエリア**コンポーネントを追加します。 **テキストエリアコンポーネントを追加するには** 1. 右側の**コンポーネント**パネルで、**テキストエリア**コンポーネントを見つけ、キャンバスにドラッグします。 1. キャンバス内のテキスト領域を選択して選択します。 1. 右側の**プロパティ**パネルで、次の設定を更新します。 1. 鉛筆アイコンを選択して、ボタンの名前を に変更します**textSummary**。 1. Label に****「」と入力します**Summary**。 ### ページコンポーネントを設定する アプリケーションにコンポーネントを含むページが含まれているので、次のステップは、適切な動作を実行するようにコンポーネントを設定することです。ボタンなどのコンポーネントが操作されたときにアクションを実行するように設定するには、*トリガー*を追加する必要があります。このチュートリアルのアプリでは、`sendButton`ボタンに 2 つのトリガーを追加して、以下を実行します。 + 最初のトリガーは、分析する`textPrompt`コンポーネント内のテキストを Amazon Bedrock に送信します。 + 2 番目のトリガーでは、Amazon Bedrock から返された概要が`textSummary`コンポーネントに表示されます。 **プロンプトを Amazon Bedrock に送信するトリガーを追加するには** 1. キャンバス内のボタンを選択して選択します。 1. 右側の **Properties** パネルの **Triggers** セクションで \$1 **Add** を選択します。 1. **オートメーションの呼び出し** を選択します。 1. 設定するために作成された **InvokeAutomation1** トリガーを選択します。 1. **「アクション名**」に「」と入力します**invokeBedrockAutomation**。 1. **Invoke Automation **で、前に作成した **InvokeBedrock** オートメーションを選択します。 1. パラメータボックスに、前に作成した**入力**パラメータに、`inputPrompt`テキスト入力コンポーネントのコンテンツを**\$1\$1ui.inputPrompt.value\$1\$1**渡す と入力します。 1. パネルの上部にある左矢印を選択して、コンポーネントプロパティメニューに戻ります。 これで、ボタンがクリックされたときに Amazon Bedrock にリクエストを送信する自動化を呼び出すトリガーを設定しました。次のステップは、`textSummary`コンポーネントに結果を表示する 2 番目のトリガーを設定することです。 **Amazon Bedrock の結果をテキストエリアコンポーネントに表示するトリガーを追加するには** 1. ボタンの右側にある **Properties** パネルの **Triggers** セクションで \$1 **Add** を選択します。 1. **コンポーネントの実行アクション**を選択します。 1. 設定するために作成された **Runcomponentaction1** トリガーを選択します。 1. **「アクション名**」に「」と入力します**setTextSummary**。 1. **コンポーネント**で、**textSummary** コンポーネントを選択します。 1. Action で****、Set **value **を選択します。 1. **Set value to** に「」と入力します**\$1\$1results.invokeBedrockAutomation\$1\$1**。 ## ステップ 5: アプリケーションを**テスト**環境に公開する 通常、アプリケーションの構築中は、プレビューして外観を確認し、その機能の初期テストを実行することをお勧めします。ただし、アプリケーションはプレビュー環境で外部サービスとやり取りしないため、代わりにアプリケーションをテスト環境に公開して、Amazon Bedrock からの送信リクエストと受信レスポンスをテストできるようにします。 **アプリケーションをテスト環境に公開するには** 1. App Builder の右上隅で、**発行**を選択します。 1. テスト環境のバージョンの説明を追加します。 1. SLA に関するチェックボックスを確認して選択します。 1. **[開始]** を選択します。発行には最大 15 分かかる場合があります。 1. (オプション) 準備ができたら、**共有**を選択し、プロンプトに従って他のユーザーにアクセスを許可できます。App Studio アプリの共有の詳細については、「」を参照してください[公開されたアプリケーションの共有](application-share.md)。 アプリケーションをテストしたら、再度**発行**を選択してアプリケーションを本番環境に昇格させます。本番稼働環境のアプリは、エンドユーザーが共有されるまで利用できないことに注意してください。さまざまなアプリケーション環境の詳細については、「」を参照してください[アプリケーション環境](applications-publish.md#application-environments)。 ## (オプション) クリーンアップする これで、チュートリアルは正常に完了し、Amazon Bedrock を使用して App Studio にテキスト要約アプリを構築しました。アプリを引き続き使用することも、このチュートリアルで作成したリソースをクリーンアップすることもできます。次のリストには、クリーンアップするリソースのリストが含まれています。 + App Studio で作成された Amazon Bedrock コネクタ。詳細については、「[コネクタの表示、編集、削除](viewing-deleting-connectors.md)」を参照してください。 + App Studio のテキストサマリアプリ。詳細については、「[Deleting an application](applications-delete.md)」を参照してください。 + IAM コンソールで作成された IAM ロール。詳細については、「 *AWS Identity and Access Management ユーザーガイド*」の[「ロールまたはインスタンスプロファイルの削除](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html)」を参照してください。 + Claude 3 Sonnet を使用するようにモデルアクセスをリクエストし、アクセスを元に戻す場合は、[「Amazon Bedrock ユーザーガイド」の「Amazon Bedrock 基盤モデルへのアクセスを管理する](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html)」を参照してください。 ** # Amazon Simple Storage Service とコンポーネントおよびオートメーションの操作 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** オートメーションアクションの代わりにこのコンポーネントを使用します。(スタンドアロンアクションは、アップロード前またはアップロード後に実行する追加のロジックまたはアクションを含む、より複雑なシナリオで使用する必要があります）。 ## 前提条件 このガイドでは、次の前提条件を満たしていることを前提としています。 1. Amazon S3 を App Studio と正常に統合するために、Amazon S3 バケット、IAM ロールとポリシー、Amazon S3 コネクタを作成および設定しました。コネクタを作成するには、管理者ロールが必要です。詳細については、「[Amazon Simple Storage Service (Amazon S3) に接続する](connectors-s3.md)」を参照してください。 ## 空のアプリケーションを作成する 以下のステップを実行して、このガイド全体で使用する空のアプリケーションを作成します。 **空のアプリケーションを作成するには** 1. ナビゲーションペインで、**アプリケーション**を選択します。 1. \$1 **アプリの作成**を選択します。 1. **アプリの作成**ダイアログボックスで、アプリケーションに名前を付け、**最初から開始**を選択し、**次へ**を選択します。 1. **既存のデータに接続**ダイアログボックスで、**スキップ**を選択してアプリケーションを作成します。 1. 新しい**アプリケーションのキャンバスに移動するアプリの編集**を選択します。ここでは、コンポーネント、オートメーション、データを使用して、アプリケーションのルックと機能を設定できます。 ## ページの作成 アプリケーションに 3 つのページを作成して、情報を収集または表示します。 **ページを作成するには** 1. 必要に応じて、キャンバスの上部にある**ページ**タブを選択します。 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 とやり取りするオートメーションを作成して設定します。 ## オートメーションの作成と設定 Amazon S3 とやり取りするアプリケーションの自動化を作成します。次の手順を使用して、次のオートメーションを作成します。 + Amazon S3 バケット内のオブジェクトを一覧表示する **getFiles** オートメーション。テーブルコンポーネントを埋めるために使用されます。 + Amazon S3 バケットからオブジェクトを削除する **deleteFile** オートメーション。テーブルコンポーネントに削除ボタンを追加するために使用されます。 + Amazon S3 バケットからオブジェクトを取得して表示する **viewFile** オートメーション。テーブルコンポーネントから選択された単一のオブジェクトに関する詳細を表示するために使用されます。 ### `getFiles` オートメーションを作成する 指定された Amazon S3 バケット内のファイルを一覧表示するオートメーションを作成します。 1. キャンバスの上部にある**オートメーション**タブを選択します。 1. **「\$1 オートメーションの追加**」を選択します。 1. 右側のパネルで、**プロパティ**を選択します。 1. 鉛筆アイコンを選択してオートメーション名を更新します。**getFiles** を入力して **Enter** を押します。 1. 次の手順を実行して、**オブジェクトのリスト**アクションを追加します。 1. 右側のパネルで、**アクション**を選択します。 1. オブジェクト**のリスト**を選択してアクションを追加します。アクションには という名前を付ける必要があります`ListObjects1`。 1. 次の手順を実行して、 アクションを設定します。 1. キャンバスからアクションを選択して、右側の**プロパティ**メニューを開きます。 1. **Connector** では、前提条件から作成した Amazon S3 コネクタを選択します。 1. **設定** に次のテキストを入力し、*bucket\$1name* を前提条件で作成したバケットに置き換えます。 ``` { "Bucket": "bucket_name", "Prefix": "" } ``` **注記** `Prefix` フィールドを使用して、指定された文字列で始まるオブジェクトにレスポンスを制限できます。 1. この自動化の出力は、Amazon S3 バケットのオブジェクトをテーブルコンポーネントに入力するために使用されます。ただし、デフォルトでは、オートメーションは出力を作成しません。次の手順を実行して、オートメーション出力を作成するようにオートメーションを設定します。 1. 左側のナビゲーションで、**getFiles** オートメーションを選択します。 1. 右側の**プロパティ**メニューの **Automation 出力**で、**\$1 Add output** を選択します。 1. Output には****、 と入力します**\$1\$1results.ListObjects1.Contents\$1\$1**。この式は アクションの内容を返し、テーブルコンポーネントの入力に使用できるようになりました。 ### `deleteFile` オートメーションを作成する 指定した Amazon S3 バケットからオブジェクトを削除するオートメーションを作成します。 1. 左側の **Automations** パネルで、 **\$1 追加** を選択します。 1. **「\$1 オートメーションの追加**」を選択します。 1. 右側のパネルで、**プロパティ**を選択します。 1. 鉛筆アイコンを選択してオートメーション名を更新します。**deleteFile** を入力して **Enter** を押します。 1. 以下のステップを実行して、オートメーションにデータを渡すために使用されるオートメーションパラメータを追加します。 1. 右側の**プロパティ**メニューで、**オートメーションパラメータ**で **\$1 追加**を選択します。 1. 鉛筆アイコンを選択して、オートメーションパラメータを編集します。パラメータ名を に更新**fileName**し、**Enter **キーを押します。 1. 次の手順を実行して、**オブジェクトの削除**アクションを追加します。 1. 右側のパネルで、**アクション**を選択します。 1. **オブジェクトの削除**を選択してアクションを追加します。アクションには という名前を付ける必要があります`DeleteObject1`。 1. 次の手順を実行して、 アクションを設定します。 1. キャンバスからアクションを選択して、右側の**プロパティ**メニューを開きます。 1. **Connector** では、前提条件から作成した Amazon S3 コネクタを選択します。 1. **設定** に次のテキストを入力し、*bucket\$1name* を前提条件で作成したバケットに置き換えます。 ``` { "Bucket": "bucket_name", "Key": params.fileName } ``` ### `viewFile` オートメーションを作成する 指定された Amazon S3 バケットから単一のオブジェクトを取得するオートメーションを作成します。後で、この自動化をファイルビューワーコンポーネントで設定して、オブジェクトを表示します。 1. 左側の **Automations** パネルで、 **\$1 追加** を選択します。 1. **「」＋「オートメーションの追加**」を選択します。 1. 右側のパネルで、**プロパティ**を選択します。 1. 鉛筆アイコンを選択してオートメーション名を更新します。**viewFile** を入力して **Enter** を押します。 1. 以下のステップを実行して、オートメーションにデータを渡すために使用されるオートメーションパラメータを追加します。 1. 右側の **Properties** メニューの **Automation パラメータ**で \$1 **Add** を選択します。 1. 鉛筆アイコンを選択して、オートメーションパラメータを編集します。パラメータ名を に更新**fileName**し、**Enter **キーを押します。 1. 次の手順を実行して、**オブジェクトの取得**アクションを追加します。 1. 右側のパネルで、**アクション**を選択します。 1. **オブジェクトの取得** を選択してアクションを追加します。アクションには という名前を付ける必要があります`GetObject1`。 1. 次の手順を実行して、 アクションを設定します。 1. キャンバスからアクションを選択して、右側の**プロパティ**メニューを開きます。 1. **Connector** では、前提条件から作成した Amazon S3 コネクタを選択します。 1. **設定** で、次のテキストを入力し、*bucket\$1name* を前提条件で作成したバケットに置き換えます。 ``` { "Bucket": "bucket_name", "Key": params.fileName } ``` 1. デフォルトでは、オートメーションは出力を作成しません。次のステップを実行して、オートメーション出力を作成するようにオートメーションを設定します。 1. 左側のナビゲーションで、**viewFile** オートメーションを選択します。 1. 右側の **Properties** メニューの **Automation 出力**で、 **\$1 Add output** を選択します。 1. Output には****、 と入力します**\$1\$1results.GetObject1.Body.transformToWebStream()\$1\$1**。この式は、 アクションの内容を返します。 **注記** のレスポンスは`S3 GetObject`、次の方法で読み取ることができます。 `transformToWebStream`: データを取得するために消費する必要があるストリームを返します。自動化出力として使用すると、自動化によって処理され、出力はイメージまたは PDF ビューワーコンポーネントのデータソースとして使用できます。また、 などの別のオペレーションへの入力としても使用できます`S3 PutObject`。 `transformToString`: オートメーションの raw データを返します。ファイルに JSON データなどのテキストコンテンツが含まれている場合は、JavaScript アクションで使用する必要があります。次の例のように、待機している必要があります。 `await results.GetObject1.Body.transformToString();` `transformToByteArray`: 8 ビット符号なし整数の配列を返します。このレスポンスは、バイナリデータのストレージと操作を可能にするバイト配列の目的を果たします。次の例のように、待機している必要があります。 `await results.GetObject1.Body.transformToByteArray();` 次に、前に作成したページにコンポーネントを追加し、ユーザーがアプリを使用してファイルを表示および削除できるようにオートメーションでコンポーネントを設定します。 ## ページコンポーネントの追加と設定 アプリケーションのビジネスロジックと機能を定義するオートメーションを作成したら、コンポーネントを作成し、両方を接続します。 ### **FileList** ページにコンポーネントを追加する 前に作成した **FileList** ページは、設定された Amazon S3 バケット内のファイルのリストと、リストから選択されたファイルの詳細を表示するために使用されます。そのためには、以下を実行します。 1. ファイルのリストを表示するテーブルコンポーネントを作成します。テーブルの行を、以前に作成した **getFiles** オートメーションの出力で埋めるように設定します。 1. PDF ビューワーコンポーネントを作成して、1 つの PDF を表示します。バケットからファイルを取得するために以前に作成した **viewFile** オートメーションを使用して、テーブルから選択されたファイルを表示するようにコンポーネントを設定します。 ****FileList** ページにコンポーネントを追加するには** 1. キャンバスの上部にある**ページ**タブを選択します。 1. 左側の**ページ**パネルで、**FileList** ページを選択します。 1. 右側の**コンポーネント**ページで、**テーブル**コンポーネントを見つけ、キャンバスの中央までドラッグします。 1. ページに追加したテーブルコンポーネントを選択します。 1. 右側の**プロパティ**メニューで、**ソース**ドロップダウンを選択し、**オートメーション**を選択します。 1. **自動化**ドロップダウンを選択し、**getFiles** 自動化を選択します。このテーブルでは、**getFiles** オートメーションの出力をコンテンツとして使用します。 1. ファイルの名前で埋める列を追加します。 1. 右側の**プロパティ**メニューで、**列**の横にある **\$1 追加**を選択します。 1. 追加した **Column1** 列の右側にある矢印アイコンを選択します。 1. **列ラベル**の場合は、列の名前を に変更します**Filename**。 1. **[Value]** (値) に「**\$1\$1currentRow.Key\$1\$1**」と入力します。 1. パネルの上部にある矢印アイコンを選択すると、メインの**プロパティ**パネルに戻ります。 1. テーブルアクションを追加して、行内のファイルを削除します。 1. 右側の**プロパティ**メニューで、**アクション**の横にある **\$1 追加**を選択します。 1. **アクション**で、**ボタン**の名前を に変更します**Delete**。 1. 先ほど名前を変更した **Delete** アクションの右側にある矢印アイコンを選択します。 1. **クリック時に** \$1 **アクションを追加** を選択し、**オートメーションを呼び出す **を選択します。 1. 追加したアクションを選択して設定します。 1. **[アクション名]** に「**DeleteRecord**」と入力します。 1. **オートメーションを呼び出す**で、 を選択します**deleteFile**。 1. パラメータテキストボックスに、 と入力します**\$1\$1currentRow.Key\$1\$1**。 1. **[Value]** (値) に「**\$1\$1currentRow.Key\$1\$1**」と入力します。 1. 右側のパネルで、**コンポーネント**を選択してコンポーネントメニューを表示します。ファイルを表示するには、次の 2 つの選択肢があります。 + `.png`、、`.jpeg`または `.jpg`拡張子を持つファイルを表示する**イメージビューワー**。 + PDF ファイルを表示する PDF **ビューワー**コンポーネント。 このチュートリアルでは、**PDF ビューワー**コンポーネントを追加および設定します。 1. **PDF ビューワー**コンポーネントを追加します。 1. 右側の**コンポーネント**ページで、**PDF ビューワー**コンポーネントを見つけ、テーブルコンポーネントの下のキャンバスにドラッグします。 1. 追加した **PDF ビューワー**コンポーネントを選択します。 1. 右側の**プロパティ**メニューで、**ソース**ドロップダウンを選択し、**オートメーション**を選択します。 1. **自動化**ドロップダウンを選択し、**viewFile** 自動化を選択します。テーブルは、**viewFile** オートメーションの出力をコンテンツとして使用します。 1. パラメータテキストボックスに、 と入力します**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**。 1. 右側のパネルには、**ファイル名**フィールドもあります。このフィールドの値は、PDF ビューワーコンポーネントのヘッダーとして使用されます。前のステップと同じテキストを入力します: **\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**。 ### **UploadFile** ページにコンポーネントを追加する **UploadFile** ページには、設定された Amazon S3 バケットへのファイルの選択とアップロードに使用できるファイルセレクタが含まれます。**S3 アップロード**コンポーネントをページに追加します。ユーザーはこれを使用してファイルを選択してアップロードできます。 1. 左側の**ページ**パネルで、**UploadFile** ページを選択します。 1. 右側の**コンポーネント**ページで、**S3 アップロード**コンポーネントを見つけ、キャンバスの中央までドラッグします。 1. ページに追加した S3 アップロードコンポーネントを選択します。 1. 右側の**プロパティ**メニューで、コンポーネントを設定します。 1. **Connector** ドロップダウンで、前提条件で作成された Amazon S3 コネクタを選択します。 1. **バケット**には、Amazon S3 バケットの名前を入力します。 1. **[ファイル名]** に **\$1\$1ui.s3Upload1.files[0]?.nameWithExtension\$1\$1** と入力します。 1. **最大ファイルサイズ**については、テキストボックス**5**に を入力し、ドロップダウンで **MB** が選択されていることを確認します。 1. **トリガー**セクションで、次の手順を実行して、アップロードが成功または失敗した後に実行されるアクションを追加します。 アップロードが成功した後に実行されるアクションを追加するには: 1. **成功したら**、 **\$1 アクションを追加** を選択し、**ナビゲート** を選択します。 1. 追加したアクションを選択して設定します。 1. **ナビゲーションタイプ**で、**ページ**を選択します。 1. **「ナビゲート**」で、「」を選択します**FileList**。 1. パネルの上部にある矢印アイコンを選択して、メインの**プロパティ**パネルに戻ります。 アップロードに失敗した後に実行されるアクションを追加するには: 1. **「失敗時**」で、**「アクションの追加**」を選択し、**「ナビゲート**」を選択します。 1. 追加したアクションを選択して設定します。 1. **ナビゲーションタイプ**で、**ページ**を選択します。 1. **「ナビゲート**」で、「」を選択します**FailUpload**。 1. パネルの上部にある矢印アイコンを選択して、メインの**プロパティ**パネルに戻ります。 ### **FailUpload** ページにコンポーネントを追加する **FailUpload** ページは、アップロードが失敗したことをユーザーに知らせるテキストボックスを含むシンプルなページです。 1. 左側の**ページ**パネルで、**FailUpload** ページを選択します。 1. 右側の**コンポーネント**ページで、**テキスト**コンポーネントを見つけ、キャンバスの中央までドラッグします。 1. ページに追加したテキストコンポーネントを選択します。 1. 右側の**プロパティ**メニューの**「値**」に「」と入力します**Failed to upload, try again**。 ## アプリのセキュリティ設定を更新する App Studio のすべてのアプリケーションには、外部メディアやリソースを制限するために使用できるコンテンツセキュリティ設定、またはオブジェクトをアップロードできる Amazon S3 のドメインがあります。デフォルト設定では、すべてのドメインをブロックします。アプリケーションから Amazon S3 にオブジェクトをアップロードするには、オブジェクトをアップロードするドメインを許可するように 設定を更新する必要があります。 **Amazon S3 へのオブジェクトのアップロードをドメインに許可するには** 1. **アプリ設定**タブを選択します。 1. **コンテンツセキュリティ設定**タブを選択します。 1. **Connect ソース**で、**すべての接続を許可する** を選択します。 1. **[保存]** を選択します。 ## 次のステップ: テスト用にアプリケーションをプレビューして公開する これで、アプリケーションをテストする準備が整いました。アプリケーションのプレビューと公開の詳細については、「」を参照してください[アプリケーションのプレビュー、公開、共有](applications-preview-publish-share.md)。 # App Studio アプリでの Lambda 関数の呼び出し このチュートリアルでは、App Studio を Lambda に接続し、アプリから Lambda 関数を呼び出す方法を示します。 ## 前提条件 このガイドでは、次の前提条件を満たしていることを前提としています。 1. App Studio アプリを作成しました。アプリがない場合は、チュートリアルで使用する空のアプリを作成できます。詳細については、「[Creating an application](applications-create.md)」を参照してください。 **注記** このチュートリアルに従って設定する方法を学ぶために Lambda 関数は必要ありませんが、アプリを正しく設定するために Lambda 関数を用意しておくと役立つ場合があります。このチュートリアルには、Lambda 関数の作成に関する情報は含まれていません。詳細については、「 [AWS Lambda デベロッパーガイド](https://docs.aws.amazon.com/lambda/latest/dg/)」を参照してください。 ## Lambda コネクタを作成する App Studio アプリで Lambda 関数を使用するには、コネクタを使用して App Studio を Lambda に接続し、関数へのアクセスを提供する必要があります。App Studio でコネクタを作成するには、管理者である必要があります。Lambda コネクタを作成する手順など、Lambda コネクタの作成の詳細については、「」を参照してください[に接続する AWS Lambda](connectors-lambda.md)。 ## オートメーションの作成と設定 自動化はアプリケーションのロジックを定義するために使用され、アクションで構成されます。アプリで Lambda 関数を呼び出すには、まず *Lambda 呼び出し*アクションをオートメーションに追加して設定します。次のステップを使用してオートメーションを作成し、*Lambda 呼び出し*アクションを追加します。 1. アプリの編集中に、**オートメーション**タブを選択します。 1. **「」と「オートメーションの追加**」を選択します。 1. 右側の**アクション**メニューで、**Lambda を呼び出し**てオートメーションにステップを追加します。 1. キャンバスで新しい Lambda ステップを選択して、そのプロパティを表示および設定します。 1. 右側の**プロパティ**メニューで、次の手順を実行してステップを設定します。 1. **Connector** で、App Studio を Lambda 関数に接続するために作成されたコネクタを選択します。 1. **関数名**に、Lambda 関数の名前を入力します。 1. **関数イベント**で、Lambda 関数に渡されるイベントを入力します。一般的なユースケースの例を次のリストに示します。 + ファイル名やその他の文字列などのオートメーションパラメータの値を渡す: `varName: params.paramName` + 前のアクションの結果を渡す: `varName: results.actionName1.data[0].fieldName` + *ループ*アクション内に *Lambda 呼び出し*アクションを追加すると、パラメータに似た各反復項目からフィールドを送信できます。 `varName: currentItem.fieldName` 1. **モック出力**フィールドは、コネクタがアクティブでないプレビュー中にアプリをテストするモック出力を提供するために使用できます。 ## オートメーションを実行するように UI 要素を設定する これで、Lambda 関数を呼び出すアクションで設定されたオートメーションができたので、オートメーションを実行するように UI 要素を設定できます。このチュートリアルでは、クリックしたときに自動化を実行するボタンを作成します。 **ヒント** オートメーション*の呼び出しアクションを使用して、他のオートメーションからオートメーション*を実行することもできます。 **ボタンからオートメーションを実行するには** 1. アプリの編集中に、**ページ**タブを選択します。 1. 右側のメニューで、**ボタン**コンポーネントを選択してページにボタンを追加します。 1. 新しいボタンを選択して設定します。 1. 右側の **Properties** メニューの **Triggers** で \$1 **Add** を選択し、**Invoke automation **を選択します。 1. 新しいオートメーション呼び出しトリガーを選択して設定します。 1. **Invoke Automation で**、Lambda 関数を呼び出すオートメーションを選択し、オートメーションに送信するパラメータを設定します。 これで、アプリでこのボタンを選択すると、設定されたオートメーションが実行されます。 ## 次のステップ: テスト用にアプリケーションをプレビューして公開する これで、アプリケーションをテストする準備ができました。開発環境でアプリケーションをプレビューする場合、コネクタはアクティブではないため、コネクタを使用して接続するため、プレビュー中にオートメーションをテストすることはできません AWS Lambda。コネクタに依存するアプリケーションの機能をテストするには、アプリケーションをテスト環境に公開する必要があります。アプリケーションのプレビューと公開の詳細については、「」を参照してください[アプリケーションのプレビュー、公開、共有](applications-preview-publish-share.md)。