みなさんこんにちは、パートナーサクセス の赤塚です。
先日企業サポーターとして参加したJAWS DAYS 2025 のブース企画「どこからきましたか？」アンケートについて、多くの方から反響をいただきありがとうございました！
こちらのブログでAWS App Studio を使った構築のポイントやつまずいた点を共有いたしますので、ぜひ多くの方に興味を持っていただけると嬉しいです。
「どこからきましたか？」アンケートを作った背景
CData は日本オフィスがある東北のコミュニティをはじめとして多くのコミュニティの活動を応援しています。
今回昨年に引き続きJAWS DAYS にスポンサー参加するにあたり、「せっかくならAWS に関連した目新しいもので参加者に楽しんでもらい、イベントに貢献したい。」との思いから社内でディスカッションを重ね、生成AI を使ってアプリ開発ができる App Studio を利用して「どこからきましたか？」アンケートを構築、JAWS DAYS のサポーターブースで実施することになりました。
選定のポイントとなった点は以下です
アンケートアプリのイメージ
データベースやSaaSのデータを簡単にREST APIとして公開！～CData API Server ポイント解説～
- データベースやSaaSのデータを簡単にREST APIとして公開
- OData、Swagger/OpenAPIに対応
- セキュリティ、認証、アクセス制御機能を搭載
製品資料を無料でダウンロード
アンケートアプリの構成
App Studio は標準で連携できるDynamoDB の他、様々なコネクターが用意されており、外部連携ではOpen API コネクターを使用して外部システムとの連携も可能です。
CData では様々なデータベースからREST API を自動生成できるCData API Server を提供しているため、検証も兼ねてアンケート用に用意したデータベースに対してREST API 経由で結果を登録する構成にチャレンジしてみました。
いざ構築！
当初は生成AI にプロントを渡してアンケートアプリの基礎能部分を生成し、差分の機能や見た目を編集すればパパッとできるはずなので「プロンプトさえ決まれば勝ったも同然！」と考えていました。
しかし、予め用意されているプロンプトを参考にいろいろと試行錯誤してみましたが、今回イメージしていたボタンがずらっと並んでいるようなUI の表現は難しそうなため、生成AI ではなくスクラッチで作ることに。
おそらく現時点でApp Studio が想定するユースケースやレイアウトとは異なる使い方だったのかなと思いますが、App Studio でできること・できないことがなんとなく分かったのは収穫でした。
構築手順
スクラッチでの開発とはいえ、実際にはApp Studio が提供しているUI やビジネスロジック、コネクターなどの部品を組み合わせて作れるため、構築の流れがつかめてくればCSS やコードを書く必要もなくハードルは高くありません。
しかも開発環境やプレビュー環境、テスト・本番環境まで用意されているので、普段開発に携わっていない自分でも安全に作業が進められる点は安心感があります。
1 EC2 上にインストールしたMariaDB からREST API のエンドポイントを生成
まずは事前準備として、REST API のエンドポイントとアンケートのデータを格納するためのデータベースを準備します。
こちらの手順については過去のブログ 内の「CData API Server の構築手順」で詳しく紹介していますのでぜひご活用ください。
- Amazon Linux 2023 にMariaDB をインストールしてDBを追加 (オレゴンリージョンのApp Studio を使用したため、レイテンシーを考えEC2 も同じリージョンで起動)
- CData API Server を配置して起動
- MariaDB からREST API のエンドポイントを生成
- 動作確認としてPostman からPOST リクエストでデータが追加できることを確認
2 App Studio 側にコネクターを追加
ManageメニューからConnectors を新規作成し、Open API コネクターを選択します。
- Open API コネクターに必要事項を登録
- CData API Server から取得したOpenAPI Specification (OAS) をインポート
こちらの手順については過去のブログ の「OpenAPI コネクターを作成」の項目で詳しく紹介していますのでぜひご活用ください。
CData API Server 側で自動生成したOpenAPI Specification をApp Studio 側に読み込ませるだけで、App Studio は今回作成したREST API の仕様を理解し、ノーコードでデータの追加や削除・更新などの処理が使える状態になりました！
3 App の新規追加
いよいよアプリケーションの構築です。
- 「Builder hub」で「Create app」をクリック
- 「Start from scratch」を選択
- 「Connector」は「Skip」を選択
4 Automation の作成
Automation はアプリケーション内で利用するビジネスロジックのことで、今回は参加者がやってきた都道府県のボタンを押すと、REST API のエンドポイントに対して POST リクエストを実行するシンプルな仕様になっています。
- パラメーターの項目でUIから送られてくるデータを設定
- Actions のタブから「Invoke API」をドラッグ・ドロップ
- Connector : 2の手順で作成したConnector を選択
- Configure API request をクリックしてAPI リクエストの内容を設定
Headers の項目
- Key : Content-Type
- Value : {{"application/json"}}
Body の項目
Automation の作成時に設定したUI から送られてくる引数 (parameters) をAPI リクエスト時に送信する設定を記載します。
{
"prefecture_name":params.prefecture_name,
"country_name":params.country_name,
"region_name":params.region_name,
}
参考までに、赤枠のOperation の項目でGETや POST などの選択ができない場合は、4の手順内のMethod の項目で設定すればOK です。
4 UI の実装
「Pages」タブに移動してアンケートの回答者にクリックしてもらうUI を作成していきます。
今回は会場でタブレットPC を使ってアンケートをとりたかったので、ボタンが並んだグリットレイアウトを表現したかったのでいろいろと試行錯誤をしながら画面を作っていきました。
- 回答者の選択肢となる都道府県ごとに画像とボタンをセットで1列のコンテナの中に配置
JAWS UG のロゴはGitHubで公開されているものを使用しました。
- 「Properties」タブの「Triggers」にて、「On click」イベントで UI 側から呼び出すアクションを選択
今回はボタンをクリックされると InvokeAddVoteAutomation を呼び出し、Navigate1 にてThanksPage に遷移するようにしています。
- InvokeAddVoteAutomation を選択し、都道府県名などの引数を設定
今回は単純に都道府県名、国名、地域名をテキストで渡すようにしました。
- 上記で作成したUI を47都道府県＋海外の選択肢の数だけ作成
5 テスト環境にデプロイして動作確認
画面右上の「PublishCenter」をクリックすると以下のような画面が表示されますので、「Publish」をクリックしてしばらく待つと動作確認用のURL が表示されます。
なお開発用の「Development」以外の「Testing」、「Production」環境は利用した分の料金がかかります。
60日間ものフリートライアルも用意されていますので良心的ですね。
6 QuickSight で集計・可視化
さいごにQuickSight で集計して出来上がりです！
地図の表示部分は「国名」「都道府県名」のように設定します。この場合アメリカの場合は「国名」「州名」と認識されていました。
以上で地図表示、都道府県（州）ごとのチャート、「海外」や「南関東」のような地域ごとのチャートが可視化されました。
イベント内で実際に使っている様子
以上でJAWS DAYS 用にアプリケーションは完成です。
ありがたいことに200名もの方にご参加いただき、JAWS DAYS のスケール感を感じていただけたのではと思います。
集計結果は前回のブログで紹介していますのでぜひご覧ください！
作ってみた感想
これまで何度か基本的な検証やチュートリアル、ハンズオンにはトライしてみましたが、1,000人規模のイベントで使用するアプリケーションを作成したのは初めてでした。
シンプルな機能とUI のため比較的スムーズに実装でき、本番でも安定して利用できた点がよかったです。
以下の点は構築時とアプリケーションを実際に使ってみた感想です。
ここが良かった
- ノーコード！
AWS のスキルはあってもUI の実装は専門外という方には、ノーコードでUI の実装ができる点はありがたいのではと感じました。
- AWS のアカウントがあれば使える
色々なノーコード・ローコードツールはありますが、AWS のアカウントを持っていればささっとアプリまで作れるのは意外と便利だなと思いました。しかも今回のようにイベントの時だけ課金が発生し、月額や年額での契約が不要な点は既存のSaaS を利用するよりもお得感があるかもと感じました。
- データ連携やS3 など様々なAWS のサービスとの連携のためのコネクターの開発が不要
コネクターの開発や保守が不要なのは工数の劇的な削減になりますよね。
- デプロイのためのパイプラインと分離された開発環境・テスト環境・本番環境が用意されていて保守・運用が不要
強固なビルドパイプラインがあることは Well-Architected で、エンタープライズグレードのアプリケーション開発には欠かせませんが、これを自前で構築・保守しなくて良い点はありがたいと思いました。
今後のアップデートに期待
- 作成したUI をコピーしたい
今回のように都道府県の数だけボタンを追加してアクションを設定する場合、繰り返し使う要素についてはコピーして利用できると便利かもと思いました。
- ボタンUI に画像を設定したい
今回ボタンのオンクリックイベントにアクションを設定しましたが、実際にアンケートを実施するとボタンではなく画像をクリックする方が多かったです。
なので、UI としてはボタンに画像を設定するか、画像自体にアクションが設定できるとより使いやすいアプリケーションになるのかなと感じました。
以上、今後もApp Studio の進化が楽しみです。
気になった方はぜひトライしてみてくださいね！
関連コンテンツ
