🔗 アプリへのリンク

かねてより興味があったタロット占いのアプリを作ってみました。 1枚でサクッと占ったり、10枚でじっくり占うこともできます。

このアプリを作った経緯としましては、最近うちの子供がタロット占いにハマっておりまして、カードの意味を覚えたり、カードを組み合わせてどのように解釈するか、といったところの練習になるといいなと思い開発しました！

アドバイスの部分は、生成AIを使って自然な文章で提案してくれるようにしました。

技術的なこと

以前公開したタイピング練習用のアプリ の基本構成と同じ、Next.js＆Cloudflare Pagesを採用しています。 ほどんと同じなので、異なる部分のみ記載したいと思います。

ちなみにこちらは現時点（2025年3月末時点）のものであり、まだまだ改善点がありますので変わる可能性ありです。

Next.jsのAPIルート

タイピング練習用アプリ においては、フロントエンドのみの構成でした。 今回のアプリでは、生成AIのエンドポイントをたたく必要があったため、セキュリティのためにAPIルートを使用しました。 Cloudflare Pagesにデプロイすると、自動的にCloudflare Functionsとして動作させることができました。

ただ途中、ビルドがうまく通らなかったので、Next.jsのバージョンを15→14に落としました。

Cursor（AIコードエディタ）

月$20の課金をして、Cursorを導入してみました。 ものすごい速さで画面を作り上げてくれて、驚愕です。。 結構メンタルやられるレベルで速いですねww

バージョンは0.47.8を利用。 直近アップデートがあり、これまではComposerとChatが分かれていたところのUIが、統合されたようです。 チャットでのやり取りの中で、適宜Agent（自動でコーディングしてくれるモード）とAsk（質問モード）を使い分けられるようになっています。コンテキストが分断されることなく使い分けられるのがとてもいいですね。

生成AI（Gemini2.0 Flash Lite）

初めて自作アプリの中に生成AIを組み込んでみました。 今のところは無料枠で全く問題ないです。

使ってみた感想としては、ドメイン制限やレートリミット、入力文字のサニタイジングなど、結構考えることが多かったです。 普段の業務では、組織内で使うアプリに組み込む程度で、悪意を持ったプロンプトへの対応を想定していないことが多いため、勉強になりました。

まとめ

• タロット占いアプリ を公開しました。
• Cursorを使った開発の速度は爆上がり！！
• アプリに生成AIを積極的に組み込んでいきたいです。