物件所有者が物件をアピール出来るツールを作った
スクリーンショット
プレイスオブ
https://www.placeof.app/places/cltcvtfo600006v77zjybp5ad
出来ること
- 物件保有者は「スペック情報」「特徴」「関与したクリエイター」などの細かい情報を入力できる
- また、その物件に関する「日々の投稿」をすることもできる
- その物件に興味を持った人は、「waiting list」に登録することができる
- 「waiting list」に登録すると、物件保有者と「チャット」ができる
技術構成
Next.js
Next.jsの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のデータを使わせて頂くことにしました。精度はともかくほぼ全ての国に対応可能なようです。必ずしも細かな精度は必要ないので助かりました。
i18n
Next.jsのi18n機能はURLの変更が要請されるため、react-i18nextでi18n機能を作りました。こちらの記事を参考に クライアントサイドとサーバーサイドで使っています。Zodとの連携もしています。hydration errorが発生しましたが、i18nextの設定に新しい言語ファイルを追加し忘れていただけでした。
なお、距離や面積の単位も国ごとに違うので、MySQLではメートルで保持し、見る方の国によって表示を変えています。
日々の投稿
こちらの写真家用の投稿サイトを参考にしました。異なる写真サイズ対応、モバイル対応、メタ情報、グリッド表示などなど。
TODO
- 関与したクリエイター周りの動的フォームをしっかり作る
- 「潜在的な買い手や借り手とつながる」世界観をより強く打ち出す機能の開発
まとめ
是非物件を登録してみてください
参考にしたサイト
Discussion