はじめに
この記事では、サービスの開発過程を緩く紹介します。
苦労話はまた別の記事とします。
個人開発したサービスについて
HollowShelfieというユーザー投稿型VRイベント共有サービスを 2024年6月9日にreleaseしました。
https://hollowshelfie.com/home
空っぽ(Hollow) 棚(shelf) 自分で(selfie) 飾る。
HollowShelfie としました。
開発期間
初期構想 技術選定 画面レイアウト検討 開発
本業が忙しかったりしましたが。
時間ができれば開発するようにしてました。
様々なscrap＆buildを重ねtotalだと8ヵ月ほどだと思います。
大体の1日のタイムスケジュール
- 平日
- 9:00 - 業務開始
- 19:30 - 業務終了
- 20:00 - 個人開発開始
- 25:00 - 就寝
- 土日
- 11:00 - 起床、個人開発開始
- 25:00 - 就寝
:::note warn 毎日ではないよ。 :::
私の経歴
昨年8月に組み込み系からWEB系のに転職しました。
社会人歴9年目のweb系10ヶ月のポンコツ エンジニアです。
もともとプライム系企業の下請けで働いており 30年来の熟成されて黒魔術と化したシステムを 保守/運用/機能追加などしており 技術スタックが古い企業でエンジニアしていました。
転職時のスキルですが
- laravel (少し触れる)
- vue (少し触れる)
- css (tailwindcssが少し触れる)
- DB (生のqueryは書いたことがない)
- Git (mainしか使ってない。)
- api (api?? socket通信しか知らないよ。)
- アーキテクチャ (???? ddd????)
作るものを決めるまで
自分の特性からどういったものを作るべきか検討
私自身、下記の短所があります。
- 机に向かって勉強するのが全く好きではない
- モチベーションの維持ややる気が長続きしない
代わりに下記の長所があります。
- 自分のやりたいことについて時間をかけることは惜しまない。
そのため、時間を注いでも良い！と思うようなプロダクトでないと続かないと思ためそういったサービスを作ることを決めました。
素案ができたきっかけ
上記の特性を踏まえて下記の二点で探すことにしました。
- 自分があったらよいなと思うも
- みんなの役に立ちそうなものはないか
: : まぁ なかなか出てこないですよね。
私は普段VRchatというVRゲームで遊んでおり そこでとある方に
「主催者や演者をソースにイベントを探す方法がないんだよね～～」と ボソッとつぶやかれたのがきっかけになります。
『これだ！！』となったわけです。
競合のリサーチ
VR界隈ではかなりの認知を得ている VRCイベントカレンダーというサービスがすでにあります。
:::note info 日々50~80を超えるイベントが掲載されています。 公式アカウントのフォロワーも1万人を超えており こちらを認知で超えるのは無理だと思っています :::
勝てるわけないよね。。(´ω｀。)
とりあえずは勉強のため頑張ってみる
競合との差別化を探す
Google カレンダーがベースになっているため 検索性能や仕分けが行いにくそうだなと感じておりました。 また、イベント情報修正が行えないなどがあるなと
そこから差別化ポイントを洗い出し
- Eventを投稿者本人が自由に変更できる。
- Eventをカテゴリやタグ付けすることができる。
- Eventをいいねbookmarkできる。
- 検索の条件を多彩に設定でき、見つけたいイベントを確実に見つけることができる。
さらなる差別化を求めて
知り合いへのリサーチ
- イベントのフライヤーがユーザの目に触れる時間は少ないんだよね
- 拘って作ってるんだけどすぐうもれちゃう
- 個人の活動履歴追いにくいよね
:::note info ユーザのタレント化が進んでおり特定の人のライブやDJや演劇などを見に行くということもありました。 :::
リリース目標日の策定
最初は2月を目標にしたが本業が忙しく断念 6月を次の目標に設定。
実装したい機能の洗い出し
初めに大まかにどういった機能を入れたいかの洗い出しを行いました。
- Eventの掲載と自由な変更
- いいね
- bookmark
- タイムライン表示
- リッチな検索
- 通知
- チーム(グループ)
- フォロー
- プロフィール
- イベントの公募
- チケッティング
優先度を落とした機能
- イベントの公募 マッチング機能になるため実装するべきことが爆上がりする。
- チケッティング プラットフォーム周りでの制限りついての理解が必要 個人開発でお金周りの実装怖いよね。
- 通知 リリース目標までに間に合わなかった。
技術選定
キャッチアップが目的でもあるため 基本的に本業で使用しているものと似たstackにしています。
メインとなるものだけをピックアップします。
バックエンド
laravel
- 本業で使用しているメインFWのため
laravel jetstream
- 今回、認証周りのキャチアップを求めていなかったため全部入りのパッケージを使用しました。
- チーム機能やAPItoken発行機能などが画面付きで標準搭載されています。
laravel socialite
- OAuth認証を実装したく導入しました
- GoogleやDiscord認証ですね
laravel scout
- 全文検索を行うためのライブラリです
- 開発環境にlaravel sailを使用しているのですがインストール時に選択に出てきて気になって入れてみました。(笑)
- meilisearchを接続していますが後悔しています。導入が速すぎたと思っています。というのもコンテンツが少ないとおーばスペックですし apサーバーとは別にmeilisearchサーバーを用意する必要があり 余計にお金がかかってします。
laravel filament
- 開発の後半にいれた覚えがあります
- 管理用の画面を作成したかったのですが自前で用意するには時間がかかりすぎるためこちらのライブラリを使用しました
- dbのschemaをもとにある程度自動でCRUD形式の画面を生成してくれるため多少の手直しで十分動くもが作成できました
- 使い勝手もよくカスタマイズ方法が多彩で結果的に導入してよかったと思っている
フロントエンド
フロントエンド
- vue 3.x
- 業務で使用していたため
- inertiajs
- laravel jetstreamで作成する際に画面をvueで作成したい場合に自動で導入される
- tailwindcss
- こちらも同じくlaravel jetstreamで自動導入
- daisyui
- tailwindcssにいくらかのユーティリティコンポーネントを提供してくれる。
インフラ
- laravel forge 今回インフラについては勉強の対象外としたため どこかのPaasに乗っけることを前提としていました
- Sentry 本番環境で発生したエラーを追跡するために導入
できたもの
LPページ
- 様々なサイトのLPページを見てそれっぽくしあげました
デモイベントのページ
- カテゴリやタグをクリックすると検索ページに遷移
- タイムテーブルを表示して演者の出演時間をわかりやすく。
https://hollowshelfie.com/event/01hzy6gqfwfpcffct3x8dc828p/show
イベントの管理ページ
個人のprofileページ
https://hollowshelfie.com/@Sphere
チームのprofileページ
https://hollowshelfie.com/@HollowShelfie
振り返ってみて
リリースしてから思ったこと
まぁ全然使ってもらえない。
思ったほど伸びなかった
個人的にはかなり出来は良いかなと思っていたで話題になるかなとは思ってたのですが微風でした（笑）
反省点
マーケティングが全くできていなかった。
開発中もこういったものを作成中！だったり イベントなどに顔を出して主催者へのアプローチをしておけばよかったと思ってます。
今後はXなどでタイムラインに流れてきたイベントの主催者に直接許可をとって自分で転載するなどしてコンテンツを増やしていってみようと思ってます。
開発してみておもったこと
総じて、とても勉強になった。
一番身についたのは課題解決力だと思います。
いろんな課題にぶつかってそれを解決するための手法を探したり
公式のドキュメントやGithubのIssueを穴が開くほど眺めたりライブラリの中のソースを読んだりする経験ができました。
苦労話はまた別の記事としたいと思います。
- サービス名の変遷について買ったのに使わないdomain 4つも。。。
- seoがよくわかってなくて途中でSSRに変更したこと。
- 419エラーの解消にてこずったこと
- 全文検索(MeiliSearch)でネストした検索に苦労した話。
- 動的なfilterの生成の話。
- 記事通りlaravelのtz設定したら+9h 時刻がズレた話
- vue-formのスタイルが気に入らなかったからformの構築を自作した話
- tiptapをしようしたwysiwygエディターの構築
- 特定のページだけ502エラーとなってしまう。
最後に
こちらのポストをリポストしていただけるととても嬉しいです。