個人開発アプリでデータベースを使いたい。

新しく作りたいアプリについて 先日、タイピングアプリ をリリースしました。 こちらはこちらでまだ改善の余地ありですが、新しくアプリ作っていきたいと思います! うちの子どもたちが、昨年から家庭内で会社を立ち上げまして、親を相手に商売を始めました( ´∀` ) お手伝いチケットを紙で手作りして、何枚かつづりで売ってくれます。 例えば、「マッサージ10分券を10枚つづりで〇円」、「夕食作り代行券を5枚つづりで〇円」、のような感じです。 親としてはとても助かってます✨ 子どもとしても、前金でお金を受け取れるのでモチベーションが維持できるみたいです。 趣味でほしいものがあったら、あのお手伝いを〇回すれば買える・・のように逆算できるので良いですね。 ただ、チケットを作ったり授受したりするのが徐々に(お互いに)面倒くさくなってきたので、電子化したいという娘からの要望でした。 できれば通知機能とかを備えたスマホアプリ化したいのですが、一旦はMVPを備えたWebアプリとして実装してみたいと思います。 (スマホ用アプリは、テスト的に作ったことはありますが、実際にストアにリリースしたことはありません。おいおいやっていきたいです!) データベースを選ぶ 前回のタイピングアプリではデータベースを使用しませんでした。 今回作るアプリではデータベースが必要になります。 一旦は家庭内で使うだけだけど、よさそうなら一般公開できると嬉しい。 個人開発で無料から始められるデータベースサービスをいくつかピックアップしてみました。 Firestore(FirebaseのDB) 以前使ったことがある。・・が、NoSQLのツボをいまいちつかめなかった記憶がある。 Supabase Firestoreの代替サービスという位置づけらしい。最近はこちらの方が人気がある模様 RDBが使えるので違和感なく使えそう Neon PlanetScale(以前無料で使えてた)の代替として使っている記事がいくつかあった Cloudflare D1(CloudflareのDB) SQLiteベースのデータベース。 SQLiteとは、単一のファイルにどんどんデータを書き込んでいく方式のDB。簡易利用向け Cloudflare D1を使ってみる アプリをCloudFlare Pagesにデプロイしようと思っているので、まずは相性のよさそうなCloudflare D1を使ってみようと思います。 SQLiteは以前軽く学習目的で触ったことがあって、その時はあまり意識してなったのですが、実際にアプリに組み込もうと思うと結構制約が出てきそうです。 大規模な集計ができなかったり、同時並行で読み書きができなかったり、あたりでしょうか。 実際に無料枠で使ってみて、支障があるなら別のサービスに切り替えるようにしてみます。 課金体系と無料枠について D1の使用料金は、読み書きの行数(レコード数)と、保存されているデータの容量で決まるようです。 また、制限を超えるとクエリが実行できなくなって、課金すれば制限を解除できるとのこと。 途中で勝手に課金が始まる訳ではないのは良いですね。 無料枠は以下の通り。 読み取り行数:500万/日 書き込み行数:100,000/日 ストレージ:5GB 読み取り行数は、スキャンが走ったレコードの件数がカウントされる。1000件のレコードが入ったテーブルをフルスキャンすると1000とカウントされ、結合などでスキャンが走るとその件数分カウントされる。 適切にインデックスをはると節約できるようですが、インデックス更新は書き込み件数にカウントされる、と。 最初は慣れるまで時間かかるかな。実際にテーブルいくつか作ってみただけで何回かクエリ発行されてました。 実際に作ってみる 実際にDBとテーブルを作ってみました。 Cloudflareダッシュボード、「ストレージとデータベース」→「D1 SQLデータベース」→「作成」でデータベースを作成。 名前を入れるだけで作れました。 次にDBの中にテーブルを作成します。 列の型(タイプ)では、以下の4つしか選べませんでした! text(文字列) integer(整数) real(小数) blob(ファイル類) 日付とか、真偽値とか、もろもろtextに突っ込む形のようです。SQLiteってこんな感じなのね~。 これをPagesとかWorkersとかで使うとかなりシームレスに使えるのかな? 大きな支障がない限りはこのまま進めてみます。 次回へ続く。

Posted: 2025-02-17

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

まじめに学ぶタッチタイピング 🔗 アプリへのリンク 🔗 アプリに対する思いはこちらに記載しました。 このアプリは、子どもたちにタッチタイピングを効率的に習得してほしいという思いで開発しました。 必要最低限の内容で、スピーディーに学ぶことができます。 ここでタッチタイピングを習得したら、寿司打のスコアもアップするかも!? 技術構成 アプリを公開するにあたり、以下の技術を使用しました。 開発環境・使用言語 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からフォーしたエディタで、会話しながらコードを修正してくれる模様。 対象のソースを指定して、これに対して修正してという指示ができるのは便利そう。 ...

Posted: 2025-02-09