はじめに
こんにちは。9月に入りようやく涼しさを感じられるようは日が増えてきましたね。
AWSエンジニアの小林です。
2024年7月にAmazon Web Services (AWS) からプレビュー版として「AWS App Studio」がリリースされました。
このツールは、生成AIを利用したノーコード・ローコードのアプリケーション開発サービスとして注目を集めています。
この記事では、「AWS App Studio」を使用して実際にアプリケーションをノーコードで作成していきます。
aws.amazon.com
AWS App Studioの概要
AWS App Studioは、アプリケーションを迅速かつ簡単に作成するためのAI駆動のサービスです。
ユーザーは、自然言語でアプリの要件を入力するだけで、データモデル、ビジネスロジック、ユーザーインターフェイスを含むアプリケーションを数分で作成することができます。
これにより、専門的な開発スキルがなくても、アプリを構築・管理することが可能になります。
aws.amazon.com
AWS App Studioの始め方
事前準備
AWS App Studio(以下App Studio)を使用するためには、AWS CodeCatalystとAWS IAM Identity Centerのセットアップが必要となります。
また、AWS CodeCatalystの使用にはAWS Builder IDが必要であるため、こちらも併せて用意しておきます。
それぞれのセットアップ手順としては、以下を参照ください。
docs.aws.amazon.com
docs.aws.amazon.com
ここでは、CodeCatalystのSpaceが作成されている&AWS IAM Identity Centerのグループとユーザーが定義されていればOKです。
ノーコードでTODOアプリを作成してみる
では早速、App Studioを使用してアプリを作成していきます。
App Studio画面から「Create App」を選択します。
今回は生成AIを使用してアプリを作成していきたいので、「Generate an app with AI」オプションをチェックします。
オプションとしてdata sourceの選択を求められますが、まずはdata sourceなしとして「skip」を選択します。(data sourceは後ほど実施)
作成したいアプリ内容をプロンプトとして入力する画面が表示されました。
App Studioではサンプルアプリのプロンプトが多数用意されており、用途に応じてアプリ内容の入力自体もスキップすることができますが、今回は手動で入力していきます。
ここでは簡素なTODOアプリを作成するために、以下内容を入力します。
Todoアプリを作りたいです。 必要な画面は4つで、Todo一覧画面、Todo作成画面、TODO更新画面、Todo詳細画面です。 Todoのプロパティは、ID、タイトル、優先度、期限、ステータスとしてください。
すると右側に、入力した内容をもとに、作成するアプリの要件「Your requirements」とアプリ概要「App overview」が自動生成されます。
入力した分の要求についてはケースやデータフローなどの仕様・設計に落とし込めているようです。
Todoの削除を含めていなかったので、追加で依頼します。
Todo一覧画面には、Todo削除ボタンを追加してTodoを削除できるようにしてください。
「Your requirements」に追加依頼内容が反映されました。
一点注意点として、日本語で入力したとしても「App overview」は英訳されて表示されているため、現状は生成AIから日本語ベースのアプリを直接作成することができなさそうです。
それでは、「Generate app」を押してアプリを作成します。
数分で作成が完了し、「Pages」タブから指定した4つの画面が表示されていることを確認できました。
App Studioには作成したアプリのプレビュー機能があるので、サンプルデータを用意してプレビューを確認していきます。
プレビューとして、用意したサンプルデータをもとに画面が表示されました。
Todo作成も試してみます。
作成画面で入力した内容が一覧に追加されていますね。
他機能のTodo詳細、更新、削除についても期待通り動作することが確認できました。
完全にノーコード、加えてたった数分でCRUDアプリケーションをつくることが出来ました!
作成したアプリに既存AWSリソースを紐づける
ここまででノーコードでTodoアプリを作成してきました。
今回作成したアプリケーションでは作成・表示している各Todo項目はデフォルトでApp Studio管理のDynamoDBに登録される設定になっています。
最後にApp StudioのConnectorを使用して、自分のAWSアカウントのDynamoDBテーブルにアプリを紐づけてみます。
Connectorを使用することで、作成するアプリケーションにAWSサービスやその他サードパーティーサービスを紐づけることができます。
docs.aws.amazon.com
今回アプリに紐づけるDynamoDBテーブルとして、TodoManagementTableを用意します。
テーブルには表示用のサンプルとして、1項目を設定済みです。
続いて、App StudioがConnectorとして用意したDynamoDBテーブルを使用するためのIAMロールを作成します。
その際、信頼ポリシーにはApp Studioが利用できるよう以下を設定します。
{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::{AWSアカウントID}:root" }, "Action": "sts:AssumeRole", "Condition": { "StringEquals": { "aws:PrincipalTag/IsAppStudioAccessRole": "true" } } } ] }
また、IAMロールには接続するAWSアカウントのDynamoDBテーブルへのアクセス権限を持つポリシーを付与しておきます。
{ "Version": "2012-10-17", "Statement": [ { "Sid": "VisualEditor0", "Effect": "Allow", "Action": "dynamodb:*", "Resource": [ "arn:aws:dynamodb:us-west-2:{AWSアカウントID}:table/*" ] } ] }
併せて、タグにはApp Studioがアクセスできるよう次のタグを設定します。
- Key: IsAppStudioDataAccessRole
- Value: true
ここまでで、接続対象のAWSアカウント側の構築は終了です。
では実際にConnectorを作成して、構築したアプリケーションにDynamoDBテーブルを紐づけていきます。
App Studio画面からConnectors > 「Create connector」を押下します。
AWS Connectorsから、今回は「Amazon DynamoDB」を選択します。
各種設定項目を入力します。
IAM roleの欄には先ほど作成したallow-dynamodb-accessのARNを入力し、Available tablesの中からTodoManagementTableを選択します。
DynamoDBテーブルの各カラムに対する表示名の設定画面が表示されますが、今回は変更せずCreateをします。
Connectorの作成が完了したので、アプリの編集画面からConnectorを設定していきます。
「Data」タブ Entitiesから 「Connect to data source」を選択します。
設定画面が表示されるので、作成したConnectorとDynamoDBテーブルを選択します。
すると、アプリケーションのEntityとDynamoDBテーブルのマッピングが求められるので、それぞれ対応するように入力します。
こちらでアプリケーションへのDynamoDBテーブルへの紐づけ設定は完了です。
実際に環境にデプロイして動作を確認していきます。
「Publish」をクリックして、Testing環境にデプロイします。
10分ほどかかって、Testing環境にデプロイされました。
表示される、アプリケーションURLにアクセスしてみましょう。
DynamoDBテーブルに登録していた項目が表示されていますね。
Todp作成も試してみます。
作成したTodo項目がDynamoDBテーブルに登録されていることも確認できました。
作成したアプリケーションのUIをカスタマイズする
最後に、作成したアプリケーションのUIをノーコードでどこまでカスタマイズできるか試していきます。
AWS App Studioでは、ページ全体、テーブルなどの各ComponentごとにPropertiesタブからUIの変更が可能です。
ページのPropertiesを見ると、Visibilityからユーザーごとのアクセス設定や、Styleからロゴやバナーの表示、Layoutからパディングやバックグラウンドの有無の設定ができるようですね。
テーブルのPropertiesを見ると、テーブルのexport機能や、ボタンのデザイン、テーブルのページング設定が可能であるようです。
ただ、ページやテーブルで色指定ができない、ロゴの位置を調整できないなど、カスタマイズできない箇所も多いようでした。
試しにアプリ内容を入力する画面で色を指定してみましたが、「Your requirements」に反映されず、作成したアプリでも色は変更されませんでした。
ここではあくまで、アプリの機能についての指示を出すだけのようです。
Todoアプリを作りたいです。 必要な画面は4つで、Todo一覧画面、Todo作成画面、TODO更新画面、Todo詳細画面です。 Todoのプロパティは、ID、タイトル、優先度、期限、ステータスとしてください。 Todo一覧画面には、Todo削除ボタンを追加してTodoを削除できるようにしてください。 また、すべての画面で背景色はネイビーにしてください。
現状、AWS App Studioで完全に自分好みにUIをカスタマイズとまではいかないようです。
AWS App Studioの料金
最後にAWS App Studioの料金についてです。
現在、AWS App Studioを利用したアプリの作成、テスト、管理は無料で行うことができます。
料金が発生するのはアプリケーション公開後で、アプリケーションの使用に対して、1ユーザー1時間当たり$0.25の料金が発生します。
例)1つのアプリケーションを公開し、3のユーザーが1日2時間アプリケーションを使用する場合
1日あたりの料金は、1×3(users)×2(hours)×$0.25 = $1.5/日
また、この料金には、作成したアプリケーションに紐づけた、自アカウントの既存AWSサービスやその他サードパーティーサービスの料金は含まれません。
aws.amazon.com
まとめ
今回は「AWS App Studio」を使用して、完全にノーコードでアプリケーション開発を試してみました。
自然言語でアプリ内容を入力しただけで、アプリの要件からバックエンド・フロントエンドまでアプリケーション開発を
進めてくれるのは本当に驚きでした。
アプリケーション開発の劇的な効率化につながるサービスとして、「AWS App Studio」は今後さらに注目されていくだろうと感じています。
Acroquest Technologyでは、キャリア採用を行っています。
- Azure OpenAI/Amazon Bedrock等を使った生成AIソリューションの開発
- ディープラーニング等を使った自然言語/画像/音声/動画解析の研究開発
- マイクロサービス、DevOps、最新のOSSやクラウドサービスを利用する開発プロジェクト
- 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長
少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。