Welcome ! 👋

新しく作りたいアプリについて 先日、タイピングアプリ をリリースしました。 こちらはこちらでまだ改善の余地ありですが、新しくアプリ作っていきたいと思います！ うちの子どもたちが、昨年から家庭内で会社を立ち上げまして、親を相手に商売を始めました( ´∀｀ ) お手伝いチケットを紙で手作りして、何枚かつづりで売ってくれます。 例えば、「マッサージ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とかで使うとかなりシームレスに使えるのかな？ 大きな支障がない限りはこのまま進めてみます。 次回へ続く。

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

ブログを始めます。 以前、WordPressでブログを書いていたことがあります。 次第に書く頻度が落ちてきて、サーバー代払うのがもったいなく感じるようになったのでやめてしまいました。 今回は、維持費を抑えてまた再開してみます！ 構成要素 以前のブログでは、Xserverでドメイン＆サーバーを取って、WordPressを動かしていました。 今回の構成では以下を使用しました。 Hugo（静的サイトジェネレーター） PaperMod（Hugoのテンプレート） CloudFlare Pages（ビルド＆ホスティング） Github（ソース管理） CloudFlare Register（ドメイン取得） 以下、それぞれの構成要素について詳述します。 Hugo 以前のWordPressではDBとPHPサーバーが必要となるので、ちょっとオーバースペック気味でした。今回は簡単に作りたい。 後述のCloudFlare Pagesで動かしたい。 マークダウンで書けると嬉しい。 上記のような理由から適切な手段を探していたところ、静的サイトジェネレーターというものを見つけました。 マークダウンファイルから事前にHTML化しておいて、リクエストがきたらそのページを表示するだけ、という仕組みのようです。 WordPressのようにリクエストに応じてDBアクセスしてその場でページを作り上げる仕組みと違い、表示速度が速いようです。 シンプルで分かりやすくてよさそう！！ いくつかあるものから、Goでできていてビルド速度が速いと評判のHugoを使ってみることにしました。 Hugoではテンプレートが多数用意されているので、好きなものを選びます。 PaperMod いくつもあるテンプレートの中から、PaperModというものを選んでみました。 このテンプレートの選んだポイントは以下の通りです。 Githubのスター数を見て、人気が高めだった。 Githubで最終更新日が新しめで、長く放置されていない。（人気があってもすでに公開停止されているものが結構あった） カテゴリー表示やタグ表示など、必要十分の機能を備えていた。（テンプレートによってはカテゴリー表示やタグ表示に対応していないものもあるようです） CloudFlare Pages こちらは既に個人開発のアプリで利用しており、簡単にデプロイできることが分かっているため是非使いたいということで採用しました。 無料枠の中で十分使用できています。 Github こちらは定番。 CloudFlare PagesはGithubのリポジトリとブランチを選択するだけで、自動的にビルド＆デプロイができます。 また、ブランチに変更があったら自動的に最新化してくれるため、CI/CDを個別に書く必要なし！ ありがたすぎる。 CloudFlare Register 今回はここだけ課金してます。 最近、ドメイン代がどんどん高くなってますよね・・。 CloudFlare Registerではドメインを原価提供してくれているそうです。 他のドメイン管理サービスではキャンペーン価格で初年度無料などあるため単純に比較はできないのですが、長く運用するとしたらそんな大差ないだろうと、こちらを選びました。 サービスをまとめた方が運用がラクかなとも思いました。 お名前ドットコムでも別のドメイン持ってますが、正直、サイトが見づらくてあまり好きではないです。 最近の興味・関心 前からずっとやってみたかったこととして、個人開発にチャレンジしてみようと思ってます。 生成AIが登場し、個人での開発はだいぶハードルが下がってきた印象です。 加えて気軽に使えるBaaSなどお仕事の中で使う機会が増え、自信がついてきたというのもあります。 今年から業務の稼働時間を減らしたので、空いた時間でちょこちょこ開発していきたいと思います。 ライスワークとライフワーク、バランスよくいきたいですね。