元旦だからAI使って半日でおみくじアプリ作った（が、自分の技術不足を痛感した件...）
はじめに
本日は元旦なので初詣に行っておみくじを引いた方も多いのではないでしょうか？
私は初詣にも行かず実家に引きこもっており、おみくじも引いてなかったので、1月1日の朝に「せっかくだしAI使ってサクッとおみくじアプリでも作るか」と思いついたのでやってみました。
結論
AIを使って作成した結果、見た目はそれなりにいいアプリになりましたが、私の技術力不足で、おみくじが毎回同じような出力になってしまうなど、ちゃんとしたおみくじアプリには仕上げられませんでした（おそらく今回採用したNext.jsへの理解が足りてない...）。
半日ではちゃんとしたアプリを仕上げられませんでしたが、もっと勉強をしていかなければならないと危機感を感じた1年の始まりの1日となり、元旦のうちにこの記事を上げることに価値があると思ったので勢いで投稿しました！
（正月は他にも色々勉強したいことがあったので、半日で実装するという制限を課して実施したため、不完全な状態で終わっています。）
アプリ紹介
以下がVercelにデプロイしているアプリになります。
「おみくじを引く」をクリックするとおみくじの結果が出力されます。
おみくじの結果出力にはgemini-1.5proの生成AIを利用しています。
上でも少し記載したように、毎回同じような出力が返ってきてしまうので、何かがおかしいです...
ただ、UIやアニメーションはそれなりにいい感じになってる気がします！
アプリ実装：雛形作成
bolt.newを用いて、アプリの雛形を作成しました。 もう既に触ったことのある方もあるかもしれませんが、bolt.newはプロンプトを与えるだけで、主にフロントエンド系のアプリを実装してくれます（Next.jsなどをサポートしているので、バックエンド側も実装可能と言えます）。
bolt.diy
bolt.newのオープンソース版も生まれたようで、こちらも楽しみですね。
「Next.jsでおみくじアプリを作って。おみくじを引いた結果は生成AI（Gemini）を使って出力させるつもりです。」というプロンプトだけである程度いい感じにアプリを作ってくれました。
その後、追加のプロンプトでアニメーションを追加・修正したり、Next.jsのバージョンを上げたりしました。
Next.jsのバージョンに関しては最新の15に上げようと思ったのですが、2025/01/01時点でbolt.newが利用してるAIモデルは「2024年3月」までの情報しか持っておらず、最新の情報がバージョン14と言われてしまいました。最初の指示でアプリが出来上がった際はバージョン13で作成されたので、13から14に上げることは指示を出してAIがやってくれました。
Geminiを呼び出すところまでは実装していませんが、固定のおみくじの結果を出すようなアプリとしては、十分満足なものが出来上がりました。
（APIキーを教えて、アプリを作るのもできるって情報をネットで見ましたが、そこはセキュリティの安全性などを懸念して、念の為自分で実装しようかなと思いました。）
作ったアプリはプレビューで挙動確認できますし、Netlifyへのデプロイもワンクリックでできるので、bolt.newを初めて触った時は非常に驚きました。
アプリ実装：コードを自分で修正
Geminiを使う部分などは自分でコードを修正しました。
といってもここでもAIは活用しています。AIエディタのCursorを使ってコードを修正したり、最新の情報を踏まえた回答やCursor上で解決できないエラーの解決方法を知りたい場合はChatGPTのSearch機能を使ったりしました。
以下におみくじを出力するためのプロンプトやGemini呼び出しする部分のコードを記載します。
Gemini呼び出し部分の実装
import { GoogleGenerativeAI } from '@google/generative-ai'
import { NextResponse } from 'next/server'
// Gemini APIの初期化
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!)
export async function GET() {
try {
// Geminiモデルの設定
const model = genAI.getGenerativeModel({ model: 'gemini-1.5-pro' })
// プロンプトの設定
const prompt = `日本のおみくじの形式で運勢を生成してください。出力フォーマットの例を参考にしながら全く新しい内容で結果を作成してください。結果出力時には以下の要素を含めて、総合運に沿った内容を作成してください：
- 総合運（大吉、吉、中吉、小吉、末吉、凶、大凶のいずれかをランダムに選択）
- 総合運の詳細
- 仕事運
- 恋愛運
- 健康運
- ラッキーカラー(ランダムな色)
- ラッキーナンバー(ランダムな数字)
- アドバイス
## 出力フォーマットの例
総合運：大吉\n
【総合運の詳細】勢いに乗る一歩手前。少しの勇気が、運気を大きく開花させます。迷いや不安を抱えていても、自分を信じて行動することで道が開けるでしょう。新しい挑戦や人との出会いが、思いもよらない幸運をもたらします。\n
【仕事運】周囲からの評価が高まり、自然とリーダー的役割を任されることが増えそうです。これまでの努力が形になり始める時期でもあるので、謙虚さを忘れずに結果を出し続けることで、さらなる飛躍が期待できます。\n
【恋愛運】思いやりの心が鍵となります。相手の気持ちに寄り添い、素直に感謝や好意を伝えることで、一層関係が深まるでしょう。シングルの方は、普段の生活圏から少しだけ足を延ばしてみると、思わぬ出会いがあるかもしれません。\n
【健康運】体調はおおむね良好。気候の変化や生活スタイルの乱れに注意しながら、バランスの良い食事と適度な運動を心がけると、さらに活力が高まります。少し早めの就寝を心がけると、翌日のパフォーマンスが大きく向上するでしょう。\n
【ラッキーカラー】赤\n
【ラッキーナンバー】8\n
【アドバイス】小さなチャンスほど見過ごさないようにアンテナを張っておきましょう。周囲の人々や身近な出来事から多くを学ぶ姿勢が、大きな成功への近道です。焦らず確実に積み重ねていくことが、今後の幸運をさらに引き寄せます。\n
`
// Gemini APIを呼び出し
const result = await model.generateContent(prompt)
const fortune = result.response.text()
return NextResponse.json({ fortune })
} catch (error) {
console.error('Error generating fortune:', error)
return NextResponse.json(
{ error: 'おみくじの生成に失敗しました' },
{ status: 500 },
)
}
}
Gemini APIの詳細な使い方などは以下の公式ドキュメントをご確認ください。
AIから出力されるおみくじの結果が毎回同じようになってしまうのはサーバー側からGeminiにリクエストを送る際に情報がキャッシュされているのかもしれません。Next.js 15からはfetchリクエストでのキャッシュ設定がデフォルトでキャッシュされないようなので、14から15にバージョンを上げたりしましたが、改善しませんでした。
この辺りはもう少しNext.jsの知識をつけないと何が問題かを見極めづらいなと感じています（知見がないとAIをフル活用してもパッと解決するのは難しそうでした）。
Vercelにデプロイ
Next.jsであれば、Github連携し、簡単にアプリをVercelにデプロイできます。
しかし、ビルド時に一部の依存関係などでエラーを吐いていたので、そこは解決するように色々直しました。
Gemini用のAPIキーは環境変数としてVercelに設定する必要があるので、そこは実施してます。
最後に
以下が本日のまとめです。おみくじアプリはまた後日、余裕ができたら改善をしたいと思います。
- bolt.newを使っていい感じにアプリの雛形は作れる→そのため思いついたアイデアからスピーディーにアプリを作れる→しかし、詰まった時やカスタマイズするときは技術的な知識が不可欠と強く実感（今回のような簡易的なアプリでも）
- RAGなど色々の手法もあるが、最新の情報を踏まえてAIの回答をしてほしい場合は学習済みの情報と比較すると、やはりAIの回答精度が弱く感じる
- フロントエンドの進化が早いので、追いつくのが大変→Next.js11くらいの頃に少しだけ触っていましたが、バージョン15になって色々変わりすぎているなと実感しました。ユーザーにすごいなと思ってもらえるアプリを作るためにはUI・UX部分も非常に大事なので、時代のトレンドに追いつけるように頑張ってキャッチアップしていかなければならないと強く感じました。
今回は少し中途半端な結果の記事となっていますが、AIサービスなども一部紹介しているので、どなたかの参考になれば幸いです。
いろんなキャッチアップを行いつつ、アウトプットをしっかりできる1年に出来ればと思います。
Discussion