こんにちは！今回は、AWSのアプリ構築AIサービス「App Studio」をご紹介します。
AWS（Amazon Web Services）はAmazonが提供するクラウドコンピューティングサービスの総称で、ストレージやコンピューティング等様々なサービスを含みます。「App Studio」はAWSの最新サービスで、生成AIが自然言語プロンプトに基づいてアプリケーションを構築します。特に企業向けのアプリ開発を得意とし、AWSの他サービスとスムーズに連携できるので既存インフラを活用して迅速にアプリを展開できます。
本記事では、App Studioの利用開始方法と実際にアプリを生成してみた結果をご紹介します。App Studioは構築したアプリを本番公開するまでは無料で利用できるのでぜひお試しください。
1. App Studio概要
1.1. 概要
AWS App Studioは、AWSが提供する、自然言語でアプリを構築できる生成AIサービスです。2024年7月にプレビュー版が公開されました。App Studioでは特にエンタープライズ向けのアプリケーション開発をターゲットにしています。AWSの各種サービスや、APIコネクタ経由で外部サービスと連携することも可能です。使用されている生成AIのモデルは公開されていません。
利用開始にはAWSアカウントを作成し、App Studioの利用開始設定を行います。
1.2. 料金
App Studioではアプリ開発は無料ですが、開発したアプリを公開すると、App StudioとAWSの各種サービスに対して料金が発生します。App Studioに対しては、公開されたアプリの使用量に基づき、1ユーザーにつき0.25$/1時間が課金されます。
さらに、アプリの開発・稼働に必要なAmazon S3（オブジェクトストレージ）やAmazon Aurora（リレーショナルDB）、AWS Lambda（コンピューティングサービス）等の使用量に基づき別途料金が発生します。
App Studioの利用開始時に自動でS3のバケットが作成されますが、本番公開しない限り料金は発生しないのでご安心ください。
ちなみに、AWSは利用するサービス・製品によって異なる従量課金制の料金が発生します。AWSでは3つの無料利用枠が用意されており、該当する期間や使用量の範囲内で無料で利用することができます。
S3は12か月、Lambdaは常に下記の上限で無料利用可能です。
2. 事前準備
まずは、App Studioを利用するために必要な準備を行います。
2.1. AWSアカウントの作成
まずはAWSの新規登録を行います。AWSアカウントがある方は次のセクションに進んでください。
AWSの新規登録ページを開き、「今すぐ無料サインアップ」をクリックします。
Step1から5で必要事項を入力してサインアップを完了させます。サインアップ完了画面が表示されたら完了です。「AWSマネジメントコンソールにお進みください」をクリックしてコンソールを開きます。
下記のマネジメントコンソールにアクセスできれば成功です。
2.2. リージョンの設定
まずは、リージョンをApp Studioが利用できる「オレゴン」に変更します。現在App Studioはオレゴン（us-west2）に限定して公開されているので、リージョンをそれに合わせます。
マネジメントコンソールの画面右上に地域名が表示されているドロップダウンがあるのでクリックしてリージョンのリストを開きます。「米国西部（オレゴン）us-west-2」をクリックするとリージョンが変更されます。
2.3. IAMグループ・ユーザーの作成（IAM Identity Center）
AWSアカウントが許可したIAMグループとグループに所属するユーザーがApp Studioを利用できるようになります。ここではIAMグループとユーザーを作成します。
2.3.1. IAM Identity Centerの有効化
まずはIAM Identity Centerの利用を開始します。マネジメントコンソールの左上の検索窓にIAMと入力して「IAM Identity Center」をクリックします。IAMという類似サービスがあるので間違えないように注意してくださいね。
IAM Identity Centerを初めて開くときに有効化が必要になります。「有効化する」をクリックすると、IAM Identity Centerが有効化されてダッシュボードが開きます。
ダッシュボードを開いたら、画面右上に表示されているリージョンが「オレゴン」になっているか確認します。なっていなければ先ほどと同様クリックしてリージョンのドロップダウンリストから「オレゴン」を選択します。
2.3.2. グループとユーザーの作成
App Studioを利用するグループとユーザーを作成します。App Studioではグループに対してApp Studioの管理者・ビルダー権限を付与することができます。今回は管理者権限のみを付与するのでグループを1つだけ作成します。
まずはユーザーを作成します。画面左側のナビゲーションメニュー「ユーザー」をクリックし、ユーザー一覧右上の「ユーザーを追加」をクリックします。
ユーザーの作成画面が開きます。Step1では、ユーザー名、Eメールアドレス、名、姓、表示名を入力し、画面最下部の「次へ」ボタンをクリックします。
Step2でグループを選択します。グループがある場合はリストに表示されるのでそこから選択します。ない場合は「グループを追加」をクリックしてグループ名を入力して「グループを作成」をクリックします。今回はグループ名を「App Studio」としました。
ユーザー作成のStep2に戻ってきます。作成したグループを選択して「次へ」をクリックします。
最後に確認して「ユーザーを追加」をクリックして作成完了です。
追加ユーザーのメールアドレス宛に招待のメールが届くので、パスワードとMFAを設定してアクセス設定も完了です。
2.4. CodeCatalystスペースの作成
次に、CodeCatalystの準備を行います。CodeCatalystは、アプリケーションの開発からデプロイまでをサポートするAWSの統合開発環境です。App StudioはCodeCatalystを利用するので、利用できるようにIAM Identity Centerと連携します。
2.4.1. CodeCatalyst利用開始
AWSマネジメントコンソール画面左上の検索窓にCodeCatalystと入力し、表示された「Amazon CodeCatalyst」をクリックします。
初めてCodeCatalystを利用する場合、CodeCatalystトップページの「Continue with AWS Builder ID」ボタンをクリックします。
次の画面で利用開始設定を行います。CodeCatalystのトップページが開いたら完了です。
- AWS Region：us-west-2
- Identity store ID：自分のIdenty Store ID（利用可能なIDがドロップダウンで選択できる）
2.4.2. スペース作成
CodeCatalystのトップページが開いたら、ナビゲーション「IAM Identity Center」をクリックし、連携設定画面を開きます。Step1で下記の内容を入力して「Next」ボタンをクリックします。
- Display name：今回は
AppStudioTest
Step2で、作成するスペースを設定します。「New Space」を選択して下記の内容を入力し「Next」ボタンをクリックします。
- Space name：今回は
SpaceforAppStudio
Step3で、スペースと連携するグループを選択します。先ほどIAM Identity Centerで作成したグループを選択し「Next」ボタンをクリックします。
Step4で管理者ユーザーを指定します。グループ内の最低1人のユーザーを選択し「Next」ボタンをクリックします。
Step6でここまでの設定内容を確認し、「Complete」ボタンをクリックして完了です。
これでCodeCatalystに関する設定も完了です！
3. App Studio利用開始設定
これでApp Studioを利用するための準備が整いました！早速App Studioを始めましょう。AWSマネジメントコンソールの画面左上の検索窓に「App Studio」と入力し、表示された「AWS App Studio」をクリックします。
App Studioのトップページが表示されるので、「Get started」をクリックします。
App Studioの利用開始画面が表示されます。下記の通り内容を入力し「設定」をクリックします。
- 管理者グループ（必須）：先ほど作成したグループを選択
- ビルダーグループ（任意）：ビルダー権限を付与したいグループを選択
- CodeCatalystスペース：先ほど作成したCodeCatalystスペースを選択
- 確認：確認してチェック
- リージョン（画面右上）：オレゴン
設定から利用が可能になるまでだいたい30分かかります。完了ポップアップが表示されたら設定完了です！ポップアップの「App Studioに移動」ボタンをクリックするとApp Studioのサインイン画面を開きます。
4. App Studio詳細
4.1. Admin hub/Builder hub
まずはサインイン後に表示されるAdmin hubとBuilder hubの画面構成等を見ていきます。管理者権限を持つユーザーでサインインするとAdmin hubが表示されます。
管理者はこのグループ下の全てのコネクタとアプリケーションを管理することができます。
また、グループを追加したり権限を変更することができます。
ナビゲーション「Builder hub」をクリックすると、ビルダー権限を持つユーザーのトップページが表示されます。
ここでアプリを作成します。
4.2. アプリ作成の流れ
それでは、早速アプリを作成してみます！Buuilder hubの「CREATE A NEW APP」をクリックします。ポップアップが表示されるので、生成するアプリの名前を入力し「Generate an app with AI」を選択して「Next」をクリックします。
次にデータソースを選択する画面が表示されます。今回は設定せず「Skip」をクリックします。
ローディング画面が表示されます。1分ほどたつとチャットとサンプルプロンプトが表示される画面に遷移します。
サンプルプロンプトを見ると、アプリ名とカテゴリ、プロンプトが表示されています。各プロンプトはカスタマイズして送信することができます。チャット入力部分を見ると、文字数制限が4,000文字になっているのが分かります。
カテゴリはOperations、Human Resources、Education、IT、Biotechnology、Pharmaceutical、Real Estate、Energy、Construction、Legal、Automobile、Banking、Media、Food & Beverage、Transportation、Goods、Professional Services、Entertainment、Marketing、Consulting、Sales、IT Servicesがありました。かなり幅広く対応していますね。
今回は「Project Approvals」のサンプルプロンプトを送信してみます。プロンプトの内容を日本語で要約すると下記のような内容になります。
- 「Project Approvals」のプロンプト要約…
チームがプロジェクトを提出し、承認状況を確認できるアプリを作成してください。関係者にはプロジェクトの変更や承認結果が通知され、プロジェクトマネージャーや他の役割（法務、財務、経営陣）がプロジェクトをレビューして承認または拒否します。
「Customize」ボタンをクリックすると左のチャット部分にプロンプトが入力されます。チャットの送信アイコンをクリックします。
少し時間があって、画面の右側「About your app」にプロンプトを踏まえて要求（Your requirements）とアプリの概要（App overview）がまとめられます。
要求には下記の項目が含まれています。
- Use Case
- User Flow
- Data Sources
アプリの使用例、ユーザーフロー、データベースがまとめられています。まずUse caseでは、ユーザータイプごとにアプリでできることがまとめられています。
User Flowでは、ユーザータイプごとのアプリの利用フローがまとめられています。
Data sourceでは、アプリに必要なデータベースが提案されています。
次に、「App overveiw」をクリックしてアプリの概要を開きます。アプリの概要には下記の項目が含まれています。
- App Summary
- Key Features
- Usage
App Summaryでは、ここまでの内容を踏まえてアプリの要約がされています。Key Featuresでは、アプリの特徴的な機能がまとめられています。Usageでは、機能ごとにアプリのよくある使用例がまとめられています。
今回は、提案された内容に変更なしでアプリを生成してみます。画面右下の「Generate app」をクリックします。
数秒でアプリの編集画面が表示されます。
4.3. アプリ編集画面
それでは編集画面の大まかな機能を紹介します。
4.3.1. 概要
| No. | 名前 | できること |
|---|---|---|
| 1 | メインナビゲーションバー | 何を編集するかを「Pages」、「Automations」、「Data」、「App settings」から選択します。 |
| 2 | サイドバー | ①で選択したもののうち編集したいPageやAutomationを選択します。 |
| 3 | キャンバス | ②で選択したPageやAutomationが表示されます。ここで要素の追加や修正を行います。 |
| 4 | プロパティパネル | ③に追加する要素を選択したり、プロパティを設定します。①で「Pages」を選択したときは「Components」と「Properties」が、「Automations」を選択したときは「Actions」と「Properties」が表示されます。「Components」と「Actions」からドラッグ＆ドロップで要素を③に追加します。 |
| 5 | AIアシスタントボタン | AIにApp Studioでのアプリ開発における質問ができます。 |
| 6 | デバッガー | 発生中のエラーと警告を確認できます。「View」をクリックして発生場所を確認することができます。 |
| 7 | アクションバー | アプリのプレビュー、公開、編集者の招待を行います。 |
4.3.2. Pages
Pagesでは、ページのユーザーインターフェース要素であるComponentの追加や設定を行います。App Studioでは、ページの要素であるComponentを右側のプロパティパネル>「Components」からドラッグ＆ドロップで追加し、「Properties」で設定をするという方法でページの編集を行います。
ComponentのカテゴリにはLayout、Data、Form、Text & number、Selection、Buttons & navigation、Date & time、Mediaがあり、各カテゴリ内で用途によって比較的細かくComponentが分かれています。
Propertiesでは、ComponentのLayout（サイズやマージン・パディング、中央寄せ等）等を設定できます。ユーザーの権限による閲覧制限やパラメーターの設定もこちらでできます。
また、ボタンなどのComponentのActtionの設定と確認もページで行います。確認したいComponentをクリックすると、プロパティパネル>Properties>「Triggers」にこのComponentに設定されているActionとAutomationが表示されます。「Add」をクリックしてリストからTriggerを選択できます。
「Invoke Automation」では「Automations」で作成したAutomationを選択できるようになります。
4.3.3. Automations
App Studioでは、特定のトリガーによって実行する複数のアクションをまとめて定義することができます。それがAutomationsです。
ちなみに、アクションの種類は「Automation」、「Data action」、「Component action」の大きく3つに分かれており、次のような違いがあります。
- Data action：データの操作に関連するアクション。
- Component action：個別のUIコンポーネントに関連するアクション。
- Automation：全体的なワークフローやプロセス。複数のData actionやData actionをまとめて定義できる。
Automationsタブの内容を確認します。サイドバーにAutomationのリストが表示され、選択したAutomationがキャンバスに表示されます。詳細は画面右側のPropertiesで設定します。下記は、アプリと接続したAmazon S3に保存しているデータを表示するアクションを表示している状態です。プロパティパネルでIuputとOuputを設定します。
AutomationのトリガーはPage>Propertiesで設定されています。このAutomationの場合、ProjectDetails PageのDocumentViewer1 Componentで設定されていました。
4.3.4. Data
Dataタブでは、Entity（データモデル）の設定（Configuration）、データアクションの管理（Data action）、サンプルデータの管理（Sample data）、外部サービスとの接続（Connection）を行います。
App Studioではアプリのインターフェースとデータソースが直接接続しないように間にEntityが存在しています。アプリの公開後にデータソースとEntityを接続するので、公開されるまでAWSのデータソースにレコードが保存されることはありません。
Entity作成時に方法を4つから選択することができますが、「Create an AWS App Studio managed entity」を選択すると、DynamoDBテーブルを自動で作成・管理してくれます。
Data>Configurationでは、作成済みEntityのFieldの修正・追加を行います。各FieldではDisplay name（アプリユーザーに表示されるラベル）、System name（内部的に使用する識別子）、Data typeを設定します。
Data>Data actionでは、Entityのデータを検索し返すアクション「Data action」を作成します。getAll（Entityの全てのレコードを取得）とgetByID（Entityの一意の識別子に基づいて単一のレコードを取得）の2種類があります。
Data>Sample dataでは、プレビュー環境でのみ使用できるサンプルデータの生成を行います。「Generate a more sample data」をクリックするとEntityに合わせてサンプルデータが生成されます。サンプルデータはEntity上にのみ作成されます。最大500件生成できます。
Data>Connectionでは、このEntityが接続されているDynamoDBの確認や接続の解除を行います。
4.3.5. App settings
App settingsタブでは、ユーザーに付与された権限（ロール）によるアクセス制限の管理を行います。ここでロールを作成し、各ページのプロパティパネル>Properties>Visibilityで閲覧可能なロールを設定します。
4.4. 生成結果の分析
それでは、生成されたアプリがプロンプト入力時のAbout your appの内容を網羅できているかと、ページ遷移などの基本的な動作がどこまで実装できているかを確認していきます。
4.4.1. About your appとの比較
生成されたアプリの内容をタブごとに確認していきます。
まず、Pageについては7つのページが生成されています。アプリのプロンプト入力時に出力されたAbout your app>Your Requirementと比較すると、Use Caseに出力されていた機能を含むPageは、通知を除いて全て反映されていることを確認しました。DashboardはAbout your appではとりわけ触れられていたわけではありませんが生成されていました。各Pageでは基本的な機能が網羅されており、カスタマイズして簡単に理想のアプリを開発できそうです。
Dataについては、About your app>Your Requirement>Data sourcesで提案されていたProject、Task、Notification、Approval Entityが作成されていました。Userは作成されていませんが、AWSではユーザー管理はIAMやCognitoなどのAWSサービスを使って行うことが多いため、User Entityを生成しないようになっているようです。また、パスワード等を暗号化して保存できる仕組みもありませんでした。
Automationについては、About your app>App overview>UsageとAutomationやData actionを比較します。Usageの内容がAutomationまたはData action、Navigationで実装されていることが確認できました。下記の青色枠線はData actionまたはNavigationで実装されている部分です。
App settingsのRoleについては、全てのPageで設定されていませんでした。この部分はアプリの用途に合わせてロールを作成して設定していくしかなさそうです。
不十分な点としてNotificationにAutomationがあげられます。Use CaseではNotificationについて下記の3つが定義されていました。
- プロジェクト提出者向け：プロジェクトの承認/却下に関する通知を受け取る
- 法務／財務／役員向け：レビューが必要なプロジェクトの通知をメールで受信
- すべてのユーザー向け：プロジェクトの詳細が変更された場合、電子メールで通知を受け取る
NotificationというEntityは作成されており、AutomationのNewProjectForm1で新規Project作成時の通知送信は作成されていたので上記の3つ目の用途でカスタマイズして活用できそうですが、他にNotificationを作成するAutomationは作成されていませんでした。
4.4.2. 基本的な動作の確認
次に、ページ遷移などの基本的な動作の実装レベルを確認します。編集画面右上の「Preview」をクリックしてアプリのプレビューページを表示して確認したところ、User Flowで定義されたページ遷移は正常に行えることが確認できました。レコードを追加したり内容を変更するData actionも実行できました。
ただ、ページ遷移時のレコードの受け渡しの設定が不十分なようで、ProjectApprovalsのテーブルでレコードを選択してApprove/Reject Projectに遷移すると、全てのInputが空欄で表示されるという結果となりました。少なくとも「projectId」欄は選択したレコードの内容が表示されるようにした方がよさそうです。ちなみに、MyProjects→ProjectDetailsからの遷移時には選択したレコードの内容が表示されました。
また、添付ファイルのアップロードには失敗しました。ファイルをアプロードできるようにするにはAWSのファイルストレージAmazon S3等と連携する必要があります。
5. まとめ
今回は、AWSのアプリ構築AIサービスApp Studioの利用開始方法や概要をご紹介しました。App Studioの強みは他のAWSサービスとの連携がスムーズにできること、企業向けアプリの生成開発が得意という点でした。
これまでご紹介したアプリ構築AIサービスやノーコードツールのAI機能と比較しても、プロンプトの内容を網羅できカスタマイズしやすいサービスだということも分かりましたね。特にプロンプトの入力後に出力されるAbout your appの内容を見て修正できることで、さらに理想のアプリに近づけそうです。AutomationsのUIはZapierに似ており、慣れれば問題なさそうです。
この充実度でプレビュー版というのも驚きですね！今後の改善を期待しましょう。既に顧客データがAWS上にあり企業向けのサービスを検討中などの場合はぜひApp Studioの利用を検討してみてくださいね。
