はじめに
こんにちは！meimeiと申します。
この度、「IDEA SPACE TRIP」 というアプリをリリースしました！
AIと一緒にアイデアを考えることで、アイデア出しが簡単かつ楽しくなるようサポートするサービスです。
具体的に考えたいテーマが決まっている場合にも、ちょっとアイデア出しのトレーニングがしたいなという場合にも使っていただけます。
サービスURL
GitHub URL
開発背景
個人開発アプリのアイデアや会社での企画案を考えているとき、
悩みや課題があって、どうしたら解決できるかな？と考えているとき
など、様々な場面でアイデア出しを行う機会があると思います。
そんな時にアイデアを出しやすくするために、アイデア発想法を調べて試してみたことがある方も多いのではないでしょうか？
しかし、アイデア出しに慣れていない人にとって、
「アイデア発想法って世の中にありすぎて、どれを使ったら良いのかわからない…」とか、
「やってみたけど、イマイチ使いこなせてないな…」
という状態になってしまいがちだと考えました。
自分含めたこうした人達のために、
- アイデア発想法のやり方を提示してくれる
- 自分で思いつけなくても、ヒントやアイデア案を教えてくれる
そんなアプリがあったらいいなと思い、「IDEA SPACE TRIP」を開発することにしました。
メイン機能① アイデア出しセッション
1. 考えたいテーマがあるか選択
2. 考えたいテーマがある場合は入力
1 で「Yes」を選択した場合、テーマを直接入力します。
3. 考えたいテーマが決まっていない場合はAIがテーマ案生成
1 で「No」を選択した場合、簡単な質問に答えることでAIがテーマ案を考えてくれるので、その中からテーマを決定します。
4. アイデア出し
オズボーンのチェックリストに基づいて考え方が提示されるので、思いついたアイデアを入力します。AIのヒントをもとにさらにアイデアを広げることも、回答例を見てそのまま採用することもできます。
メイン機能② 出したアイデアの整理
1. アイデアメモ一覧参照
アイデア出しセッションで保存したアイデアを参照できます。お気に入りに登録したものだけを参照する機能や、フリーワード検索機能もあります。
2. アイデアメモ編集・削除
主な使用技術
| カテゴリー | 使用技術 |
|---|---|
| フロントエンド | TypeScript 5.4.5 Next.js 14.1.0 React 18.3.1 |
| バックエンド | Ruby 3.2.2 Ruby on Rails 7.1.3.2 (API モード) |
| インフラ | Vercel / Fly.io |
| DB | PostgreSQL |
| Redis | Upstash for Redis |
| 認証 | NextAuth.js |
| CI/CD | GitHub Actions |
| 開発環境 | Docker |
| API | OpenAI API / Web Speech API |
| その他（フロントエンド） | ESLint / Prettier / Zod / shadcn/ui |
| その他（バックエンド） | Active Job( Solid Queue ) / Action Cable / RuboCop |
技術選定理由
フロントエンド
言語としては、型安全に記述できるため、TypeScriptを採用しました。
また、以下の観点からNext.jsのApp Routerを使用しています。
- React Server Components(RSC)を用いて、コンポーネント単位でレンダリング方式をSSRとCSRで分けることが可能
- ファイルベースルーティングによる開発効率向上
CSSに関しては、CSS Modulesを使用していますが、UIコンポーネントにRadix UIとTailwind CSSを組み合わせたshadcn/uiを採用したため、Tailwind CSSも導入しています。
shadcn/uiを採用した理由は、以下です。
- UIライブラリではないので依存関係としてインストールせず使え、コピペやCLIによって必要なコンポーネントだけ選んでプロジェクトに配置できる
- カスタマイズ性が高い
バックエンド
Ruby on Railsの採用理由は、通っていたプログラミングスクール「RUNTEQ」で中心に学んでいたものであるため、開発速度向上につながると考えたためです。
Active Jobのキューイングバックエンドには、 Solid Queue を採用しました。
理由は以下です。
- DHH氏が、Rails8ではデフォルトのActive Jobバックエンドとして
Solid Queueを採用することを提案しているようだということ
https://github.com/rails/rails/issues/50442 -
Sidekiqの場合、Fly.ioから利用できるUpstash for Redisでは、SidekiqがRedisにデフォルトで行うコールが大量にあり、数時間で１日の無料利用制限に達してしまうこと - 同じくDBを用いる
Delayed Jobより更新が頻繁に行われていること
インフラ・開発環境
Dockerを使用した開発
スクラップ&ビルドが容易なので、開発環境を段階的に構築していったり、修正を加えたりしやすいと考え、Dockerを用いて開発を行うようにしました。
また、フロントエンド、バックエンド、バックグラウンドワーカー、DB、Redisと多くのコンテナが必要となったため、Docker Composeを使用して、複数のコンテナを同時に操作できるようにしました。
自動デプロイ
Next.jsのVercelへのデプロイは自動で行われますが、RailsのFly.ioへのデプロイは、何も設定しなければ自動では行われません。そこで、GitHub Actionsを導入して、バックエンドも自動でデプロイされるようにしました。
Redis
Action CableのサブスクリプションアダプタとしてRedisを用意しています。
上記で紹介したのと似たようなインフラ構成がやりたいと思った方がいらっしゃったら、環境構築方法を以下の記事に書きましたので、よろしければご覧ください。
ER図
工夫した点
①UI/UX
1. アイデア出しの際のユーザー待機時間をなくす
アイデア出しの画面では、 OpenAI APIコールを行って、AIにヒントや回答を生成させています。この間もユーザーが思いついたアイデアをすぐ入力できるように、APIコールはバックグラウンドで行うようにしました。
これを実現するために、 バックエンドで行うジョブをキューイングして実行するActive Jobと、APIコール実行結果が返却されたことを通知する目的として Action Cableを使用しました。
2. ユーザビリティ
-
OAuthログイン
手間なくアプリを使っていただけるよう、所有率の高いGoogleアカウントによるログインを導入しました。
-
スマホ・PC 対応
レスポンシブデザインにすることに加えて、Mac/iPhone/Android端末実機確認も行うことでスマートフォンからもPCからも快適に使っていただけるよう調整していきました。
例えば、当アプリは背景に Aceternity UI(内部的にはtsParticles)を使用し、星が浮遊しているようなエフェクトをかけています。しかし、スマートフォンではこの機能がパフォーマンスを低下させたり、画面遷移時に星の光が不自然に伸びるなど、効果的ではないアニメーションになってしまいました。そのため、スマートフォンでは静止背景画像に変更する対応を行いました。
-
直感的なUI
ユーザーがストレスなく操作できるUIにすることを目指しました。
具体例としては、フォーム送信中はボタンを非活性にし二重送信防止措置を行うことに加え、透明度を上げ、視覚的にもボタンが押せない状態であることをユーザーに直感的に理解してもらえるようにしています。
②Lint・フォーマットチェック
pre-commit時にLintとフォーマットチェックを実行するために Lefthook を導入しました。
husky と lint-staged を使うことも検討しましたが、モノリポの場合の設定のしやすさがlefthookを採用した理由です。
③プロンプトエンジニアリング
AIから良い回答を得られるように、いくつかプロンプトエンジニアリングの手法を取り入れました。
1. Few-Shot prompting
プロンプト内に、具体的な回答例や出力形式を示す方法です。私の場合、1つ出力例を含めるようにしたことで、期待する結果を得られる確率が高まりました。
2. クリエイティブな回答を引き出す工夫
アイデアマンのペルソナ設定と水平思考で考えるような指示を含めることで、多角的な視点から考えた結果が生成されることを狙いました。
今後の展望
1. テスト
テストやカバレッジ計測できる環境は導入しているものの、開発中はあまりテストが書けていなかったため、テストコードを追加していきたいです。
2. リファクタリング
以下のメリットが得られるとのことで、Next.jsではComposition パターンを取り入れました。
- 依存関係のチェーンを浅くできる
- Client Component内にServer ComponentをPropsとして差し込むことが可能になる
開発の終盤で採用したので、リファクタリングしながら導入箇所を増やしていきたいと考えています。
おわりに
このアプリを作成するにあたって、相談に乗ってくださり、応援してくださった方々、アプリをご利用くださった方々、本当にありがとうございました✨
リリース後には、嬉しい感想をいただいたり、アプリを使ったことで良いアイデアが思いついたと言っていただけることもあり、大変だった開発の苦労が報われる思いでした。
まだまだ未熟な点が多いですが、今後も学習を継続し、このアプリを改善していくとともに、いっそう誰かの役に立てるアプリを開発していきたいです。
最後まで読んでいただき、ありがとうございました！