タロットアプリを公開しました。

タロット占いアプリ 🔗 アプリへのリンク かねてより興味があったタロット占いのアプリを作ってみました。 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を積極的に組み込んでいきたいです。

投稿日: 2025-03-31

タイピングアプリを公開しました。

まじめに学ぶタッチタイピング 🔗 アプリへのリンク 🔗 アプリに対する思いはこちらに記載しました。 このアプリは、子どもたちにタッチタイピングを効率的に習得してほしいという思いで開発しました。 必要最低限の内容で、スピーディーに学ぶことができます。 ここでタッチタイピングを習得したら、寿司打のスコアもアップするかも!? 技術構成 アプリを公開するにあたり、以下の技術を使用しました。 開発環境・使用言語 Visual Studio Code Next.js TypeScript App Router Tailwind CSS 今回はフロントエンドのみの構成としました。 ソース管理 Github デプロイ Cloudflare Pages Githubのブランチを指定すると、自動でビルド&デプロイまでしてくれます。 今回初めて使いましたが、非常に便利です!! 個人レベルでは無料プランで十分です。 ビルド回数が月500回までの制限があるので、そこだけ意識しています。 デプロイ先の選定にあたっては、以下を考慮しました。 商用利用できること(広告はったりしたい) 無料プランだと商用利用できないところが多い。 従量課金ではなく定額であること いつの間にか金額が増えてた!を気にしたくない。 上記の条件を満たしていれば課金しても良かったのですが、無料プランで対応できたのはありがたいです。 ドメイン取得 Cloudflare Register 今後アプリ増やしていきたい思いですが、アプリごとにドメインをとるか、サブドメインで分けて増やしていくかは悩んだところ。 一旦はサブドメインを増やしていくこととし、評判良いものができたら切り出してアプリ固有のドメインをとる方向でいくことにしました。 長く使っていく想定なので、ドメインを原価提供してくれているCloudflare Registerを利用することとしました。 アクセス分析 Cloudflare Web Analytics Hotjar アクセス分析=Google Analytics の頭でいましたが、Cloudflare Web Analyticsというものを知り、そのまま使うこととしました。 こちらはあくまでサーバー側に届いたリクエストを分析するというものなので、Google Analyticsと得られる情報は異なるようです。 とりあえずPV数など簡易な情報が得られればよいので、採用することにしました。 Hotjarは、画面レコーディングやヒートマップ(画面のどこが頻繁にクリックされるか等)などを提供してくれるサービスです。 その他 今回、認証やDBは使用していません。ユーザー登録なしのシンプル構成としました。 アプリ内のメニューをどこまで進んだかを保存するために、ローカルストレージを使用しています。 ChatGPTにコード生成を助けてもらってます。課金はせずに、ブラウザの無料版のみ使用。課金するタイミング完全に見失ってる。 画面のスケッチとかはしないタイプの人間です。実装しながら画面作ってます。 アプリの中で使っている画像については、娘にお絵描きしてもらいました。 所要時間 2024年の年末あたりから着手し始め、お正月にぼちぼち開発していたのですが、公開までには全部合わせて1ヵ月くらいでした。 アプリの開発自体はAIが助けてくれたので比較的スムーズに行きましたが、デプロイ先の選定や、周辺で使うサービスの選定などに少し時間をかけました。 今後について ちゃんと生成AIに課金して、アプリ作ってもらうのを試したいですね。 以下、試してみたいプロダクト。 Cursor(カーソル) VSCodeからフォーしたエディタで、会話しながらコードを修正してくれる模様。 対象のソースを指定して、これに対して修正してという指示ができるのは便利そう。 ...

投稿日: 2025-02-09