年末年始で個人開発をしたけど、プロダクトとして完成しきれなかった話
要するに
-
2週間超のお休みを取得して個人開発をしたけど、プロダクトとして完成しきれなかったという話。
-
個人開発の中で「開発をしないためのアプローチ」を採用しまくったという話。
-
Steamでリリースされている「Core Keeper」がとても面白いので、みんなにやってもらいたいという話。
はじめに
2022/12/23(Fri)から2023/01/09(Mon)まで、2週間以上の長期休暇を取得しました。目的は、個人で代表をしているエストニア企業「Omus Bridge OÜ」のプロダクトとコーポレートサイトの開発を行うことです。というのも、本年にまたエストニアに戻りたいのと、ぼちぼちちゃんと企業活動したいと思ったからですね。
実際のところはこの休暇を全部個人開発にあてられたわけでなく、大掃除したり、プライベートのあれこれしたり、エストニアのVisaの申請をしたり、なんだかんだ日本で勤めている会社でのタスクや連絡があったり、ブログの執筆とかをしていたので、実質10日感程度をなんとか個人開発にあてられたという感じではあります。
よくある「個人開発やりましたドヤァ」な映える記事ではなく、その成功の影にある有象無象の失敗談のひとつみたいな記事です。個人開発、難しいなぁ。ちゃんと作りきれる人、本当にすごいと思います。
作りかけたもの
実際作りかけているのは、こちらの webサイトとなります。
非常にシンプルなwebサイトですが、凝るところには凝っています。
なお、詳細な機能等については、完成した暁に、別の記事で紹介したいと思います。
技術選定
私は非常に怠惰な性格であり、開発はおろか、個人での運用もままならないことは、これまでの人生経験から十々に理解しております。そのため、スタートは本当にミニマムに進められることを最優先に、技術選定を行いました。
Hosting + Storage(User assets)
Cloudflare Workersを採用しました。
これは少し前に個人サイトをnotionに移行して、Cloudflare Workersを使って独自ドメイン対応したことが理由です。ドメインはムームードメインで管理し、DNSにはCloudflareを使う形式にしています。管理に使用するサービスが多すぎると辛いので。
なお、Nuxt3であれば、presetを指定すれば簡単にデプロイできるのもありがたいですね。実際には簡単じゃありませんでしたが。
また、UGCなアセットの置き場としても今後使用していく想定です。
DB + Auth + Edge Function + Storage(Own assets)
Supabaseを採用することにしました。
Firebaseのように、色々な面倒事を包含してくれていてとても助かりますね。とはいえ、この子はいまのところwebサイト上のアセット置き場としてしか使用していないです。ガッツリ実装するまで行かなかった...
Frontend + Backend
Nuxt3を採用しました。
今回は個人開発なので、フロントエンドフレームワークとしてでなく、フルスタックフレームワークとしての採用です。serverディレクトリ配下でシンプルにAPI書けるのはとてもありがたいですね。型定義とかアーキテクチャを使い回せるので、そこを整備する時間を大きく短縮できました。
CI
CIはGitHub Actionsです。Nuxt3にCloudflare workersにデプロイするためのCIが公開されているのもあり。
少しテコ入れしないと動かせなかったのですが、テコ入れしたら動きました。テコ入れに時間かかったけど...
UI Framework
これにはInklineを使ってみています。
テスト済みで、且つNuxt3に対応しているありがたいフレームワークです。しかもStorybookを公開していて、どんなコンポーネントが使えるかもすぐに分かります。scssとの組み合わせが非常に簡単なのもとても助かりますね。
Docs
ドキュメンテーションには、Notionを採用しました。
Micro CMSを使うのも検討しましたが、私くらい怠惰になると、もはやCMSでコンテンツを書くのですら面倒です。先にも言及した自分のサイト配下に、ドキュメンテーション用のページを作りました。スマフォからでもポチポチできるし、結果もリアルタイムに反映されるのでとても楽ですね。ちなみにこれを機に、タスク管理ツールもHabiticaからNotionに移行しました。
Form
Formには Noway Form を採用しました。
まだβ版とのことで動作確認をしたうえで使用しましたが、Notion連携ですぐにFormを運用できるのでとても楽でした。強いて言うならDocsがもう少し充実してほしかった。
Analytics
Analyticsには、Google AnalyticsとNotionlyticsを採用しました。
前者は語るまでもないですが、後者はNotionで使えるAnalyticsツールということで、サクッとお試しに。3ページまでが無料とのこと。
Roadmap
Roadmapを表現するために、 volta.net とGithubを活用しています。
これは Nuxt Supabase moduleが公式Webサイトで採用していたアプローチなので、それを参考にしました。プロジェクトの進捗を、ユーザーが簡単に見れるようになるのは、とてもありがたい限りですね。
また、Githubのissues templateには、新しくできたβ版の機能を活用しています。普段使いには面倒だけど、issuesに規約持たせたいOSSとかにはよさそう。
調査
時間がかかったのはやはり上記技術選定に伴う事前調査でした。おかげで、スタックを決めてからは割りとサクサクと後続の工程に移れたと思います。技術選定と調査までで2日程度使ったと思います。
デザイン
脳内にある程度のデザインはあったので、デザインツールを用いたデザインはしませんでした。ここに凝ると無限に時間がかかるので、Inklineとかに乗っかりつつ、無視できるところは無視しました。なので、ここには0人日をかけました。
環境構築
Cloudflare Workersへの環境構築は、公式DocのActionsがそのままだと動かなかったので、ここに1日前後費やしました。
コア機能のバックエンド実装
次回の記事で紹介する、このWebサイトにおけるコア機能の実装と検証は、フロントエンド開発の前に行いました。が、本来nodeで動くライブラリや関数がHMRでは動くにも関わらずCloudflare Workersの本番では動かないという事象が発生し、大きく時間を要しました。また、そもそもとしてnitroを扱ったAPI構築にも少しだけ時間をとりました。この工程には、トータルで2日程度費やし、フロントエンドの開発に移るまでで、全体の半分以上の工数を持っていかれました。
フロントエンド開発
フロントエンド開発は、Nuxt3での開発経験がすでにあり、自社のアーキテクチャを流用した(※弊チームでは条件付きでこれを許容しています)ため、比較的スムーズには進められたと思います。一方でマークアップにこだわった部分も少しあり、そのためにトータルで4日程度を費やし、これにて10日間の作業がタイムアップしてしまいました。
振り返り
諸般の事情で開発に集中し切ることはできず、タイムアップすることになってしまいましたが、それでも忙殺されていたこれまでの期間に比べれば、かなりの進捗があったのは事実です。マイルストンを切手のRoadmap管理もはじめたので、1月中には皆様にある程度お見せできるプロダクトがつくれればいいなと思っています。
進捗には"Core Keeper"がいいぞ！
現在、SteamでEary Access版がリリースされているCore Keeperというゲームがあります。マインクラフトのようなサンドボックス + 2D RPGのようなゲームで、とても面白いです。年末にこのゲームを見つけてしまい、このゲームで遊んでしまったせいで進捗が少なくなってしまったという一面は否定できません。 このゲームは、人類のクリエイティブを刺激し、進捗にプラスの影響を与えるに違いないと思われますので、エンジニア各位は是非とも 沼にハマって 楽しんでみてください！
Discussion