1.はじめに
RUNTEQというスクールでWeb開発について学習しているくうたと申します。
卒業制作としてアイデア発想のためのアイデア研究所というアプリを開発しました！
2.サービス概要
アイデア研究所
GitHub
アイデアの発想と管理を可能とするアプリです。
ブレインライティング、マンダラート、オズボーンのチェックリストというアイデア発想のためのフレームワークが利用可能です。
アイデアの管理が可能です。
開発のきっかけ
RUNTEQのコミュニティのおかげで学習に前向きに取り組むことができたので、
RUNTEQ生の役に立つアプリを主題に考えました。
RUNTEQには卒業制作があり私を含めて全員がアプリアイデアに悩みます。
アイデアを思いつくこと、また思いついてもアイデアを深めることは難しいです。
アイデアに関する手助けとなることを目的に考えました。
3.機能紹介
🧠ブレインライティング
複数人でアイデアを発想する
回覧板のようにシートを回していき、前の人のアイデアを参考にアイデアを発展させていきます。
利用するシチュエーションによって2つの利用方法を用意しています。
発言が苦手なメンバーでも参加しやすいという利点があります。
X投稿版
自分が最初のアイデアを考え、それをXで共有して他の人にアイデアを追加してもらう機能です。
1つのシートを使い、順番に6行のアイデアを完成させていきます。
チーム利用版
複数人でアイデアを出し合う発想法です。
各参加者が自分のシートにアイデアを書き込み、次のラウンドで別の人のシートを見ながら新しいアイデアを発展させていきます。
Web会議での使用を想定しています。
📊マンダラート
個人で網羅的にアイデアを発想する
9×9の81マスのマス目にアイデアや目標を書き込んで思考を整理し、アイデアを発展させるフレームワークです。
キーワードを網羅的に可視化することで、新たなアイデアへとつなげることができます。
📋オズボーンのチェックリスト
個人で既存のアイデアから別視点のアイデアを発想する
既存の物事や課題に対して、「転用」「応用」「変更」「拡大」「縮小」「代用」「再配置」「逆転」「結合」の9つの視点から強制的に問いを立て、新しいアイデアを発想するためのフレームワークです。
様々な視点で考えることを可能とするため、斬新なアイデアを生み出すことができます。
こちらの機能はAIによる自動入力に対応しています。
アイデア管理
アイデアのカテゴリとカテゴリに紐づくアイデアを登録できます。
アイデアの登録は各フレームワーク利用中にも可能となっています。
4.使用技術
技術スタック
| カテゴリ | 技術 |
|---|---|
| フレームワーク | Next.js |
| UIライブラリ | React |
| 言語 | TypeScript |
| スタイリング | Tailwind CSS |
| アイコン | Lucide React |
| 通知 | react-hot-toast |
| データベース | PostgreSQL |
| ORM | Drizzle ORM |
| 認証 | Auth.js (next-auth) |
| テストフレームワーク | Vitest |
| テストライブラリ | Testing Library |
| カバレッジ | @vitest/coverage-v8 |
| Linter | ESLint |
| ビルドツール | Turbopack |
| パッケージマネージャー | npm |
| コンテナ | Docker |
| ホスティング/デプロイ | AWS Amplify |
| サーバーレス | AWS Lambda |
| AWS認証情報 | AWS Cognito Identity Pool |
| リアルタイム通信 | AWS AppSync Events |
技術選定の理由
選定の理由ですが、前提として、スクールではRuby,Railsを扱っていますが、自力でモダン技術をどこまで扱えるかを確認したいという学習の側面もあります。
Next.js,React,TypeScript
- コンポーネントベースの設計が今回のアプリにマッチする
適切にコンポーネントを利用できたと思います。 - TypeScriptが静的型付け言語である
Rubyで動的型付けを体感しましたが、C#での経験があるので、静的型付けの方が良い設計ができると思いました。
メソッドの役割が判別しやすいですし、体系的にコードを実装しやすいです。 - モダンな技術への興味
Drizzle ORM
- SQL風な書き方できる
Prismaとの2択でしたが、Drizzleの可読性を考えて選択しました。
素のSQLに慣れているので、SQL風な書き方が見やすいです。
実際使ってみても違和感なく使えました。
AWS(インフラ)
- 費用の問題
AWS無料枠を活用してコストを抑えられる点でAWSを選択しました。 - AWSへの興味
5.こだわり
ブレインライティング(チーム利用版)
最大6人で同時に行うブレインライティングを円滑に行うため、リアルタイム同期の仕組みを実装しました。
ホスト画面
画面リロードをせずとも参加者が増えれば一覧に表示されます。
|
参加者画面
ホストが開始を押下すると自動でブレインライティングが開始されます。
|
シート一覧画面
ブレインライティングが開始されると現在の担当シートがハイライトされます。ユーザーの回答が完了すれば自動で切り替わり、円滑なローテーションを実現しています。 |
|
実装詳細
参加者間でリアルタイムに同期させるため、
AWS AppSync Eventsによるイベント駆動型のアーキテクチャを採用しています。
AWS Amplifyのサーバーレス環境ではWebSocketサーバーを常駐させられないため、
マネージドサービスであるAppSync Eventsを選択しました。
シートのローテーションを例に挙げると、
- ユーザーAがシートの入力を完了し、サーバー側のAPIを実行する。
- サーバー側ではDBの更新と合わせてAppSync Eventsにイベントを発行する
- 他のクライアントが②で発行されたイベントを受信する。
- 各クライアントはAPIからシートの最新データを取得する。
- 画面が更新されて担当がローテーションする。
この実装により、サーバレス環境でも無駄なリクエストが発生するポーリングを避けることができ、シートの状態をリアルタイムに同期させることができました。
セキュリティ
AppSync Eventsへのアクセスには、サーバー側とクライアント側で異なる認証方式を採用しています。
サーバー側ではAPI Key認証を使用してイベントを発行し、クライアント側ではIAM認証を使用してイベントを購読（受信）します。
この設計により、クライアント側はイベントの「購読のみ」に権限が制限され、イベントの「発行」はサーバー側からのみ可能となります。これにより、悪意のあるクライアントが不正なイベントを発行することを防止しています。
クライアント側では、API Keyを保持するわけにはいかないので、クライアントにはCognito Identity Pool経由で「購読のみ」の最小権限を持つIAM認証情報を発行しています。
オズボーンのチェックリストのAI機能
オズボーンのチェックリストにはAIがテーマを元にアイデアを自動生成する機能を実装しました。
AIで自動入力ボタン押下でAIによって9つの視点からのアイデアを生成します。
|
実装詳細
AIによる自動入力機能では、AWS Lambda + AppSync Eventsによる非同期処理アーキテクチャを採用しています。
AWS Amplify Hostingでは、APIのレスポンスが30秒を超えるとタイムアウトします。
OpenAIのAPIの呼び出しが場合によっては30秒を超えるケースがありました。
そのため、リクエスト受付と実際のAI生成処理を分離する設計としました。
サーバー側ではDBの更新を行い即座にレスポンスを返却し、
実際のAI生成処理はAWS Lambdaで実行することで、タイムアウト制限を回避しています。
- ユーザーの「AIで自動入力」ボタン押下で、サーバー側のAPIを実行する。
- サーバー側ではDBにレコード（status: pending）を作成し、即座にレスポンスを返却する。
- AWS Lambda関数がOpenAI APIを呼び出し、アイデアを生成する。
- 生成完了後、結果をDBに保存し、AppSync Eventsに完了イベントを発行する。
- クライアントがイベントを受信し、最新データを取得して画面を更新する。
フローティングボタンによるガイド・アイデア登録機能
アイデアフレームワークの利用中にいつでもガイドの確認と、アイデアの登録が可能なようにしています。
各アイデアフレームワーク（ブレインライティング、マンダラート、オズボーンのチェックリスト）の右下に2つのフローティングボタンを配置しています。
フローティングボタンとは・・・ 画面をスクロールしても一定の位置に表示され続けるボタン
-
アイデア登録モーダル
フレームワーク利用中に思いついたアイデアを、画面遷移せずにその場で登録できます。 -
ガイドモーダル
各フレームワークの使い方を詳しく説明するモーダルです。
6.キャッチアップ方法
実装中はClaudeCodeを使用していますので、細かな構文というよりかは、言語、フレームワークとしての考え方を中心に学びました。
Next.js,React,TypeScript
隅から隅まで読んだわけではないですが主に以下の書籍を中心にキャッチアップしました。
プロを目指す人のためのTypeScript入門
改訂3版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
モダンJavaScriptの基本から始める React実践の教科書
また、RUNTEQ内にミニアプリWeekというものがあり、似た技術スタックでミニアプリを一本作って学習しました。
インフラ周り
Claudeを使いながらWebを調査し、適切な組み合わせを調べました。
特に今回はコストを抑えたかったので、その点も意識して調査しました。
7.今後の予定
まずはマンダラートにAI機能を追加したいと思っています。
開発したいずれかのアプリで収益化チャレンジもしたいと思っているので、
このアプリにする場合は、収益化のための機能も追加していきたいと思っています。
8.さいごに
ほぼ初めての技術スタックでしたが、AIを使用すれば特に問題なく実装可能でした。
一番苦労した点はインフラ周りでした。
特にサーバレス環境を選択したことによるWebSocketが使えない点と外部API利用時のタイムアウトの制限に対する対処が一番時間がかかりました。
使用にハードルがあるアプリかもしれませんが、
ちょっとでも触って頂ければありがたいです。
最後まで読んで頂きありがとうございました。