はじめに
今回、直感的にケーキの画像を作成できるアプリを開発しました。
このアプリでは、複数の選択肢からスポンジやトッピング、クリームなどを選び、その内容をもとに OpenAI が画像を生成します。
開発途中の段階ですが、今後のアップデートでは、さらに選択肢を増やしたり、機能を拡張したりして、より自由にケーキをデザインできるようにしていく予定です。
アプリ制作のきっかけ
知人がケーキの具材選びで迷ったり、どんな組み合わせにしたらいいか悩んでいる姿を見て、何か助けになるものを作れないかと考えました。
そこで、画像生成やAIの技術を試す題材としてケーキを選びました。ケーキは形や色のバリエーションが豊富で、AI生成のテストにも最適だったからです。
ユーザーが感覚的に思い描くケーキのイメージを、そのまま画像として作成できることを目指しています。
画面ごとの機能
1. ケーキ画像作成機能
2. 複数のテーマ選択
3. トッピング選択画面
仕様技術
- フロントエンド：React + Next.js + TypeScript
- UIライブラリ：TailWindCSS
- ホスティング：Vercel
- CI/CD：GitHub Actions
- テスト：Jest, React Testing Library
アプリ作成にあたって
今回ケーキ画像生成アプリを作成するにあたり、「トッピング選択機能」の実装に特に力を入れました。
Open AI APIを使用した候補出し
トッピングの候補を取得するために、OpenAI APIを利用してデータを取得する仕組みを構築しました。
テーマに沿ったトッピングの選択肢をOpenAIからJSON形式で受け取り、候補欄に表示するという流れです。
特に、OpenAIを活用することで、単純な固定リストではなく、テーマやユーザーの選択に応じた柔軟な候補を自動生成できる点が大きなメリットです。
これにより、ユーザーは思い描いたイメージに合ったトッピングを簡単に見つけることができ、より直感的にケーキのデザインを楽しむことができます。
アプリ制作についての気付き
AIを活用して開発を進めるのは今回が初めてでしたが、作成していく中で「なぜAIに頼りすぎるのはよくないのか」を実感しました。
AIを使うことで自由にデータを取得できる反面、エンジニア自身のスキルを十分に活かさずに済ませてしまう面もあります。
技術的な要素をほとんど使わずに作れてしまうことは便利ではありますが、同時に、現代の開発環境が大きく変化していることを実感しました。
まとめ
今回のアプリ作成を通して、AIを活用した候補出しや画像作成の経験を積むことができました。
他のアプリ開発にも共通して言えることですが、このアプリもまだ改善の余地が多く残っています。
今後の成長とともに、さらに機能を充実させ、より良いものにグレードアップしていきたいと感じています。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼
下記記事ではCSSの紹介ページを運営していますので参考にしていただければと思います。
▼▼▼