お祝い事プランナー - AIで簡単お祝い準備ガイド
はじめに
お祝い事の際の準備をまとめてアドバイスしてくれるアプリ、「お祝い事プランナー」を個人開発しました！
自社開発企業でこれまで3年間プログラムの経験を積んできましたが、個人開発は初となります。これまで、アイディア出しから開発のプロセス、構成などを全て自分で考えることは無かったためとても良い経験となりました。
開発時の工夫、困ったこと、学んだことなどをこの記事で共有できればと思います！
📱 アプリの概要
「お祝い事プランナー」は、人生の大切な節目のお祝い事の準備をAIがサポートするWebアプリケーションです。各お祝い事(結婚・出産・子育てなど)に関するお祝い事の準備物・準備過程・関連行事・推奨日程をAIが分かりやすくガイドします。
💭 開発のきっかけ
まず、アプリの開発のきっかけになったのはJISOUというプログラミングコミュニティに参加し、何かReactを使用し作るという課題をもらったからです。
そこで、生活の中で不便だと思っていることを解決するためのアプリが作りたいなと思いアイディアを考えました。
私は現在1歳の子どものパパで、もうすぐ2人目も生まれる予定です
子育てしていると、お宮参りやお食い初めなど、いろんなお祝い事がたくさんあって準備が大変でした😅
「AIにサクッと聞けば準備リストとか教えてくれるアプリあったら便利だな〜」って思ったのが開発のきっかけです！
また、育児のことだけでなくお祝い事全般、AIに聞けば準備をサポートしてくれたらいいなと思って開発を行いました！
👨💻 開発者について
- RubyonRailsエンジニアとして3年の実務経験
- プログラミングコミュニティ「JISOU」でReactを学習
- 初めての個人開発プロジェクト
🛠 主な機能
- AI powered: Google の生成AI（Gemini）を活用
- 準備ガイド: お祝い事に必要な準備の詳細な流れを提案
- 準備物リスト: 必要なアイテムを漏れなく表示
- 関連情報: 関連するお祝い事の提案
- スケジュール: 推奨される日程の提示
- お店情報: 近隣の関連店舗の案内
- カレンダー連携機能: icsファイル形式カレンダー、googleカレンダー、yahooカレンダーに対応しました
💻 技術スタック
フロントエンド
{
"フレームワーク": {
"vite": "5.4.8",
"react": "18.3.1",
"typescript": "5.5.3"
},
"UI/UX": {
"chakra-ui": "2.10.3"
},
"フォーム管理": {
"react-hook-form": "7.53.1"
},
"ルーティング": {
"react-router-dom": "6.27.0"
},
"テスト": {
"testing-library/jest-dom": "6.5.0",
"testing-library/react": "16.0.1"
}
}
バックエンド (Firebase Functions)
{
"ランタイム": "Node.js 20",
"AI機能": "@google/generative-ai 0.21.0",
"サーバー": {
"express": "4.21.1",
"cors": "2.8.5"
},
}
使用したAPI
📺 機能デモ
基本的な使い方
- お祝い事入力
お祝い事の出井と誰のためのお祝いか入力するだけでAIが準備プランを作成してくれます
- 準備リスト詳細
- 準備物リスト詳細
商品を探すボタンを押すと楽天で商品を検索してくれます
- 関連イベント詳細
各種カレンダーに登録もできます。
- 都道府県・市区町村を入力することで関連するショップを検索することができます
具体的なユースケース
- お宮参りの場合の提案例
- 七五三の準備スケジュール例
- 出産祝いのギフト選び方
🎯 開発での工夫点
GitHub Copilot Edits の効果的な活用
- 新機能の Claude 3.5 Sonnet を活用しました！簡単なプロンプトで意図した改修を行ってくれるため、とても便利です！
- コード生成の範囲が広いと、生成した分のコード理解に時間がかかってしまいました💦便利ですが、任せすぎは良くないと思いました
GeminiAPIへのプロンプト
- まず仕様を考える段階からJSONの形式でというのは頭の中にありました。
- JSONの意図した形式でgeminiから出力するために考えたプロンプト。(※ここは何度も試行錯誤しました基本はclaudeに考えてもらってます)
prompt = `
あなたは日本のお祝い事のプランニングエキスパートです。
「${text}」の準備プランを提案してください。
${who}のお祝いに参加する自分の立場に立って準備物やイベントを提案してください。
以下の形式で、JSON形式の返答のみを返してください：
{
"message": "お祝いの概要や全体的なアドバイスを記載",
"schedule": [
{
"date": "YYYY-MM-DD形式の日付",
"reason": "その日を選んだ理由"
}
],
"ready": [
"必要な準備項目1",
"必要な準備項目2"
],
"items": [
"準備物1",
"準備物2"
],
"events": [
"結納",
"前撮り",
],
"error": null
}
注意事項：
1. 必ず有効なJSON形式で返答してください
2. 日付はYYYY-MM-DD形式で指定してください
3. ${who}のお祝いに参加する自分の立場に立って提案してください
4. eventsには「${text}」は含めないでください。${text}に関連する前後のイベントや付随するイベントの名前のみを列挙してください
5. eventsの例：
- 「結婚式」の場合 → ["結納", "前撮り", "披露宴", "二次会"]
- 「誕生日」の場合 → ["前祝い", "当日パーティー", "記念写真撮影"]
- "出産祝い"の場合 → ["お宮参り", "お食い初め", "ベビーシャワー"]
6. readyは具体的な準備項目で考えられるものを全て列挙してください。最低5つ以上
7. itemsは具体的な準備物で考えられるものを全て列挙してください。最低5つ以上
8. messageは100文字以上で具体的なアドバイスを含めてください
9. エラーがない場合、errorはnullとしてください
10. eventsは最低5つ以上最高30個のイベントを提案してください
11. イベントの説明は具体的な内容と意味を含めてください
12. readyの準備項目は時系列順に並べてください
例えば「結婚式」の場合：
- ready: ["会場の下見", "招待状の準備", "衣装の選定"]のように具体的に
- items: 必要な準備物を具体的に列挙してください・身に着けるもの・持っていくもの・事前に準備するもの全てを含める
- events: ["結納", "前撮り", "披露宴", "二次会"]のようにイベント名のみを列挙
- schedule: 日取りの候補と理由を明確に
- message: お祝いの意味や準備のポイントを具体的に
返答は必ずこのJSON形式のみとし、追加の説明や会話は含めないでください。
`;
firebase functionsのCI/CD
- firebase functionsはAPIキーが必要なサービスに問い合わせをするために必要だったので使用しました
- CI/CDが一番苦労しました。firebase hostingはfirebase CLIが勝手にコマンドで用意してくれるので良いのですが、firebase functionsのCI/CDは書いてくれないのでいろいろ調べました
- まずこちらの参考記事を見たのですが、firebase login:ciで出力されるトークンを使用するのは非推奨になったみたいでした
- firebase functions CI/CDの記事はこちらにまとめさせてもらいました
https://qiita.com/yuuki4135/private/07916b2a7604ccff1762
APIの選定
- まず考えたのは、金額があまりかからないこと
- Google Places API: 地域に密着した店舗情報の提供に不可欠
- OpenWeatherMap: お祝い日の天候予測に利用。無料枠で十分なリクエスト数
- 楽天API: お祝い品の選定に活用。豊富な商品情報と使いやすいAPI
- Gemini API：プロンプトの自由度が高い(JSON形式出力ができること)・料金が無料なこと
技術の選定理由
-
React + TypeScript
- 型指定をして、開発時からエラーが出にくい
- コンポーネントの再利用性を重視
-
Chakra UI
- レスポンシブデザインの実装が容易
- カスタマイズ性が高い
-
Vite
- 高速な開発環境の構築
- ホットリロードが速い
バックエンド
-
Firebase
- インフラ管理の工数を減らしたかった
- Auth・Hosting・Functionsなど必要な機能が揃っている
- 無料枠での開発が可能
- スケーラビリティの考慮が不要
状態管理
-
React Hook Form
- フォームの状態管理に特化
- パフォーマンスが良い
- バリデーション機能が充実
💡アイデア出しの際たいへんだったこと
1. ユーザー価値を考えたアイデア出しをすること
- 自分が使いたい、他の人の作ったサービスは利用料金がかかるから自分で新しく作りたいなどのアイディアも他に出していました。でもそれはいづれ使われなくなってしまうものになってしまうと思い却下しました。
- 自分だけの問題ではなく、他の人にも共通する問題を解決するアイデアを出すことでユーザー価値が少しでも出るんじゃないかなと思い、今回のアイデアを選びました！
2. アプリの差別化がむずかしかった💦
- お祝い事関連のアプリって意外とたくさんある！関連行事を出すだけならlinebotでも作成されてました。
- でもAIを使った提案型のアプリは少なかったので、そこを突っ込んでみました！
3. 機能を絞るのに苦労した😅
- やりたいことはまだありました。
- ログイン機能・プロフィールをDBに保存し都度入力を最小限に・一度聞いた提案内容を保存などなど
- でも開発途中にとりあえず最小限の機能をと思い、絞りました。
📈 今後の展望
- 情報をその都度入力しなくて良いようにアカウント登録機能実装したい
- 提案された情報をDBに保存して保管できるようにしたい
- マネタイズをしたことがないので、アフェリエイトリンクなど設定したい
🔧 改善点
- レスポンス速度の最適化
- AIの提案精度の向上
- 情報表示の見やすさ改善
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからお願いします:下向き指差し:
https://projisou.jp