翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# Builder ドキュメント
以下のトピックには、アプリケーションを作成、編集、公開する App Studio のユーザーに役立つ情報が含まれています。
**Topics**
+ [チュートリアル](tutorials.md)
+ [生成 AI を使用した App Studio アプリの構築](generative-ai.md)
+ [アプリケーションの作成、編集、削除](applications-create-edit-delete.md)
+ [アプリケーションのプレビュー、公開、共有](applications-preview-publish-share.md)
+ [ページとコンポーネント: アプリケーションのユーザーインターフェイスを構築する](pages-components-ux.md)
+ [自動化とアクション: アプリのビジネスロジックを定義する](automations.md)
+ [エンティティとデータアクション: アプリのデータモデルを設定する](data.md)
+ [ページとオートメーションのパラメータ](paramters.md)
+ [JavaScript を使用して App Studio で式を記述する](expressions.md)
+ [データの依存関係とタイミングに関する考慮事項](data-dependencies-timing-considerations.md)
+ [複数のユーザーによるアプリの構築](builder-collaboration.md)
+ [アプリのコンテンツセキュリティ設定の表示または更新](app-content-security-settings-csp.md)
# チュートリアル
**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)。
# 生成 AI を使用した App Studio アプリの構築
AWS App Studio は、開発を加速し、一般的なタスクを合理化するための統合された生成 AI 機能を提供します。生成 AI を活用して、アプリケーション、データモデル、サンプルデータを生成および編集したり、アプリケーションの構築中にコンテキストに応じたヘルプを取得したりできます。
## アプリの生成
高速スタートでは、AI を活用した自然言語プロンプトを使用してアプリケーション全体を生成できます。この機能を使用すると、必要なアプリ機能を記述でき、AI はデータモデル、ユーザーインターフェイス、ワークフロー、コネクタを自動的に構築します。AI でアプリを生成する方法の詳細については、「」を参照してください[Creating an application](applications-create.md)。
## アプリの構築または編集
アプリケーションの編集中に、チャットを使用して変更を記述すると、アプリケーションは自動的に更新されます。既存のサンプルプロンプトから選択することも、独自のプロンプトを入力することもできます。チャットを使用して、サポートされているコンポーネントを追加、編集、削除したり、オートメーションとアクションを作成、設定したりできます。AI を使用してアプリケーションを編集または構築するには、次の手順に従います。
**AI でアプリを編集するには**
1. 必要に応じて、アプリケーションを編集してアプリケーションスタジオに移動します。
1. (オプション) AI で編集するページまたはコンポーネントを選択します。
1. チャットを開くには、左下の **AI で構築**を選択します。
1. 変更を入力するか、サンプルプロンプトから選択します。
1. 変更内容を確認します。変更を行う場合は、**確認**を選択します。それ以外の場合は、別のプロンプトを入力します。
1. 変更の概要を確認します。
## データモデルの生成
指定されたエンティティ名に基づいて、フィールド、データ型、データアクションを含むエンティティを自動的に生成できます。GenAi を使用したエンティティの作成など、エンティティの作成の詳細については、「」を参照してください[App Studio アプリでのエンティティの作成](data-entities-create.md)。
以下の方法で既存のエンティティを更新することもできます。
+ エンティティにフィールドを追加します。詳細については、「[エンティティフィールドの追加、編集、または削除](data-entities-edit-fields.md)」を参照してください。
+ エンティティにデータアクションを追加します。詳細については、「[データアクションの作成](data-entities-edit-data-actions.md#data-entities-data-action-add)」を参照してください。
## サンプルデータの生成
エンティティのフィールドに基づいて、エンティティのサンプルデータを生成できます。これは、外部データソースを接続する前にアプリケーションをテストしたり、外部データソースと通信しない開発環境でアプリケーションをテストしたりする場合に便利です。詳細については、「[サンプルデータの追加または削除](data-entities-edit-sample-data.md)」を参照してください。
アプリケーションをテストまたは本稼働環境に公開すると、ライブデータソースとコネクタがそれらの環境で使用されます。
## AWS サービスのアクションの設定
Amazon Simple Email Service などの AWS サービスと統合する場合、AI を使用して、選択したサービスに基づいて事前入力されたフィールドを含む設定例を生成できます。これを試すには、**AWS 自動化アクションの呼び出し**の**プロパティ**メニューで、両側矢印を選択して**設定**フィールドを展開します。次に、**「サンプル設定の生成**」を選択します。
## レスポンスのモック
AWS サービスアクションのモックレスポンスを生成できます。これは、外部データソースと通信しない開発環境でアプリケーションをテストするのに役立ちます。
## 構築中に AI にヘルプを求める
アプリケーションスタジオ内には、サポートされているリソースまたはプロパティに関する**ヘルプボタンとして Ask AI **があります。これを使用して、現在のビューまたは選択したコンポーネントに関連するコンテキストの提案、ドキュメント、ガイダンスを取得します。App Studio、アプリ構築のベストプラクティス、または特定のアプリケーションのユースケースに関する一般的な質問をして、カスタマイズされた情報と推奨事項を受け取ります。
# アプリケーションの作成、編集、削除
**Contents**
+ [Creating an application](applications-create.md)
+ [アプリケーションのインポート](applications-import.md)
+ [App Studio が提供するインポート可能なアプリ](applications-import.md#app-catalog)
+ [アプリケーションの複製](applications-duplicate.md)
+ [アプリケーションの編集または構築](applications-edit.md)
+ [以前に公開されたアプリバージョンを編集する](applications-edit-previously-published-version.md)
+ [アプリケーションの名前変更](applications-rename.md)
+ [Deleting an application](applications-delete.md)
# Creating an application
App Studio でアプリケーションを作成するには、次の手順に従います。
**アプリケーションを作成するには**
1. ナビゲーションペインで、**ビルド**セクションの**マイアプリケーション**を選択して、アプリケーションのリストに移動します。
1. \$1 **アプリの作成** を選択します。
1. **アプリの作成**ダイアログボックスで、アプリケーションに名前を付け、次のいずれかのアプリ作成方法を選択します。
+ **AI を使用してアプリを生成する**: 自然言語でアプリを記述し、AI にアプリとそのリソースを自動的に生成させるには、このオプションを選択します。
+ **最初から開始**: 空のアプリから構築を開始するには、このオプションを選択します。
1. [**次へ**] を選択します。
1. **AI を使用してアプリを生成する**を選択した場合:
1. **既存のデータに接続**ダイアログボックスで、App Studio にデータソースへのアクセスを提供する**コネクタ**を選択し、**Tablse** を選択し、**次へ** を選択して、既存のデータソースをアプリに追加します。データソースをここに追加すると、AI が最適化されたアプリケーションを生成するのに役立ちます。スキップを選択して、このステップをスキップし、後でデータソースを追加できます****。
1. 短い遅延 (数分) の後、**AI を使用してアプリを生成する**ページに移動し、作成するアプリを記述できます。
1. チャットでアプリの説明を開始するか、提供されたサンプルプロンプトを選択してカスタマイズできます。
1. プロンプトが分析されたら、アプリの要件と概要を確認します。チャットを使用して変更をリクエストするか、**「やり直す**」を選択して空のプロンプトから開始します。
1. 準備ができたら、**アプリの生成**を選択します。
1. 生成したら、アプリのプレビューを選択して、別のタブで**アプリをプレビュー**します。編集を開始する準備ができたら、**アプリの編集**を選択できます。アプリケーションのページ、オートメーション、データを参照して、理解を深めます。下部のデバッグパネルでエラーや警告を確認します。AI を使用したアプリの生成については、「」を参照してください[チュートリアル: AI を使用してアプリを生成する](getting-started-tutorial-ai.md)。App Studio でのビルドの仕組みに関する一般的な情報については、「」を参照してください[AWS App Studio の仕組み](how-it-works.md)。
1. **最初から開始**を選択した場合:
1. **既存のデータに接続**ダイアログボックスで、データソースへのアクセスを App Studio に許可する**コネクタ**を選択し、**Tablse** を選択し、**次へ** を選択して、既存のデータソースをアプリに追加します。このステップをスキップし、後でデータソースを追加するには**、スキップ**を選択します。
1. アプリを作成したら、**アプリの編集**を選択してアプリの編集を開始します。空のアプリケーションから を構築する方法については、「」を参照してください[チュートリアル: 空のアプリから構築を開始する](getting-started-tutorial-empty.md)。App Studio でのビルドの仕組みに関する一般的な情報については、「」を参照してください[AWS App Studio の仕組み](how-it-works.md)。
# アプリケーションのインポート
エクスポートしたアプリケーションのコピーを App Studio インスタンスにインポートできます。他の App Studio インスタンスからエクスポートされたアプリ、または App Studio が提供するカタログからアプリをインポートできます。App Studio アプリカタログからアプリをインポートすると、同様の機能を持つアプリの使用を開始したり、インポートされたアプリを調べて App Studio でのアプリ構築について学習したりできます。
インスタンスにアプリをインポートすると、元のアプリのコピーがインスタンスに作成されます。新しいアプリが作成されると、アプリの開発環境に移動し、プレビューしてアプリの機能を参照できます。
**警告**
アプリケーションをインポートすると、アプリケーションからすべてのロジックをインポートするため、望ましくない動作や予期しない動作が発生する可能性があります。たとえば、アプリケーションに接続するデータベースからデータを削除する破壊的なクエリが存在する可能性があります。本番稼働用データを接続する前に、アプリケーションとその設定を徹底的に確認し、非本番稼働用アセットでテストすることをお勧めします。
**アプリケーションをインポートするには**
1. ナビゲーションペインで、**ビルド**セクションの**マイアプリケーション**を選択して、アプリケーションのリストに移動します。
1. **\$1 アプリの作成**の横にあるドロップダウン矢印を選択します。
1. **アプリのインポート** を選択します。
1. **アプリケーションのインポート**ダイアログボックスの**インポートコード**に、インポートするアプリケーションのインポートコードを入力します。アプリケーションの説明やインポートコードなど、インポートできる App Studio が提供するアプリケーションのリストについては、「」を参照してください[App Studio が提供するインポート可能なアプリ](#app-catalog)。
1. **インポート**を選択してアプリをインポートし、インポートしたアプリの開発環境に移動して表示または編集します。App Studio でのアプリの構築については、「」を参照してください。 [AWS App Studio の仕組み](how-it-works.md)
## App Studio が提供するインポート可能なアプリ
App Studio には、アプリケーション構築について学ぶのに役立つ、インスタンスにインポートできるアプリケーションが用意されています。App Studio で特定のアプリケーション機能がどのように実装されているかを確認するには、アプリケーションをプレビューし、開発環境で設定を参照します。
次の表に、アプリケーションのリスト、インポートコード、およびアプリケーションの簡単な説明を示します。各アプリには、インポート後に表示できるアプリに関する情報を含む`README`ページが含まれています。
| アプリ名 | 説明 | コードのインポート |
| --- | --- | --- |
| **スワップリクエストアンケート** | 従業員がブランド会社の商品を注文できるように設計された内部スワッグリクエストアプリケーション。従業員はアイテムを選択し、サイズを指定して、シンプルな形式でリクエストを送信できます。このアプリケーションは、組み込みストレージを介してすべてのデータを処理するため、外部接続が不要になります。 | スワップリクエストSurvey/ec4f5faf-e2f8-42ee-ab8d-6723d8ca21b2 |
| **スプリントの追跡** | チームがソフトウェア開発作業の整理と追跡に使用できるスプリント管理アプリケーション。ユーザーは、専用のスプリント、トラック、タスクビューを使用して、スプリントの作成、タスクの追加、作業の割り当て、進行状況のモニタリングを行うことができます。このアプリケーションは、組み込みストレージを介してすべてのデータを処理するため、外部接続が不要になります。 | スプリントTracking/8f31e160-771f-48d7-87b0-374e285e2fbc |
| **Amazon Review 感情トラッカー** | このアプリケーションは、製品レビューから感情スコアを生成して、企業が顧客満足度を理解するのに役立つ顧客フィードバック分析ツールです。このアプリケーションには、クイックテスト用のサンプルデータ生成ユーティリティが含まれており、AI を活用したインサイトを得るには Amazon Bedrock コネクタが必要ですが、他のすべてのデータは組み込みストレージシステム内に維持されます。 | Amazon Review Sentiment Tracker/60f0dae4-f8e2-4c20-9583-fa456f5ebfab |
| **請求書と領収書の処理** | この受信処理アプリケーションは、手動データ入力を自動化し、ドキュメント承認ワークフローを合理化することで、時間を節約し、エラーを削減します。このソリューションには、Amazon Textract、Amazon S3、Amazon SES コネクタが必要です。Amazon Textract を使用して、Amazon S3 に保存されている受信からデータを分析および抽出し、抽出された情報を処理して Amazon SES を使用して承認者に E メールで送信します。 | 請求書と領収書Processing/98bde3ae-e454-4b18-a1e6-6f23e8b2a4f1 |
| **検査とインベントリ監査** | 倉庫検査と機器追跡を管理するアプリケーション。ユーザーは、部屋の場所ごとに合格/不合格の機器評価を行い、インベントリレベルをモニタリングし、検査履歴を表示できます。アプリケーションは、施設検査と機器ステータスの両方を追跡するための一元化されたシステムを提供します。このアプリケーションは、組み込みストレージを介してすべてのデータを処理するため、外部接続が不要になります。 | 検査とインベントリのAudit/cf570a06-1c5e-4dd7-9ea8-5c04723d687f |
| **製品導入トラッカー** | 顧客のフィードバック、機能リクエスト、顧客との会議メモを一元化する、製品開発を管理するための包括的なアプリケーション。チームは、顧客とのやり取りを追跡し、要件を整理し、四半期ごとのロードマップ計画のための AI を活用したレポートを生成できます。アプリケーションにはサンプルデータユーティリティが含まれており、AI インサイトには Amazon Bedrock、データ管理には Amazon Aurora PostgreSQL を活用します。 | 製品導入Tracker/9b3a4437-bb50-467f-ae9e-d108776b7ca1 |
| **クイック埋め込み** | 基盤となるデータの操作中にユーザーが分析を表示できるようにするデモアプリケーション。アプリには、App Studio に Amazon Quick ダッシュボードを埋め込むための 2 つの方法があります。登録済みユーザーと匿名ユーザー向けの API ベースのアプローチ (クイックコネクタが必要) と、パブリックダッシュボード用の iFrame 統合です。 | Quicksight Embedding/0cdc15fc-ca8b-41b7-869e-ed13c9072bc8 |
| **キッチンシンク** | 高度な App Studio 開発のヒントとベストプラクティスを示すリファレンスアプリケーション。ビルダーが独自のアプリケーションで調査および実装できる状態管理、CSV データ処理、ブラウザ API 統合、UI パターンの実例が含まれています。いずれの例も外部接続を必要としません。 | App Studio Kitchen Sink/1cfe6b2f-544c-4611-b82c-80eadc76a0c8 |
# アプリケーションの複製
アプリケーション所有者と共同所有者は、アプリケーションを複製して、アプリケーションの正確なコピーを作成できます。アプリの複製は、テスト目的で現在の状態を保持する場合や、複製されたアプリをスターターとして使用して新しいアプリを作成する場合に便利です。
**アプリケーションを複製するには**
1. ナビゲーションペインで、**ビルド**セクションの**マイアプリケーション**を選択します。アクセス可能なアプリケーションのリストを表示するページが表示されます。
1. 複製するアプリケーションの**アクション**列でドロップダウンを選択します。
1. [**複製**] を選択します。**重複**オプションが利用できない場合は、アプリケーションの所有者または共同所有者ではない可能性があります。
1. 必要に応じて、複製されたアプリケーションの名前を指定します。デフォルト名は *Current\$1App\$1Name COPY* です。
1. [**複製**] を選択します。
# アプリケーションの編集または構築
App Studio でアプリケーションを編集するには、次の手順に従います。
**アプリケーションを編集 (ビルド) するには**
1. ナビゲーションペインで、**ビルド**セクションの**マイアプリケーション**を選択します。アクセス可能なアプリケーションのリストを表示するページが表示されます。
1. 編集するアプリケーションの**アクション**列で、**編集**を選択します。これにより、 開発環境に移動し、コンポーネント、オートメーション、データを使用してアプリケーションの外観と機能を設定できます。アプリケーションの構築の詳細については、「」を参照してください[AWS App Studio の開始方法](getting-started.md)。
# 以前に公開されたアプリバージョンを編集する
App Studio アプリケーションの以前に公開されたバージョンを編集するには、次の手順に従います。以前に公開されたバージョンを編集することを選択したら、開発環境でアプリを編集するか、テストしてから本稼働環境に公開できます。
**警告**
以前に公開されたバージョンは、開発環境で進行中のアプリケーションのバージョンを置き換えます。アプリに対する未公開の変更はすべて失われます。
以前に公開されたバージョンを編集すると、ユーザーのアプリケーションを壊す不要な変更や変更を誤って公開し、以前のアプリケーションバージョンからさらにビルドまたは編集する場合に便利です。
**注記**
公開されたアプリの問題を検出し、以前に動作していたバージョンをすぐに公開する必要がある場合、または以前のバージョンを公開して開発環境でアプリに最新の更新を保持する場合は、代わりにアプリをロールバックする必要があります。詳細については、「[以前に公開されたバージョンにロールバックする](application-rollback-version.md)」を参照してください。
**以前に公開されたアプリバージョンを編集するには**
1. 必要に応じて、アプリケーションのアプリケーションスタジオに移動します。
1. Publish ボタンの横にあるドロップダウン矢印を選択し、**Publish** **Center** を選択します。
1. **バージョン履歴**を選択すると、以前に公開されたアプリケーションのバージョンのリストが表示されます。
1. 編集するバージョンを見つけ、**編集**を選択します。
1. 情報を確認し、**元に戻す**を選択します。
1. 編集するために選択したバージョンは、開発環境の現在のバージョンになりました。Publish を選択すると、変更を加えることも、テスト環境にそのまま公開することもできます****。テストに公開されたら、必要に応じて本番環境に再公開できます。
# アプリケーションの名前変更
App Studio でアプリケーションの名前を変更するには、次の手順に従います。アプリケーションの名前は、アプリケーションのリストから変更することも、アプリケーションの構築中に開発環境から変更することもできます。
**アプリケーションの名前を変更するには**
1. ナビゲーションペインで、**ビルド**セクションの**マイアプリケーション**を選択します。アクセス可能なアプリケーションのリストを表示するページが表示されます。
1. このリストから、または編集中に開発環境からアプリケーションの名前を変更できます。
+ このリストから名前を変更するには:
1. 名前を変更するアプリケーションの**アクション**列のドロップダウンを選択し、**名前の変更**を選択します。
1. アプリケーションに新しい名前を付け、**名前の変更**を選択します。
+ 開発環境から名前を変更するには:
1. 編集するアプリケーションの**アクション**列で、**編集**を選択します。
1. 開発環境で、アプリケーション名を選択して更新し、Enter キーを押すか、テキストフィールドから移動して変更を保存します。
# Deleting an application
App Studio でアプリケーションを削除するには、次の手順に従います。
**アプリケーションを削除するには**
1. ナビゲーションペインで、**ビルド**セクションの**マイアプリケーション**を選択します。アクセス可能なアプリケーションのリストを表示するページが表示されます。
1. 削除するアプリケーションの**アクション**列でドロップダウンを選択します。
1. **[削除]** を選択します。
1. **アプリケーションの削除**ダイアログボックスで、アプリケーションの削除に関する情報を注意深く確認します。アプリケーションを削除する場合は、**削除**を選択します。
# アプリケーションのプレビュー、公開、共有
**Topics**
+ [アプリケーションのプレビュー](applications-preview.md)
+ [アプリケーションの公開](applications-publish.md)
+ [公開されたアプリケーションの共有](application-share.md)
+ [以前に公開されたバージョンにロールバックする](application-rollback-version.md)
+ [アプリケーションのエクスポート](applications-export.md)
# アプリケーションのプレビュー
App Studio でアプリケーションをプレビューしてユーザーにどのように表示されるかを確認し、それを使用してデバッグパネルでログをチェックすることでその機能をテストすることもできます。
アプリケーションプレビュー環境は、ライブデータの表示や、データソースなどのコネクタを使用した外部リソースへの接続をサポートしていません。プレビュー環境で機能をテストするには、オートメーションのモック出力とエンティティのサンプルデータを使用できます。リアルタイムデータでアプリケーションを表示するには、アプリケーションを公開する必要があります。詳細については、「[アプリケーションの公開](applications-publish.md)」を参照してください。
プレビュー環境または開発環境は、他の環境で公開されているアプリケーションを更新しません。アプリケーションが公開されていない場合、ユーザーは公開および共有されるまでアクセスできません。アプリケーションがすでに公開および共有されている場合、ユーザーはプレビュー環境で使用されているバージョンではなく、公開されたバージョンに引き続きアクセスできます。
**アプリケーションをプレビューするには**
1. 必要に応じて、プレビューするアプリケーションのアプリケーションスタジオに移動します。
1. ナビゲーションペインで、**ビルド**セクションの**マイアプリケーション**を選択します。
1. アプリケーションの**編集**を選択します。
1. **プレビュー** を選択して、アプリケーションのプレビュー環境を開きます。
1. (オプション) 画面の下部にあるヘッダーを選択して、デバッグパネルを展開します。メッセージのタイプ別にパネルをフィルタリングするには、「 **ログのフィルタリング**」セクションでメッセージのタイプを選択します。**コンソール**のクリアを選択すると、パネルのログをクリアできます。
1. プレビュー環境では、ページ内を移動し、コンポーネントを使用して、そのボタンを選択してデータ転送の自動化を開始することで、アプリケーションをテストできます。プレビュー環境はライブデータや外部ソースへの接続をサポートしていないため、転送されるデータの例をデバッグパネルで表示できます。
# アプリケーションの公開
アプリケーションの作成と設定が完了したら、次のステップとして公開してデータ転送をテストするか、エンドユーザーと共有します。App Studio でのアプリケーションの公開を理解するには、利用可能な環境を理解することが重要です。App Studio には、次のリストで説明されている 3 つの個別の環境が用意されています。
1. **開発**: アプリケーションをビルドしてプレビューする場所。アプリケーションの最新バージョンが自動的にホストされるため、開発環境に発行する必要はありません。この環境では、ライブデータやサードパーティーのサービスやリソースは利用できません。
1. **テスト**: アプリケーションの包括的なテストを実行できる場所。テスト環境では、他の サービスに接続し、データを送受信できます。
1. **本番環境**: エンドユーザーが使用するためのライブ運用環境。
すべてのアプリケーション構築は、 **開発**環境で行われます。次に、**テスト**環境に公開して他の サービス間のデータ転送をテストし、エンドユーザーにアクセス URL を指定してユーザー承認テスト (UAT) を行います。その後、アプリケーションを**本番環境**に公開して、ユーザーと共有する前に最終テストを実行します。アプリケーション環境の詳細については、「」を参照してください[アプリケーション環境](#application-environments)。
アプリケーションを公開すると、共有されるまでユーザーは使用できなくなります。これにより、ユーザーがアプリケーションにアクセスする前に、テスト環境と本番稼働環境でアプリケーションを使用およびテストできます。以前に公開および共有されたアプリケーションを Production に公開すると、ユーザーが利用できるバージョンが更新されます。
## アプリケーションの公開
App Studio アプリケーションをテスト環境または本番稼働環境に公開するには、次の手順に従います。
**アプリケーションをテスト環境または本番稼働環境に公開するには**
1. ナビゲーションペインで、**ビルド**セクションの**マイアプリケーション**を選択します。アクセス可能なアプリケーションのリストを表示するページが表示されます。
1. 発行するアプリケーションの**編集**を選択します。
1. 右上隅にある**発行**を選択します。
1. **更新の発行ダイアログボックスで、次の操作を行います**。
1. アプリケーションの公開に関する情報を確認します。
1. (オプション) **バージョンの説明**に、このバージョンのアプリケーションの説明を含めます。
1. 環境に関する情報を承認するボックスを選択します。
1. **[開始]** を選択します。アプリケーションがライブ環境で更新されるまでに最大 15 分かかる場合があります。
1. テスト環境または本番稼働環境でアプリケーションを表示する方法については、「」を参照してください[公開されたアプリケーションの表示](#application-viewing-published)。
**注記**
テスト環境または本番稼働環境でアプリケーションを使用すると、コネクタに接続されたデータソースのテーブルにレコードを作成するなど、ライブデータ転送が発生します。
一度も共有されていない公開アプリケーションは、ユーザーや他のビルダーでは使用できません。ユーザーがアプリケーションを使用できるようにするには、公開後にアプリケーションを共有する必要があります。詳細については、「[公開されたアプリケーションの共有](application-share.md)」を参照してください。
## 公開されたアプリケーションの表示
テスト環境と本番環境に公開されたアプリケーションを表示して、エンドユーザーや他のビルダーと共有する前にアプリケーションをテストできます。
**テスト環境または本番稼働環境で公開されたアプリケーションを表示するには**
1. 必要に応じて、プレビューするアプリケーションのアプリケーションスタジオに移動します。
1. ナビゲーションペインで、**ビルド**セクションの**マイアプリケーション**を選択します。
1. アプリケーションの**編集** を選択します。
1. 右上隅の **Publish** の横にあるドロップダウン矢印を選択し、**Publish Center** を選択します。
1. 公開センターから、アプリケーションが公開されている環境を表示できます。アプリケーションがテスト環境または本番稼働環境に公開されている場合は、各環境の **URL** リンクを使用してアプリケーションを表示できます。
**注記**
テスト環境または本番稼働環境でアプリケーションを使用すると、コネクタに接続されたデータソースのテーブルにレコードを作成するなど、ライブデータ転送が発生します。
## アプリケーション環境
AWS App Studio は、開発、テスト、本番稼働の 3 つの異なる環境でアプリケーションライフサイクル管理 (ALM) 機能を提供します。これにより、アプリケーションのライフサイクル全体で個別の環境、バージョン管理、共有、モニタリングを維持するなどのベストプラクティスをより簡単に行うことができます。
### デベロッパー環境
**開発**環境は、アプリケーションスタジオとサンプルデータを使用して、ライブデータソースやサービスに接続せずにアプリケーションを構築できる独立したサンドボックスです。開発環境では、本番データを侵害することなく、アプリケーションをプレビューしてアプリケーションを表示およびテストできます。
アプリは開発環境の他のサービスに接続しませんが、ライブデータコネクタとオートメーションを模倣するようにアプリでさまざまなリソースを設定できます。
開発環境のアプリケーションスタジオの下部にエラーと警告を含む折りたたみ可能なデバッグパネルがあり、ビルド時にアプリケーションを検査およびデバッグするのに役立ちます。アプリケーションのトラブルシューティングとデバッグの詳細については、「」を参照してください[App Studio のトラブルシューティングとデバッグ](troubleshooting-and-debugging.md)。
### 環境のテスト
最初のアプリケーション開発が完了したら、次のステップとして**テスト**環境に公開します。テスト環境では、アプリは他の サービスに接続したり、データを送信したり、他のサービスからデータを受信したりできます。したがって、この環境を使用して、エンドユーザーにアクセス URL を提供することで、ユーザー受け入れテスト (UAT) を含む包括的なテストを実行できます。
**注記**
テスト環境への最初の発行には最大 15 分かかる場合があります。
テスト環境に公開されたアプリのバージョンは、エンドユーザーが非アクティブになってから 3 時間後に削除されます。ただし、すべてのバージョンは保持され、**バージョン履歴**タブから復元できます。
テスト環境の主な機能は次のとおりです。
+ ライブデータソースと APIsとの統合テスト
+ 管理されたアクセスを通じて容易になるユーザー受け入れテスト (UAT)
+ フィードバックを集め、問題に対処するための環境
+ ブラウザコンソールと開発者ツールを使用して、クライアント側とサーバー側のアクティビティの両方を検査およびデバッグする機能。
アプリケーションのトラブルシューティングとデバッグの詳細については、「」を参照してください[App Studio のトラブルシューティングとデバッグ](troubleshooting-and-debugging.md)。
### 本番環境
テストして問題を修正したら、アプリケーションのバージョンをテスト環境から本番環境に昇格させて、運用をライブで使用できます。本番稼働環境はエンドユーザーが使用するライブ運用環境ですが、公開されたバージョンをユーザーと共有する前にテストできます。
本番稼働環境で公開されたバージョンは、エンドユーザーが 14 日間操作しないと削除されます。ただし、すべてのバージョンは保持され、**バージョン履歴**タブから復元できます。
本番稼働環境の主な機能は次のとおりです。
+ エンドユーザーが使用するためのライブ運用環境
+ きめ細かなロールベースのアクセスコントロール
+ バージョン管理とロールバック機能
+ クライアント側のアクティビティのみを検査およびデバッグする機能
+ ライブコネクタ、データ、オートメーション、APIs
## バージョニングとリリース管理
App Studio は、**パブリッシュセンター**のバージョニングシステムを通じてバージョン管理とリリース管理機能を提供します。
キーバージョニング機能:
+ テスト環境に発行すると、新しいバージョン番号 (1.0、2.0、3.0...) が生成されます。
+ テスト環境から本番環境に昇格しても、バージョン番号は変更されません。
+ バージョン**履歴**から以前のバージョンにロールバックできます。
+ テスト環境に公開されたアプリケーションは、非アクティブ状態が 3 時間続くと一時停止されます。バージョンは保持され、**バージョン履歴**から復元できます。
+ 本番環境に公開されたアプリケーションは、14 日間の非アクティブ状態後に削除されます。バージョンは保持され、**バージョン履歴**から復元できます。
このバージョニングモデルにより、アプリケーションの開発とテストサイクル全体でトレーサビリティ、ロールバック機能、最適なパフォーマンスを維持しながら、迅速なイテレーションが可能になります。
## メンテナンスとオペレーション
App Studio は、特定のメンテナンスタスク、運用アクティビティに対処し、新しいソフトウェアライブラリを組み込むために、アプリケーションを自動的に再公開する必要がある場合があります。ビルダーは何もする必要はありませんが、エンドユーザーはアプリケーションにログインし直す必要がある場合があります。状況によっては、自動的に追加できない新機能とライブラリを組み込むために、アプリケーションを再公開する必要がある場合があります。再発行する前に、エラーを解決し、警告を確認する必要があります。
# 公開されたアプリケーションの共有
まだ公開されていないアプリケーションを公開すると、共有されるまでユーザーは使用できなくなります。公開されたアプリケーションは共有されると、ユーザーが使用できるようになります。別のバージョンが公開された場合は、再度共有する必要はありません。
**注記**
このセクションでは、公開されたアプリケーションをエンドユーザーまたはテスターと共有します。他のユーザーを招待してアプリを構築する方法については、「」を参照してください[複数のユーザーによるアプリの構築](builder-collaboration.md)。
**公開されたアプリケーションを共有するには**
1. 以下の手順に従って、アプリケーションリストまたはアプリケーションのアプリケーションスタジオから**共有**ダイアログボックスにアクセスします。
+ アプリケーションリストから**共有**ダイアログボックスにアクセスするには: ナビゲーションペインで、**ビルド**セクションで**アプリケーション**を選択します。共有するアプリケーションの**アクション**列のドロップダウンを選択し、**共有**を選択します。
+ アプリケーションスタジオから**共有**ダイアログボックスにアクセスするには: アプリケーションのアプリケーションスタジオから、上部のヘッダーで**共有**を選択します。
1. **共有**ダイアログボックスで、共有する環境のタブを選択します。**テスト**タブまたは**本**番稼働用タブが表示されない場合、アプリは対応する環境に公開されない可能性があります。公開の詳細については、「[アプリケーションの公開](applications-publish.md)」を参照してください。
1. 適切なタブで、ドロップダウンメニューからグループを選択して環境を共有します。
1. (オプション) 条件付きページの可視性をテストまたは設定するために、アプリケーションレベルのロールを グループに割り当てます。詳細については、「[ページのロールベースの可視性の設定](app-level-roles.md)」を参照してください。
1. [**共有**] を選択します。
1. (オプション) リンクをコピーしてユーザーと共有します。アプリケーションと環境が共有されているユーザーのみが、対応する環境内のアプリケーションにアクセスできます。
# 以前に公開されたバージョンにロールバックする
App Studio アプリケーションの本番稼働環境を以前に公開されたバージョンにロールバックするには、次の手順に従います。アプリケーションのエンドユーザーが影響を受け、デプロイ後にアプリケーションのロールバックバージョンが表示されます。アプリケーションをロールバックすると、コンポーネントコードも前回の公開時刻からのバージョンにロールバックされ、アプリケーションデプロイスタック全体 (ユーザーコード、コンポーネント設定状態) に影響します。つまり、フィールドやその他の設定の変更など、App Studio がコンポーネントコードに対して行った更新はロールバックされ、ロールバックされたアプリケーションバージョンが最初に公開されたときと同じように動作します。
開発環境で進行中のアプリケーションのバージョンは、公開されたバージョンをロールバックしても影響を受けません。
アプリケーションの公開されたバージョンをロールバックすると、公開されたアプリケーションの問題を検出し、以前に動作したバージョンをすぐに公開する必要がある場合や、以前のバージョンを公開して開発環境でアプリケーションに最新の更新を保持する場合に便利です。
**注記**
アプリの開発環境を以前に公開されたバージョンに戻す場合は、アプリケーションを元に戻す必要があります。詳細については、「[以前に公開されたアプリバージョンを編集する](applications-edit-previously-published-version.md)」を参照してください。
**本番稼働環境バージョンを以前に公開されたアプリケーションバージョンにロールバックするには**
1. 必要に応じて、アプリケーションを編集して開発環境に移動します。詳細については、「[アプリケーションの編集または構築](applications-edit.md)」を参照してください。
1. **本番**稼働用環境タイルの上部にあるバージョンドロップダウン矢印を選択すると、ロールバックに使用できるバージョンが表示されます。ドロップダウンには、過去 30 日以内に発行されたバージョンが含まれます。このドロップダウンが無効になっているのは、アプリの発行がすでに進行中であり、同時に実行できる発行は 1 つだけである可能性があります。
1. ロールバックするバージョンを選択します。
1. ロールバックの理由を入力し、**ロールバック**を選択します。ロールバック公開が開始され、完了すると、アプリケーションの本番稼働環境が選択したバージョンに更新されます。
**注記**
ロールバック後に、以前に公開されたアプリバージョンにロールフォワードすることもできます。
# アプリケーションのエクスポート
アプリケーションのスナップショットをエクスポートして、他の App Studio インスタンスと共有できます。アプリをエクスポートすると、アプリの開発環境からスナップショットが作成され、インポートコードが生成されます。その後、インポートコードを使用して、アプリケーションを表示および構築できる他の App Studio インスタンスにアプリケーションをインポートできます。
エクスポートされたアプリは、App Studio で AWS リージョン サポートされている のインスタンスにインポートできます。
**アプリケーションをエクスポートするには**
1. ナビゲーションペインで、**ビルド**セクションの**マイアプリケーション**を選択して、アプリケーションのリストに移動します。
1. エクスポートするアプリケーションの**アクション**列でドロップダウンを選択します。
1. **[エクスポート]** を選択します。
1. インポートコードを生成して共有する手順は、アプリのインポートコードが既に作成されているかどうかによって異なります。
+ インポートコードが作成されていない場合:
1. **アプリケーションのインポート許可**で、エクスポートされたアプリケーションをインポートできるインスタンスを指定します。すべてのインスタンスにインポートアクセス許可を付与することも、インスタンス IDs を入力して特定の App Studio インスタンスを追加することもできます。複数のインスタンス IDsで区切ります。
インスタンス ID を検索するには、App Studio コンソールでアカウント設定を選択して、インスタンスの**アカウント設定**に移動します。
1. **インポートコードの生成** を選択します。
1. 生成されたインポートコードをコピーして共有します。
+ インポートコードがすでに作成されている場合:
1. 現在エクスポートされているアプリを共有するには、既存のインポートコードをコピーして共有します。アプリに最新の変更を加えた新しいエクスポート済みアプリを作成するには、**「新しいコードの生成**」を選択します。必要に応じてインポート権限を更新することもできます。
# ページとコンポーネント: アプリケーションのユーザーインターフェイスを構築する
**Topics**
+ [ページの管理](pages.md)
+ [コンポーネントの管理](adding-editing-deleting-components.md)
+ [ページのロールベースの可視性の設定](app-level-roles.md)
+ [アプリナビゲーションでのページの順序付けと整理](pages-order.md)
+ [アプリテーマでアプリの色を変更する](app-theme.md)
+ [コンポーネントリファレンス](components-reference.md)
# ページの管理
AWS App Studio アプリケーションからページを作成、編集、または削除するには、次の手順に従います。
**ページ**は[コンポーネントの](concepts.md#concepts-component)コンテナであり、App Studio のアプリケーションの UI を構成します。各ページは、ユーザーが操作するアプリケーションのユーザーインターフェイス (UI) の画面を表します。ページは、アプリケーションスタジオの**ページ**タブで作成および編集されます。
# ページの作成
App Studio でアプリケーションにページを作成するには、次の手順に従います。既存のページの複製については、「」を参照してください[ページの複製](pages-duplicate.md)。
**ページを作成するには**
1. 必要に応じて、アプリケーションを編集して開発環境に移動します。
1. **Pages **タブに移動します。
1. 左側の**ページメニューで**、 **\$1 追加** を選択します。
# ページの複製
App Studio のアプリケーションでページを複製するには、次の手順に従います。
**ページを複製するには**
1. 必要に応じて、アプリケーションを編集して開発環境に移動します。
1. **Pages **タブに移動します。
1. 左側の**ページ**メニューで、複製するページの名前の横にある楕円メニューを選択し、**重複**を選択します。複製されたページは、元のページの直後に追加されます。
# ページプロパティの表示と編集
App Studio のアプリケーションのページを編集するには、次の手順に従います。ページの名前、パラメータ、レイアウトなどのプロパティを編集できます。
**ページのプロパティを表示または編集するには**
1. 必要に応じて、アプリケーションを編集して開発環境に移動します。
1. **Pages **タブに移動します。
1. 左側の**ページ**メニューで、編集するページの名前の横にある楕円メニューを選択し、**ページプロパティ**を選択します。これにより、右側の**プロパティ**メニューが開きます。
1. ページ名を編集するには:
**注記**
有効なページ名文字: **A～Z**、**a～z**、**0～9**、**\$1**、**\$1**
1. **プロパティ**メニューの上部にある名前の横にある鉛筆アイコンを選択します。
1. ページの新しい名前を入力し、Enter キーを押します。
1. ページパラメータを作成、編集、または削除するには:
1. ページパラメータを作成するには、**「ページパラメータ**」セクションで **\$1 新規**追加を選択します。
1. ページパラメータの**キー**または**説明**の値を編集するには、変更するプロパティの入力フィールドを選択し、新しい値を入力します。変更は編集時に保存されます。
1. ページパラメータを削除するには、削除するページパラメータのごみ箱アイコンを選択します。
1. ページのロゴまたはバナーを追加、編集、または削除するには:
1. ページロゴまたはバナーを追加するには、**スタイル**セクションでそれぞれのオプションを有効にします。イメージのソースを設定し、オプションで代替テキストを指定します。
1. ページロゴまたはバナーを編集するには、**スタイル**セクションのフィールドを更新します。
1. ページロゴまたはバナーを削除するには、**スタイル**セクションでそれぞれのオプションを無効にします。
1. ページのレイアウトを編集するには:
1. **レイアウト**セクションのフィールドを更新します。
# ページの削除
App Studio のアプリケーションからページを削除するには、次の手順に従います。
**ページを削除するには**
1. 必要に応じて、アプリケーションを編集して開発環境に移動します。
1. **Pages **タブに移動します。
1. 左側の**ページ**メニューで、削除するページの名前の横にある楕円メニューを選択し、**削除**を選択します。
# コンポーネントの管理
次の手順を使用して、App Studio アプリケーションスタジオのページとの間でコンポーネントを追加、編集、削除し、アプリケーションに必要なユーザーインターフェイスを作成します。
# ページへのコンポーネントの追加
App Studio のページにコンポーネントを追加するには、次の手順に従います。既存のコンポーネントの複製については、「」を参照してください[コンポーネントの複製](duplicating-components.md)。
1. 必要に応じて、アプリケーションを編集して開発環境に移動します。
1. **Pages **タブに移動します。
1. コンポーネントパネルは、使用可能なコンポーネントを含む右側のメニューにあります。
1. パネルから目的のコンポーネントをキャンバスにドラッグアンドドロップします。または、パネル内のコンポーネントをダブルクリックして、現在のページの中央に自動的に追加することもできます。
1. コンポーネントを追加したので、右側の**プロパティ**パネルを使用して、データソース、レイアウト、動作などの設定を調整します。各コンポーネントタイプの設定の詳細については、「」を参照してください[コンポーネントリファレンス](components-reference.md)。
# コンポーネントの複製
App Studio アプリでコンポーネントを複製するには、次の手順に従います。複製されたコンポーネントには、元のコンポーネントのリンクされたオートメーションまたはエンティティが含まれます。
1. 必要に応じて、アプリケーションを編集して開発環境に移動します。
1. **Pages **タブに移動します。
1. コンポーネントを複製する方法は 2 つあります。
+ 左側の**ページ**メニューで、複製するコンポーネントを含むページを展開します。複製するコンポーネントの名前の横にある楕円メニューを選択し、**複製**を選択します。
+ 複製するコンポーネントを選択し、複製アイコンを選択します。
複製されたコンポーネントは、元のコンポーネントの直後に追加されます。
**ヒント**
CTRL\$1Z または CMD\$1Z キーボードショートカットを使用して、開発環境の他の多くのアクションとともにコンポーネントの重複を元に戻すことができます。
# コンポーネントプロパティの表示と編集
1. 必要に応じて、アプリケーションを編集して開発環境に移動します。
1. **Pages **タブに移動します。
1. 左側の**ページ**メニューで、コンポーネントを含むページを展開し、表示または編集するコンポーネントを選択します。または、ページを選択し、キャンバスからコンポーネントを選択することもできます。
1. 右側の**プロパティ**パネルには、選択したコンポーネントの設定内容が表示されます。
1. 使用可能なさまざまなプロパティとオプションを調べ、必要に応じて更新してコンポーネントの外観と動作を設定します。たとえば、データソースを変更したり、レイアウトを設定したり、追加機能を有効にしたりできます。
各コンポーネントタイプの設定の詳細については、「」を参照してください[コンポーネントリファレンス](components-reference.md)。
# コンポーネントの削除
1. 必要に応じて、アプリケーションを編集して開発環境に移動します。
1. **Pages **タブに移動します。
1. 左側の**ページ**メニューで、削除するコンポーネントを選択して選択します。
1. 右側の**プロパティ**メニューで、ごみ箱アイコンを選択します。
1. 確認ダイアログボックスで、[**削除**] を選択します。
# ページのロールベースの可視性の設定
App Studio アプリ内でロールを作成し、それらのロールに基づいてページの可視性を設定できます。たとえば、プロジェクトの承認やクレーム処理などの機能を提供し、特定のページを特定のロールに表示するアプリケーションの管理者、マネージャー、ユーザーなど、ユーザーのニーズやアクセスレベルに基づいてロールを作成できます。この例では、管理者はフルアクセス、マネージャーはレポートダッシュボードを表示するアクセス、ユーザーは入力フォームを含むタスクページにアクセスできる場合があります。
App Studio アプリのページのロールベースの可視性を設定するには、次の手順に従います。
1. 必要に応じて、アプリケーションのアプリケーションスタジオに移動します。左側のナビゲーションメニューから、**マイアプリケーション**を選択し、アプリケーションを検索して**編集**を選択します。
1. アプリケーションスタジオでアプリケーションレベルのロールを作成します。
1. アプリケーションスタジオの上部にあるアプリケーション**設定**タブを選択します。
1. 選択 **\$1 ロールの追加**
1. **ロール名**で、ロールを識別する名前を指定します。名前を使用してページの可視性を設定するため、グループのアクセスレベルまたは職務を説明する名前を使用することをお勧めします。
1. 必要に応じて、**説明**でロールの説明を追加します。
1. これらのステップを繰り返して、必要な数のロールを作成します。
1. ページの可視性を設定する
1. アプリケーションスタジオの上部にある**ページ**タブを選択します。
1. 左側の**ページ**メニューから、ロールベースの可視性を設定するページを選択します。
1. 右側のメニューで、**プロパティ**タブを選択します。
1. **可視性**で、**すべてのエンドユーザーに対して Open** を無効にします。
1. 前のステップで作成した**ロール**のリストから選択するロールを選択したままにします。**カスタム** を選択して、より複雑な可視性設定のための JavaScript 式を記述します。
1. **ロール**を選択し、ページが表示されるアプリロールのチェックボックスをオンにします。
1. Custom ****を選択し、true または false に解決される JavaScript 式を入力します。次の例を使用して、現在のユーザーが*マネージャー*のロールを持っているかどうかを確認します。 `{{currentUser.roles.includes('manager')}}`
1. 可視性が設定されたら、アプリをプレビューすることでページの可視性をテストできます。
1. **プレビュー** を選択して、アプリのプレビューを開きます。
1. プレビューの右上で、**プレビューをメニューとして**選択し、テストするロールのチェックボックスをオンにします。表示されるページには、選択したロールが反映されている必要があります。
1. 次に、公開されたアプリのアプリロールにグループを割り当てます。グループとロールの割り当ては、環境ごとに個別に設定する必要があります。アプリケーション環境の詳細については、「」を参照してください[アプリケーション環境](applications-publish.md#application-environments)。
**注記**
App Studio グループを作成および設定したロールに割り当てるには、アプリケーションをテスト環境または本番稼働環境に公開する必要があります。必要に応じて、アプリを公開してロールにグループを割り当てます。公開の詳細については、「[アプリケーションの公開](applications-publish.md)」を参照してください。
1. アプリケーションスタジオの右上で、**共有**を選択します。
1. ページの可視性を設定する環境のタブを選択します。
1. **検索グループ**入力ボックスを選択し、アプリバージョンを共有するグループを選択します。テキストを入力してグループを検索できます。
1. ドロップダウンメニューで、グループに割り当てるロールを選択します。アプリケーションバージョンを共有する**ロールなし**を選択し、グループにロールを割り当てません。ロールのないグループには、すべてのユーザーに表示されるページのみが表示されます。
1. [**共有**] を選択します。これらのステップを繰り返して、必要な数のグループを追加します。
# アプリナビゲーションでのページの順序付けと整理
このトピックでは、App Studio アプリケーションのページの順序変更と整理について説明します。製品には、アプリケーションページが表示される 2 つの領域があります。アプリケーションスタジオでアプリケーションを編集する際の左側の**ページ**メニューと、公開されたアプリケーションのプレビューの左側のナビゲーションです。
## アプリの編集中の左側の**ページ**メニューでのページの順序付け
アプリケーションスタジオでアプリケーションを編集する際、ページは左側の**ページ**メニューで作成時刻順に並べられます。このメニューのページの順序を変更することはできません。
## プレビューまたは公開アプリケーションのナビゲーションでのページの順序付け、表示、非表示
プレビューまたは公開されたアプリの左側のナビゲーションの次の設定を編集できます。
+ ナビゲーション全体の可視性
+ ナビゲーション内の特定のページの可視性
+ ナビゲーション内のページの順序
**プレビューまたは公開アプリケーションの左側のナビゲーションを編集するには**
1. 必要に応じて、アプリケーションのアプリケーションスタジオに移動して編集します。
1. 左側の**ページ**メニューで、**ヘッダーとナビゲーション**を選択します。
1. 右側の**ヘッダーとナビゲーション**メニューで、以下を表示または編集します。
1. アプリでナビゲーションを非表示または表示するには、**アプリナビゲーション**トグルを使用します。
1. アプリのナビゲーションからページを非表示にするには、リンク**されていないページ**セクションにページをドラッグします。****
1. アプリのナビゲーションでページを並べ替えるには、**リンクされたページ**セクションで目的の順序にドラッグします。
# アプリテーマでアプリの色を変更する
アプリケーションテーマを設定してアプリケーションの色を更新するには、次の手順に従います。
1. 必要に応じて、アプリケーションのアプリケーションスタジオに移動して編集します。
1. アプリケーションスタジオで、**ページ**タブに移動します。
1. 左側のナビゲーションで、**アプリテーマ**を選択して右側のアプリテーマ設定を開きます。
1. **ベーステーマ**で、**ライトモード**または**ダークモード**を選択します。
1. アプリケーションにカスタム色を追加するには、**カスタマイズ**トグルを有効にし、次の設定を更新します。
1. **プライマリカラー**で、特定のコンポーネントとアプリのナビゲーションに適用される色を選択します。カラーピッカー、RGB、HSL、または HEX コードを使用して色を選択できます。
**注記**
App Studio は、色に自動的にアクセスできるようにします。例えば、ライトモードでライトカラーを選択すると、アクセスしやすくなるように更新されます。
1. **ヘッダーの色**で、アプリのヘッダーに適用される色を選択します。カラーピッカー、RGB、HSL、または HEX コードを使用して色を選択できます。
1. **デフォルトのテーマ**を選択して事前定義されたテーマを表示して選択するか、**ランダム化**を選択してランダムなプライマリとヘッダーの色を生成します。
1. **変更の保存**を選択して、アプリのテーマを更新します。
# コンポーネントリファレンス
このトピックでは、App Studio の各コンポーネントとそのプロパティについて詳しく説明し、設定例を示します。
## 一般的なコンポーネントプロパティ
このセクションでは、アプリケーションスタジオの複数のコンポーネント間で共有される一般的なプロパティと機能の概要を説明します。各プロパティタイプの具体的な実装の詳細とユースケースはコンポーネントによって異なりますが、これらのプロパティの一般的な概念は App Studio 全体で一貫しています。
### 名前
コンポーネントごとにデフォルト名が生成されますが、 を編集して各コンポーネントに一意の名前に変更することができます。この名前を使用して、コンポーネントと、同じページ内の他のコンポーネントまたは式からのデータを参照します。制限: コンポーネント名にはスペースを含めないでください。文字、数字、アンダースコア、ドル記号のみを使用できます。例: `userNameInput`、`ordersTable`、`metricCard1`。
### プライマリ値、セカンダリ値、および値
アプリケーションスタジオの多くのコンポーネントには、コンポーネント内に表示されるコンテンツまたはデータを決定する値または式を指定するためのフィールドが用意されています。これらのフィールドには、多くの場合`Primary value`、コンポーネントタイプと目的に応じて`Value`、`Secondary value`、、または単に というラベルが付けられます。
`Primary value` フィールドは通常、コンポーネント内で目立つように表示する必要があるメイン値、データポイント、またはコンテンツを定義するために使用されます。
`Secondary value` フィールドは、使用可能な場合、追加の値またはサポート値、または情報をプライマリ値とともに表示するために使用されます。
`Value` フィールドでは、コンポーネントに表示する値または式を指定できます。
これらのフィールドは、静的テキスト入力と動的式の両方をサポートします。式を使用すると、アプリケーション内の他のコンポーネント、データソース、または変数のデータを参照できるため、動的でデータ駆動型のコンテンツ表示が可能になります。
#### 式の構文
これらのフィールドに式を入力するための構文は、一貫したパターンに従います。
```
{{expression}}
```
ここで、*expression* は、表示する値またはデータに評価される有効な式です。
##### 例: 静的テキスト
+ プライマリ値: `"123"`や などの静的な数値を直接入力できます`"$1,999.99"`。
+ セカンダリ値: `"Goal"`や などの静的テキストラベルを入力できます`"Projected Revenue"`。
+ 値: `"since last month"`や などの静的文字列を入力できます`"Total Quantity"`。
##### 例: 式
+ `Hello, {{currentUser.firstName}}`: 現在ログインしているユーザーの名で挨拶を表示します。
+ `{{currentUser.role === 'Admin' ? 'Admin Dashboard' : 'User Dashboard'}}`: 条件付きで、ユーザーのロールに基づいて異なるダッシュボードタイトルを表示します。
+ `{{ui.componentName.data?.[0]?.fieldName}}`: ID のコンポーネントのデータの最初の項目から `fieldName`フィールドの値を取得します`componentName`。
+ `{{ui.componentName.value * 100}}`: ID のコンポーネントの値に対して計算を実行します`componentName`。
+ `{{ui.componentName.value + ' items'}}`: コンポーネントの値を ID `componentName`と文字列 と連結します`' items'`。
+ `{{ui.ordersTable.data?.[0]?.orderNumber}}`: `ordersTable`コンポーネント内のデータの最初の行から注文番号を取得します。
+ `{{ui.salesMetrics.data?.[0]?.totalRevenue * 1.15}}`: `salesMetrics`コンポーネントのデータの最初の行から総収益を 15% 増やして、予測収益を計算します。
+ `{{ui.customerProfile.data?.[0]?.firstName + ' ' + ui.customerProfile.data?.lastName}}`: `customerProfile`コンポーネント内のデータから名と姓を連結します。
+ `{{new Date(ui.orderDetails.data?.orderDate).toLocaleDateString()}}`: `orderDetails`コンポーネントからの注文日をより読みやすい日付文字列にフォーマットします。
+ `{{ui.productList.data?.length}}`: `productList`コンポーネントに接続されたデータ内の製品の合計数を表示します。
+ `{{ui.discountPercentage.value * ui.orderTotal.value}}`: 割引率と注文合計に基づいて割引額を計算します。
+ `{{ui.cartItemCount.value + ' items in cart'}}`: ショッピングカート内の項目数をラベル とともに表示します`items in cart`。
これらの式フィールドを使用すると、アプリケーション内で動的コンテンツとデータ駆動型コンテンツを作成できるため、ユーザーのコンテキストやアプリケーションの状態に合わせた情報を表示できます。これにより、よりパーソナライズされたインタラクティブなユーザーエクスペリエンスが可能になります。
### ラベル
**Label** プロパティを使用すると、コンポーネントの字幕またはタイトルを指定できます。このラベルは通常、コンポーネントの横または上に表示され、ユーザーがその目的を理解するのに役立ちます。
静的テキストと式の両方を使用してラベルを定義できます。
#### 例: 静的テキスト
Label フィールドにテキスト「First Name」を入力すると、コンポーネントはラベルとして「First Name」を表示します。
#### 例: 式
##### 例: 小売店
次の例では、ユーザーごとにラベルをパーソナライズし、インターフェイスを個人に合わせてカスタマイズします。
```
{{currentUser.firstName}} {{currentUser.lastName}}'s Account
```
##### 例: SaaS プロジェクト管理
次の の例では、選択したプロジェクトからデータを取得してコンテキスト固有のラベルを提供し、ユーザーがアプリケーション内で向きを維持できるようにします。
```
Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}}
```
##### 例: 医療施設
次の例では、現在のユーザーのプロファイルと医師の情報を参照し、患者によりパーソナライズされたエクスペリエンスを提供します。
```
Dr. {{ui.doctorProfileTable.data.firstName}}
{{ui.doctorProfileTable.data.lastName}}
```
### Placeholder
Placeholder プロパティを使用すると、コンポーネントが空の場合に表示されるヒントまたはガイダンステキストを指定できます。これにより、ユーザーは予想される入力形式を理解したり、追加のコンテキストを提供したりできます。
静的テキストと式の両方を使用してプレースホルダーを定義できます。
#### 例: 静的テキスト
`Enter your name` **Placeholder** フィールドにテキストを入力すると、コンポーネントがプレースホルダーテキスト`Enter your name`として表示されます。
#### 例: 式
##### 例: 金融サービス
`Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} account` これらの例では、選択したアカウントからデータを取得して関連するプロンプトを表示し、銀行のお客様にインターフェイスを直感的に使用できるようにします。
##### 例: e コマース
`Enter the coupon code for {{ui.cartTable.data.currency}} total` ここでのプレースホルダーは、ユーザーのカートの内容に基づいて動的に更新され、シームレスなチェックアウトエクスペリエンスを提供します。
##### 例: 医療施設
`Enter your {{ui.patientProfile.data.age}}-year-old patient's symptoms` 患者の年齢を参照する式を使用することで、アプリケーションはよりパーソナライズされた便利なプレースホルダーを作成できます。
### ソース
**Source** プロパティを使用すると、コンポーネントのデータソースを選択できます。選択時に、、`entity`、`expression`または のデータソースタイプから選択できます`automation`。
#### エンティティ
Entity をデータソース****として選択すると、コンポーネントをアプリケーションの既存のデータエンティティまたはモデルに接続できます。これは、アプリケーション全体で活用したい明確に定義されたデータ構造またはスキーマがある場合に便利です。
エンティティデータソースを使用するタイミング:
+ コンポーネントに表示する情報を含むデータモデルまたはエンティティがある場合 (たとえば、「Name」、「Description」、「Price」などのフィールドを持つ「Products」エンティティ）。
+ データベース、API、またはその他の外部データソースからデータを動的に取得し、コンポーネントに表示する必要がある場合。
+ アプリケーションのデータモデルで定義されている関係と関連付けを活用する場合。
##### エンティティでのクエリの選択
コンポーネントを、エンティティ全体ではなくエンティティからデータを取得する特定のクエリに接続する場合があります。エンティティデータソースでは、既存のクエリから選択するか、新しいクエリを作成するかを選択できます。
クエリを選択すると、次のことができます。
+ 特定の条件に基づいて、コンポーネントに表示されるデータをフィルタリングします。
+ クエリにパラメータを渡して、データを動的にフィルタリングまたはソートします。
+ クエリで定義された複雑な結合、集約、またはその他のデータ操作手法を活用します。
たとえば、アプリケーションに `Name`、、 などのフィールドを持つ`Customers`エンティティがある場合`Email`です`PhoneNumber`。テーブルコンポーネントをこのエンティティに接続し、ステータスに基づいて顧客をフィルタリングする事前定義された`ActiveCustomers`データアクションを選択できます。これにより、顧客データベース全体ではなく、アクティブな顧客のみをテーブルに表示できます。
##### エンティティデータソースへのパラメータの追加
エンティティをデータソースとして使用する場合は、コンポーネントにパラメータを追加することもできます。これらのパラメータを使用して、コンポーネントに表示されるデータをフィルタリング、ソート、または変換できます。
たとえば、、`Name`、、 `Description` `Price`などのフィールドを持つ`Products`エンティティがある場合です`Category`。製品リストを表示するテーブルコンポーネント`category`に という名前のパラメータを追加できます。ユーザーがドロップダウンからカテゴリを選択すると、データアクションの `{{params.category}}`式を使用して、選択したカテゴリに属する製品のみを表示するようにテーブルが自動的に更新されます。
#### 式
カスタム式または計算を入力するデータソースとして**式**を選択し、コンポーネントのデータを動的に生成します。これは、変換を実行したり、複数のソースからのデータを結合したり、特定のビジネスロジックに基づいてデータを生成したりする必要がある場合に便利です。
**Expression** データソースを使用するタイミング:
+ データモデルで直接利用できないデータを計算または取得する必要がある場合 (例: 数量と価格に基づいて合計注文価格を計算する）。
+ 複数のエンティティまたはデータソースのデータを組み合わせて複合ビューを作成する場合 (顧客の注文履歴と連絡先情報を表示するなど）。
+ 特定のルールまたは条件に基づいてデータを生成する必要がある場合 (ユーザーの閲覧履歴に基づいて「推奨製品」リストを表示するなど）。
たとえば、現在の月の合計収益を表示する必要がある*メトリクス*コンポーネントがある場合、次のような式を使用して月別収益を計算して表示できます。
```
{{ui.table1.orders.concat(ui.table1.orderDetails).filter(o => o.orderDate.getMonth() === new Date().getMonth()).reduce((a, b) => a + (b.quantity * b.unitPrice), 0)}}
```
##### オートメーション
Automation をデータソース****として選択し、コンポーネントをアプリケーションの既存のオートメーションまたはワークフローに接続します。これは、コンポーネントのデータまたは機能が特定のプロセスまたはワークフローの一部として生成または更新される場合に便利です。
**Automation** データソースを使用するタイミング:
+ コンポーネントに表示されるデータが特定の自動化またはワークフローの結果である場合 (承認プロセスの一部として更新される「承認保留中」テーブルなど）。
+ オートメーション内のイベントまたは条件に基づいて、コンポーネントに対するアクションまたは更新をトリガーする場合 (例: SKU の最新の売上数値でメトリクスを更新する）。
+ オートメーション (サードパーティー API からデータを取得してテーブルに表示するなど) を使用して、コンポーネントをアプリケーションの他のサービスまたはシステムと統合する必要がある場合。
たとえば、ジョブアプリケーションプロセスを通じてユーザーをガイドするステップフローコンポーネントがある場合です。ステップフローコンポーネントは、ジョブアプリケーションの送信、バックグラウンドチェック、オファー生成を処理するオートメーションに接続できます。自動化がこれらのステップを進めるにつれて、ステップフローコンポーネントはアプリケーションの現在のステータスを反映するように動的に更新できます。
各コンポーネントに適したデータソースを慎重に選択することで、アプリケーションのユーザーインターフェイスが適切なデータとロジックを利用できるようにし、ユーザーにシームレスで魅力的なエクスペリエンスを提供できます。
### 次の場合に表示
**Visible if** プロパティを使用して、特定の条件またはデータ値に基づいてコンポーネントまたは要素を表示または非表示にします。これは、アプリケーションのユーザーインターフェイスの特定部分の可視性を動的に制御する場合に便利です。
プロパティ**が**次の構文を使用している場合に表示されます。
```
{{expression ? true : false}}
```
または
```
{{expression}}
```
ここで、*expression* は、 `true`または のいずれかに評価されるブール式です`false`。
式が と評価されると`true`、コンポーネントが表示されます。式が に評価されると`false`、コンポーネントは非表示になります。式は、アプリケーション内の他のコンポーネント、データソース、または変数の値を参照できます。
#### 式の例の場合に表示されます
##### 例: E メール入力に基づいてパスワード入力フィールドを表示または非表示にする
E メール入力フィールドとパスワード入力フィールドを含むログインフォームがあるとします。ユーザーが E メールアドレスを入力した場合にのみ、パスワード入力フィールドを表示します。式の場合、次の表示を使用できます。
```
{{ui.emailInput.value !== ""}}
```
この式は、`emailInput`コンポーネントの値が空の文字列ではないかどうかを確認します。ユーザーが E メールアドレスを入力した場合、式は と評価され`true`、パスワード入力フィールドが表示されます。E メールフィールドが空の場合、式は に評価され`false`、パスワード入力フィールドは非表示になります。
##### 例: ドロップダウン選択に基づいて追加のフォームフィールドを表示する
ユーザーがドロップダウンリストからカテゴリを選択できるフォームがあるとします。選択したカテゴリに応じて、追加のフォームフィールドを表示または非表示にして、より具体的な情報を収集します。
たとえば、ユーザーが*製品*カテゴリを選択した場合、次の式を使用して追加の*製品詳細*フィールドを表示できます。
```
{{ui.categoryDropdown.value === "Products"}}
```
ユーザーが*サービス*または*コンサルティング*カテゴリを選択した場合、この式を使用して、別の追加フィールドのセットを表示できます。
```
{{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}}
```
##### 例: その他
コンポーネントの値が空の文字列でない場合に`textInput1`コンポーネントを表示するには:
```
{{ui.textInput1.value === "" ? false : true}}
```
コンポーネントを常に表示するには:
```
{{true}}
```
コンポーネントの値が空の文字列でない場合に`emailInput`コンポーネントを表示するには:
```
{{ui.emailInput.value !== ""}}
```
### 次の場合に無効
**Disabled if** 機能を使用すると、特定の条件またはデータ値に基づいてコンポーネントを条件付きで有効または無効にできます。これは、コンポーネントを有効または無効にするかどうかを決定するブール式を受け入れる **Disabled if** プロパティを使用して実現されます。
**Disabled if** プロパティは次の構文を使用します。
```
{{expression ? true : false}}
```
または
```
{{expression}}
```
#### 式の例の場合、無効
##### 例: フォームの検証に基づいて送信ボタンを無効にする
複数の入力フィールドを持つフォームがあり、すべての必須フィールドが正しく入力されるまで送信ボタンを無効にしたい場合は、次の **Disabled If **式を使用できます。
```
{{ui.nameInput.value === "" || ui.emailInput.value === "" || ui.passwordInput.value === ""}}
```
この式は、必須の入力フィールド (`nameInput`、`emailInput`、`passwordInput`) のいずれかが空かどうかを確認します。いずれかのフィールドが空の場合、式は に評価され`true`、送信ボタンは無効になります。すべての必須フィールドが入力されると、式は に評価され`false`、送信ボタンが有効になります。
これらのタイプの条件式を**「Visible if**」および**「Disabled ff** properties」で使用すると、ユーザー入力に適応する動的で応答性の高いユーザーインターフェイスを作成し、アプリケーションのユーザーにより合理化され、関連するエクスペリエンスを提供できます。
ここで、*expression* は true または false のいずれかに評価されるブール式です。
例:
```
{{ui.textInput1.value === "" ? true : false}}: The component will be Disabled if the textInput1 component's value is an empty string.
{{!ui.nameInput.isValid || !ui.emailInput.isValid || !ui.passwordInput.isValid}}: The component will be Disabled if any of the named input fields are invalid.
```
#### コンテナレイアウト
レイアウトプロパティは、コンポーネント内のコンテンツまたは要素がどのように配置および配置されるかを決定します。複数のレイアウトオプションがあり、それぞれが アイコンで表されます。
+ **列レイアウト**: このレイアウトは、コンテンツまたは要素を 1 つの列に垂直に配置します。
+ **2 列レイアウト**: このレイアウトでは、コンポーネントを 2 つの等幅列に分割し、コンテンツまたは要素を並べて配置できます。
+ **行レイアウト**: このレイアウトは、コンテンツまたは要素を 1 行に水平に配置します。
##### [Orientation] (向き)
+ **水平**: このレイアウトでは、コンテンツまたは要素を 1 行に水平に配置します。
+ **垂直**: このレイアウトは、コンテンツまたは要素を 1 つの列に垂直に配置します。
+ **インラインラップ**: このレイアウトはコンテンツまたは要素を水平に配置しますが、要素が使用可能な幅を超えた場合は次の行にラップします。
##### Alignment
+ **左**: コンテンツまたは要素をコンポーネントの左側に揃えます。
+ **中央**: コンテンツまたは要素をコンポーネント内で水平にセンタリングします。
+ **右**: コンテンツまたは要素をコンポーネントの右側に揃えます。
##### Width
**Width** プロパティは、コンポーネントの水平サイズを指定します。親コンテナまたは使用可能なスペースに対するコンポーネントの幅を表す 0%～100% のパーセンテージ値を入力できます。
##### Height
**Height** プロパティは、コンポーネントの垂直サイズを指定します。「自動」値は、コンポーネントの内容または使用可能なスペースに基づいてコンポーネントの高さを自動的に調整します。
##### 間のスペース
プロパティ**間のスペース**は、コンポーネント内のコンテンツまたは要素間の間隔またはギャップを決定します。0px (間隔なし) から 64px までの値を 4px (4px、8px、12px など) 単位で選択できます。
##### [Padding] (パディング)
**Padding** プロパティは、コンテンツまたは要素とコンポーネントのエッジの間のスペースを制御します。0px (パディングなし) から 64px までの値を 4px (4px、8px、12px など) 単位で選択できます。
##### 背景
Background は、コンポーネントの背景色またはスタイルを****有効または無効にします。
これらのレイアウトプロパティは、コンポーネント内のコンテンツの配置と配置に柔軟性を提供し、コンポーネント自体のサイズ、間隔、外観を制御します。
## データコンポーネント
このセクションでは、**テーブル**、**詳細**、**メトリクス**、**フォーム**、リ**ピータ**コンポーネントなど、アプリケーションスタジオで使用できるさまざまなデータコンポーネントについて説明します。これらのコンポーネントは、アプリケーション内のデータを表示、収集、操作するために使用されます。
### [テーブル]
Table ****コンポーネントは、行と列を含む表形式でデータを表示します。これは、データベースの項目やレコードのリストなどの構造化データを、整理されたeasy-to-read方法で提示するために使用されます。
#### テーブルプロパティ
Table ****コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Actions`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。
**テーブル**コンポーネントには、一般的なプロパティに加えて、、、 などの特定のプロパティ`Columns``Search and export`と設定オプションがあります`Expressions`。
##### 列
このセクションでは、テーブルに表示する列を定義できます。各列は、次のプロパティで設定できます。
+ **形式**: フィールドのデータ型。テキスト、数値、日付など。
+ **列ラベル**: 列のヘッダーテキスト。
+ **値**: この列に表示するデータソースのフィールド。
このフィールドでは、列セルに表示する値または式を指定できます。式を使用して、接続されたソースまたは他のコンポーネントからのデータを参照できます。
例: `{{currentRow.title}}` - この式は、列セルの現在の行の*タイトル*フィールドの値を表示します。
+ **ソートを有効にする**: このトグルを使用すると、特定の列のソート機能を有効または無効にできます。有効にすると、ユーザーはこの列の値に基づいてテーブルデータをソートできます。
##### 検索とエクスポート
**テーブル**コンポーネントには、検索およびエクスポート機能を有効または無効にするための次のトグルが用意されています。
+ **検索を表示する** 有効にすると、このトグルはテーブルに検索入力フィールドを追加し、ユーザーは表示されたデータを検索してフィルタリングできます。
+ **エクスポートを表示する** 有効にすると、このトグルによってテーブルにエクスポートオプションが追加され、ユーザーは CSV などのさまざまな形式でテーブルデータをダウンロードできるようになります。
**注記**
デフォルトでは、検索機能はテーブルにロードされたデータに制限されます。検索を完全に使用するには、データのすべてのページをロードする必要があります。
##### ページあたりの行数
テーブルのページごとに表示する行数を指定できます。その後、ユーザーはページ間を移動してデータセット全体を表示できます。
##### プリフェッチの制限
各クエリリクエストでプリフェッチするレコードの最大数を指定します。最大数は 3000 です。
##### アクション
**アクション**セクションで、次のプロパティを設定します。
+ **アクションの場所**: **Pin to right** が有効になっている場合、追加されたアクションは、ユーザーのスクロールに関係なく、常にテーブルの右側に表示されます。
+ **アクション**: テーブルにアクションボタンを追加します。これらのボタンは、ユーザーがクリックしたときに、次のような指定されたアクションを実行するように設定できます。
+ コンポーネントアクションを実行する
+ 別のページに移動する
+ データアクションを呼び出す
+ カスタム JavaScript を実行する
+ オートメーションを呼び出す
##### 表現
**テーブル**コンポーネントには、式と行レベルのアクション機能を使用する複数の領域があり、テーブルの機能やインタラクティブ性をカスタマイズして強化できます。これにより、テーブル内のデータを動的に参照および表示できます。これらの式フィールドを活用することで、動的列を作成し、行レベルのアクションにデータを渡し、アプリケーション内の他のコンポーネントまたは式からテーブルデータを参照できます。
##### 例: 行値を参照する
`{{currentRow.columnName}}` または`{{currentRow["Column Name"]}}`これらの式を使用すると、レンダリングされる現在の行の特定の列の値を参照できます。*columnName* または *Column Name* を、参照する列の実際の名前に置き換えます。
例:
+ `{{currentRow.productName}}` 現在の行の製品名を表示します。
+ `{{currentRow["Supplier Name"]}}` 現在の行のサプライヤー名を表示します。列ヘッダーは*サプライヤー名*です。
+ `{{currentRow.orderDate}}` 現在の行の注文日を表示します。
##### 例: 選択した行を参照する
`{{ui.table1.selectedRow["columnName"]}}` この式を使用すると、ID *table1* を使用して、テーブル内の現在選択されている行の特定の列の値を参照できます。*table1* はテーブルコンポーネントの実際の ID に、 *columnName* は参照する列の名前に置き換えます。
例:
+ `{{ui.ordersTable.selectedRow["totalAmount"]}}` ID *ordersTable* を使用して、テーブルで現在選択されている行の合計金額を表示します。
+ `{{ui.customersTable.selectedRow["email"]}}` ID *customersTable* を使用して、テーブルで現在選択されている行の E メールアドレスを表示します。
+ `{{ui.employeesTable.selectedRow["department"]}}` ID *employeesTable* を使用して、テーブルで現在選択されている行の部門を表示します。
##### 例: カスタム列の作成
基になるデータアクション、オートメーション、または式から返されたデータに基づいて、テーブルにカスタム列を追加できます。既存の列値と JavaScript 式を使用して、新しい列を作成できます。
例:
+ `{{currentRow.quantity * currentRow.unitPrice}}` 数量と単価の列を乗算して、合計価格を表示する新しい列を作成します。
+ `{{new Date(currentRow.orderDate).toLocaleDateString()}}` 注文日をより読みやすい形式で表示する新しい列を作成します。
+ `{{currentRow.firstName + ' ' + currentRow.lastName + ' (' + currentRow.email + ')' }}` 各行のフルネームと E メールアドレスを表示する新しい列を作成します。
##### 例: 列の表示値のカスタマイズ:
列マッピングの フィールドを設定することで、テーブル列内の`Value`フィールドの表示値をカスタマイズできます。これにより、表示されたデータにカスタムフォーマットまたは変換を適用できます。
例:
+ `{{ currentRow.rating >= 4 ? '⭐️'.repeat(currentRow.rating) : currentRow.rating }}` 各行の評価値に基づいて星の絵文字を表示します。
+ `{{ currentRow.category.toLowerCase().replace(/\b\w/g, c => c.toUpperCase()) }}` 行ごとに大文字化された各単語を含むカテゴリ値を表示します。
+ `{{ currentRow.status === 'Active' ? '🟢 Active' : '🔴 Inactive' }}`: 各行のステータス値に基づいて色付きの円の絵文字とテキストを表示します。
##### 行レベルのボタンアクション
`{{currentRow.columnName}}` または`{{currentRow["Column Name"]}}`、これらの式を使用して、選択した行のデータを使用して別のページに移動する、行のデータを使用してオートメーションをトリガーするなど、参照された行のコンテキストを行レベルのアクション内で渡すことができます。
例:
+ 行アクション列に編集ボタンがある場合は、パラメータ`{{currentRow.orderId}}`として を渡して、選択した注文の ID を持つ注文編集ページに移動できます。
+ 行アクション列に削除ボタンがある場合は、注文を削除する前に顧客に確認メールを送信するオートメーション`{{currentRow.customerName}}`に渡すことができます。
+ 行アクション列にビューの詳細ボタンがある場合は、注文の詳細を表示した従業員をログに記録するオートメーション`{{currentRow.employeeId}}`に渡すことができます。
これらの式フィールドと行レベルのアクション機能を活用することで、特定の要件に基づいてデータを表示および操作する高度にカスタマイズされたインタラクティブなテーブルを作成できます。さらに、行レベルのアクションをアプリケーション内の他のコンポーネントやオートメーションに接続して、シームレスなデータフローと機能を実現できます。
### [Detail] (詳細)
**詳細**コンポーネントは、特定のレコードまたは項目に関する詳細情報を表示するように設計されています。単一のエンティティまたは行に関連する包括的なデータを表示するための専用スペースを提供するため、詳細な詳細を表示したり、データ入力や編集タスクを容易にしたりするのに最適です。
#### 詳細プロパティ
**詳細**コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Actions`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。
**詳細**コンポーネントには、、、 などの特定のプロパティ`Fields``Layout`と設定オプションもあります`Expressions`。
#### [レイアウト]
**レイアウト**セクションでは、**詳細**コンポーネント内のフィールドの配置と表示をカスタマイズできます。次のようなオプションを設定できます。
+ **列の数**: フィールドを表示する列の数を指定します。
+ **フィールドの順序**: フィールドをドラッグアンドドロップして、外観の順序を変更します。
+ **間隔と整列**: コンポーネント内のフィールドの間隔と整列を調整します。
#### 式と例
**詳細**コンポーネントには、コンポーネント内のデータを動的に参照および表示できるさまざまな式フィールドが用意されています。これらの式を使用すると、アプリケーションのデータとロジックにシームレスに接続する、カスタマイズされたインタラクティブな **Detail** コンポーネントを作成できます。
##### 例: データを参照する
`{{ui.details.data[0]?.["colName"]}}`: この式を使用すると、**Detail** コンポーネントに接続されたデータ配列の最初の項目 (インデックス 0) のcolName」という名前の列の値を ID「details」で参照できます。"colName" を、参照する列の実際の名前に置き換えます。たとえば、次の式は、「details」コンポーネントに接続されたデータ配列の最初の項目の「customerName」列の値を表示します。
```
{{ui.details.data[0]?.["customerName"]}}
```
**注記**
この式は、**Detail** コンポーネントが参照されているテーブルと同じページにあり、**Detail** コンポーネント内のテーブルの最初の行のデータを表示する場合に便利です。
##### 例: 条件付きレンダリング
`{{ui.table1.selectedRow["colName"]}}`: ID *table1* を持つテーブル内の選択した行に *colName* という名前の列のデータがある場合、この式は true を返します。これは、テーブルの選択した行が空であるかどうかに基づいて、**詳細**コンポーネントを条件付きで表示または非表示にするために使用できます。
例:
この式は、**Detail** コンポーネントの `Visible if`プロパティで使用して、テーブル内の選択した行に基づいて条件付きで表示または非表示にすることができます。
```
{{ui.table1.selectedRow["customerName"]}}
```
この式が true と評価された場合 (*table1* コンポーネントの選択した行に *customerName* 列の値がある場合）、**Detail** コンポーネントが表示されます。式が false と評価された場合 (選択した行が空であるか、customerName」の値がない場合）、**Detail** コンポーネントは非表示になります。
##### 例: 条件付き表示
`{{(ui.Component.value === "green" ? "🟢" : ui.Component.value === "yellow" ? "🟡" : ui.detail1.data?.[0]?.CustomerStatus)}}`: この式は、コンポーネントまたはデータフィールドの値に基づいて絵文字を条件付きで表示します。
内訳:
+ `ui.Component.value`: ID コンポーネントを持つ*コンポーネントの*値を参照します。
+ `=== "green"`: コンポーネントの値が文字列「green」と等しいかどうかを確認します。
+ `? "🟢"`: 条件が true の場合、 は緑色の円絵文字を表示します。
+ `: ui.Component.value === "yellow" ? "🟡"`: 最初の条件が false の場合、 はコンポーネントの値が文字列「黄色」と等しいかどうかを確認します。
+ `? "🟡"`: 2 番目の条件が true の場合、 は黄色の四角形絵文字を表示します。
+ `: ui.detail1.data?.[0]?.CustomerStatus`: 両方の条件が false の場合、Detail コンポーネントに接続されたデータ配列の最初の項目のCustomerStatus」値を ID「detail1」で参照します。
この式を使用して、**Detail** コンポーネント内のコンポーネントまたはデータフィールドの値に基づいて絵文字または特定の値を表示できます。
### メトリクス
**メトリクス**コンポーネントは、主要なメトリクスまたはデータポイントをカードのような形式で表示するビジュアル要素です。重要な情報やパフォーマンス指標を視覚的にわかりやすく表示できるように設計されています。
#### メトリクスのプロパティ
Metrics ****コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Actions`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。
#### トレンド
メトリクスのトレンド機能を使用すると、表示されるメトリクスのパフォーマンスまたは経時的な変化を視覚的に表示できます。
##### トレンド値
このフィールドでは、トレンドの方向と大きさを決定するために使用される値または式を指定できます。通常、これは特定の期間における変更またはパフォーマンスを表す値になります。
例:
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}
```
この式は、「salesMetrics」メトリクスに接続されたデータの最初の項目からmonth-over-monthの収益値を取得します。
##### 肯定的な傾向
このフィールドでは、正の傾向の条件を定義する式を入力できます。式は true または false と評価されます。
例:
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}
```
この式は、month-over-monthの収益値が 0 より大きいかどうかをチェックし、正の傾向を示します。
##### 負の傾向
このフィールドでは、負の傾向の条件を定義する式を入力できます。式は true または false と評価されます。
例:
```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}
```
この式は、month-over-month収益値が 0 未満であるかどうかをチェックし、負の傾向を示します。
##### カラーバー
この切り替えにより、色付きのバーの表示を有効または無効にして、トレンドステータスを視覚的に示すことができます。
##### カラーバーの例:
##### 例: 売上メトリクスの傾向
+ **トレンド値**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}`
+ **肯定的な傾向**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}`
+ **負の傾向**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}`
+ **カラーバー**: 有効
##### 例: インベントリメトリクスの傾向
+ **トレンド値**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory - ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **肯定的な傾向**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory > ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **負の傾向**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory < ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **カラーバー**: 有効
##### 例: 顧客満足度の傾向
+ **トレンド値**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore}}`
+ **肯定的な傾向**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore >= 8}}`
+ **負の傾向**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore < 7}}`
+ **カラーバー**: 有効
これらのトレンド関連のプロパティを設定することで、表示される**メトリクス**のパフォーマンスまたは経時的な変化を視覚的に表現するメトリクスコンポーネントを作成できます。
これらの式を活用することで、データを動的に参照および表示する高度にカスタマイズされたインタラクティブなメトリクスコンポーネントを作成できるため、アプリケーション内で主要なメトリクス、パフォーマンス指標、データ駆動型の視覚化を表示できます。
#### メトリクス式の例
プロパティパネルでは、式を入力してタイトル、プライマリ値、セカンダリ値、値キャプションを表示し、値を動的に表示できます。
##### 例: プライマリ値を参照する
`{{ui.metric1.primaryValue}}`: この式を使用すると、**メトリクス**コンポーネントのプライマリ値を、同じページ内の他のコンポーネントまたは式から ID *metric1* で参照できます。
例: `{{ui.salesMetrics.primaryValue}}`は *salesMetrics* **メトリクス**コンポーネントのプライマリ値を表示します。
##### 例: セカンダリ値を参照する
`{{ui.metric1.secondaryValue}}`: この式を使用すると、同じページ内の他のコンポーネントまたは式から ID *metric1* を持つ **Metrics** コンポーネントのセカンダリ値を参照できます。
例: `{{ui.revenueMetrics.secondaryValue}}` *revenueMetrics* **メトリクス**コンポーネントのセカンダリ値を表示します。
##### 例: データを参照する
`{{ui.metric1.data}}`: この式を使用すると、同じページ内の他のコンポーネントまたは式から ID *metric1* を持つ **Metrics **コンポーネントのデータを参照できます。
例: `{{ui.kpiMetrics.data}}`は *kpiMetrics* **メトリクス**コンポーネントに接続されているデータを参照します。
##### 例: 特定のデータ値の表示:
`{{ui.metric1.data?.[0]?.id}}`: この式は、ID metric*1* を使用して **Metrics** コンポーネントに接続されたデータから特定の情報を表示する方法の例です。これは、データの最初の項目の特定のプロパティを表示する場合に便利です。
内訳:
+ `ui.metric1`: ID **metric***1* を持つ Metrics コンポーネントを参照します。
+ `data`: そのコンポーネントに接続されている情報またはデータセットを指します。
+ `?.[0]`: そのデータセットの最初の項目またはエントリを意味します。
+ `?.id`: その最初の項目またはエントリの *ID* 値または識別子を表示します。
例: `{{ui.orderMetrics.data?.[0]?.orderId}}`は *orderMetrics* メトリクスコンポーネントに接続されたデータの最初の項目の orderId *orderId* 値を表示します。 ****
##### 例: データ長の表示
`{{ui.metric1.data?.length}}`: この式は、ID metric*1* を使用して **Metrics** コンポーネントに接続されたデータの長さ (項目数) を表示する方法を示しています。データ内の項目数を表示する場合に便利です。
内訳:
+ `ui.metric1.data`: コンポーネントに接続されているデータセットを参照します。
+ `?.length`: そのデータセット内の項目またはエントリの合計数または数にアクセスします。
例: `{{ui.productMetrics.data?.length}}`は、*productMetrics* **メトリクス**コンポーネントに接続されているデータ内の項目の数を表示します。
### リピータ
**Repeater** コンポーネントは、提供されたデータソースに基づいて要素のコレクションを生成および表示できる動的コンポーネントです。これは、アプリケーションのユーザーインターフェイス内でリスト、グリッド、または繰り返しパターンの作成を容易にするように設計されています。ユースケースには次のようなものがあります。
+ アカウント内の各ユーザーのカードの表示
+ イメージとカートに追加するボタンを含む製品のリストを表示する
+ ユーザーがアクセスできるファイルのリストの表示
**Repeater** コンポーネントは、豊富なコンテンツを持つ**テーブル**コンポーネントと区別されます。**テーブル**コンポーネントには、厳密な行と列の形式があります。**Repeater** は、より柔軟にデータを表示できます。
#### リピータのプロパティ
**Repeater** コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Actions`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。
一般的なプロパティに加えて、**Repeater** コンポーネントには次の追加のプロパティと設定オプションがあります。
#### 項目テンプレート
**項目テンプレート**は、データソース内の項目ごとに繰り返される構造とコンポーネントを定義できるコンテナです。**テキスト**、**イメージ**、**ボタン**、または各項目を表すために必要なその他のコンポーネントなど、他のコンポーネントをこのコンテナにドラッグアンドドロップできます。
Item **テンプレート**内で、 形式の式を使用して、現在の項目のプロパティまたは値を参照できます`{{currentItem.propertyName}}`。
たとえば、データソースに `itemName`プロパティが含まれている場合、 `{{currentItem.itemName}}`を使用して現在の項目の項目名 (複数可) を表示できます。
#### [レイアウト]
**レイアウト**セクションでは、リピータコンポーネント内の繰り返し要素の配置を設定できます。
##### [Orientation] (向き)
+ **リスト**: 繰り返し要素を 1 つの列に垂直に配置します。
+ **グリッド**: グリッドレイアウト内の繰り返し要素を複数の列で配置します。
##### ページあたりの行数
リストレイアウトでページごとに表示する行数を指定します。ページ分割は、指定された行数をオーバーフローする項目に対して提供されます。
##### ページあたりの列と行 (グリッド)
+ **列**: グリッドレイアウトの列数を指定します。
+ **ページあたりの行**数: グリッドレイアウトでページごとに表示する行数を指定します。ページ分割は、指定されたグリッドディメンションをオーバーフローする項目に対して提供されます。
#### 式と例
**Repeater** コンポーネントには、コンポーネント内のデータを動的に参照および表示できるさまざまな式フィールドが用意されています。これらの式を使用すると、アプリケーションのデータとロジックにシームレスに接続するカスタマイズされたインタラクティブな **Repeater** コンポーネントを作成できます。
##### 例: 項目を参照する
+ `{{currentItem.propertyName}}`: 項目**テンプレート**内の現在の項目のプロパティまたは値を参照します。
+ `{{ui.repeaterID[index]}}`: リピータコンポーネントの特定の項目をインデックスで参照します。
##### 例: 製品リストのレンダリング
+ **ソース**: データソースとして *Products* エンティティを選択します。
+ **項目テンプレート**: 中に**テキスト**コンポーネントを含む**コンテナ**コンポーネントを追加して製品名 (`{{currentItem.productName}}`) を表示し、**イメージ**コンポーネントを追加して製品イメージ () を表示します`{{currentItem.productImageUrl}}`。
+ **レイアウト**: `Orientation`を に設定`List`し、`Rows per Page`必要に応じて を調整します。
##### 例: ユーザーアバターのグリッドの生成
+ **ソース**: 式を使用して、ユーザーデータの配列 (例: `[{name: 'John', avatarUrl: '...'}, {...}, {...}]`) を生成します。
+ **項目テンプレート**: **イメージ**コンポーネントを追加し、その`Source`プロパティを に設定します`{{currentItem.avatarUrl}}`。
+ **レイアウト**: を `Orientation`に設定し`Grid`、 `Columns`と の数を指定し`Rows per Page`、`Padding`必要に応じて `Space Between`と を調整します。
`Repeater` コンポーネントを使用することで、動的ユーザーインターフェイスとデータ駆動型ユーザーインターフェイスを作成し、要素のコレクションをレンダリングするプロセスを合理化し、手動による繰り返しやハードコーディングの必要性を軽減できます。
### フォーム
フォームコンポーネントは、ユーザー入力をキャプチャし、アプリケーション内のデータ入力タスクを容易にするように設計されています。入力フィールド、ドロップダウン、チェックボックス、その他のフォームコントロールを表示するための構造化されたレイアウトを提供し、ユーザーはデータをシームレスに入力または変更できます。テーブルなど、フォームコンポーネント内に他のコンポーネントをネストできます。
#### フォームプロパティ
Form ****コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Actions`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。
#### フォームの生成
**フォームの生成**機能を使用すると、選択したデータソースに基づいてフォームフィールドを自動的に入力することで、フォームフィールドをすばやく作成できます。これにより、多数のフィールドを表示する必要があるフォームを構築する際の時間と労力を節約できます。
****フォームの生成**機能を使用するには:**
1. **フォーム**コンポーネントのプロパティで、**フォームの生成**セクションを見つけます。
1. フォームフィールドの生成に使用するデータソースを選択します。これは、アプリケーションで使用できるエンティティ、ワークフロー、またはその他のデータソースです。
1. フォームフィールドは、フィールドラベル、タイプ、データマッピングなど、選択したデータソースに基づいて自動的に生成されます。
1. 生成されたフィールドを確認し、検証ルールの追加やフィールドの順序の変更など、必要なカスタマイズを行います。
1. フォーム設定に満足したら、**送信**を選択して生成されたフィールドを**フォーム**コンポーネントに適用します。
**フォームの生成**機能は、アプリケーションにユーザー入力をキャプチャする必要がある明確に定義されたデータモデルまたはエンティティのセットがある場合に特に便利です。フォームフィールドを自動的に生成することで、時間を節約し、アプリケーションのフォーム間で整合性を確保できます。
**フォームの生成**機能を使用した後、特定の要件に合わせて**フォーム**コンポーネントのレイアウト、アクション、式をさらにカスタマイズできます。
#### 式と例
他のコンポーネントと同様に、式を使用して **Form **コンポーネント内のデータを参照および表示できます。例えば、次のようになります。
+ `{{ui.userForm.data.email}}`: ID の **Form** コンポーネントに接続されたデータソースの `email`フィールドの値を参照します`userForm`。
**注記**
一般的なプロパティのその他の式の例[一般的なコンポーネントプロパティ](#common-properties)については、「」を参照してください。
これらのプロパティを設定し、式を活用することで、アプリケーションのデータソースやロジックとシームレスに統合するカスタマイズされたインタラクティブな Form コンポーネントを作成できます。これらのコンポーネントを使用して、ユーザー入力をキャプチャし、事前入力されたデータを表示し、フォームの送信またはユーザーインタラクションに基づいてアクションをトリガーできます。
### ステップフロー
**Stepflow** コンポーネントは、アプリケーション内の複数ステップのプロセスまたはワークフローを通じてユーザーをガイドするように設計されています。一連のステップを表示するための構造化された直感的なインターフェイスを提供します。各ステップには独自の入力、検証、アクションのセットがあります。
Stepflow コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Actions`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。
**Stepflow** コンポーネントには、、、 `Step Navigation`などの追加のプロパティ`Validation`と設定オプションがあります`Expressions`。
## AI コンポーネント
### 生成 AI
**Gen AI** コンポーネントは、コンポーネントとその付随するロジックをグループ化して、アプリケーションスタジオ内のチャットを使用して AI で簡単に編集するために使用されるグループ化コンテナです。チャットを使用してコンポーネントを作成すると、コンポーネントは **Gen AI** コンテナにグループ化されます。このコンポーネントの編集または使用については、「」を参照してください[アプリの構築または編集](generative-ai.md#generative-ai-build-app)。
## テキストと数値のコンポーネント
### テキスト入力
**テキスト入力**コンポーネントを使用すると、ユーザーはアプリケーション内でテキストデータを入力および送信できます。名前、住所、その他のテキスト情報など、ユーザー入力を簡単かつ直感的にキャプチャできます。
+ `{{ui.inputTextID.value}}`: 入力フィールドに指定された値を返します。
+ `{{ui.inputTextID.isValid}}`: 入力フィールドに指定された値の有効性を返します。
### テキスト
**Text** コンポーネントは、アプリケーション内でテキスト情報を表示するために使用されます。静的テキスト、動的値、または式から生成されたコンテンツを表示するために使用できます。
### テキスト領域
**テキストエリア**コンポーネントは、ユーザーからの複数行のテキスト入力をキャプチャするように設計されています。これにより、ユーザーが説明、メモ、コメントなどの長いテキストエントリを入力するための入力フィールド領域が大きくなります。
+ `{{ui.textAreaID.value}}`: テキスト領域に指定された値を返します。
+ `{{ui.textAreaID.isValid}}`: テキスト領域で指定された値の有効性を返します。
### E メール
E **メール**コンポーネントは、ユーザーの E メールアドレスをキャプチャするように設計された特殊な入力フィールドです。特定の検証ルールを適用して、入力した値が正しい E メール形式に従っていることを確認できます。
+ `{{ui.emailID.value}}`: E メール入力フィールドに指定された値を返します。
+ `{{ui.emailID.isValid}}`: E メール入力フィールドに指定された値の有効性を返します。
### [パスワード]
**パスワード**コンポーネントは、ユーザーがパスワードや PIN コードなどの機密情報を入力できるように特別に設計された入力フィールドです。プライバシーとセキュリティを維持するために、入力した文字をマスクします。
+ `{{ui.passwordID.value}}`: パスワード入力フィールドに指定された値を返します。
+ `{{ui.passwordID.isValid}}`: パスワード入力フィールドに指定された値の有効性を返します。
### 検索
**検索**コンポーネントは、検索クエリを実行したり、アプリケーション内の入力データ内に検索語を入力したりするための専用の入力フィールドをユーザーに提供します。
+ `{{ui.searchID.value}}`: 検索フィールドに指定された値を返します。
### 電話
**電話**コンポーネントは、ユーザーの電話番号やその他の連絡先情報をキャプチャするためにカスタマイズされた入力フィールドです。特定の検証ルールとフォーマットオプションを含めることで、入力した値が正しい電話番号形式に準拠していることを確認できます。
+ `{{ui.phoneID.value}}`: 電話入力フィールドに指定された値を返します。
+ `{{ui.phoneID.isValid}}`: 電話入力フィールドに指定された値の有効性を返します。
### Number
**数値**コンポーネントは、ユーザーが数値を入力できるように特別に設計された入力フィールドです。検証ルールを適用して、入力された値が指定された範囲または形式の有効な数値であることを確認できます。
+ `{{ui.numberID.value}}`: 数値入力フィールドに指定された値を返します。
+ `{{ui.numberID.isValid}}`: 数値入力フィールドに指定された値の有効性を返します。
### 通貨
**通貨**コンポーネントは、金額または金額を取得するための特殊な入力フィールドです。これには、通貨記号、小数点区切り文字を表示し、通貨入力に固有の検証ルールを適用する書式設定オプションを含めることができます。
+ `{{ui.currencyID.value}}`: 通貨入力フィールドに指定された値を返します。
+ `{{ui.currencyID.isValid}}`: 通貨入力フィールドに指定された値の有効性を返します。
### 詳細ペア
**詳細ペア**コンポーネントは、キーと値のペアまたは関連情報のペアを構造化された読み取り可能な形式で表示するために使用されます。一般的に、特定の項目またはエンティティに関連付けられた詳細またはメタデータを表示するために使用されます。
## 選択コンポーネント
### [Switch] (スイッチ)
**Switch** コンポーネントは、ユーザーがオン/オフ、true/false、有効/無効などの 2 つの状態またはオプションを切り替えることができるユーザーインターフェイスコントロールです。現在の状態を視覚的に表現し、ワンクリックまたはタップで変更できます。
### グループを切り替える
**スイッチグループ**コンポーネントは、ユーザーが事前定義されたセットから 1 つ以上のオプションを選択できるようにする個々のスイッチコントロールのコレクションです。選択したオプションと選択されていないオプションを視覚的に表示できるため、ユーザーは利用可能な選択肢を理解し、操作しやすくなります。
#### グループ式のフィールドを切り替える
+ `{{ui.switchGroupID.value}}`: アプリケーションユーザーが有効にした各スイッチの値を含む文字列の配列を返します。
### チェックボックスグループ
**チェックボックスグループ**コンポーネントは、ユーザーにチェックボックスのグループを表示し、複数のオプションを同時に選択できるようにします。これは、オプションリストから 1 つ以上の項目を選択する機能をユーザーに提供する場合に便利です。
#### チェックボックスグループの式フィールド
+ `{{ui.checkboxGroupID.value}}`: アプリケーションユーザーが選択した各チェックボックスの値を含む文字列の配列を返します。
### 無線グループ
**無線グループ**コンポーネントは、ユーザーが複数の相互に排他的な選択肢から 1 つのオプションを選択できるようにする一連のラジオボタンです。これにより、一度に選択できるオプションは 1 つだけになり、ユーザーが選択できる明確であいまいな方法が提供されます。
#### 無線グループ式フィールド
以下のフィールドは式で使用できます。
+ `{{ui.radioGroupID.value}}`: アプリユーザーが選択したラジオボタンの値を返します。
### 単一選択
**Single Select** コンポーネントは、ユーザーに 1 つの項目を選択できるオプションのリストを表示します。これは、カテゴリ、場所、設定の選択など、ユーザーが事前定義された一連のオプションから選択する必要があるシナリオでよく使用されます。
#### シングル選択式フィールド
+ `{{ui.singleSelectID.value}}`: アプリユーザーが選択したリスト項目の値を返します。
### マルチ選択
**マルチ選択**コンポーネントは**シングル選択**コンポーネントに似ていますが、ユーザーは選択肢のリストから複数のオプションを同時に選択できます。これは、ユーザーが複数のタグ、関心、設定の選択など、事前定義された一連のオプションから複数の選択を行う必要がある場合に便利です。
#### 複数選択式のフィールド
+ `{{ui.multiSelectID.value}}`: アプリユーザーが選択した各リスト項目の値を含む文字列の配列を返します。
## ボタンとナビゲーションコンポーネント
アプリケーションスタジオには、ユーザーがアクションをトリガーし、アプリケーション内を移動できるように、さまざまなボタンとナビゲーションコンポーネントが用意されています。
### ボタンコンポーネント
使用可能なボタンコンポーネントは次のとおりです。
+ ボタン
+ アウトラインされたボタン
+ アイコンボタン
+ テキストボタン
これらのボタンコンポーネントは、次の共通プロパティを共有します。
#### コンテンツ
+ **ボタンラベル**: ボタンに表示されるテキスト。
#### タイプ
+ **ボタン**: 標準ボタン。
+ **アウトライン**: アウトラインされたスタイルのボタン。
+ **アイコン**: アイコンの付いたボタン。
+ **テキスト**: テキストのみのボタン。
#### サイズ
ボタンのサイズ。指定できる値は `Small`、`Medium`、および `Large` です。
#### アイコン
ボタンに表示するさまざまなアイコンから選択できます。
+ エンベロープが閉じられました
+ Bell
+ 個人
+ ハンバーガーメニュー
+ 検索
+ 丸で囲まれた情報
+ 歯車
+ シェブロン左
+ シェブロン右
+ 水平ドット
+ ごみ箱
+ 編集
+ チェック
+ 閉じる
+ ホーム
+ Plus
#### トリガ
ボタンをクリックすると、トリガーされる 1 つ以上のアクションを設定できます。使用可能なアクションタイプは次のとおりです。
+ **ベーシック**
+ コンポーネントアクションの実行: コンポーネント内で特定のアクションを実行します。
+ 移動: 別のページまたはビューに移動します。
+ データアクションの呼び出し: レコードの作成、更新、削除など、データ関連のアクションをトリガーします。
+ **アドバンスト**
+ JavaScript: カスタム JavaScript コードを実行します。
+ 自動化を呼び出す: 既存の自動化またはワークフローを開始します。
#### JavaScript アクションボタンのプロパティ
ボタンをクリックしたときにカスタム JavaScript コードを実行する`JavaScript`アクションタイプを選択します。
##### ソースコード
`Source code` フィールドに、JavaScript 式または関数を入力できます。例えば、次のようになります。
```
return "Hello World";
```
これにより、ボタンがクリックされた`Hello World`ときに文字列が返されます。
##### 条件: 次の場合に を実行します。
JavaScript アクションを実行するかどうかを決定するブール式を指定することもできます。次の構文を使用します。
```
{{ui.textinput1.value !== ""}}
```
この例では、JavaScript アクションは、`textinput1`コンポーネントの値が空の文字列でない場合にのみ実行されます。
これらの高度なトリガーオプションを使用することで、アプリケーションのロジックやデータと直接統合する高度にカスタマイズされたボタン動作を作成できます。これにより、ボタンの組み込み機能を拡張し、特定の要件に合わせてユーザーエクスペリエンスを調整できます。
**注記**
JavaScript アクションが期待どおりに機能していることを常に徹底的にテストします。
### ハイパーリンク
**ハイパーリンク**コンポーネントは、外部 URLs または内部アプリケーションルートに移動するためのクリック可能なリンクを提供します。
#### ハイパーリンクプロパティ
##### コンテンツ
+ **ハイパーリンクラベル**: ハイパーリンクラベルとして表示されるテキスト。
##### [URL]
ハイパーリンクの送信先 URL。外部ウェブサイトまたは内部アプリケーションルートです。
##### トリガ
ハイパーリンクをクリックすると、トリガーされるアクションを 1 つ以上設定できます。使用可能なアクションタイプは、ボタンコンポーネントのアクションタイプと同じです。
## 日付と時刻のコンポーネント
### 日付
**Date** コンポーネントを使用すると、ユーザーは日付を選択して入力できます。
**Date** コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Validation`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。
Date ****コンポーネントには、共通のプロパティに加えて、次の特定のプロパティがあります。
#### 日付プロパティ
##### 形式
+ **YYYY/MM/DD**、**DD/MM/YYYY**、**YYYY/MM/DD**、**YYYY/DD/MM**、**MM/DD**、**DD/MM**: 日付を表示する形式。
##### 値
+ **YYYY-MM-DD**: 日付値が内部に保存される形式。
##### 最小日付
+ **YYYY-MM-DD**: 選択できる最小日付。
**注記**
この値は の形式と一致する必要があります`YYYY-MM-DD`。
##### 最大日付
+ **YYYY-MM-DD**: 選択できる最大日付。
**注記**
この値は の形式と一致する必要があります`YYYY-MM-DD`。
##### カレンダータイプ
+ **1 か月**、**2 か月**: 表示するカレンダー UI のタイプ。
##### 無効になった日付
+ **ソース**: 無効にする必要がある日付のデータソース。例: None、式。
+ **無効日付**: 無効にする日付を決定する式。次に例を示します。
+ `{{currentRow.column}}`: この式が評価する日付を無効にします。
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`: 2023 年 1 月 1 日より前の日付を無効にします
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`: 週末を無効にします。
##### 行動
+ **表示可能:** **Date** コンポーネントの可視性を決定する式。
+ **Disable if**: **Date** コンポーネントを無効にするかどうかを決定する式。
#### 検証
**検証**セクションでは、日付入力に追加のルールと制約を定義できます。これらの検証ルールを設定することで、ユーザーが入力した日付値がアプリケーションの特定の要件を満たしていることを確認できます。次のタイプの検証を追加できます。
+ **必須**: このトグルにより、ユーザーはフォームを送信する前に日付値を入力する必要があります。
+ **カスタム**: JavaScript 式を使用してカスタム検証ルールを作成できます。例えば、次のようになります。
```
{{new Date(ui.dateInput.value) < new Date("2023-01-01")}}
```
この式は、入力された日付が 2023 年 1 月 1 日より前であるかどうかをチェックします。条件が true の場合、検証は失敗します。
検証が満たされない場合に表示されるカスタム検証メッセージを指定することもできます。
```
"Validation not met. The date must be on or after January 1, 2023."
```
これらの検証ルールを設定することで、ユーザーが入力した日付値がアプリケーションの特定の要件を満たしていることを確認できます。
#### 式と例
**Date** コンポーネントには、次の式フィールドが用意されています。
+ `{{ui.dateID.value}}`: ユーザーが 形式で入力した日付値を返します`YYYY-MM-DD`。
### Time
**Time** コンポーネントを使用すると、ユーザーは時間値を選択して入力できます。**Time** コンポーネントのさまざまなプロパティを設定することで、選択可能な時間範囲の制限、特定の時間の無効化、コンポーネントの可視性とインタラクティブ性の制御など、アプリケーションの特定の要件を満たす時間入力フィールドを作成できます。
#### 時間プロパティ
**Time** コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Validation`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。
共通プロパティに加えて、**Time** コンポーネントには次の特定のプロパティがあります。
##### 時間間隔
+ **5 分**、**10 分**、**15 分**、**20 分**、**25 分**、**30 分**、**60 分**: 時間の選択に使用できる間隔。
##### 値
+ **HH:MM AA**: 時間値が内部に保存される形式。
**注記**
この値は、 の形式と一致する必要があります`HH:MM AA`。
##### Placeholder
+ **カレンダー設定**: 時間フィールドが空の場合に表示されるプレースホルダーテキスト。
##### 最小時間
+ **HH:MM AA**: 選択できる最小時間。
**注記**
この値は、 の形式と一致する必要があります`HH:MM AA`。
##### 最大時間
+ **HH:MM AA**: 選択できる最大時間。
**注記**
この値は、 の形式と一致する必要があります`HH:MM AA`。
##### 無効時間
+ **ソース**: 無効にする必要がある時間のデータソース (例: なし、式）。
+ **無効時間**: など、無効にする時間を決定する式`{{currentRow.column}}`。
##### 無効時間設定
**Disabled Times** セクションを使用して、選択できない時間値を指定できます。
##### ソース
+ **なし**: 時間が無効になることはありません。
+ **式**: JavaScript 式を使用して、 など、無効にする時間を決定できます`{{currentRow.column}}`。
##### 式の例:
```
{{currentRow.column === "Lunch Break"}}
```
この式は、現在の行の「昼食休憩」列が true のときはいつでも無効にします。
これらの検証ルールと無効な時間式を設定することで、ユーザーが入力した時間値がアプリケーションの特定の要件を満たしていることを確認できます。
##### 行動
+ **表示可能:** Time コンポーネントの可視性を決定する式。
+ **Disable if**: Time コンポーネントを無効にするかどうかを決定する式。
##### 検証
+ **必須**: フォームを送信する前にユーザーが時間値を入力するようにするトグル。
+ **カスタム**: JavaScript 式を使用してカスタム検証ルールを作成できます。
**カスタム検証メッセージ**: カスタム検証が満たされない場合に表示されるメッセージ。
例えば、次のようになります。
```
{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}
```
この式は、入力された時刻が午前 9 時または午前 9 時 30 分であるかどうかをチェックします。条件が true の場合、検証は失敗します。
検証が満たされない場合に表示されるカスタム検証メッセージを指定することもできます。
```
Validation not met. The time must be 9:00 AM or 9:30 AM.
```
#### 式と例
Time コンポーネントには、次の式フィールドが用意されています。
+ `{{ui.timeID.value}}`: ユーザーが HH:MM AA 形式で入力した時間値を返します。
##### 例: 時間値
+ `{{ui.timeID.value}}`: ユーザーが 形式で入力した時間値を返します`HH:MM AA`。
##### 例: 時間比較
+ `{{ui.timeInput.value > "10:00 AM"}}`: 時刻値が午前 10:00 より大きいかどうかを確認します。
+ `{{ui.timeInput.value < "05:00 pM"}}`: 時刻値が午後 5 時未満かどうかを確認します。
### 日付範囲
**日付範囲**コンポーネントを使用すると、ユーザーは日付の範囲を選択して入力できます。日付範囲コンポーネントのさまざまなプロパティを設定することで、選択可能な日付範囲の制限、特定の日付の無効化、コンポーネントの可視性とインタラクティブ性の制御など、アプリケーションの特定の要件を満たす日付範囲入力フィールドを作成できます。
#### 日付範囲のプロパティ
**日付範囲**コンポーネントは、、、 などの他のコンポーネントといくつかの共通プロパティを共有`Name``Source`します`Validation`。これらのプロパティの詳細については、「」を参照してください[一般的なコンポーネントプロパティ](#common-properties)。
共通のプロパティに加えて、**日付範囲**コンポーネントには次の特定のプロパティがあります。
##### 形式
+ **MM/DD/YYYY**: 日付範囲を表示する形式。
##### [開始日]
+ **YYYY-MM-DD**: 範囲の開始として選択できる最小日付。
**注記**
この値は の形式と一致する必要があります`YYYY-MM-DD`。
##### [終了日]
+ **YYYY-MM-DD**: 範囲の最後に選択できる最大日付。
**注記**
この値は の形式と一致する必要があります`YYYY-MM-DD`。
##### Placeholder
+ **カレンダー設定**: 日付範囲フィールドが空の場合に表示されるプレースホルダーテキスト。
##### 最小日付
+ **YYYY-MM-DD**: 選択できる最小日付。
**注記**
この値は の形式と一致する必要があります`YYYY-MM-DD`。
##### 最大日付
+ **YYYY-MM-DD**: 選択できる最大日付。
**注記**
この値は の形式と一致する必要があります`YYYY-MM-DD`。
##### カレンダータイプ
+ **1 か月**: 表示するカレンダー UI のタイプ。たとえば、1 か月です。
+ **2 か月**: 表示するカレンダー UI のタイプ。たとえば、2 か月です。
##### 選択した必須日数
+ **0**: 日付範囲内で選択する必要がある必須日数。
##### 無効になった日付
+ **ソース**: 無効にする必要がある日付のデータソース (None、Expression、Entity、Automation など）。
+ **無効日付**: など、無効にする日付を決定する式`{{currentRow.column}}`。
##### 検証
**検証**セクションでは、日付範囲入力に追加のルールと制約を定義できます。
#### 式と例
**日付範囲**コンポーネントには、次の式フィールドが用意されています。
+ `{{ui.dateRangeID.startDate}}`: 選択した範囲の開始日を 形式で返します`YYYY-MM-DD`。
+ `{{ui.dateRangeID.endDate}}`: 選択した範囲の終了日を 形式で返します`YYYY-MM-DD`。
##### 例: 日付の差の計算
+ `{(new Date(ui.dateRangeID.endDate) - new Date(ui.dateRangeID.startDate)) / (1000 * 60 * 60 * 24)}}` 開始日から終了日までの日数を計算します。
##### 例: 日付範囲に基づく条件付き可視性
+ `{{new Date(ui.dateRangeID.startDate) < new Date("2023-01-01") || new Date(ui.dateRangeID.endDate) > new Date("2023-12-31")}}` 選択した日付範囲が 2023 年の外側にあるかどうかを確認します。
##### 例: 現在の行データに基づいて日付を無効にする
+ `{{currentRow.isHoliday}}` 現在の行のisHoliday」列が true である日付を無効にします。
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}` 現在の行のdateColumn」に基づいて、2023 年 1 月 1 日より前の日付を無効にします。
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}` 現在の行のdateColumn」に基づいて週末を無効にします。
##### カスタム検証
+ `{{new Date(ui.dateRangeID.startDate) > new Date(ui.dateRangeID.endDate)}}` 開始日が終了日より後であるかどうかをチェックし、カスタム検証が失敗します。
## メディアコンポーネント
アプリケーションスタジオには、アプリケーション内にさまざまなメディアタイプを埋め込んで表示するためのコンポーネントがいくつか用意されています。
### iFrame 埋め込み
**iFrame 埋め込み**コンポーネントを使用すると、iFrame を使用してアプリケーション内に外部ウェブコンテンツまたはアプリケーションを埋め込むことができます。
#### iFrame 埋め込みプロパティ
##### [URL]
**注記**
このコンポーネントに表示されるメディアのソースは、アプリケーションのコンテンツセキュリティ設定で許可する必要があります。詳細については、「[アプリのコンテンツセキュリティ設定の表示または更新](app-content-security-settings-csp.md)」を参照してください。
埋め込む外部コンテンツまたはアプリケーションの URL。
##### [レイアウト]
+ **幅**: パーセンテージ (%) または固定ピクセル値 (300px など) で指定された iFrame の幅。
+ **高さ**: パーセンテージ (%) または固定ピクセル値で指定された iFrame の高さ。
### S3 アップロード
**S3 アップロード**コンポーネントを使用すると、ユーザーは Amazon S3 バケットにファイルをアップロードできます。**S3 アップロード**コンポーネントを設定することで、ユーザーがアプリケーションの Amazon S3 ストレージにファイルを簡単にアップロードし、アップロードされたファイル情報をアプリケーションのロジックとユーザーインターフェイス内で活用できるようになります。
**注記**
アプリケーションのファイルアップロードとストレージ要件をサポートするために、必要なアクセス許可と Amazon S3 バケット設定が設定されていることを確認してください。
#### S3 アップロードプロパティ
##### S3 設定
+ **コネクタ**: ファイルのアップロードに使用する事前設定済みの Amazon S3 コネクタを選択します。
+ **バケット**: ファイルをアップロードする Amazon S3 バケット。
+ **フォルダ**: ファイルを保存する Amazon S3 バケット内のフォルダ。
+ **ファイル名**: アップロードされたファイルの命名規則。
##### ファイルのアップロード設定
+ **ラベル**: ファイルのアップロード領域の上に表示されるラベルまたは手順。
+ **説明**: ファイルのアップロードに関する追加の手順または情報。
+ **ファイルタイプ**: アップロードできるファイルのタイプ。例: イメージ、ドキュメント、ビデオ。
+ **サイズ**: アップロードできる個々のファイルの最大サイズ。
+ **ボタンラベル**: ファイル選択ボタンに表示されるテキスト。
+ **ボタンスタイル**: ファイル選択ボタンのスタイル。例えば、概要や入力などです。
+ **ボタンサイズ**: ファイル選択ボタンのサイズ。
##### 検証
+ **ファイルの最大数**: 一度にアップロードできるファイルの最大数。
+ **最大ファイルサイズ**: 個々のファイルで許可される最大サイズ。
##### トリガ
+ **成功時**: ファイルのアップロードが成功したときにトリガーされるアクション。
+ **失敗時**: ファイルのアップロードが失敗した場合にトリガーされるアクション。
#### S3 アップロード式フィールド
**S3 アップロード**コンポーネントには、次の式フィールドが用意されています。
+ `{{ui.s3uploadID.files}}`: アップロードされたファイルの配列を返します。
+ `{{ui.s3uploadID.files[0]?.size}}`: 指定されたインデックスのファイルのサイズを返します。
+ `{{ui.s3uploadID.files[0]?.type}}`: 指定されたインデックスのファイルのタイプを返します。
+ `{{ui.s3uploadID.files[0]?.nameOnly}}`: 指定されたインデックスで拡張子のサフィックスなしでファイルの名前を返します。
+ `{{ui.s3uploadID.files[0]?.nameWithExtension}}`: 指定されたインデックスに拡張子のサフィックスが付いたファイルの名前を返します。
#### 式と例
##### 例: アップロードされたファイルへのアクセス
+ `{{ui.s3uploadID.files.length}}`: アップロードされたファイルの数を返します。
+ `{{ui.s3uploadID.files.map(f => f.name).join(', ')}}`: アップロードされたファイル名のカンマ区切りリストを返します。
+ `{{ui.s3uploadID.files.filter(f => f.type.startsWith('image/'))}}`: アップロードされたイメージファイルのみの配列を返します。
##### 例: ファイルのアップロードの検証
+ `{{ui.s3uploadID.files.some(f => f.size > 5 * 1024 * 1024)}}`: アップロードされたファイルのサイズが 5 MB を超えているかどうかを確認します。
+ `{{ui.s3uploadID.files.every(f => f.type === 'image/png')}}`: アップロードされたすべてのファイルが PNG イメージかどうかを確認します。
+ `{{ui.s3uploadID.files.length > 3}}`: 3 つ以上のファイルがアップロードされているかどうかを確認します。
##### 例: アクションのトリガー
+ `{{ui.s3uploadID.files.length > 0 ? 'Upload Successful' : 'No files uploaded'}}`: 少なくとも 1 つのファイルがアップロードされると、成功メッセージが表示されます。
+ `{{ui.s3uploadID.files.some(f => f.type.startsWith('video/')) ? triggerVideoProcessing() : null}}`: 動画ファイルがアップロードされると、動画処理の自動化をトリガーします。
+ `{{ui.s3uploadID.files.map(f => f.url)}}`: アップロードされたファイルの URLs を取得します。この URL は、ファイルを表示またはさらに処理するために使用できます。
これらの式を使用すると、アップロードされたファイルにアクセスし、ファイルのアップロードを検証し、ファイルのアップロード結果に基づいてアクションをトリガーできます。これらの式を使用することで、アプリケーションのファイルアップロード機能内でより動的でインテリジェントな動作を作成できます。
**注記**
*s3uploadID* を **S3 アップロードコンポーネントの ID **に置き換えます。
### PDF ビューワーコンポーネント
**PDF ビューワー**コンポーネントを使用すると、ユーザーはアプリケーション内の PDF ドキュメントを表示して操作できます。App Studio は PDF ソースに対してこれらのさまざまな入力タイプをサポートしています。**PDF ビューワー**コンポーネントは、静的 URL、インラインデータ URI、動的に生成されたコンテンツのいずれからでも、PDF ドキュメントをアプリケーションに統合する方法に柔軟性を提供します。
#### PDF ビューワーのプロパティ
##### ソース
**注記**
このコンポーネントに表示されるメディアのソースは、アプリケーションのコンテンツセキュリティ設定で許可する必要があります。詳細については、「[アプリのコンテンツセキュリティ設定の表示または更新](app-content-security-settings-csp.md)」を参照してください。
PDF ドキュメントのソース。式、エンティティ、URL、またはオートメーションを使用できます。
##### 式
式を使用して PDF ソースを動的に生成します。
##### エンティティ
**PDF ビューワー**コンポーネントを PDF ドキュメントを含むデータエンティティに接続します。
##### [URL]
PDF ドキュメントの URL を指定します。
##### [URL]
表示する PDF ドキュメントを指す URL を入力できます。これは、パブリックウェブ URL でも、独自のアプリケーション内の URL でもかまいません。
例: `https://example.com/document.pdf`
##### データ URI
**データ URI **は、アプリケーション内に小さなデータファイル (画像や PDFs) をインラインで含めるコンパクトな方法です。PDF ドキュメントは base64 文字列としてエンコードされ、コンポーネントの設定に直接含まれます。
##### Blob または ArrayBuffer
PDF ドキュメントを Blob または ArrayBuffer オブジェクトとして提供することもできます。これにより、アプリケーション内のさまざまなソースから PDF データを動的に生成または取得できます。
##### オートメーション
**PDF ビューワー**コンポーネントを PDF ドキュメントを提供するオートメーションに接続します。
##### アクション
+ **ダウンロード**: ユーザーが PDF ドキュメントをダウンロードできるようにするボタンまたはリンクを追加します。
##### [レイアウト]
+ **幅**: PDF ビューワーの幅。パーセンテージ (%) または固定ピクセル値 (600px など) で指定します。
+ **高さ**: 固定ピクセル値として指定された PDF ビューワーの高さ。
### イメージビューワー
**イメージビューワー**コンポーネントを使用すると、ユーザーはアプリケーション内のイメージファイルを表示して操作できます。
#### イメージビューワーのプロパティ
##### ソース
**注記**
このコンポーネントに表示されるメディアのソースは、アプリケーションのコンテンツセキュリティ設定で許可する必要があります。詳細については、「[アプリのコンテンツセキュリティ設定の表示または更新](app-content-security-settings-csp.md)」を参照してください。
+ **Entity**: Image **Viewer **コンポーネントを、イメージファイルを含むデータエンティティに接続します。
+ **URL**: イメージファイルの URL を指定します。
+ **式**: 式を使用してイメージソースを動的に生成します。
+ **自動化**: **イメージビューワー**コンポーネントを、イメージファイルを提供する自動化に接続します。
##### Alt テキスト
アクセシビリティの目的で使用されるイメージの代替テキストの説明。
##### [レイアウト]
+ **イメージフィット**: イメージのサイズを変更してコンポーネント内に表示する方法を決定します。たとえば、`Contain`、`Cover`、または `Fill` などです。
+ **幅**: パーセンテージ (%) または固定ピクセル値 (300px など) で指定された**イメージビューワー**コンポーネントの幅。
+ **高さ**: 固定ピクセル値として指定された**イメージビューワー**コンポーネントの高さ。
+ **背景**: イメージ**ビューワー**コンポーネントの背景色またはイメージを設定できます。
# 自動化とアクション: アプリのビジネスロジックを定義する
**自動化**は、アプリケーションのビジネスロジックを定義する方法です。オートメーションの主なコンポーネントは、オートメーションを開始するトリガー、1 つ以上のアクションのシーケンス、オートメーションにデータを渡すために使用される入力パラメータ、および出力です。
**Topics**
+ [オートメーションの概念](automations-concepts.md)
+ [オートメーションの作成、編集、削除](automations-create-edit-delete.md)
+ [自動化アクションの追加、編集、削除](automations-actions-add-edit-delete.md)
+ [オートメーションアクションのリファレンス](automations-actions-reference.md)
# オートメーションの概念
App Studio のオートメーションを使用してアプリのビジネスロジックを定義および設定するときに知っておくべき概念と用語をいくつか紹介します。
## 自動化
**自動化**は、アプリケーションのビジネスロジックを定義する方法です。オートメーションの主なコンポーネントは、オートメーションを開始するトリガー、1 つ以上のアクションのシーケンス、オートメーションにデータを渡すために使用される入力パラメータ、および出力です。
## アクション
一般的にアクションと呼ばれるオートメーションアクションは****、オートメーションを構成するロジックの個々のステップです。各アクションは、E メールの送信、データレコードの作成、Lambda 関数の呼び出し、APIs呼び出しなど、特定のタスクを実行します。アクションはアクションライブラリのオートメーションに追加され、条件ステートメントまたはループにグループ化できます。
## 自動化入力パラメータ
**自動化入力パラメータ**は、コンポーネントから自動化に渡すことができる動的入力値であり、柔軟で再利用可能なものにします。パラメータをオートメーションの変数と考えると、値をオートメーションにハードコーディングする代わりに、パラメータを定義し、必要に応じて異なる値を指定できます。パラメータを使用すると、実行されるたびに異なる入力で同じオートメーションを使用できます。
## モック出力
一部のアクションは、コネクタを使用して外部リソースまたはサービスとやり取りします。プレビュー環境を使用する場合、アプリケーションは外部サービスとやり取りしません。プレビュー環境でコネクタを使用するアクションをテストするには、**モック出力**を使用してコネクタの動作と出力をシミュレートできます。モック出力は JavaScript を使用して設定され、コネクタのレスポンスが公開されたアプリケーションに保存されているのと同様に、結果はアクションの結果に保存されます。
モックを使用すると、プレビュー環境を使用して、コネクタを介して外部サービスを呼び出すことなく、さまざまな結果値、エラーシナリオ、エッジケース、不満のあるパスのシミュレートなど、さまざまなシナリオと他のアクションへの影響をオートメーションでテストできます。
## 自動化出力
**オートメーション出力**は、あるオートメーションから、コンポーネントやその他のオートメーションなど、アプリケーションの他のリソースに値を渡すために使用されます。自動化出力は式として設定され、式は自動化パラメータとアクションから計算された静的値または動的値を返すことができます。デフォルトでは、オートメーションは、オートメーション内のアクションの結果を含むデータを返しません。
自動化出力の使用方法の例をいくつか示します。
+ オートメーション出力を設定して配列を返し、その配列を渡してデータコンポーネントを入力できます。
+ オートメーションを使用して値を計算し、ビジネスロジックを一元化して再利用する方法として、その値を他の複数のオートメーションに渡すことができます。
## トリガ
**トリガー**は、オートメーションをいつ、どの条件で実行するかを決定します。トリガーの例としては、ボタン`On click`用とテキスト入力`On select`用があります。コンポーネントのタイプによって、そのコンポーネントの使用可能なトリガーのリストが決まります。トリガーは[コンポーネント](concepts.md#concepts-component)に追加され、アプリケーションスタジオで設定されます。
# オートメーションの作成、編集、削除
**Contents**
+ [オートメーションの作成](#automations-create)
+ [自動化プロパティの表示または編集](#automations-edit)
+ [オートメーションの削除](#automations-delete)
## オートメーションの作成
App Studio アプリケーションでオートメーションを作成するには、次の手順に従います。作成したオートメーションは、プロパティを編集してアクションを追加して設定する必要があります。
**オートメーションを作成するには**
1. 必要に応じて、アプリケーションのアプリケーションスタジオに移動します。
1. **[自動化]** タブを選択します。
1. 自動化がない場合は、キャンバスで **\$1 自動化を追加する** を選択します。それ以外の場合は、左側の**オートメーション**メニューで **\$1 追加**を選択します。
1. 新しいオートメーションが作成され、そのプロパティの編集、またはアプリケーションのビジネスロジックを定義するアクションの追加と設定を開始できます。
## 自動化プロパティの表示または編集
オートメーションプロパティを表示または編集するには、次の手順に従います。
**オートメーションプロパティを表示または編集するには**
1. 必要に応じて、アプリケーションのアプリケーションスタジオに移動します。
1. **[自動化]** タブを選択します。
1. 左側の**オートメーション**メニューで、プロパティを表示または編集するオートメーションを選択して、右側の**プロパティ**メニューを開きます。
1. **プロパティ**メニューでは、次のプロパティを表示できます。
+ **自動化識別子**: 自動化の一意の名前。編集するには、テキストフィールドに新しい識別子を入力します。
+ **自動化パラメータ**: 自動化パラメータは、アプリケーションの UI から自動化アクションとデータアクションに動的値を渡すために使用されます。パラメータを追加するには、 **\$1 追加**を選択します。鉛筆アイコンを選択して、パラメータの名前、説明、またはタイプを変更します。パラメータを削除するには、ごみ箱アイコンを選択します。
**ヒント**
キャンバスから直接オートメーションパラメータを追加することもできます。
+ **オートメーション出力**: オートメーション出力は、オートメーションのどのデータを他のオートメーションまたはコンポーネントで参照できるかを設定するために使用されます。デフォルトでは、オートメーションは出力を作成しません。自動化出力を追加するには、 **\$1 追加**を選択します。出力を削除するには、ごみ箱アイコンを選択します。
1. オートメーションの動作を定義するには、アクションを追加および設定します。アクションの詳細については、[自動化アクションの追加、編集、削除](automations-actions-add-edit-delete.md)「」および「」を参照してください[オートメーションアクションのリファレンス](automations-actions-reference.md)。
## オートメーションの削除
App Studio アプリケーションでオートメーションを削除するには、次の手順に従います。
**オートメーションを削除するには**
1. 必要に応じて、アプリケーションのアプリケーションスタジオに移動します。
1. **[自動化]** タブを選択します。
1. 左側の**オートメーション**メニューで、削除するオートメーションの省略形メニューを選択し、**削除**を選択します。または、自動化の右側にある**プロパティ**メニューからごみ箱アイコンを選択することもできます。
1. 確認ダイアログボックスで、[**削除**] を選択します。
# 自動化アクションの追加、編集、削除
一般的にアクションと呼ばれるオートメーションアクションは****、オートメーションを構成するロジックの個々のステップです。各アクションは、E メールの送信、データレコードの作成、Lambda 関数の呼び出し、APIs呼び出しなど、特定のタスクを実行します。アクションはアクションライブラリのオートメーションに追加され、条件ステートメントまたはループにグループ化できます。
**Contents**
+ [オートメーションアクションの追加](#automations-actions-add)
+ [オートメーションアクションのプロパティの表示と編集](#automations-actions-edit)
+ [オートメーションアクションの削除](#automations-actions-delete)
## オートメーションアクションの追加
App Studio アプリケーションのオートメーションにアクションを追加するには、次の手順に従います。
**オートメーションアクションを追加するには**
1. 必要に応じて、アプリケーションのアプリケーションスタジオに移動します。
1. **[自動化]** タブを選択します。
1. 左側の**オートメーション**メニューで、アクションを追加するオートメーションを選択します。
1. 右側の**アクション**メニューで、追加するアクションを選択するか、アクションをキャンバスにドラッグアンドドロップします。アクションを作成したら、アクションを選択してアクションのプロパティを設定して、アクションの機能を定義できます。アクションプロパティとその設定の詳細については、「」を参照してください[オートメーションアクションのリファレンス](automations-actions-reference.md)。
## オートメーションアクションのプロパティの表示と編集
App Studio アプリケーションでオートメーションアクションのプロパティを表示または編集するには、次の手順に従います。
**オートメーションアクションのプロパティを表示または編集するには**
1. 必要に応じて、アプリケーションのアプリケーションスタジオに移動します。
1. **[自動化]** タブを選択します。
1. 左側の**オートメーション**メニューで、プロパティを表示または編集するアクションを選択します。または、キャンバスに含まれるオートメーションを表示するときに、キャンバス内のアクションを選択することもできます。
1. 右側のプロパティメニューでアクション**プロパティ**を表示または編集できます。アクションのプロパティは、アクションタイプごとに異なります。アクションプロパティとその設定の詳細については、「」を参照してください[オートメーションアクションのリファレンス](automations-actions-reference.md)。
## オートメーションアクションの削除
App Studio アプリケーションのオートメーションからアクションを削除するには、次の手順に従います。
**オートメーションアクションを削除するには**
1. 必要に応じて、アプリケーションのアプリケーションスタジオに移動します。
1. **[自動化]** タブを選択します。
1. 左側の**オートメーション**メニューで、削除するアクションを含むオートメーションを選択します。
1. キャンバスで、削除するアクションのごみ箱アイコンを選択し、**削除**を選択します。
# オートメーションアクションのリファレンス
App Studio で使用されるオートメーションアクションのリファレンスドキュメントを次に示します。
一般的にアクションと呼ばれるオートメーションアクションは****、オートメーションを構成するロジックの個々のステップです。各アクションは、E メールの送信、データレコードの作成、Lambda 関数の呼び出し、APIs呼び出しなど、特定のタスクを実行します。アクションはアクションライブラリのオートメーションに追加され、条件ステートメントまたはループにグループ化できます。
オートメーションとそのアクションの作成と設定については、「」のトピックを参照してください[自動化とアクション: アプリのビジネスロジックを定義する](automations.md)。
## API を呼び出す
HTTP REST API リクエストを呼び出します。ビルダーはこのアクションを使用して、APIs を使用して App Studio から他のシステムまたはサービスにリクエストを送信できます。例えば、サードパーティーのシステムや自社開発のアプリケーションに接続してビジネスクリティカルなデータにアクセスしたり、専用の App Studio アクションでは呼び出せない API エンドポイントを呼び出すことができます。
REST APIs[RESTful API とは](https://aws.amazon.com/what-is/restful-api/)」を参照してください。
### プロパティ
#### コネクタ
このアクションによって行われた API リクエストに使用する**コネクタ**。コネクタドロップダウンには、 `API Connector`および のタイプのコネクタのみが含まれます`OpenAPI Connector`。コネクタの設定方法に応じて、認証情報やデフォルトのヘッダー、クエリパラメータなどの重要な情報を含めることができます。
`API Connector` と の使用の比較など、API コネクタの詳細については`OpenAPI Connector`、「」を参照してください[サードパーティーのサービスに接続する](add-connector-third-party.md)。
#### API リクエスト設定プロパティ
プロパティパネルから **API リクエストの設定** を選択し、リクエスト設定ダイアログボックスを開きます。**API コネクタ**が選択されている場合、ダイアログボックスにはコネクタ情報が含まれます。
**メソッド:** API コールのメソッド。可能な値は以下のとおりです。
+ `DELETE`: 指定されたリソースを削除します。
+ `GET`: 情報またはデータを取得します。
+ `HEAD`: 本文のないレスポンスのヘッダーのみを取得します。
+ `POST`: 処理するデータを送信します。
+ `PUSH`: 処理するデータを送信します。
+ `PATCH`: 指定されたリソースを部分的に更新します。
**パス:** リソースへの相対パス。
**ヘッダー:** API リクエストで送信されるキーと値のペアの形式のヘッダー。コネクタが選択されている場合、その設定済みヘッダーは自動的に追加され、削除することはできません。設定されたヘッダーは編集できませんが、同じ名前の別のヘッダーを追加して上書きできます。
**クエリパラメータ:** API リクエストで送信されるキーと値のペアの形式のクエリパラメータ。コネクタが選択されている場合、設定されたクエリパラメータは自動的に追加され、編集または削除することはできません。
**本文:** API リクエストとともに JSON 形式で送信される情報。`GET` リクエストの本文はありません。
#### モック出力
アクションは、プレビュー環境の外部サービスまたはリソースとやり取りしません。**モック出力**フィールドは、テスト目的でプレビュー環境のコネクタの動作をシミュレートする JSON 式を提供するために使用されます。このスニペットは、ライブ環境で公開されたアプリケーションに対するコネクタレスポンスと同様に、アクションの`results`マップに保存されます。
このフィールドを使用すると、コネクタを介して外部サービスと通信することなく、さまざまな結果値、エラーシナリオ、エッジケース、不満のあるパスのシミュレートなど、オートメーション内の他のアクションに対するさまざまなシナリオとその影響をテストできます。
## 呼び出し AWS
AWS サービスから オペレーションを呼び出します。これはサービス AWS またはオペレーションを呼び出すための一般的なアクションであり、目的の AWS サービスまたはオペレーション専用のアクションがない場合に使用する必要があります。
### プロパティ
#### サービス
実行するオペレーションを含む AWS サービス。
#### 運用
実行するオペレーション。
#### コネクタ
このアクションによって実行されるオペレーションに使用されるコネクタ。設定済みコネクタは、オペレーションを実行するための適切な認証情報と、オペレーションで参照されるリソースを含む AWS リージョンなどのその他の設定情報を使用して設定する必要があります。
#### 設定
指定されたオペレーションを実行するときの JSON 入力。 AWS オペレーションの入力の設定の詳細については、「」を参照してください[AWS SDK for JavaScript](https://docs.aws.amazon.com/sdk-for-javascript)。
## Lambda を呼び出す
既存の Lambda 関数を呼び出します。
### プロパティ
#### コネクタ
このアクションによって実行される Lambda 関数に使用されるコネクタ。設定済みコネクタは、Lambda 関数にアクセスするための適切な認証情報と、Lambda 関数を含む AWS リージョンなどのその他の設定情報を使用して設定する必要があります。Lambda のコネクタの設定の詳細については、「」を参照してください[ステップ 3: Lambda コネクタを作成する](connectors-lambda.md#connectors-lambda-create-connector)。
#### 関数名
実行する Lambda 関数の名前。これは関数名であり、関数 ARN (Amazon リソースネーム) ではないことに注意してください。
#### 関数イベント
イベントペイロードとして Lambda 関数に渡されるキーと値のペア。
#### モック出力
アクションは、プレビュー環境の外部サービスまたはリソースとやり取りしません。**モック出力**フィールドは、テスト目的でプレビュー環境のコネクタの動作をシミュレートする JSON 式を提供するために使用されます。このスニペットは、ライブ環境で公開されたアプリケーションに対するコネクタレスポンスと同様に、アクションの`results`マップに保存されます。
このフィールドを使用すると、コネクタを介して外部サービスと通信することなく、さまざまな結果値、エラーシナリオ、エッジケース、不満のあるパスのシミュレートなど、オートメーション内の他のアクションに対するさまざまなシナリオとその影響をテストできます。
## ループ
ネストされたアクションを繰り返し実行して、項目のリストを一度に 1 つずつ反復処理します。たとえば、 [レコードの作成](#automations-actions-reference-create-record)アクションをループアクションに追加して、複数のレコードを作成します。
ループアクションは、他のループまたは条件アクション内にネストできます。ループアクションは並列ではなく順番に実行されます。ループ内の各アクションの結果は、同じループ反復内の後続のアクションにのみアクセスできます。ループの外部またはループの異なる反復でアクセスすることはできません。
### プロパティ
#### ソース
反復処理する項目のリスト。一度に 1 つの項目。ソースは、前のアクション、または JavaScript 式を使用して指定できる文字列、数値、またはオブジェクトの静的リストの結果です。
##### 例
次のリストには、ソース入力の例が含まれています。
+ 前のアクションの結果: `{{results.actionName.data}}`
+ 数値のリスト: `{{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}}`
+ 文字列のリスト: `{{["apple", "banana", "orange", "grape", "kiwi"]}}`
+ 計算された値: `{{params.actionName.split("\n")}}`
#### 現在の項目名
反復する現在の項目を参照するために使用できる変数の名前。現在の項目名は、2 つ以上のループをネストし、各ループから変数にアクセスできるように設定できます。たとえば、2 つのループを持つ国と都市をループする場合は、 と を設定`currentCountry`して参照できます`currentCity`。
## Condition
オートメーションの実行時に評価される 1 つ以上の指定された論理条件の結果に基づいてアクションを実行します。条件アクションは、次のコンポーネントで構成されます。
+ `true` または と評価される JavaScript 式を提供するために使用される*条件*フィールド`false`。
+ 条件が に評価された場合に実行されるアクションを含む *true ブランチ*`true`。
+ 条件が に評価された場合に実行されるアクションを含む *false ブランチ*`false`。
条件アクションにドラッグして、アクションを true ブランチと false ブランチに追加します。
### プロパティ
#### Condition
アクションの実行時に評価される JavaScript 式。
## レコードの作成
既存の App Studio エンティティに 1 つのレコードを作成します。
### プロパティ
#### エンティティ
レコードを作成するエンティティ。エンティティを選択したら、レコードを作成するエンティティのフィールドに値を追加する必要があります。フィールドのタイプ、およびフィールドが必須かオプションかは、エンティティで定義されます。
## レコードの更新
App Studio エンティティの既存のレコードを更新します。
### プロパティ
#### エンティティ
更新するレコードを含むエンティティ。
#### 条件
アクションによって更新されるレコードを定義する基準。条件をグループ化して、1 つの論理ステートメントを作成できます。グループまたは条件を `AND`または `OR`ステートメントと組み合わせることができます。
#### フィールド
条件によって指定されたレコードで更新されるフィールド。
#### 値
指定されたフィールドで更新する値。
## レコードの削除
App Studio エンティティからレコードを削除します。
### プロパティ
#### エンティティ
削除するレコードを含むエンティティ。
#### 条件
アクションによって削除するレコードを定義する基準。条件をグループ化して、1 つのロジックステートメントを作成できます。グループまたは条件を `AND`または `OR`ステートメントと組み合わせることができます。
## データアクションを呼び出す
オプションのパラメータを使用してデータアクションを実行します。
### プロパティ
#### データアクション
アクションによって実行されるデータアクション。
#### パラメータ
データアクションで使用されるデータアクションパラメータ。データアクションパラメータは、データアクションの入力として使用される値を送信するために使用されます。データアクションパラメータは、オートメーションアクションを設定するときに追加できますが、**データ**タブで編集する必要があります。
#### 詳細設定
`Invoke data action` アクションには、次の詳細設定が含まれます。
+ **ページサイズ:** 各クエリで取得するレコードの最大数。デフォルト値は 500 で、最大値は 3000 です。
+ **ページ分割トークン:** クエリから追加のレコードを取得するために使用されるトークン。たとえば、 `Page size`が 500 に設定されている場合、500 を超えるレコードがある場合、ページ分割トークンを後続のクエリに渡すと、次の 500 が取得されます。これ以上レコードやページが存在しない場合、トークンは未定義になります。
## Amazon S3: オブジェクトを配置する
`Amazon S3 PutObject` オペレーションを使用して、キー (ファイルパス) によって識別されるオブジェクトを指定された Amazon S3 バケットに追加します。
### プロパティ
#### コネクタ
このアクションによって実行されるオペレーションに使用されるコネクタ。設定済みコネクタは、オペレーションを実行するための適切な認証情報と、オペレーションで参照されるリソースを含む AWS リージョンなどのその他の設定情報を使用して設定する必要があります。
#### 設定
`PutObject` コマンドで使用する必須オプション。オプションは以下のとおりです:
**注記**
`Amazon S3 PutObject` オペレーションの詳細については、*Amazon Simple Storage Service API リファレンス*の[PutObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_PutObject.html)」を参照してください。
+ **バケット:** オブジェクトを配置する Amazon S3 バケットの名前。
+ **キー:** Amazon S3 バケットに入れるオブジェクトの一意の名前。
+ **本文:** Amazon S3 バケットに入れるオブジェクトの内容。
#### モック出力
アクションは、プレビュー環境の外部サービスまたはリソースとやり取りしません。**モック出力**フィールドは、テスト目的でプレビュー環境のコネクタの動作をシミュレートする JSON 式を提供するために使用されます。このスニペットは、ライブ環境で公開されたアプリケーションに対するコネクタレスポンスと同様に、アクションの`results`マップに保存されます。
このフィールドを使用すると、コネクタを介して外部サービスと通信することなく、さまざまな結果値、エラーシナリオ、エッジケース、不満のあるパスのシミュレートなど、オートメーション内の他のアクションに対するさまざまなシナリオとその影響をテストできます。
## Amazon S3: オブジェクトを削除する
`Amazon S3 DeleteObject` オペレーションを使用して、指定された Amazon S3 バケットからキー (ファイルパス) によって識別されるオブジェクトを削除します。
### プロパティ
#### コネクタ
このアクションによって実行されるオペレーションに使用されるコネクタ。設定済みコネクタは、オペレーションを実行するための適切な認証情報と、オペレーションで参照されるリソースを含む AWS リージョンなどのその他の設定情報を使用して設定する必要があります。
#### 設定
`DeleteObject` コマンドで使用する必須オプション。オプションは以下のとおりです:
**注記**
`Amazon S3 DeleteObject` オペレーションの詳細については、*Amazon Simple Storage Service API リファレンス*の[DeleteObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_DeleteObject.html)」を参照してください。
+ **バケット:** オブジェクトを削除する Amazon S3 バケットの名前。
+ **キー:** Amazon S3 バケットから削除するオブジェクトの一意の名前。
#### モック出力
アクションは、プレビュー環境の外部サービスまたはリソースとやり取りしません。**モック出力**フィールドは、テスト目的でプレビュー環境のコネクタの動作をシミュレートする JSON 式を提供するために使用されます。このスニペットは、ライブ環境で公開されたアプリケーションに対するコネクタレスポンスと同様に、アクションの`results`マップに保存されます。
このフィールドを使用すると、コネクタを介して外部サービスと通信することなく、さまざまな結果値、エラーシナリオ、エッジケース、不満のあるパスのシミュレートなど、オートメーション内の他のアクションに対するさまざまなシナリオとその影響をテストできます。
## Amazon S3: オブジェクトの取得
`Amazon S3 GetObject` オペレーションを使用して、指定された Amazon S3 バケットからキー (ファイルパス) によって識別されるオブジェクトを取得します。
### プロパティ
#### コネクタ
このアクションによって実行されるオペレーションに使用されるコネクタ。設定済みコネクタは、オペレーションを実行するための適切な認証情報と、オペレーションで参照されるリソースを含む AWS リージョンなどのその他の設定情報を使用して設定する必要があります。
#### 設定
`GetObject` コマンドで使用する必須オプション。オプションは以下のとおりです:
**注記**
`Amazon S3 GetObject` オペレーションの詳細については、*Amazon Simple Storage Service API リファレンス*の[GetObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_GetObject.html)」を参照してください。
+ **バケット:** オブジェクトを取得する Amazon S3 バケットの名前。
+ **キー:** Amazon S3 バケットから取得するオブジェクトの一意の名前。
#### モック出力
アクションは、プレビュー環境の外部サービスまたはリソースとやり取りしません。**モック出力**フィールドは、テスト目的でプレビュー環境のコネクタの動作をシミュレートする JSON 式を提供するために使用されます。このスニペットは、ライブ環境で公開されたアプリケーションに対するコネクタレスポンスと同様に、アクションの`results`マップに保存されます。
このフィールドを使用すると、コネクタを介して外部サービスと通信することなく、さまざまな結果値、エラーシナリオ、エッジケース、不満のあるパスのシミュレートなど、オートメーション内の他のアクションに対するさまざまなシナリオとその影響をテストできます。
## Amazon S3: オブジェクトを一覧表示する
`Amazon S3 ListObjects` オペレーションを使用して、指定された Amazon S3 バケット内のオブジェクトを一覧表示します。
### プロパティ
#### コネクタ
このアクションによって実行されるオペレーションに使用されるコネクタ。設定済みコネクタは、オペレーションを実行するための適切な認証情報と、オペレーションで参照されるリソースを含む AWS リージョンなどのその他の設定情報を使用して設定する必要があります。
#### 設定
`ListObjects` コマンドで使用する必須オプション。オプションは以下のとおりです:
**注記**
`Amazon S3 ListObjects` オペレーションの詳細については、*Amazon Simple Storage Service API リファレンス*の[ListObjects](https://docs.aws.amazon.com/AmazonS3/latest/API/API_ListObjects.html)」を参照してください。
+ **バケット:** オブジェクトを一覧表示する Amazon S3 バケットの名前。
#### モック出力
アクションは、プレビュー環境の外部サービスまたはリソースとやり取りしません。**モック出力**フィールドは、テスト目的でプレビュー環境のコネクタの動作をシミュレートする JSON 式を提供するために使用されます。このスニペットは、ライブ環境で公開されたアプリケーションに対するコネクタレスポンスと同様に、アクションの`results`マップに保存されます。
このフィールドを使用すると、コネクタを介して外部サービスと通信することなく、さまざまな結果値、エラーシナリオ、エッジケース、不満のあるパスのシミュレートなど、オートメーション内の他のアクションに対するさまざまなシナリオとその影響をテストできます。
## Amazon Textract: ドキュメントを分析する
`Amazon Textract AnalyzeDocument` オペレーションを使用して、検出された項目間の関係について入力ドキュメントを分析します。
### プロパティ
#### コネクタ
このアクションによって実行されるオペレーションに使用されるコネクタ。設定済みコネクタは、オペレーションを実行するための適切な認証情報と、オペレーションで参照されるリソースを含む AWS リージョンなどのその他の設定情報を使用して設定する必要があります。
#### 設定
`AnalyzeDocument` コマンドで使用するリクエストの内容。オプションは以下のとおりです:
**注記**
`Amazon Textract AnalyzeDocument` オペレーションの詳細については、*「Amazon Textract デベロッパーガイド*」の[AnalyzeDocument](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeDocument.html)」を参照してください。
+ **ドキュメント/S3Object/バケット:** Amazon S3 バケットの名前。**S3 アップロード**コンポーネントを使用して アクションにファイルが渡された場合、このパラメータは空のままにすることができます。
+ **ドキュメント/S3Object/名前:** 入力ドキュメントのファイル名。**S3 アップロード**コンポーネントを使用して アクションにファイルが渡された場合、このパラメータは空のままにすることができます。
+ **ドキュメント/S3Object/バージョン:** Amazon S3 バケットでバージョニングが有効になっている場合は、オブジェクトのバージョンを指定できます。**S3 アップロード**コンポーネントを使用して アクションにファイルが渡された場合、このパラメータは空のままにすることができます。
+ **FeatureTypes:** 実行する分析のタイプのリスト。有効な値は、`TABLES`、`FORMS`、`QUERIES`、`SIGNATURES`、`LAYOUT` です。
#### モック出力
アクションは、プレビュー環境の外部サービスまたはリソースとやり取りしません。**モック出力**フィールドは、テスト目的でプレビュー環境のコネクタの動作をシミュレートする JSON 式を提供するために使用されます。このスニペットは、ライブ環境で公開されたアプリケーションに対するコネクタレスポンスと同様に、アクションの`results`マップに保存されます。
このフィールドを使用すると、コネクタを介して外部サービスと通信することなく、さまざまな結果値、エラーシナリオ、エッジケース、不満のあるパスのシミュレートなど、オートメーション内の他のアクションに対するさまざまなシナリオとその影響をテストできます。
## Amazon Textract: 経費を分析する
`Amazon Textract AnalyzeExpense` オペレーションを使用して、テキスト間の財務関係について入力ドキュメントを分析します。
### プロパティ
#### コネクタ
このアクションによって実行されるオペレーションに使用されるコネクタ。設定済みコネクタは、オペレーションを実行するための適切な認証情報と、オペレーションで参照されるリソースを含む AWS リージョンなどのその他の設定情報を使用して設定する必要があります。
#### 設定
`AnalyzeExpense` コマンドで使用するリクエストの内容。オプションは以下のとおりです:
**注記**
`Amazon Textract AnalyzeExpense` オペレーションの詳細については、*「Amazon Textract デベロッパーガイド*」の[AnalyzeExpense](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeExpense.html)」を参照してください。
+ **ドキュメント/S3Object/バケット:** Amazon S3 バケットの名前。**S3 アップロード**コンポーネントを使用して アクションにファイルが渡された場合、このパラメータは空のままにすることができます。
+ **Document / S3Object / Name:** 入力ドキュメントのファイル名。**S3 アップロード**コンポーネントを使用して アクションにファイルが渡された場合、このパラメータは空のままにすることができます。
+ **ドキュメント/S3Object/バージョン:** Amazon S3 バケットでバージョニングが有効になっている場合は、オブジェクトのバージョンを指定できます。**S3 アップロード**コンポーネントを使用して アクションにファイルが渡された場合、このパラメータは空のままにすることができます。
#### モック出力
アクションは、プレビュー環境の外部サービスまたはリソースとやり取りしません。**モック出力**フィールドは、テスト目的でプレビュー環境のコネクタの動作をシミュレートする JSON 式を提供するために使用されます。このスニペットは、コネクタレスポンスがライブ環境で公開されたアプリケーションの場合と同様に、アクションの`results`マップに保存されます。
このフィールドを使用すると、コネクタを介して外部サービスと通信することなく、さまざまな結果値、エラーシナリオ、エッジケース、不満のあるパスのシミュレートなど、オートメーション内の他のアクションに対するさまざまなシナリオとその影響をテストできます。
## Amazon Textract: ID を分析する
`Amazon Textract AnalyzeID` オペレーションを使用して、ID ドキュメントの関連情報を分析します。
### プロパティ
#### コネクタ
このアクションによって実行されるオペレーションに使用されるコネクタ。設定済みコネクタは、オペレーションを実行するための適切な認証情報と、オペレーションで参照されるリソースを含む AWS リージョンなどのその他の設定情報を使用して設定する必要があります。
#### 設定
`AnalyzeID` コマンドで使用するリクエストの内容。オプションは以下のとおりです:
**注記**
`Amazon Textract AnalyzeID` オペレーションの詳細については、*「Amazon Textract デベロッパーガイド*」の[AnalyzeID](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeID.html)」を参照してください。
+ **ドキュメント/S3Object/バケット:** Amazon S3 バケットの名前。**S3 アップロード**コンポーネントを使用して アクションにファイルが渡された場合、このパラメータは空のままにすることができます。
+ **ドキュメント/S3Object/名前:** 入力ドキュメントのファイル名。**S3 アップロード**コンポーネントを使用して アクションにファイルが渡された場合、このパラメータは空のままにすることができます。
+ **ドキュメント/S3Object/バージョン:** Amazon S3 バケットでバージョニングが有効になっている場合は、オブジェクトのバージョンを指定できます。**S3 アップロード**コンポーネントを使用して アクションにファイルが渡された場合、このパラメータは空のままにすることができます。
#### モック出力
アクションは、プレビュー環境の外部サービスまたはリソースとやり取りしません。**モック出力**フィールドは、テスト目的でプレビュー環境のコネクタの動作をシミュレートする JSON 式を提供するために使用されます。このスニペットは、コネクタレスポンスがライブ環境で公開されたアプリケーションの場合と同様に、アクションの`results`マップに保存されます。
このフィールドを使用すると、コネクタを介して外部サービスと通信することなく、さまざまな結果値、エラーシナリオ、エッジケース、不満のあるパスのシミュレートなど、オートメーション内の他のアクションに対するさまざまなシナリオとその影響をテストできます。
## Amazon Textract: ドキュメントテキストを検出する
`Amazon Textract DetectDocumentText` オペレーションを使用して、入力ドキュメント内のテキスト行とテキスト行を構成する単語を検出します。
### プロパティ
#### コネクタ
このアクションによって実行されるオペレーションに使用されるコネクタ。設定済みコネクタは、オペレーションを実行するための適切な認証情報と、オペレーションで参照されるリソースを含む AWS リージョンなどのその他の設定情報を使用して設定する必要があります。
#### 設定
`DetectDocumentText` コマンドで使用するリクエストの内容。オプションは以下のとおりです:
**注記**
`Amazon Textract DetectDocumentText` オペレーションの詳細については、*Amazon Textract *[DetectDocumentText](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)」を参照してください。
+ **ドキュメント / S3Object / バケット:** Amazon S3 バケットの名前。**S3 アップロード**コンポーネントを使用して アクションにファイルが渡された場合、このパラメータは空のままにすることができます。
+ **ドキュメント/S3Object/名前:** 入力ドキュメントのファイル名。**S3 アップロード**コンポーネントを使用して アクションにファイルが渡された場合、このパラメータは空のままにすることができます。
+ **ドキュメント/S3Object/バージョン:** Amazon S3 バケットでバージョニングが有効になっている場合は、オブジェクトのバージョンを指定できます。**S3 アップロード**コンポーネントを使用して アクションにファイルが渡された場合、このパラメータは空のままにすることができます。
#### モック出力
アクションは、プレビュー環境の外部サービスまたはリソースとやり取りしません。**モック出力**フィールドは、テスト目的でプレビュー環境のコネクタの動作をシミュレートする JSON 式を提供するために使用されます。このスニペットは、コネクタレスポンスがライブ環境で公開されたアプリケーションの場合と同様に、アクションの`results`マップに保存されます。
このフィールドを使用すると、コネクタを介して外部サービスと通信することなく、さまざまな結果値、エラーシナリオ、エッジケース、不満のあるパスのシミュレートなど、オートメーション内の他のアクションに対するさまざまなシナリオとその影響をテストできます。
## Amazon Bedrock: GenAI プロンプト
[Amazon Bedrock InvokeModel](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_InvokeModel.html) オペレーションを使用して、アクションプロパティで指定されたプロンプトパラメータと推論パラメータを使用して推論を実行します。アクションは、テキスト、イメージ、埋め込みを生成できます。
### プロパティ
#### コネクタ
このアクションによって実行されるオペレーションに使用されるコネクタ。このアクションを正常に使用するには、**Amazon Bedrock ランタイム**をサービスとしてコネクタを設定する必要があります。設定済みコネクタは、オペレーションを実行するための適切な認証情報と、オペレーションで参照されるリソースを含む AWS リージョンなどのその他の設定情報を使用して設定する必要があります。
#### モデル
Amazon Bedrock がリクエストを処理するために使用される基盤モデル。Amazon Bedrock のモデルの詳細については、[「Amazon Bedrock ユーザーガイド」の「Amazon Bedrock 基盤モデル情報](https://docs.aws.amazon.com/bedrock/latest/userguide/foundation-models-reference.html)」を参照してください。 **
#### 入力タイプ
Amazon Bedrock モデルに送信する入力の入力タイプ。指定できる値は、**テキスト**、**ドキュメント**、**イメージ**です。入力タイプを選択できない場合、設定されたモデルではサポートされていない可能性があります。
#### ユーザープロンプト
レスポンスを生成するために処理する Amazon Bedrock モデルに送信するプロンプト。静的テキストを入力するか、パラメータを使用したコンポーネント、オートメーションの以前のアクション、または別のオートメーションなど、アプリケーションの別の部分から入力を渡すことができます。次の例は、コンポーネントまたは以前のアクションから値を渡す方法を示しています。
+ パラメータを使用してコンポーネントから値を渡すには: `{{params.paramName}}`
+ 前のアクションから値を渡すには: `{{results.actionName}}`
#### システムプロンプト (Claude モデル)
リクエストの処理時に Amazon Bedrock モデルで使用されるシステムプロンプト。システムプロンプトは、Claude モデルにコンテキスト、手順、またはガイドラインを提供するために使用されます。
#### リクエスト設定
さまざまなリクエスト設定とモデル推論パラメータを設定します。以下の設定を設定できます。
+ **温度**: リクエストの処理時に Amazon Bedrock モデルで使用される温度。温度によって、Bedrock モデルの出力のランダム性または創造性が決まります。温度が高いほど、レスポンスはよりクリエイティブで分析性が低くなります。指定できる値は です`[0-10]`。
+ **最大トークン**: Amazon Bedrock モデルの出力の長さを制限します。
+ **TopP**: nucleus サンプリングでは、モデルは後続の各トークンのすべてのオプションに対する累積分布を確率の降順で計算し、**TopP** で指定された特定の確率に達すると切り捨てます。**温度**または **TopP** のいずれかを変更する必要がありますが、両方を変更することはできません
+ **Stop Sequences**: モデルがリクエストの処理と出力の生成を停止するシーケンス。
詳細については、*「Amazon Bedrock* [ユーザーガイド」の「基盤モデルの推論リクエストパラメータとレスポンスフィールド](https://docs.aws.amazon.com/bedrock/latest/userguide/model-parameters.html)」を参照してください。
#### 停止シーケンス
Amazon Bedrock ガードレール **ID** と**バージョン**を入力します。ガードレールは、ユースケースと責任ある AI ポリシーに基づいて保護を実装するために使用されます。詳細については、[「Amazon Bedrock ユーザーガイド」の「Amazon Bedrock ガードレールを使用したモデルの有害なコンテンツの停止](https://docs.aws.amazon.com/bedrock/latest/userguide/guardrails.html)」を参照してください。 **
#### モック出力
アクションは、プレビュー環境の外部サービスまたはリソースとやり取りしません。**モック出力**フィールドは、テスト目的でプレビュー環境のコネクタの動作をシミュレートする JSON 式を提供するために使用されます。このスニペットは、コネクタレスポンスがライブ環境で公開されたアプリケーションの場合と同様に、アクションの`results`マップに保存されます。
このフィールドを使用すると、コネクタを介して外部サービスと通信することなく、さまざまな結果値、エラーシナリオ、エッジケース、不満のあるパスのシミュレートなど、オートメーション内の他のアクションに対するさまざまなシナリオとその影響をテストできます。
## Amazon Bedrock: モデルを呼び出す
[Amazon Bedrock InvokeModel](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_InvokeModel.html) オペレーションを使用して、リクエスト本文で指定されたプロンプトパラメータと推論パラメータを使用して推論を実行します。モデル推論を使用して、テキスト、イメージ、埋め込みを生成します。
### プロパティ
#### コネクタ
このアクションによって実行されるオペレーションに使用されるコネクタ。このアクションを正常に使用するには、**Amazon Bedrock ランタイム**をサービスとしてコネクタを設定する必要があります。設定済みコネクタは、オペレーションを実行するための適切な認証情報と、オペレーションで参照されるリソースを含む AWS リージョンなどのその他の設定情報を使用して設定する必要があります。
#### 設定
`InvokeModel` コマンドで使用するリクエストの内容。
**注記**
コマンドの例を含む `Amazon Bedrock InvokeModel`オペレーションの詳細については、*「Amazon Bedrock API* [InvokeModel](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)」を参照してください。
#### モック出力
アクションは、プレビュー環境の外部サービスまたはリソースとやり取りしません。**モック出力**フィールドは、テスト目的でプレビュー環境のコネクタの動作をシミュレートする JSON 式を提供するために使用されます。このスニペットは、コネクタレスポンスがライブ環境で公開されたアプリケーションの場合と同様に、アクションの`results`マップに保存されます。
このフィールドを使用すると、コネクタを介して外部サービスと通信することなく、さまざまな結果値、エラーシナリオ、エッジケース、不満のあるパスのシミュレートなど、オートメーション内の他のアクションに対するさまざまなシナリオとその影響をテストできます。
## JavaScript
カスタム JavaScript 関数を実行して、指定された値を返します。
**重要**
App Studio は、サードパーティーまたはカスタム JavaScript ライブラリの使用をサポートしていません。
### プロパティ
#### ソースコード
アクションによって実行される JavaScript コードスニペット。
**ヒント**
AI を使用して、次の手順を実行して JavaScript を生成できます。
展開アイコンを選択して、展開された JavaScript エディタを開きます。
(オプション): **コードの変更**トグルを有効にして、既存の JavaScript を変更します。それ以外の場合、AI は既存の JavaScript を置き換えます。
**JavaScript の生成**で、JavaScript で何をするかを記述します。例: **Add two numbers**。
送信アイコンを選択して JavaScript を生成します。
## オートメーションを呼び出す
指定されたオートメーションを実行します。
### プロパティ
#### 自動化を呼び出す
アクションによって実行されるオートメーション。
## E メールの送信
`Amazon SES SendEmail` オペレーションを使用して E メールを送信します。
### プロパティ
#### コネクタ
このアクションによって実行されるオペレーションに使用されるコネクタ。設定済みコネクタは、オペレーションを実行するための適切な認証情報と、オペレーションで参照されるリソースを含む AWS リージョンなどのその他の設定情報を使用して設定する必要があります。
#### 設定
`SendEmail` コマンドで使用するリクエストの内容。オプションは以下のとおりです:
**注記**
`Amazon SES SendEmail` オペレーションの詳細については、*Amazon Simple Email Service API リファレンス*の[SendEmail](https://docs.aws.amazon.com/ses/latest/APIReference-V2/API_SendEmail.html)」を参照してください。
#### モック出力
アクションは、プレビュー環境の外部サービスまたはリソースとやり取りしません。**モック出力**フィールドは、テスト目的でプレビュー環境のコネクタの動作をシミュレートする JSON 式を提供するために使用されます。このスニペットは、ライブ環境で公開されたアプリケーションに対するコネクタレスポンスと同様に、アクションの`results`マップに保存されます。
このフィールドを使用すると、コネクタを介して外部サービスと通信することなく、さまざまな結果値、エラーシナリオ、エッジケース、不満のあるパスのシミュレートなど、オートメーション内の他のアクションに対するさまざまなシナリオとその影響をテストできます。
# エンティティとデータアクション: アプリのデータモデルを設定する
**エンティティ**は App Studio のデータテーブルです。エンティティはデータソースのテーブルと直接やり取りします。エンティティには、その中のデータを記述するフィールド、データを検索して返すクエリ、エンティティのフィールドをデータソースの列に接続するためのマッピングが含まれます。
**Topics**
+ [データモデルを設計する際のベストプラクティス](data-model-best-practices.md)
+ [App Studio アプリでのエンティティの作成](data-entities-create.md)
+ [App Studio アプリでエンティティを設定または編集する](data-entities-edit.md)
+ [エンティティの削除](data-entities-delete.md)
+ [AWS App Studio のマネージドデータエンティティ](managed-data-entities.md)
# データモデルを設計する際のベストプラクティス
以下のベストプラクティスを使用して、アプリケーションの要件を満たし、データインフラストラクチャの長期的な信頼性とパフォーマンスを保証する App Studio アプリケーションで AWS 使用するために、 で堅牢でスケーラブル、安全なリレーショナルデータモデルを作成します。
+ **適切な AWS データサービスを選択する: ** 要件に応じて、適切な AWS データサービスを選択します。たとえば、オンライントランザクション処理 (OLTP) アプリケーションの場合、Amazon Aurora などのデータベース (DB) を検討できます。これは、MySQL や PostgreSQL などのさまざまなデータベースエンジンをサポートするクラウドネイティブ、リレーショナル、フルマネージド型のデータベースサービスです。App Studio でサポートされている Aurora バージョンの完全なリストについては、「」を参照してください[Amazon Aurora に接続する](connectors-aurora.md)。一方、オンライン分析処理 (OLAP) のユースケースでは、非常に大きなデータセットに対して複雑なクエリを実行できるクラウドデータウェアハウスである Amazon Redshift の使用を検討してください。これらのクエリの完了には多くの場合 (数秒) かかるため、Amazon Redshift は低レイテンシーのデータアクセスを必要とする OLTP アプリケーションには適していません。
+ **スケーラビリティの設計: **将来の成長とスケーラビリティを念頭に置いてデータモデルを計画します。適切なデータサービス、データベースインスタンスのタイプと設定 (プロビジョニングされた容量など) を選択するときは、予想されるデータ量、アクセスパターン、パフォーマンス要件などの要因を考慮してください。
+ Aurora サーバーレスでのスケーリングの詳細については、[「Aurora Serverless V2 のパフォーマンスとスケーリング](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/aurora-serverless-v2.setting-capacity.html)」を参照してください。
+ **データの正規化: **データベースの正規化の原則に従って、データの冗長性を最小限に抑え、データの整合性を向上させます。これには、適切なテーブルの作成、プライマリキーと外部キーの定義、エンティティ間の関係の確立が含まれます。App Studio では、あるエンティティからデータをクエリするときに、クエリで `join`句を指定することで、別のエンティティから関連データを取得できます。
+ **適切なインデックス作成を実装する: **最も重要なクエリとアクセスパターンを特定し、パフォーマンスを最適化するための適切なインデックスを作成します。
+ ** AWS データサービス機能を活用する: **自動バックアップ、マルチ AZ デプロイ、自動ソフトウェア更新など、選択した AWS データサービスが提供する機能を活用します。
+ **データを保護する: IAM () ポリシー、テーブルとスキーマへのアクセス許可が制限されたデータベースユーザーの作成、保管中および転送中の暗号化など、堅牢なセキュリティ対策**を実装します。AWS Identity and Access Management
+ **パフォーマンスのモニタリングと最適化: **データベースのパフォーマンスを継続的にモニタリングし、リソースのスケーリング、クエリの最適化、データベース設定の調整など、必要に応じて調整を行います。
+ **データベース管理の自動化: **Aurora Autoscaling、Performance Insights for Aurora、 AWS Database Migration Service などの AWS サービスを活用して、データベース管理タスクを自動化し、運用オーバーヘッドを削減します。
+ **ディザスタリカバリとバックアップ戦略を実装する: **Aurora 自動バックアップ、point-in-timeリカバリ、クロスリージョンレプリカ設定などの機能を活用して、バックアップとリカバリの計画を明確に定義していることを確認します。
+ ** AWS ベストプラクティスとドキュメントに従う: **選択したデータサービスに関する AWS 最新のベストプラクティス、ガイドライン、ドキュメントを常にup-to-dateし、データモデルと実装が AWS 推奨事項と一致していることを確認します。
各 AWS データサービスの詳細なガイダンスについては、以下のトピックを参照してください。
+ [Amazon Aurora のベストプラクティス](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.BestPractices.html)
+ [Amazon Aurora MySQL のベストプラクティス](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/AuroraMySQL.BestPractices.html)
+ [Amazon Redshift クエリのパフォーマンス調整](https://docs.aws.amazon.com/redshift/latest/dg/c-optimizing-query-performance.html)
+ [Amazon DynamoDB でデータをクエリおよびスキャンするためのベストプラクティス](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/bp-query-scan.html)
# App Studio アプリでのエンティティの作成
App Studio アプリでエンティティを作成するには、4 つの方法があります。次のリストには、各メソッドとその利点、およびそのメソッドを使用してエンティティを作成および設定する手順へのリンクが含まれています。
+ [既存のデータソースからエンティティを作成する](#data-entities-create-existing-data-source): 既存のデータソーステーブルからエンティティとそのフィールドを自動的に作成し、フィールドをデータソーステーブルの列にマッピングします。このオプションは、App Studio アプリで使用する既存のデータソースがある場合に推奨されます。
+ [App Studio マネージドデータソースを使用したエンティティの作成](#data-entities-create-managed-data-source): App Studio が管理するエンティティと DynamoDB テーブルを作成します。DynamoDB テーブルは、エンティティを更新すると自動的に更新されます。このオプションを使用すると、サードパーティーのデータソースを手動で作成、管理、接続したり、エンティティフィールドからテーブル列へのマッピングを指定したりする必要はありません。アプリのデータモデリングと設定はすべて App Studio で行われます。このオプションは、独自のデータソースを管理したくない場合や、DynamoDB テーブルとその機能がアプリに十分である場合に適しています。
+ [空のエンティティの作成](#data-entities-create-empty): 空のエンティティを完全にゼロから作成します。このオプションは、管理者によって作成された既存のデータソースやコネクタがなく、外部データソースに制約されることなくアプリケーションのデータモデルを柔軟に設計する場合に適しています。エンティティは、作成後にデータソースに接続できます。
+ [AI を使用したエンティティの作成](#data-entities-create-with-ai): 指定されたエンティティ名に基づいてエンティティ、フィールド、データアクション、サンプルデータを生成します。このオプションは、アプリケーションのデータモデルについて考えているが、エンティティへの変換を支援したい場合に推奨されます。
## 既存のデータソースからエンティティを作成する
データソースのテーブルを使用して、エンティティとそのフィールドを自動的に作成し、エンティティフィールドをテーブルの列にマッピングします。このオプションは、App Studio アプリで使用する既存のデータソースがある場合に推奨されます。
1. 必要に応じて、アプリケーションに移動します。
1. キャンバスの上部にある**データ**タブを選択します。
1. アプリにエンティティがない場合は、**\$1 エンティティ**の作成を選択します。それ以外の場合は、左側の**エンティティ**メニューで **\$1 追加**を選択します。
1. **既存のデータソースからテーブルを使用する**を選択します。
1. **Connector** で、エンティティの作成に使用するテーブルを含むコネクタを選択します。
1. Table で****、エンティティの作成に使用するテーブルを選択します。
1. **データアクションの作成**チェックボックスをオンにして、データアクションを作成します。
1. [**エンティティの作成**] を選択します。これでエンティティが作成され、左側の**エンティティ**パネルに表示されます。
1. 「」の手順に従って、新しいエンティティを設定します[App Studio アプリでエンティティを設定または編集する](data-entities-edit.md)。エンティティは既存のデータソースで作成されたため、フィールド、接続されたデータソース、フィールドマッピングなど、一部のプロパティまたはリソースが既に作成されていることに注意してください。また、作成時にデータアクションの作成チェックボックスを選択した場合、エンティティには**データアクション**が含まれます。
## App Studio マネージドデータソースを使用したエンティティの作成
App Studio によって管理されるマネージドエンティティと対応する DynamoDB テーブルを作成します。DynamoDB テーブルが関連付けられた AWS アカウントに存在する間、App Studio アプリのエンティティに変更を加えると、DynamoDB テーブルは自動的に更新されます。このオプションを使用すると、サードパーティーのデータソースを手動で作成、管理、接続したり、エンティティフィールドからテーブル列へのマッピングを指定したりする必要はありません。このオプションは、独自のデータソースを管理したくない場合や、DynamoDB テーブルとその機能がアプリに十分である場合に適しています。マネージドエンティティの詳細については、「」を参照してください[AWS App Studio のマネージドデータエンティティ](managed-data-entities.md)。
複数のアプリケーションで同じマネージドエンティティを使用できます。手順については、「[既存のデータソースからエンティティを作成する](#data-entities-create-existing-data-source)」を参照してください。
1. 必要に応じて、アプリケーションに移動します。
1. キャンバスの上部にある**データ**タブを選択します。
1. アプリにエンティティがない場合は、**\$1 エンティティ**の作成を選択します。それ以外の場合は、左側の**エンティティ**メニューで \$1 **追加**を選択します。
1. **App Studio マネージドエンティティの作成**を選択します。
1. **エンティティ名**で、エンティティの名前を指定します。
1. **プライマリキー**で、エンティティのプライマリキーの名前を指定します。プライマリキーはエンティティの一意の識別子であり、エンティティの作成後に変更することはできません。
1. **プライマリキーのデータ型**で、エンティティのプライマリキーのデータ型を選択します。エンティティの作成後にデータ型を変更することはできません。
1. [**エンティティの作成**] を選択します。これでエンティティが作成され、左側の**エンティティ**パネルに表示されます。
1. 「」の手順に従って、新しいエンティティを設定します[App Studio アプリでエンティティを設定または編集する](data-entities-edit.md)。エンティティはマネージドデータで作成されたため、プライマリキーフィールドや接続されたデータソースなど、一部のプロパティまたはリソースがすでに作成されていることに注意してください。
## 空のエンティティの作成
空のエンティティを最初から完全に作成します。このオプションは、管理者によって作成された既存のデータソースまたはコネクタがない場合に推奨されます。空のエンティティを作成すると、外部データソースに制約されることなく App Studio アプリ内でエンティティを設計できるため、柔軟性が得られます。アプリケーションのデータモデルを設計し、それに応じてエンティティを設定した後でも、後で外部データソースに接続できます。
1. 必要に応じて、アプリケーションに移動します。
1. キャンバスの上部にある**データ**タブを選択します。
1. アプリにエンティティがない場合は、**\$1 エンティティ**の作成を選択します。それ以外の場合は、左側の**エンティティ**メニューで **\$1 追加**を選択します。
1. **エンティティの作成**を選択します。
1. [**エンティティの作成**] を選択します。これでエンティティが作成され、左側の**エンティティ**パネルに表示されます。
1. 「」の手順に従って、新しいエンティティを設定します[App Studio アプリでエンティティを設定または編集する](data-entities-edit.md)。
## AI を使用したエンティティの作成
指定されたエンティティ名に基づいて、エンティティ、フィールド、データアクション、サンプルデータを生成します。このオプションは、アプリケーションのデータモデルについて考えているが、エンティティへの変換を支援したい場合に推奨されます。
1. 必要に応じて、アプリケーションに移動します。
1. キャンバスの上部にある**データ**タブを選択します。
1. アプリにエンティティがない場合は、**\$1 エンティティ**の作成を選択します。それ以外の場合は、左側の**エンティティ**メニューで \$1 **追加**を選択します。
1. **AI を使用してエンティティを作成する**を選択します。
1. **エンティティ名**で、エンティティの名前を指定します。この名前は、エンティティのフィールド、データアクション、およびサンプルデータを生成するために使用されます。
1. **データアクションの作成**チェックボックスを選択して、データアクションを作成します。
1. **エンティティの生成** を選択します。これでエンティティが作成され、左側の**エンティティ**パネルに表示されます。
1. 「」の手順に従って、新しいエンティティを設定します[App Studio アプリでエンティティを設定または編集する](data-entities-edit.md)。エンティティは AI で作成されたため、エンティティにはすでに生成されたフィールドが含まれていることに注意してください。また、作成時にデータアクションの作成チェックボックスを選択した場合、エンティティには**データアクション**が含まれます。
# App Studio アプリでエンティティを設定または編集する
次のトピックを使用して、App Studio アプリケーションでエンティティを設定します。
**Topics**
+ [エンティティ名の編集](data-entities-edit-name.md)
+ [エンティティフィールドの追加、編集、または削除](data-entities-edit-fields.md)
+ [データアクションの作成、編集、または削除](data-entities-edit-data-actions.md)
+ [サンプルデータの追加または削除](data-entities-edit-sample-data.md)
+ [接続されたデータソースとマップフィールドを追加または編集する](data-entities-edit-connection.md)
# エンティティ名の編集
1. 必要に応じて、編集するエンティティに移動します。
1. **設定**タブの**エンティティ名**でエンティティ名を更新し、テキストボックスの外部を選択して変更を保存します。
# エンティティフィールドの追加、編集、または削除
**ヒント**
CTRL\$1Z キーを押して、エンティティに対する最新の変更を元に戻すことができます。
1. 必要に応じて、編集するエンティティに移動します。
1. **設定**タブ**のフィールド**で、エンティティのフィールドのテーブルを表示します。エンティティフィールドには次の列があります。
+ **表示名:** 表示名はテーブルヘッダーまたはフォームフィールドに似ており、アプリケーションユーザーが表示できます。スペースと特殊文字を含めることができますが、エンティティ内で一意である必要があります。
+ **システム名:** システム名は、フィールドを参照するためにコードで使用される一意の識別子です。Amazon Redshift テーブルの列にマッピングする場合、Amazon Redshift テーブルの列名と一致する必要があります。
+ **データ型:** `Integer`、、 `Boolean`など、このフィールドに保存されるデータのタイプ`String`。
1. フィールドを追加するには:
1. AI を使用してエンティティ名と接続されたデータソースに基づいてフィールドを生成するには、**追加フィールドの生成**を選択します。
1. 1 つのフィールドを追加するには、**\$1 追加フィールド**を選択します。
1. フィールドを編集するには:
1. 表示名を編集するには、**表示名**テキストボックスに目的の値を入力します。フィールドのシステム名が編集されていない場合は、表示名の新しい値に更新されます。
1. システム名を編集するには、**システム名**テキストボックスに目的の値を入力します。
1. データ型を編集するには、**データ型**ドロップダウンメニューを選択し、リストから目的の型を選択します。
1. フィールドのプロパティを編集するには、フィールドの歯車アイコンを選択します。次のリストは、フィールドプロパティの詳細を示しています。
+ **必須**: フィールドがデータソースで必要な場合は、このオプションを有効にします。
+ **プライマリキー**: フィールドがデータソースのプライマリキーにマッピングされている場合は、このオプションを有効にします。
+ **Unique**: このフィールドの値が一意でなければならない場合は、このオプションを有効にします。
+ **データソースのデフォルトを使用する**: 自動増分やイベントタイムスタンプを使用するなど、 フィールドの値がデータソースによって提供される場合は、このオプションを有効にします。
+ **データ型オプション**: 特定のデータ型のフィールドは、最小値や最大値などのデータ型オプションで設定できます。
1. フィールドを削除するには、削除するフィールドのごみ箱アイコンを選択します。
# データアクションの作成、編集、または削除
データアクションは、すべてのレコードの取得や ID によるレコードの取得など、エンティティのデータに対してアクションを実行するためにアプリケーションで使用されます。データアクションを使用して、テーブルや詳細ビューなどのコンポーネントに表示される、指定された条件に一致するデータを検索して返すことができます。
**Contents**
+ [データアクションの作成](#data-entities-data-action-add)
+ [データアクションの編集または設定](#data-entities-data-action-edit)
+ [データアクション条件演算子と例](#data-entities-data-action-operators)
+ [データベースによる条件演算子のサポート](#data-entities-data-action-operators-support)
+ [データアクション条件の例](#data-entities-data-action-operators-examples)
+ [データアクションの削除](#data-entities-data-action-delete)
## データアクションの作成
**ヒント**
CTRL\$1Z キーを押して、エンティティに対する最新の変更を元に戻すことができます。
1. 必要に応じて、データアクションを作成するエンティティに移動します。
1. **データアクション**タブを選択します。
1. データアクションを作成するには、次の 2 つの方法があります。
+ (推奨) AI を使用して、エンティティ名、フィールド、接続されたデータソースに基づいてデータアクションを生成するには、**データアクションの生成**を選択します。次のアクションが生成されます。
1. `getAll`: エンティティからすべてのレコードを取得します。このアクションは、レコードのリストを表示したり、複数のレコードに対して一度にオペレーションを実行したりする必要がある場合に便利です。
1. `getByID`: 一意の識別子 (ID またはプライマリキー) に基づいてエンティティから 1 つのレコードを取得します。このアクションは、特定のレコードに対してオペレーションを表示または実行する必要がある場合に便利です。
+ 単一のデータアクションを追加するには、 **\$1 データアクションの追加**を選択します。
1. 新しいデータアクションを表示または設定するには、次のセクション「」を参照してください[データアクションの編集または設定](#data-entities-data-action-edit)。
## データアクションの編集または設定
1. 必要に応じて、データアクションを作成するエンティティに移動します。
1. **データアクション**タブを選択します。
1. **フィールド**で、クエリによって返されるフィールドを設定します。デフォルトでは、エンティティ内のすべての設定済みフィールドが選択されます。
次の手順を実行して、データアクションに **Joins** を追加することもできます。
1. ** \$1 結合を追加** を選択してダイアログボックスを開きます。
1. **関連エンティティ**で、現在のエンティティと結合するエンティティを選択します。
1. **エイリアス**で、必要に応じて関連エンティティの一時的なエイリアス名を入力します。
1. **結合タイプ**で、目的の結合タイプを選択します。
1. 各エンティティからフィールドを選択して、結合句を定義します。
1. **追加** を選択して結合を作成します。
作成されると、結合が**結合**セクションに表示され、フィールドを**返す**ドロップダウンで追加のフィールドを使用できます。エンティティ間の連鎖結合など、複数の結合を追加できます。結合されたエンティティのフィールドでフィルタリングおよびソートすることもできます。
結合を削除するには、結合の横にあるごみ箱アイコンを選択します。これにより、それらのフィールドを使用して、その結合からすべてのフィールドが削除され、依存結合または制約が破棄されます。
1. **条件** で、クエリの出力をフィルタリングするルールを追加、編集、または削除します。ルールをグループに整理し、複数のルールを `AND`または `OR`ステートメントと連鎖させることができます。使用できる演算子の詳細については、「」を参照してください[データアクション条件演算子と例](#data-entities-data-action-operators)。
1. **ソート**で、属性を選択し、昇順または降順を選択して、クエリ結果のソート方法を設定します。ソートルールの横にあるごみ箱アイコンを選択して、ソート設定を削除できます。
1. **変換結果**では、カスタム JavaScript を入力して、結果を表示またはオートメーションに送信する前に結果を変更またはフォーマットできます。
1. **出力プレビュー**で、設定されたフィールド、フィルター、ソート、JavaScript に基づいてクエリ出力のプレビューテーブルを表示します JavaScript 。
## データアクション条件演算子と例
条件演算子を使用して、設定された式値をエンティティ列と比較し、データベースオブジェクトのサブセットを返すことができます。使用できる演算子は、列のデータ型と、Amazon Redshift、Amazon Aurora、Amazon DynamoDB など、エンティティが接続されているデータベースのタイプによって異なります。
次の条件演算子は、すべてのデータベースサービスで使用できます。
+ `=` および `!=`: すべてのデータ型 (プライマリキー列を除く) で使用できます。
+ `<=`、`>=`、`<`、および `>=`: 数値列でのみ使用できます。
+ `IS NULL` および `IS NOT NULL`: null または空の値を持つ列を一致させるために使用されます。Null 値はデータベースごとに解釈が異なることがよくありますが、App Studio では、`NULL`オペレーターは接続されたデータベーステーブルに Null 値を持つレコードを照合して返します。
次の条件演算子は、それらをサポートするデータベースサービスに接続されているエンティティでのみ使用できます。
+ `LIKE` および `NOT LIKE`(Redshift、Aurora): 接続されたデータベースでパターンベースのクエリを実行するために使用されます。`LIKE` 演算子は、指定されたパターンに一致するレコードを検索して返すため、検索機能の柔軟性を提供します。パターンは、パターン内の任意の文字または文字のシーケンスに一致するワイルドカード文字を使用して定義します。各データベース管理システムには一意のワイルドカード文字のセットがありますが、最も一般的な 2 つは任意の文字数 (0 を含む) を表し`%`、1 文字`_`を表すことです。
+ `Contains` および `Not Contains` (DynamoDB): 大文字と小文字を区別する検索を実行して、指定されたテキストが列値内で見つかったかどうかを判断するために使用されます。
+ `Starts With` および `Not Starts With` (DynamoDB): 大文字と小文字を区別する検索を実行して、指定されたテキストが列値の先頭で見つかったかどうかを判断するために使用されます。
### データベースによる条件演算子のサポート
次の表は、App Studio に接続できる各データベースでサポートされているデータアクション条件演算子を示しています。
| | =, \$1=, <, >, <=, >= | LIKE、NOT LIKE | 含まれる、含まれない | で始まるが で始まらない | IS NULL、IS NOT NULL |
| --- | --- | --- | --- | --- | --- |
| **DynamoDB** | はい | なし | はい | はい | はい |
| **Aurora** | はい | あり | なし | なし | はい |
| **Redshift** | はい | あり | なし | なし | はい |
### データアクション条件の例
、、`name``city`および `hireDate`フィールドを持つ複数の項目を含む次のデータベーステーブルを検討してください。
| 名前 | city | hireDate |
| --- | --- | --- |
| アダム | Seattle | 2025-03-01 |
| アドリエンヌ | Boston | 2025-03-05 |
| Bob | アルバカーキ | 2025-03-06 |
| Carlos | シカゴ | 2025-03-10 |
| キャロライン | NULL | 2025-03-12 |
| リタ | マイアミ | 2025-03-15 |
ここで、指定した条件に一致する項目の `name`フィールドを返すデータアクションを App Studio で作成することを検討してください。次のリストには、条件の例と、それぞれに対してテーブルが返す値が含まれています。
**注記**
例は SQL の例としてフォーマットされています。App Studio では表示されない場合がありますが、演算子の動作を説明するために使用されます。
+ `WHERE name LIKE 'Adam'`: を返します`Adam`。
+ `WHERE name LIKE 'A%'`: `Adam`と を返します`Adrienne`。
+ `WHERE name NOT LIKE 'B_B'`: `Adam`、`Adrienne`、`Carlos`、`Caroline`、および を返します`Rita`。
+ `WHERE contains(name, 'ita')`: を返します`Rita`。
+ `WHERE begins_with(name, 'Car')`: `Carlos`と を返します`Caroline`。
+ `WHERE city IS NULL`: を返します`Caroline`。
+ `WHERE hireDate < "2025-03-06"`: `Adam`と を返します`Adrienne`。
+ `WHERE hireDate >= DateTime.now().toISODate()`: は現在の日付`DateTime.now().toISODate()`を返します。現在の日付が 2025-03-10 のシナリオでは、式は `Carlos`、`Caroline`、および を返します`Rita`。
**ヒント**
式で日付と時刻を比較する方法の詳細については、「」を参照してください[日付および時間](expressions.md#expressions-date-time)。
## データアクションの削除
App Studio エンティティからデータアクションを削除するには、次の手順に従います。
1. 必要に応じて、データアクションを削除するエンティティに移動します。
1. **データアクション**タブを選択します。
1. 削除するデータアクションごとに、**編集**の横にあるドロップダウンメニューを選択し、**削除**を選択します。
1. ダイアログボックスで**確認** を選択します。
# サンプルデータの追加または削除
App Studio アプリケーションのエンティティにサンプルデータを追加できます。アプリケーションの は公開されるまで外部サービスと通信しないため、サンプルデータを使用してプレビュー環境でアプリケーションとエンティティをテストできます。
1. 必要に応じて、編集するエンティティに移動します。
1. **サンプルデータ**タブを選択します。
1. サンプルデータを生成するには、**「さらにサンプルデータを生成する**」を選択します。
1. サンプルデータを削除するには、削除するデータのチェックボックスを選択し、Delete キーまたは Backspace キーを押します。**保存** を選択して変更を保存します。
# 接続されたデータソースとマップフィールドを追加または編集する
**ヒント**
CTRL\$1Z キーを押して、エンティティに対する最新の変更を元に戻すことができます。
1. 必要に応じて、編集するエンティティに移動します。
1. **接続**タブを選択して、アプリケーションが公開されたときにデータが保存されるエンティティとデータソーステーブル間の接続を表示または管理します。データソーステーブルが接続されたら、エンティティフィールドをテーブルの列にマッピングできます。
1. **Connector** で、目的のデータソーステーブルへの接続を含むコネクタを選択します。コネクタの詳細については、「」を参照してください[コネクタを使用して App Studio を他の サービスに接続する](connectors.md)。
1. **テーブル**で、エンティティのデータソースとして使用するテーブルを選択します。
1. この表は、エンティティのフィールドと、それらがマッピングされているデータソース列を示しています。**自動マップ**を選択すると、エンティティフィールドがデータソース列に自動的にマッピングされます。各エンティティフィールドのドロップダウンでデータソース列を選択することで、テーブル内のフィールドを手動でマッピングすることもできます。
# エンティティの削除
App Studio アプリケーションからエンティティを削除するには、次の手順に従います。
**注記**
App Studio アプリからエンティティを削除しても、マネージドエンティティの対応する DynamoDB テーブルを含む、接続されたデータソーステーブルは削除されません。データソーステーブルは関連付けられた AWS アカウントに残り、必要に応じて対応するサービスから削除する必要があります。
**エンティティを削除するには**
1. 必要に応じて、アプリケーションに移動します。
1. [**データ**] タブを選択します。
1. 左側の**エンティティ**メニューで、削除するエンティティの横にある楕円メニューを選択し、**削除**を選択します。
1. ダイアログボックスの情報を確認し、**削除**と入力**confirm**してエンティティを削除します。
# AWS App Studio のマネージドデータエンティティ
通常、外部データベーステーブルへの接続を使用して App Studio でエンティティを設定し、各エンティティフィールドを作成して、接続されたデータベーステーブルの列にマッピングする必要があります。データモデルを変更するときは、外部データベーステーブルとエンティティの両方を更新し、変更されたフィールドを再マッピングする必要があります。この方法は柔軟で、さまざまなタイプのデータソースを使用できますが、より事前の計画と継続的なメンテナンスが必要です。
*マネージドエンティティ*は、App Studio がデータストレージと設定プロセス全体を管理するエンティティのタイプです。マネージドエンティティを作成すると、対応する DynamoDB テーブルが関連する AWS アカウントに作成されます。これにより、 内の安全で透過的なデータ管理が保証されます AWS。マネージドエンティティでは、App Studio でエンティティのスキーマを設定すると、対応する DynamoDB テーブルも自動的に更新されます。
## 複数のアプリケーションでマネージドエンティティを使用する
App Studio アプリでマネージドエンティティを作成すると、そのエンティティを他の App Studio アプリで使用できます。これは、維持する単一の基盤となるリソースを提供することで、同一のデータモデルとスキーマを持つアプリケーションのデータストレージを設定するのに役立ちます。
複数のアプリケーションでマネージドエンティティを使用する場合、対応する DynamoDB テーブルに対するすべてのスキーマ更新は、マネージドエンティティが作成された元のアプリケーションを使用して行う必要があります。他のアプリケーションのエンティティに対してスキーマを変更しても、対応する DynamoDB テーブルは更新されません。
## マネージドエンティティの制限
**プライマリキーの更新制限**: 作成後にエンティティのプライマリキー名またはタイプを変更することはできません。これは DynamoDB の破壊的な変更であり、既存のデータが失われる可能性があるためです。
**列の名前変更**: DynamoDB で列の名前を変更すると、元の列が元のデータのまま新しい列が実際に作成されます。元のデータは、新しい列に自動的にコピーされたり、元の列から削除されたりすることはありません。*システム名*と呼ばれるマネージドエンティティフィールドの名前は変更できますが、元の列とそのデータにアクセスできなくなります。表示名の変更に制限はありません。
**データ型の変更**: DynamoDB では、テーブルの作成後に列データ型を柔軟に変更できますが、このような変更が既存のデータやクエリロジック、精度に重大な影響を与える可能性があります。データ型の変更では、既存のすべてのデータを変換して新しい形式に準拠する必要があります。これは、大規模でアクティブなテーブルでは複雑です。さらに、データアクションは、データ移行が完了するまで予期しない結果を返す可能性があります。フィールドのデータ型を切り替えることはできますが、既存のデータは新しいデータ型に移行されません。
**ソート列**: DynamoDB では、ソートキーを使用してソートされたデータを取得できます。ソートキーは、パーティションキーとともに複合プライマリキーの一部として定義する必要があります。制限には、必須のソートキー、1 つのパーティション内のソート、パーティション間のグローバルソートが含まれます。ホットパーティションを回避するには、ソートキーの慎重なデータモデリングが必要です。Sorting for Preview のマイルストーンはサポートされません。
**Joins**: 結合は DynamoDB ではサポートされていません。テーブルは、高価な結合操作を避けるために、設計によって非正規化されます。one-to-many関係をモデル化するために、子テーブルには親テーブルのプライマリキーを参照する属性が含まれています。マルチテーブルデータクエリでは、親テーブルから項目を検索して詳細を取得します。プレビューマイルストーンの一環として、マネージドエンティティのネイティブ結合はサポートされません。回避策として、2 つのエンティティのデータマージを実行できる自動化ステップを紹介します。これは、1 レベルのルックアップと非常によく似ています。Sorting for Preview のマイルストーンはサポートされません。
**Env ステージ**: 公開によるテストは許可されますが、両方の環境で同じマネージドストアを使用できます。
# ページとオートメーションのパラメータ
パラメータは、アプリケーション内のさまざまなコンポーネント、ページ、オートメーション間で動的な値を渡すために使用される AWS App Studio の強力な機能です。パラメータを使用すると、柔軟でコンテキスト対応のエクスペリエンスを実現し、アプリケーションの応答性とパーソナライズを強化できます。この記事では、ページパラメータとオートメーションパラメータの 2 種類のパラメータについて説明します。
**Topics**
+ [ページパラメータ](parameters-page.md)
+ [自動化パラメータ](parameters-automation.md)
# ページパラメータ
ページパラメータはページ間で情報を送信する方法であり、App Studio アプリ内であるページから別のページに移動してコンテキストを維持したりデータを渡すときによく使用されます。ページパラメータは通常、名前と値で構成されます。
## ページパラメータのユースケース
ページパラメータは、App Studio アプリケーション内のさまざまなページとコンポーネント間でデータを渡すために使用されます。これらは、次のユースケースで特に役立ちます。
1. **検索とフィルタリング**: ユーザーがアプリのホームページで検索する場合、検索用語をパラメータとして結果ページに渡して、関連するフィルタリングされた項目のみを表示できます。たとえば、ユーザーが*ノイズキャンセリングヘッドフォン*を検索する場合、*ノイズキャンセリングヘッドフォン*の値を持つ パラメータを製品出品ページに渡すことができます。
1. **項目の詳細の表示**: ユーザーが製品などのリストをクリックすると、その項目の一意の識別子をパラメータとして詳細ページに渡すことができます。これにより、詳細ページに特定の項目に関するすべての情報を表示できます。たとえば、ユーザーがヘッドフォン製品をクリックすると、製品の一意の ID がパラメータとして製品の詳細ページに渡されます。
1. **ページナビゲーションでユーザーコンテキストを渡す**: ユーザーがページ間を移動するとき、パラメータはユーザーの場所、優先製品カテゴリ、ショッピングカートの内容、その他の設定などの重要なコンテキストを渡すことができます。たとえば、ユーザーがアプリでさまざまな製品カテゴリを閲覧すると、その場所と優先カテゴリがパラメータとして保持され、パーソナライズされた一貫したエクスペリエンスが提供されます。
1. **ディープリンク**: ページパラメータを使用して、アプリ内の特定のページへのリンクを共有またはブックマークします。
1. **データアクション**: パラメータ値を受け入れるデータアクションを作成して、渡されたパラメータに基づいてデータソースをフィルタリングおよびクエリできます。たとえば、製品出品ページで、関連する製品を取得するための`category`パラメータを受け入れるデータアクションを作成できます。
## ページパラメータのセキュリティ上の考慮事項
ページパラメータはページ間でデータを渡す強力な方法ですが、正しく使用しないと機密情報が公開される可能性があるため、注意して使用する必要があります。留意すべき重要なセキュリティ上の考慮事項は次のとおりです。
1. **URLs**
1. **リスク**: データアクションパラメータを含む URLsは、多くの場合、サーバーログ、ブラウザ履歴、その他の場所に表示されます。そのため、ユーザー認証情報、個人を特定できる情報 (PII)、またはその他の機密データなどの機密データをページパラメータ値に公開しないようにすることが重要です。
1. **緩和策**: 機密データに安全にマッピングできる識別子の使用を検討してください。たとえば、ユーザー名または E メールアドレスをパラメータとして渡す代わりに、ユーザー名または E メールを取得するために使用できるランダムな一意の識別子を渡すことができます。
# 自動化パラメータ
オートメーションパラメータは App Studio の強力な機能であり、UI、他のオートメーション、データアクションなどのさまざまなソースから動的値を渡すことで、柔軟で再利用可能なオートメーションを作成できます。自動化の実行時に実際の値に置き換えられるプレースホルダーとして機能し、毎回異なる入力で同じ自動化を使用できます。
オートメーション内では、パラメータには一意の名前があり、パラメータ変数の後にパラメータの名前、たとえば を使用してパラメータの値を参照できます`{{params.customerId}}`。
この記事では、基本的な概念、使用法、ベストプラクティスなど、オートメーションパラメータについて詳しく説明します。
## 自動化パラメータの利点
自動化パラメータには、次のリストを含むいくつかの利点があります。
1. **再利用性**: パラメータを使用することで、異なる入力値でカスタマイズできる再利用可能なオートメーションを作成できるため、同じオートメーションロジックを異なる入力で再利用できます。
1. **柔軟性**: 値をオートメーションにハードコーディングする代わりに、パラメータを定義し、必要に応じて異なる値を指定して、オートメーションをより動的で適応可能にすることができます。
1. **懸念の分離**: パラメータは、使用される特定の値から自動化ロジックを分離し、コードの整理と保守性を促進します。
1. **検証**: 各パラメータには、実行時に検証される文字列、数値、ブール値などのデータ型があります。これにより、誤ったデータ型のリクエストは、カスタム検証コードなしで拒否されます。
1. **オプションパラメータと必須パラメータ**: オートメーションパラメータをオプションまたは必須として指定できます。オートメーションを実行するときは必要なパラメータを指定する必要がありますが、オプションのパラメータにはデフォルト値を含めることも、省略することもできます。この柔軟性により、提供されたパラメータに基づいてさまざまなシナリオを処理できる、より汎用性の高いオートメーションを作成できます。
## シナリオとユースケース
### シナリオ: 製品の詳細を取得する
製品 ID に基づいてデータベースから製品の詳細を取得するオートメーションがあるとします。このオートメーションには、 というパラメータを含めることができます`productId`。
`productId` パラメータは、オートメーションの実行時に実際の製品 ID 値を入力できるプレースホルダーとして機能します。特定の製品 ID をオートメーションにハードコーディングする代わりに、 `productId`パラメータを定義し、オートメーションを実行するたびに異なる製品 ID 値を渡すことができます。
コンポーネントのデータソースからこの自動化を呼び出し、二重中括弧構文 を使用して、選択した製品の ID を `productId`パラメータとして渡すことができます`{{ui.productsTable.selectedRow.id}}`。これにより、ユーザーがテーブル (`ui.productsTable`) から製品を選択すると、オートメーションは選択した行の ID を `productId`パラメータとして渡すことで、選択した製品の詳細を取得します。
または、製品のリストをループし、製品の ID を `productId`パラメータとして渡すことで各製品の詳細を取得する別のオートメーションからこのオートメーションを呼び出すこともできます。このシナリオでは、`productId`パラメータ値はループの反復ごとに`{{product.id}}`式から動的に提供されます。
`productId` パラメータと二重中括弧構文を使用することで、この自動化をより柔軟に再利用できます。製品ごとに個別のオートメーションを作成する代わりに、UI コンポーネントやその他のオートメーションなど、さまざまなソースからパラメータ値として適切な製品 ID を指定するだけで、任意の製品の詳細を取得できる単一のオートメーションを作成できます。
### シナリオ: フォールバック値を使用したオプションのパラメータの処理
必須の「所有者」列を持つ「タスク」エンティティがあるが、自動化でこのフィールドをオプションにし、所有者が選択されていない場合はフォールバック値を指定するシナリオを考えてみましょう。
1. `Task` エンティティの `Owner`フィールドにマッピング`Owner`する という名前のパラメータを使用してオートメーションを作成します。
1. エンティティには `Owner`フィールドが必要なため、 `Owner`パラメータは必要な設定と同期します。
1. オートメーションで `Owner`パラメータをオプションにするには、このパラメータ`required`の設定をオフに切り替えます。
1. 自動化ロジックでは、 のような式を使用できます`{{params.Owner || currentUser.userId}}`。この式は、 `Owner`パラメータが指定されているかどうかを確認します。指定しない場合、現在のユーザーの所有者としての ID にフォールバックされます。
1. これにより、ユーザーがフォームまたはコンポーネントで所有者を選択しない場合、オートメーションは現在のユーザーをタスクの所有者として自動的に割り当てます。
`Owner` パラメータ`required`の設定を切り替え、フォールバック式を使用することで、エンティティフィールド要件から切り離し、オートメーションではオプションにし、パラメータが指定されていない場合はデフォルト値を指定できます。
## オートメーションパラメータタイプの定義
パラメータタイプを使用してデータ型を指定し、要件を設定することで、オートメーションの入力を制御できます。これにより、予想される入力でオートメーションを確実に実行できます。
### エンティティから型を同期する
エンティティフィールド定義からパラメータタイプと要件を動的に同期することで、エンティティデータを操作するオートメーションの構築が効率化され、パラメータに常に最新のエンティティフィールドタイプと要件が反映されます。
次の手順では、エンティティからパラメータタイプを同期するための一般的な手順について詳しく説明します。
1. 型付きフィールド (ブール値、数値など) を持つエンティティを作成し、必要に応じてフィールドをマークします。
1. 新しいオートメーションを作成します。
1. オートメーションにパラメータを追加し、**タイプ**を選択するときは、同期するエンティティフィールドを選択します。データ型と必要な設定は、マッピングされたエンティティフィールドから自動的に同期されます。
1. 必要に応じて、パラメータごとにオン/オフを切り替えることで、「必須」設定を上書きできます。つまり、必要なステータスはエンティティフィールドと同期されませんが、それ以外の場合は同期されたままになります。
### 型を手動で定義する
エンティティから同期せずにパラメータタイプを手動で定義することもできます。
カスタムパラメータタイプを定義することで、エンティティフィールドマッピングに依存することなく、特定の入力タイプを受け入れ、必要に応じてオプションまたは必須のパラメータを処理するオートメーションを作成できます。
1. 型付きフィールド (ブール値、数値など) を持つエンティティを作成し、必要に応じてフィールドをマークします。
1. 新しいオートメーションを作成します。
1. オートメーションにパラメータを追加し、**タイプ**を選択するときに目的のタイプを選択します。
## 自動化パラメータに渡される動的値の設定
オートメーションのパラメータを定義したら、オートメーションを呼び出すときにパラメータに値を渡すことができます。パラメータ値は、次の 2 つの方法で渡すことができます。
1. **コンポーネントトリガー**: ボタンクリックなどのコンポーネントトリガーからオートメーションを呼び出す場合は、JavaScript 式を使用してコンポーネントコンテキストから値を渡すことができます。たとえば、 という名前のテキスト入力フィールドがある場合`emailInput`、その値を という式で E メールパラメータに渡すことができます`ui.emailInput.value`。
1. **その他のオートメーション**: 別のオートメーションからオートメーションを呼び出す場合は、JavaScript 式を使用してオートメーションコンテキストから値を渡すことができます。たとえば、別のパラメータの値を渡すか、前のアクションステップの結果を渡すことができます。
## 型の安全性
文字列、数値、ブール値など、特定のデータ型を持つパラメータを定義することで、オートメーションに渡される値が期待される型であることを確認します。
**注記**
App Studio では、date (s) は ISO 文字列の日付であり、それらも検証されます。
このタイプの安全は、オートメーションロジックでエラーや予期しない動作につながる可能性のあるタイプの不一致を防ぐのに役立ちます。例えば、パラメータを として定義した場合`Number`、そのパラメータに渡される値は数値であり、オートメーション内で追加の型チェックや変換を実行する必要はありません。
## 検証
パラメータに検証ルールを追加して、オートメーションに渡される値が特定の基準を満たすようにすることができます。
App Studio はパラメータの組み込み検証設定を提供していませんが、特定の制約に違反した場合にエラーをスローする JavaScript アクションをオートメーションに追加することで、カスタム検証を実装できます。
エンティティフィールドでは、最小値/最大値などの検証ルールのサブセットがサポートされています。ただし、レコードCreate/Update/Deleteアクションを実行する場合、これらはデータレイヤーでのみ自動化レベルで検証されません。
## 自動化パラメータのベストプラクティス
自動化パラメータが適切に設計され、保守可能で、使いやすいようにするには、次のベストプラクティスに従ってください。
1. **わかりやすいパラメータ名を使用する**: パラメータの目的またはコンテキストを明確に説明するパラメータ名を選択します。
1. **パラメータの説明を指定する**: パラメータを定義するときは、**説明**フィールドを活用して、その目的、制約、期待値を説明します。これらの説明は、 パラメータを参照するときの JSDoc コメントと、オートメーションを呼び出すときにユーザーがパラメータの値を指定する必要があるユーザーインターフェイスに表示されます。
1. **適切なデータ型を使用する**: 文字列、数値、ブール値、オブジェクトなど、予想される入力値に基づいて各パラメータのデータ型を慎重に検討します。
1. **パラメータ値を検証する**: 自動化内で適切な検証チェックを実装して、パラメータ値が特定の要件を満たしていることを確認してから、さらなるアクションに進みます。
1. **フォールバック値またはデフォルト値を使用する**: App Studio は現在パラメータのデフォルト値の設定をサポートしていませんが、オートメーションロジックでパラメータを使用するときにフォールバック値またはデフォルト値を実装できます。たとえば、 `param1`パラメータが指定されていない場合、または false 値がある場合は、 のような式を使用してデフォルト値`{{ params.param1 || "default value" }}`を指定できます。
1. **パラメータの一貫性を維持する**: 同様のパラメータを必要とするオートメーションが複数ある場合は、それらのオートメーション全体でパラメータ名とデータ型の一貫性を維持してください。
1. **ドキュメントパラメータの使用**: 各パラメータの説明、目的、想定値、関連する例やエッジケースなど、オートメーションに関する明確なドキュメントを維持します。
1. **頻繁なレビューとリファクタ**リング: オートメーションとそのパラメータを定期的に確認し、必要に応じてパラメータをリファクタリングまたは統合して、明確性、保守性、再利用性を向上させます。
1. **パラメータの数を制限する**: パラメータには柔軟性がありますが、パラメータが多すぎるとオートメーションが複雑になり、使用が困難になる可能性があります。パラメータの数を必要なもののみに制限することで、柔軟性とシンプルさのバランスを取ります。
1. **パラメータのグループ化を検討する**: 複数の関連パラメータを定義している場合は、それらを 1 つの*オブジェクト*パラメータにグループ化することを検討してください。
1. **個別の懸念事項**: 1 つのパラメータを複数の目的に使用したり、無関係な値を 1 つのパラメータに結合したりすることは避けてください。各パラメータは、個別の懸念事項またはデータを表す必要があります。
1. **パラメータエイリアスを使用する**: 長い名前または複雑な名前のパラメータがある場合は、読みやすさと保守性を高めるために、自動化ロジック内でエイリアスまたは短縮バージョンを使用することを検討してください。
これらのベストプラクティスに従うことで、自動化パラメータの設計、保守性、使いやすさを確保し、最終的に自動化の全体的な品質と効率を向上させることができます。
# JavaScript を使用して App Studio で式を記述する
AWS App Studio では、JavaScript 式を使用して、アプリケーションの動作と外観を動的に制御できます。単一行の JavaScript 式は、二重中括弧、、およびオートメーション`{{ }}`、UI コンポーネント、データクエリなどのさまざまなコンテキストで使用できます。これらの式は実行時に評価され、計算の実行、データの操作、アプリケーションロジックの制御に使用できます。
App Studio は、Luxon、UUID、Lodash、および SDK 統合の 3 つの JavaScript オープンソースライブラリをネイティブにサポートし、アプリの設定内の JavaScript 構文と型チェックエラーを検出します。
**重要**
App Studio は、サードパーティーまたはカスタム JavaScript ライブラリの使用をサポートしていません。
## 基本構文
JavaScript 式には、変数、リテラル、演算子、関数呼び出しを含めることができます。式は、計算の実行や条件の評価によく使用されます。
以下の例を参照してください。
+ `{{ 2 + 3 }}` は 5 と評価されます。
+ `{{ "Hello, " + "World!" }}` は「Hello, World\$1」と評価されます。
+ `{{ Math.max(5, 10) }}` は 10 に評価されます。
+ `{{ Math.random() * 10 }}` は、[0～10) の乱数 (小数点以下) を返します。
## Interpolation
JavaScript を使用して、静的テキスト内の動的値を補間することもできます。これは、次の例のように、JavaScript 式を二重中括弧で囲むことで実現されます。
```
Hello {{ currentUser.firstName }}, welcome to App Studio!
```
この例では、 `currentUser.firstName`は現在のユーザーの名を取得する JavaScript 式で、挨拶メッセージに動的に挿入されます。
## 連結
次の例のように、JavaScript の `+`演算子を使用して文字列と変数を連結できます。
```
{{ currentRow.FirstName + " " + currentRow.LastName }}
```
この式は、 `currentRow.FirstName`と の値をその間のスペース`currentRow.LastName`と組み合わせ、現在の行のフルネームになります。たとえば、 `currentRow.FirstName`が `John`で、 `currentRow.LastName`が の場合`Doe`、式は に解決されます`John Doe`。
## 日付および時間
JavaScript には、日付と時刻を操作するためのさまざまな関数とオブジェクトが用意されています。例えば、次のようになります。
+ `{{ new Date().toLocaleDateString() }}`: ローカライズされた形式で現在の日付を返します。
+ `{{ DateTime.now().toISODate() }}`: Date コンポーネントで使用する現在の日付を YYYY-MM-DD 形式で返します。
### 日付と時刻の比較
、`=`、`>`、`<`、 などの演算子`<=`を使用して`>=`、日付または時刻の値を比較します。例えば、次のようになります。
+ `{{ui.timeInput.value > "10:00 AM"}}`: 時刻が午前 10 時より後かどうかを確認します。
+ `{{ui.timeInput.value <= "5:00 PM"}}`: 時刻が午後 5 時以前であるかどうかを確認します。
+ `{{ui.timeInput.value > DateTime.now().toISOTime()}}`: 時刻が現在の時刻より後かどうかを確認します。
+ `{{ui.dateInput.value > DateTime.now().toISODate()}}`: 日付が現在の日付より前かどうかを確認します。
+ `{{ DateTime.fromISO(ui.dateInput.value).diff(DateTime.now(), "days").days >= 5 }}`: 日付が現在の日付から 5 日以上経過しているかどうかを確認します。
## コードブロック
式に加えて、複数行の JavaScript コードブロックを記述することもできます。式とは異なり、コードブロックには中括弧は必要ありません。代わりに、JavaScript コードをコードブロックエディタ内で直接記述できます。
**注記**
式が評価され、その値が表示される間、コードブロックが実行され、出力 (存在する場合) が表示されます。
## グローバル変数と関数
App Studio は、JavaScript 式とコードブロックで使用できる特定のグローバル変数と関数へのアクセスを提供します。たとえば、 `currentUser`は、現在ログインしているユーザーを表すグローバル変数であり、 などのプロパティにアクセスしてユーザーのロール`currentUser.role`を取得できます。
## UI コンポーネント値を参照または更新する
コンポーネントとオートメーションアクションで式を使用して、UI コンポーネント値を参照および更新できます。コンポーネント値をプログラムで参照して更新することで、ユーザーの入力とデータの変更に対応する動的でインタラクティブなユーザーインターフェイスを作成できます。
### UI コンポーネント値を参照する
UI コンポーネントから値にアクセスすることで、動的な動作を実装することで、インタラクティブでデータ駆動型のアプリケーションを作成できます。
式の名前`ui`空間を使用して、同じページで UI コンポーネントの値とプロパティにアクセスできます。コンポーネントの名前を参照することで、その値を取得したり、その状態に基づいてオペレーションを実行したりできます。
**注記**
コンポーネントはそれぞれのページにスコープされているため、`ui`名前空間には現在のページにのみコンポーネントが表示されます。
App Studio アプリのコンポーネントを参照するための基本的な構文は、 です`{{ui.componentName}}`。
次のリストには、 `ui`名前空間を使用して UI コンポーネント値にアクセスする例が含まれています。
+ `{{ui.textInputName.value}}`: *textInputName* という名前のテキスト入力コンポーネントの値を表します。
+ `{{ui.formName.isValid}}`: *formName* という名前のフォームのすべてのフィールドが、指定した検証基準に基づいて有効かどうかを確認します。
+ `{{ui.tableName.currentRow.columnName}}`: *tableName* という名前のテーブルコンポーネントの現在の行にある特定の列の値を表します。
+ `{{ui.tableName.selectedRowData.fieldName}}`: *tableName* という名前のテーブルコンポーネントの選択した行から指定されたフィールドの値を表します。その後、 `ID` (`{{ui.tableName.selectedRowData.ID}}`) などのフィールド名を追加して、選択した行からそのフィールドの値を参照できます。
次のリストには、コンポーネント値を参照するより具体的な例が含まれています。
+ `{{ui.inputText1.value.trim().length > 0}}`: *inputText1* コンポーネントの値に空でない文字列があるかどうかを確認します。これは、ユーザー入力の検証や、入力テキストフィールドの値に基づいて他のコンポーネントの有効化/無効化に役立ちます。
+ `{{ui.multiSelect1.value.join(", ")}}`: *multiSelect1* という名前の複数選択コンポーネントの場合、この式は選択したオプション値の配列をカンマ区切りの文字列に変換します。これは、選択したオプションをユーザーフレンドリーな形式で表示したり、選択を別のコンポーネントやオートメーションに渡すのに役立ちます。
+ `{{ui.multiSelect1.value.includes("option1")}}`: この式は、値 *option1* が *multiSelect1* コンポーネントの選択したオプションの配列に含まれているかどうかを確認します。*option1* が選択されている場合は true を返し、それ以外の場合は false を返します。これは、条件付きでコンポーネントをレンダリングしたり、特定のオプション選択に基づいてアクションを実行したりするのに役立ちます。
+ `{{ui.s3Upload1.files.length > 0}}`: *s3Upload1*3Upload1 という名前の Amazon S3 ファイルアップロードコンポーネントの場合、この式は files 配列の長さをチェックして、ファイルがアップロードされたかどうかを確認します。ファイルがアップロードされたかどうかに基づいて、他のコンポーネントやアクションを有効または無効にするのに役立ちます。
+ `{{ui.s3Upload1.files.filter(file => file.type === "image/png").length}}`: この式は、*s3Upload1* コンポーネントにアップロードされたファイルのリストをフィルタリングして PNG イメージファイルのみを含め、それらのファイルの数を返します。これは、アップロードされたファイルの種類に関する情報を検証または表示するのに役立ちます。
### UI コンポーネント値の更新
コンポーネントの値を更新または操作するには、オートメーション`RunComponentAction`内で を使用します。以下は、 `RunComponentAction`アクションを使用して *myInput* という名前のテキスト入力コンポーネントの値を更新するために使用できる構文の例です。
```
RunComponentAction(ui.myInput, "setValue", "New Value")
```
この例では、`RunComponentAction`ステップは *myInput* コンポーネントの `setValue`アクションを呼び出し、新しい値 *New Value* を渡します。
## テーブルデータの使用
テーブルデータと値にアクセスして、オペレーションを実行できます。次の式を使用して、テーブルデータにアクセスできます。
+ `currentRow`: テーブル内の現在の行からテーブルデータにアクセスするために使用します。たとえば、テーブルアクションの名前の設定、行からアクションから開始されたオートメーションへの値の送信、テーブル内の既存の列の値を使用した新しい列の作成などです。
+ `ui.tableName.selectedRow` と `ui.tableName.selectedRowData` はどちらも、ページの他のコンポーネントからテーブルデータにアクセスするために使用されます。例えば、選択した行に基づいてテーブルの外部にボタンの名前を設定するとします。返される値は同じですが、 `selectedRow`と の違い`selectedRowData`は次のとおりです。
+ `selectedRow`: この名前空間には、各フィールドの列ヘッダーに表示される名前が含まれます。テーブル内の表示可能な列から値を参照`selectedRow`する場合は、 を使用する必要があります。たとえば、エンティティのフィールドとして存在しないカスタム列または計算列がテーブルにある場合です。
+ `selectedRowData`: この名前空間には、テーブルのソースとして使用されるエンティティのフィールドが含まれます。`selectedRowData` を使用して、テーブルに表示されないエンティティの値を参照する必要がありますが、アプリの他のコンポーネントやオートメーションに役立ちます。
次のリストには、式内のテーブルデータにアクセスする例が含まれています。
+ `{{ui.tableName.selectedRow.columnNameWithNoSpace}}`: テーブル内の選択した行から *columnNameWithNoSpace* 列の値を返します。
+ `{{ui.tableName.selectedRow.['Column Name With Space']}}`: テーブル内の選択した行の*列名とスペース*の列の値を返します。
+ `{{ui.tableName.selectedRowData.fieldName}}`: テーブル内の選択した行から *fieldName* エンティティフィールドの値を返します。
+ `{{ui.tableName.selectedRows[0].columnMappingName}}`: 同じページの他のコンポーネントまたは式から選択した行の列名を参照します。
+ `{{currentRow.firstName + ' ' + currentRow.lastNamecolumnMapping}}`: 複数の列の値を連結して、テーブルに新しい列を作成します。
+ `{{ { "Blocked": "🔴", "Delayed": "🟡", "On track": "🟢" }[currentRow.statuscolumnMapping] + " " + currentRow.statuscolumnMapping}}`: 保存されたステータス値に基づいて、テーブル内のフィールドの表示値をカスタマイズします。
+ `{{currentRow.colName}}`、`{{currentRow["First Name"]}}`、`{{currentRow}}`、または `{{ui.tableName.selectedRows[0]}}`: 参照された行のコンテキストを行アクションに渡します。
## オートメーションへのアクセス
オートメーションを使用して、App Studio でサーバー側のロジックとオペレーションを実行できます。自動化アクション内では、式を使用してデータを処理し、動的値を生成し、以前のアクションの結果を組み込むことができます。
### オートメーションパラメータへのアクセス
UI コンポーネントやその他のオートメーションからオートメーションに動的値を渡すことができるため、再利用可能で柔軟性があります。これは、次のように `params`名前空間のオートメーションパラメータを使用して行われます。
`{{params.parameterName}}`: UI コンポーネントまたは他のソースからオートメーションに渡される値を参照します。たとえば、 は *ID* という名前のパラメータを参照`{{params.ID}}`します。
#### オートメーションパラメータの操作
JavaScript を使用してオートメーションパラメータを操作できます。以下の例を参照してください。
+ `{{params.firstName}} {{params.lastName}}`: パラメータとして渡された値を連結します。
+ `{{params.numberParam1 + params.numberParam2}}`: 2 つの数値パラメータを追加します。
+ `{{params.valueProvided?.length > 0 ? params.valueProvided : 'Default'}}`: パラメータが null または未定義ではなく、長さがゼロでないかどうかを確認します。true の場合は、指定された値を使用します。それ以外の場合は、デフォルト値を設定します。
+ `{{params.rootCause || "No root cause provided"}}`: `params.rootCause`パラメータが false (null、undefined、または空の文字列) の場合は、指定されたデフォルト値を使用します。
+ `{{Math.min(params.numberOfProducts, 100)}}`: パラメータの値を最大値 (この場合は `100`) に制限します。
+ `{{ DateTime.fromISO(params.startDate).plus({ days: 7 }).toISO() }}`: `params.startDate`パラメータが の場合`"2023-06-15T10:30:00.000Z"`、この式は開始日の 1 週間後の日付`"2023-06-22T10:30:00.000Z"`である に評価されます。
### 前のアクションからのオートメーション結果へのアクセス
自動化により、アプリケーションはデータベースのクエリ、APIs とのやり取り、データ変換の実行など、サーバー側のロジックとオペレーションを実行できます。`results` 名前空間は、同じオートメーション内の以前のアクションによって返された出力とデータへのアクセスを提供します。自動化結果へのアクセスに関する以下の点に注意してください。
1. 以前のオートメーションステップの結果には、同じオートメーション内でのみアクセスできます。
1. *action1* と *action2* という名前のアクションがその順序で存在する場合、*action1* は結果を参照できず、*action2* は にのみアクセスできます`results.action1`。
1. これはクライアント側のアクションでも機能します。たとえば、 `InvokeAutomation`アクションを使用してオートメーションをトリガーするボタンがある場合です。その後、オートメーションによってファイルが PDF であることが示された場合`results.myInvokeAutomation1.fileType === "pdf"`、PDF ビューワーのあるページに移動するなどの`Run If`条件を含むナビゲーションステップを使用できます。
次のリストには、 `results`名前空間を使用して前のアクションの自動化結果にアクセスするための構文が含まれています。
+ `{{results.stepName.data}}`: *stepName* という名前のオートメーションステップからデータ配列を取得します。
+ `{{results.stepName.output}}`: *stepName* という名前のオートメーションステップの出力を取得します。
自動化ステップの結果にアクセスする方法は、アクションのタイプと返されるデータによって異なります。異なるアクションは、異なるプロパティまたはデータ構造を返す場合があります。以下は一般的な例です。
+ データアクションの場合、 を使用して返されたデータ配列にアクセスできます`results.stepName.data`。
+ API コールアクションの場合、 を使用してレスポンス本文にアクセスできます`results.stepName.body`。
+ Amazon S3 アクションの場合、 を使用してファイルコンテンツにアクセスできます`results.stepName.Body.transformToWebStream()`。
返されるデータの形状と`results`、名前空間内でデータにアクセスする方法については、使用している特定のアクションタイプのドキュメントを参照してください。次のリストには、いくつかの例が含まれています。
+ `{{results.getDataStep.data.filter(row => row.status === "pending").length}}`: *getDataStep* がデータ行の配列を返す`Invoke Data Action`オートメーションアクションであると仮定すると、この式はデータ配列をフィルタリングして、ステータスフィールドが と等しい行のみを含め`pending`、フィルタリングされた配列の長さ (カウント) を返します。これは、特定の条件に基づいてデータをクエリまたは処理する場合に便利です。
+ `{{params.email.split("@")[0]}}`: `params.email`パラメータに E メールアドレスが含まれている場合、この式は @ 記号で文字列を分割し、@ 記号の前に部分を返します。これにより、E メールアドレスのユーザー名部分が効果的に抽出されます。
+ `{{new Date(params.timestamp * 1000)}}`: この式は Unix タイムスタンプパラメータ (`params.timestamp`) を受け取り、JavaScript Date オブジェクトに変換します。タイムスタンプは秒単位であることを前提としているため、1000 を掛けてミリ秒に変換します。これはコン`Date`ストラクタが想定する形式です。これは、オートメーションで日付と時刻の値を操作するのに役立ちます。
+ `{{results.stepName.Body}}`: *stepName* という名前の`Amazon S3 GetObject`オートメーションアクションの場合、この式はファイルコンテンツを取得し、取得されたファイルを表示するために **Image** や **PDF Viewer** などの UI コンポーネントで使用できます。この式は、 コンポーネントで使用するオートメーションの Automation **出力**で設定する必要があることに注意してください。
# データの依存関係とタイミングに関する考慮事項
App Studio で複雑なアプリケーションを構築する場合、フォーム、詳細ビュー、オートメーションを活用したコンポーネントなど、さまざまなデータコンポーネント間のデータ依存関係を理解し、管理することが重要です。データコンポーネントとオートメーションは、データの取得または実行を同時に完了しない可能性があるため、タイミングの問題、エラー、予期しない動作が発生する可能性があります。潜在的なタイミングの問題を認識し、ベストプラクティスに従うことで、App Studio アプリケーションでより信頼性が高く一貫性のあるユーザーエクスペリエンスを作成できます。
潜在的な問題には、次のようなものがあります。
1. **レンダリングタイミングの競合:** データコンポーネントは、データの依存関係と一致しない順序でレンダリングされ、視覚的な不整合やエラーが発生する可能性があります。
1. **自動化実行のタイミング:** 自動化タスクは、コンポーネントが完全にロードされる前に完了し、ランタイム実行エラーが発生する可能性があります。
1. **コンポーネントのクラッシュ:** オートメーションを搭載したコンポーネントは、無効なレスポンスやオートメーションの実行が完了していない場合にクラッシュする可能性があります。
## 例: 注文の詳細と顧客情報
この例では、データコンポーネント間の依存関係がどのようにタイミングの問題やデータ表示の潜在的なエラーにつながるかを示します。
同じページに次の 2 つのデータコンポーネントがあるアプリケーションを考えてみましょう。
+ 注文データを取得する詳細コンポーネント (`orderDetails`)。
+ 注文に関連する顧客の詳細を表示する詳細コンポーネント (`customerDetails`)。
このアプリケーションでは、`orderDetails`詳細コンポーネントに次の値で設定された 2 つのフィールドがあります。
```
// 2 text fields within the orderDetails detail component
// Info from orderDetails Component
{{ui.orderDetails.data[0].name}}
// Info from customerDetails component
{{ui.customerDetails.data[0].name}} // Problematic reference
```
この例では、`orderDetails`コンポーネントは`customerDetails`コンポーネントからのデータを参照して顧客名を表示しようとしています。これは問題です。`orderDetails`コンポーネントがデータを取得する前に`customerDetails`コンポーネントがレンダリングされる可能性があるためです。`customerDetails` コンポーネントデータの取得が遅延または失敗した場合、`orderDetails`コンポーネントは不完全または誤った情報を表示します。
## データ依存関係とタイミングのベストプラクティス
次のベストプラクティスを使用して、App Studio アプリのデータ依存関係とタイミングの問題を軽減します。
1. **条件付きレンダリングを使用する: **コンポーネントをレンダリングするか、データが利用可能であることを確認した場合にのみデータを表示します。条件ステートメントを使用して、データを表示する前にデータの存在を確認します。次のスニペットは、条件ステートメントの例を示しています。
```
{{ui.someComponent.data ? ui.someComponent.data.fieldName : "Loading..."}}
```
1. **子コンポーネントの可視性を管理する:** データがロードされる前に子をレンダリングする Stepflow、Form、Detail などのコンポーネントについては、子コンポーネントの可視性を手動で設定します。次のスニペットは、親コンポーネントのデータの可用性に基づいて可視性を設定する例を示しています。
```
{{ui.parentComponent.data ? true : false}}
```
1. **結合クエリを使用する:** 可能であれば、結合クエリを使用して 1 つのクエリで関連データを取得します。これにより、個別のデータフェッチの数が減少し、データコンポーネント間のタイミングの問題が最小限に抑えられます。
1. **自動化にエラー処理を実装する:** 自動化に堅牢なエラー処理を実装して、予想されるデータが利用できない、または無効なレスポンスが受信されるシナリオを適切に管理します。
1. **オプションの連鎖を使用する:** ネストされたプロパティにアクセスするときは、オプションの連鎖を使用して、親プロパティが定義されていない場合のエラーを防止します。次のスニペットは、オプションの連鎖の例を示しています。
```
{{ui.component.data?.[0]?.fieldSystemName}}
```
# 複数のユーザーによるアプリの構築
複数のユーザーが 1 つの App Studio アプリで作業できますが、一度に 1 つのアプリを編集できるのは 1 人のユーザーのみです。他のユーザーを招待してアプリを編集すること、および複数のユーザーが同時にアプリを編集しようとする場合の動作については、以下のセクションを参照してください。
## ビルダーを招待してアプリを編集する
次の手順を使用して、他のビルダーを招待して App Studio アプリを編集します。
**他のビルダーを招待してアプリを編集するには**
1. 必要に応じて、アプリケーションのアプリケーションスタジオに移動します。
1. [**共有**] を選択します。
1. **開発**タブで、テキストボックスを使用して、アプリの編集に招待するグループまたは個々のユーザーを検索して選択します。
1. ユーザーまたはグループごとにドロップダウンを選択し、そのユーザーまたはグループに付与するアクセス許可を選択します。
+ **共同所有者**: 共同所有者には、アプリ所有者と同じアクセス許可があります。
+ **編集のみ**: **編集のみ**のロールを持つユーザーは、以下を除き、所有者および共同所有者と同じアクセス許可を持ちます。
+ 他のユーザーを招待してアプリを編集することはできません。
+ テスト環境または本番稼働環境にアプリを公開することはできません。
+ アプリにデータソースを追加することはできません。
+ アプリを削除または複製することはできません。
## 他のユーザーが編集中のアプリを編集しようとする
1 つの App Studio アプリは、一度に 1 人のユーザーのみが編集できます。複数のユーザーが同時にアプリを編集しようとするとどうなるかについては、次の例を参照してください。
この例では、 `User A`は現在アプリを編集しており、 はそれを と共有しています`User B`。 `User B` は、 によって編集されているアプリの編集を試みます`User A`。
がアプリを編集`User B`しようとすると、現在アプリを編集`User A`していることを示すダイアログボックスが表示され、継続するとアプリケーションスタジオ`User A`から開始され、すべての変更が保存されます。 `User B` はキャンセルして`User A`続行するか、続行してアプリケーションスタジオに入り、アプリを編集できます。この例では、アプリを編集することを選択します。
がアプリの編集`User B`を選択すると、 `User B` はアプリの編集を開始した通知`User A`を受け取り、セッションは終了します。アプリが非アクティブなブラウザタブで開かれ`User A`ていた場合、通知を受信しない可能性があることに注意してください。この場合、アプリに戻って編集しようとすると、エラーメッセージが表示され、ページを更新するように指示され、アプリケーションのリストに戻ります。
# アプリのコンテンツセキュリティ設定の表示または更新
App Studio のすべてのアプリケーションには、イメージ、iFramesPDFs などの外部メディアやリソースのロードを制限したり、指定されたドメインや URLs (Amazon S3 バケットを含む) からのみ許可したりするために使用できるコンテンツセキュリティ設定があります。アプリが Amazon S3 にオブジェクトをアップロードできるドメインを指定することもできます。
すべてのアプリケーションのデフォルトのコンテンツセキュリティ設定は、Amazon S3 バケットを含む外部ソースからのすべてのメディアのロードをブロックし、Amazon S3 へのオブジェクトのアップロードをブロックすることです。したがって、イメージ、iFramesPDFs、または同様のメディアをロードするには、メディアのソースを許可するように設定を編集する必要があります。また、Amazon S3 へのオブジェクトのアップロードを許可するには、 がアップロードできるドメインを許可する設定を編集する必要があります。
**注記**
コンテンツセキュリティ設定は、アプリケーションでコンテンツセキュリティポリシー (CSP) ヘッダーを設定するために使用されます。CSP は、クロスサイトスクリプティング (XSS)、クリックジャック、その他のコードインジェクション攻撃からアプリを保護するのに役立つセキュリティ標準です。CSP の詳細については、MDN ウェブドキュメントの[「コンテンツセキュリティポリシー (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)」を参照してください。
**アプリのコンテンツセキュリティ設定を更新するには**
1. 必要に応じて、アプリケーションリストから編集を選択して、アプリケーションのアプリケーションスタジオに移動します。
1. **アプリ設定**を選択します。
1. **コンテンツセキュリティ設定**タブを選択すると、次の設定が表示されます。
+ **フレームソース**: アプリがフレームや iframe (インタラクティブコンテンツや PDFs など) をロードできるドメインを管理するために使用されます。この設定は、以下のコンポーネントまたはアプリケーションリソースに影響します。
+ iFrame 埋め込みコンポーネント
+ PDF ビューワーコンポーネント
+ **イメージソース**: アプリがイメージをロードできるドメインを管理するために使用されます。この設定は、以下のコンポーネントまたはアプリケーションリソースに影響します。
+ アプリのロゴとバナー
+ イメージビューワーコンポーネント
+ **Connect source**: アプリが Amazon S3 オブジェクトをアップロードできるドメインを管理するために使用されます。
1. 設定ごとに、ドロップダウンから目的の設定を選択します。
+ **すべてのframes/images/connectionsブロック**する: メディア (イメージ、フレーム、PDFs) をロードしたり、オブジェクトを Amazon S3 にアップロードしたりしないでください。
+ **すべてのframes/images/connectionsを許可する**: すべてのドメインのすべてのメディア (イメージ、フレーム、PDFs) のロードを許可するか、すべてのドメインの Amazon S3 へのオブジェクトのアップロードを許可します。
+ **特定のドメインを許可する**: 指定したドメインへのメディアのロードまたはアップロードを許可します。ドメインまたは URLs は、式のスペース区切りリストとして指定されます。ここで、ワイルドカード (`*`) をサブドメイン、ホストアドレス、またはポート番号に使用して、それぞれのすべての法的値が有効であることを示すことができます。の指定`http`も と一致します`https`。次のリストには、有効なエントリの例が含まれています。
+ `blob:`: Amazon S3 バケットから項目`GetObject`を返す、Amazon Bedrock によって生成されたイメージなど、自動化アクションによって返されるファイルデータを含むすべての BLOB に一致します。
**重要**
指定された式`blob:`に を含めて、 アクションによって返されるファイルデータを許可する必要があります。式が であっても`*`、 に更新する必要があります。 `* blob:`
+ `http://*.example.com`: の任意のサブドメインからロードするすべての試行に一致します`example.com`。`https` リソースとも一致します。
+ `https://source1.example.com https//source2.example.com`: `https://source1.example.com`と の両方からロードするすべての試行に一致 `https://source2.example.com`
+ `https://example.com/subdirectory/`: サブディレクトリディレクトリにファイルをロードするすべての試行に一致します。例えば、`https://example.com/subdirectory/path/to/file.jpeg`。これは と一致しません`https://example.com/path/to/file.jpeg`。
1. **[保存]** を選択して変更を保存します。