まじめに学ぶタッチタイピング
🔗 アプリへのリンク
このアプリは、子どもたちにタッチタイピングを効率的に習得してほしいという思いで開発しました。
必要最低限の内容で、スピーディーに学ぶことができます。
ここでタッチタイピングを習得したら、寿司打のスコアもアップするかも！？
技術構成
アプリを公開するにあたり、以下の技術を使用しました。
開発環境・使用言語
- 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からフォーしたエディタで、会話しながらコードを修正してくれる模様。
対象のソースを指定して、これに対して修正してという指示ができるのは便利そう。
操作感がVSCodeと変わらないのはよさそうだけど、エディタかえるのは正直ハードルが高い。
移行はよさそうでも、帰ってくるのがしんどそう。
Cline（クライン）
VSCodeの拡張機能でカーソルと同じようなことができる？という程度の理解です。
カーソルよりよさそうかなーという印象なので試してみたいです。
bolt.new（ボルト）
言葉でアプリの説明を定義すると、全自動で勝手に作ってくれるというものらしい。
良いという噂は聞くけど、どうだろう？
自動生成されたコードの可読性とかメンテナンス性については気になるところ。