はじめまして、と、個人開発したウェブサービスを公開します
はじめまして
はじめまして。やまといいます
私が note にアカウントを登録したのは今から４年ほど前みたいです。１度も記事を公開したことはありませんでした
これがはじめての記事になります。よろしくお願いします
仕事はシステムエンジニアをしていて、今まで社内システムやBtoB、BtoCのシステムに携わってきました。ストレスがかかることもありましたが、開発が好きなので続けられています
個人開発について
これまでは自分や家族、友人に使ってもらうものを作ることはありましたが、こうして公開するのはこれがはじめてです
いろいろな人に使ってもらえると、もっと学びがあり、モチベーションにつながるのではないかと思い公開することにしました
飲み会の日程やお店の調整を行うためのウェブサービスです。コロナが落ち着いて飲み会の機会が戻ってきたので作ってみました。使ってみてもらえると嬉しいです
また不具合やご要望をお気軽にお知らせいただけるとありがたいです
機能としては
飲み会の概要の登録と編集
飲み会の日程の候補の登録と編集
飲み会のお店の候補の登録と編集（任意）
飲み会の公開、リンクのシェア
飲み会の削除
出欠の入力と確認
同じブラウザで閲覧した飲み会の一覧
別のブラウザで飲み会の編集と出欠の編集をするためのリンクの表示
とシンプルなものです。ログインも不要です
開発の振り返り
作ろうと思い立ったのは８月のはじめごろです。開発の期間はおおよそ２か月ほどです。もっと機能を追加したいのですが、現時点でいったん公開することにしました
開発に使ったもの
開発に使用したものを列挙します
フレームワーク、ライブラリなど
nuxt
tailwindcss
daisyui
サービス
cloudflare
supabase
その他のサービス
bitbucket
jira
circleci
開発に使った nuxt は仕事でも個人的にもいつも使っているものです
デプロイ先 cloudflare workers
nitro の preset に cloudelare_module を指定して cloudflare workers で nuxt を動かしています
ドキュメントに記載がありますが cloudflare_module は推奨されていないので今後に期待しています
開発していていくつか躓いた点があるので記載します
まず、環境変数の取得の部分です。ドキュメントに記載があるのですが
export default defineEventHandler((event) => {
const { secret } = useRuntimeConfig(event)
})のようにイベントを渡してあげる必要があります
次に nuxt dev で動いていた機能が wrangler dev では動かないことがありました。cloudflare workers のランタイムでは TextDecoder が utf8 しか対応していなどいくつか制限があります
あと無料プランではアップロードできるサイズの制限が 1MB までなことです
はじめは無料プランでいけるかなと思っていましたが、開発している途中で wrangler deploy でエラーになり、有料プランに移行しました
有料プランに移行したことで、少しでも個人開発の負担をなくすためと期待をこめて、お店のリンクにアフィリエイトを導入することにしました。このあと記載しますが supabase もそのうち有料プランに移行しなければいけません
あとになって nuxt analyze を実行して大きなモジュールを見直したり three shaking が有効になるように最適化することで 1MB 未満に余裕で収めることができました。ただ cloudflare workers をとても気に入りましたので有料プランのままにしています
最近ダッシュボードからログが見れるようになりました。より便利になっているのでこれからも使いたいと思っています
データの保存先 supabase
はじめは firebase を考えていたのですが、知り合いに supabase 良いよと教えてもらい使ってみることにしました
supabase start でローカル環境をコマンド1つで構築できること、データベース自体は postgresql なので普通に使う分には新たに覚えることは特にないところが良いです
はじめて使ったのですが、これといったはまりどころもありませんでした。このタイミングでデプロイする先も firebase から cloudflare に変更しました
データの保存先をどこにするか悩んでいたのでローカルストレージを使ってとりあえず動く形で進めていたのは良かったです
クライアントサイドから posgrest でデータベースにアクセスできますが nuxt を ssr で動かすことにしたので server に api を作成してアクセスすることにしました
いまのところデータの保持期間は最後に更新されてから３ヶ月ほどとしています。そのため1つだけバッチ処理があります。このバッチ処理は pg_cron でスケジュールしました
今回はデータベースとしてしか使わなかったので、次は他の機能も使ってみたいと思います
注意点として 5GB の bandwith の制限は月あたりではなく、トータルになる点でしょうか。いつかは有料プランに移行する必要があります
作業の進め方と jira、bitbucket
はじめて jira を使ったのですが、その使いやすさがとても気に入りました
余談になりますが、今までプライベートの Todo は Google の Todo を使って管理していたのですが jira と同じ atlassian の製品の trello に移行してしまいました
はじめにバックログに大雑把にタスクを登録して、期間２週間のスプリントで目標を決めて作業を進めました。平日は朝に１時間程度、休日は５時間程度の作業を行ったと思います
気になった細かい点はバックログに改善事項として残して次のスプリントに回して主となるタクスの消化を優先するように心がけました
bitbucket や slack との連携が簡単にできることも良いところです。ただ、bitbucket pipelines の無料枠でのビルド時間が 50分/月 なのが痛いです
2分ほどの pipeline を 25回しか回せない…。 GitHub に移行しようか悩んだのですが circleci を使うことにしました。無料枠が多いのとGitプロバイダーに依存しないのが良いです
おわりに
開発は楽しいです。これから機能追加や改善をしていきたいです
タスク管理をすることで、やるべきことの優先順位が明確になりメリハリをつけて作業が出来たと思います。やりすぎることも、やらなすぎることもなく、良かったです
デザインや画像の作成はやっぱり上手くできないです…。
はじめて note で記事を書きました。スマホのアプリも使いやすいですね。文書を書くのはあまり得意ではないですが、これからゆっくり、ゆるく記事を書いていけたらなと思います
これからよろしくお願いします