作ったもの
スクリーンショット
https://www.placeof.app/places/cltcvtfo600006v77zjybp5ad
出来ること
- 物件保有者は「スペック情報」「特徴」「関与したクリエイター」などの細かい情報を入力できます。また、その物件に関する「日々の投稿」をすることもできます
- その物件に興味を持った人は、「waiting list」に登録することができます
- 「waiting list」に登録すると、物件保有者と「チャット」ができます
技術構成
Next.js
全体的に使いやすいのでNext.jsにしました。とはいえ、このサービスには多種多様なフォームがありますが、Server Actionsはそこまで使っていません(contactページでは使ってます)。Intercept Routesは少し挙動が不安定な気がしますが、ひとまず使っています。今後に不安がないか、と言われれば何とも言えません。
PlanetScale/Prisma
これまではFirestoreを使っていましたが、機能が増えると「集計機能」「クライアントジョイン」周りがボトルネックになりやすいと感じ、SQLにもどってきました。ちょうど、水平スケール出来るMySQLであるPlanetScaleがあり、ピッタリでした。deploy requestをしてマイグレーションをする方式も違和感なく使えています。PrismaとDrizzleで迷いましたが、開発を始めた段階でPrismaの方が情報量が多く、出来ることもそこまで変わらないと感じ、Prismaにしてます。
Vercel
Cloud Runでリリースする予定だったのですが、Vercelが想像以上に使いやすくこのまましばらくは使い続ける気がします。Vercelの環境設定画面も、スペックを動的に追加する画面の参考になりました。
主なポイント
スペックを動的に追加する画面
「スペック名のサジェスト機能」をshadcnのComboboxを使って実装しました。こちらのissueが参考になりました。
また、「[C値]のときは、値の入力欄は[数字]」「[キッチンのブランド]のときは、値の入力欄は[文字列]」のようにしたく、ZodのsuperRefineを使って実装しています。
地図
地図は、Mapboxを使っています。その物件の郵便番号の中心点から半径数キロの円を描画し、大体この辺だよというのが伝われば良いかなと思いました。また、物件登録時に郵便番号で住所も自動入力した方が良いと思いました。
とはいえ、データを用意するのが意外に難しかったです。結局、GeoNamesのデータを使わせて頂くことにしました。精度はともかくほぼ全ての国に対応可能なようです。
ハザードマップなり国土地理院のベクトルタイルなりPlateauなりいろいろな不動産データを追加することも考えましたが、全世界のいろいろなサイトを調べて、ひとまずシンプルで良いかなと感じています。
i18n
Next.jsのi18n機能はURLが変更され、ディレクトリ構造も変わるため、react-i18nextでi18n機能を作りました。こちらの記事を参考に
https://zenn.dev/k0kishima/articles/956ba3f3dc9629
client sideとserver sideで使っています。Zodとの連携もしています。
なお、距離や面積の単位も国ごとに違うので、MySQLではメートルで保持し、見る方の国によって表示を変えています。
TODO
- 関与したクリエイター周りの動的フォームをしっかり作る
- 「潜在的な買い手や借り手とつながる」世界観をより強く打ち出す機能の開発
まとめ
是非物件を登録してみてください
参考にしたサイト
https://qiita.com/tak001/items/cfbaa9dcb542929ff235
https://zenn.dev/aiji42/articles/171f26af4e5b5c