ログインユーザー登録
トレンド質問OrganizationイベントQiita Blog
Python
JavaScript
gcp
React
個人開発
262
151
記事の改善
編集リクエストを送る
記事の情報
編集履歴編集リクエスト一覧LGTMしたユーザー一覧Markdown で本文を見る
どのような問題がありますか？
@choo

投稿日

更新日

【個人開発】爆速な賃貸物件の検索サービスを作った

PythonJavaScriptgcpReact個人開発

個人開発で 賃貸物件の検索サービス Comfy を作りました1。グラフや地図でサクサク絞り込める UI が特徴のサービスです。とにかく気持ち良い使い勝手を実現するために色々工夫しています。

comfy_20211130_light.gif

既にリリースからは 4 ヶ月以上経っているのですが、改めてサービスの概要や、システム構成及び使用した技術・サービスをご紹介しようと思います。2。

サービスの概要

Comfy は日本全国の賃貸物件を検索できる Web サービス です。画面 UI は上の GIF 画像のような感じです。
こだわったポイントを色々書くよりも実際にさわって頂いた方が新感覚の UI や気持ちよさを体感頂けるかと思いますので、 実際のサービス をぜひお試し頂ければ幸いです！

システム構成

Comfy_System_Architecture_20220401.png

図の通り、システムは大きく 3 つに分けられます。

  • フロントエンド
  • バックエンド
  • データ基盤

使用技術は図の通りではあるのですが、フロントエンドとバックエンドについてはもう少し詳細に紹介いたします。

フロントエンド

Comfy はページ遷移のない SPA（Single Page Application） として作っています。

フレームワーク

フレームワークとして Next.js と Preact を使用しています。
Preact は、React と全く同じシンタックスで書ける軽量版 React といったフレームワークです。多分 React に置き換えても全く問題なく動作します。

状態管理は React の標準機能である Props と State のみ使用しています。
Redux、Recoil 等の状態管理ライブラリや React の Context は、特に必要と感じていないため使用していません。

使用ライブラリ

  • Leaflet
    地図の表示に使用しています。Google Maps 的なライブラリですが、Google Maps API が有料である今、無料で使える地図ライブラリの数少ない選択肢です。Google Maps API に似た API が整備されており、ドキュメントも非常に調べやすくかつ分かりやすく書かれていて、素晴らしいライブラリです。
    Leaflet では表示する地図を選択できるのですが、OpenStreetMap というフリーの地図ソースを使用しています。
  • chart.js
    棒グラフの表示に使用しています。柔軟な表現力を持ち、美しい API を備えた素晴らしいライブラリです。
  • React Slick
    物件ごとの画像ビューアに使用している、カルーセルのライブラリです。初期リリースの 1 日前に選定し、あまり使いこなせていないまま今にいたります…　もう少しスムーズに動作させたかったりしますが、まだまだ使い倒す必要がありそう。

その他、スライダーやモーダル、セレクト、ハンバーガーメニュー等は全て自作コンポーネントです。

デプロイ先

静的サイトのホスティングサービスである Cloudflare Pages を使用しています。
Vercel や Netlify など他サービスも今まで使用してきましたが、無料プランで帯域制限がないのは Cloudflare Page のみだったことが今回の選定理由です。実際、使用帯域幅はリリース後 1 週間強で 80 GB ほどいったので正解だったと思っています。
Cloudflare Pages は使い勝手も最高です。個人的には、バックエンドの API サーバへの DNS と合わせて使うのには特に最高だと思いました3。

バックエンド

バックエンドはフロントエンドからのリクエストを処理する API サーバとして機能します。

言語・フレームワーク

Python3 で動作させています4。Web フレームワークとして Python ベースの FastAPI (+ Uvicorn + Gunicorn) を使用しています。

高速化の工夫をかなり色々と頑張っています。Elasticsearch や Solr などのライブラリや Algolia 等のサービスは使っていません5。色々なチューニングと同様、ボトルネックとなる処理に対して様々な高速化を試行錯誤してみて、細かいチューニングをたくさん積み上げていった感じです6。リリース後もたくさん対策を実施しており、まだまださらなる高速化の余地もたくさんあるので、今後も引き続きチューニングしていこうと思います。
工夫は非常に多岐に渡るのでここには書ききれませんが、強いていえばコンピュータサイエンスの様々な知識と、書籍『ハイパフォーマンス Python 』の内容がとても役に立ちました7。

使用ライブラリ

Python に標準で入っている RDBMS の SQLite を使っています。ただし SQLite は必要最小限の使い方しかしていません8。読み込むデータはなるべくメモリに乗るようにして、メモリには乗りきらない一部のデータのみ SQLite に乗せてディスクを参照するようにしています。
その他バックエンドに関しては全て自前実装です（たしか…書き忘れていたら追記します…）。

デプロイ先

バックエンドは GCP (Google Cloud Platform) 上の GCE (Google Compute Engine、AWS でいう EC2) で動かしています。
GCP で使用しているサービス・機能は下記のとおりです。

  • Google Compute Engine
  • Google Cloud Storage
  • Google Cloud Load Balancing
  • Google Cloud Logging

当初は Docker コンテナベースの実行環境を想定していたのですが、コンテナが重く起動時間がかかることからスケールアウト時の起動の遅さが心配なため、GCE インスタンス上でそのままアプリケーションを走らせています。また、Managed instance groups を使って、負荷によってオートスケールするようにしています。

ちなみに、GCE のインスタンスは e2-small (2vCPU, 2GB RAM) を使用しています。e2-micro (2vCPU, 1GB RAM) でも十分高速に動作するのを確認したのですが、一度本番環境で使用してみたところじゃんじゃんスケールアウトしてインスタンス数が大変なことになってしまったのでｗ、それ以来怖くて e2-small にしています（そのうち調査・対応して e2-micro にしたいとは思っています）

まとめ

個人開発で、新しい賃貸物件検索の web サービス Comfy を作りました。
まだまだ色々改善すべき点も盛りだくさん9で、引き続き進化させていく予定です。今後は技術面でも積極的に発信していきたいと思っているので、疑問点や聞きたいことなどあれば、この記事のコメントや Twitter の DM など頂ければと思います。

ここまでお読み頂きありがとうございました。
もしよければぜひ、いいねやリツイートなど頂けるととても励みになります！！
よろしくお願いいたします！！！

  1. 2021年の 7 月に最初のリリースをしたのですが、色々あっていったん閉鎖した後 11 月に再リリースしました。 ↩

  2. この記事は、2021年7月の初期リリースの直後に Zenn に投稿した記事の大幅な改訂版になります。 Zenn の記事は 7 月のサービス閉鎖後しばらくして非公開にしたのですが、多方面から再公開のご要望を頂いたので、この度新たに書き直して公開することにしました。 ↩

  3. なお、選定に当たってはこの記事を参考にしました。 ↩

  4. Python 大好きなのです。 ↩

  5. もちろん、どんなに頑張っても速度出ないだろうという方針は最初から排除しています。そして結果的にはシンプルな検索エンジンを自前実装しているような感じになっています。。。 ↩

  6. 高速化に関して書けるネタ・話せるネタはたくさんあるので、今後の記事執筆、イベント登壇などでちょいちょい表に出せればと思っています。 ↩

  7. リリースする数日前くらい前までは、SQLite は使用せず全てファイルシステムベースでいこうと思っていたくらい。 ↩

  8. まだユーザさんの改善要望に関しても対応しきれていません…頑張ります！ ↩

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
choo
プログラマ。現職種は機械学習エンジニア。好きなプログラマは、ポール・グレアム、中島聡氏。 https://twitter.com/choo_s

コメント

choo@choo

@nuko-suke ありがとうございます！！誤った URL にしておりました…💦

www. が付くとサイトにアクセスできないみたいなので、www. を削除しましたー。 by nuko-suke 2022/04/03 10:42

1
yuuki_nyanko@yuuki_nyanko

サイト爆速すぎて驚きました！
使用感もめちゃくちゃいいです！
ありがとうございます！！

1
BxFCnO2Hqn3pDVp@BxFCnO2Hqn3pDVp

不動産情報の取得元の利用規約に反するのではないか、とか法的にアウトなんじゃないか、みたいなことをzennの記事でコメントされて、その後しばらくして記事とサービスを非公開にされていたと記憶しています。
このあたりはクリアされたんですね。
おめでとうございます。

3
beffell@beffell
（編集済み）

@choo
確かOpenStreetMapは、オープンデータとして地図データは自由に利用できますが、
タイルサーバーであるtile.openstreetmap.orgの利用は自由ではなかったと思います。

・参考
https://operations.osmfoundation.org/policies/tiles/

自分でタイルサーバーを立てるか、MapboxなどのOpenStreetMapベースのサービスを利用しなければ利用規約に違反する可能性があるかと思います。

1
choo@choo

@yuuki_nyanko さん
こちらこそ、わざわざコメント頂きありがとうございます！ とても嬉しいです！！😊
引越しの際などにぜひお役に立てればと思います！

0
choo@choo

@BxFCnO2Hqn3pDVp さん
コメント頂きありがとうございます！
はい、各方面色々な方にご協力頂き、問題解決して再稼働することができました！
覚えて頂いていてとても光栄です、引き続きよろしくお願いいたします！

2
choo@choo

@beffell さん、
ご意見ありがとうございます！！ 確認してみます！😊

0
uktt@uktt
（編集済み）

賃料を例えば「7～8万」を選択すると、ピンクの棒グラフ?がハイライトされます。それを隣の「9～10万」に条件を変えようとする場合、

  1. 非選択されている薄いピンクが見えずらい。
  2. 非選択されている部分が小さくてクリックしずらい。クリック可能領域を透明な長方形にし、その上にピンクなバーを表示するようにすればいいのではと思ったりします(Webのフロントエンドはよくわからないので、適当に言ってます)
  3. 「7～8万」と「9～10万」の範囲をOR条件で指定することかできない(できるのかもしれないけど、分からなかった)

あとあればいいなと思う点は、

  • 名前で検索し該当物件を選んでから、その物件の周辺を条件を変更しながら検索できるといいかも。似たような別候補を探す場合にあると嬉しいかもしれない。 <--- これは「今後の改善について」で実装する予定だそうです。見落としていました(スミマセン)。

以上が気づいた点です。それ以外は、非常に使いやすいと思います。

1
AngryMane@AngryMane

これ使いやすくていいですね〜。今度引っ越しする時使わせていただきます。

一点だけ改善要望が有ります。検索対象のエリア(自治体)を複数選択させていただけないでしょうか。
特定の自治体に住みたいというより、会社からの通勤時間がoo分以内の場所に住みたいので、その条件を満たす自治体を全て検索対象にしたいです！

2
hkcomori@hkcomori

とてもサクサクで気持ち良かったです。最近引っ越したばかりなので、次の機会には使いたいです。

広告等が見当たらないのですが、収益化の計画はありますか？
バックエンドは無料ではないと思うのですが、維持費はどう捻出されているのでしょうか。
とても良いサービスなので、長く続いてほしいです。

一点、要望があります。
絞り込み条件ごとのパーマリンク、またはCookieへの保存、またはファイルへのエクスポート・インポートがあるとうれしいです。
ページを閉じた後、やっぱりもう少し調べよう、と開きなおしたら、最初から絞り込みしなおしなのが悲しいです。

1
choo@choo

@uktt さん
コメント頂きありがとうございます！！そして貴重なご意見も大変嬉しいです！
棒グラフのクリックに関しては、ご指摘のとおりかと思いますので、対応を検討いたします！
（おそらく書いていただいた方法での対応がベストに思います…ありがとうございます！）

「7～8万」と「9～10万」の範囲をOR条件で指定することかできない(できるのかもしれないけど、分からなかった)

こちらに関しては、7〜10万の範囲は選択できるものの、複数の区間を OR 条件で指定することはできないようになっています。が…そのような使い方もご要望が多ければ対応を検討しようと思います！

最初に書いていただいた文面もメールで来ていましたが、ほっとして頂けてなによりです…！
引き続きよろしくお願いいたします！

0
choo@choo

@AngryMane さん
コメント頂きありがとうございます！:relaxed:

ご要望もありがとうございます！貴重なご意見を頂けて大変うれしいです…！

検索対象のエリアの複数選択、ご要望が増えつつあるので対応を検討します！

1
choo@choo

@hkcomori さん
コメント頂きありがとうございます！！大変嬉しいです…！！:relaxed:
ご要望も頂きありがとうございます！
絞り込み条件の保存に関しては、まさに今対応しているところです…！地図の条件などが色々ややこしく若干苦戦しているのですが、近いうちに機能追加する予定となっています。（次のお引越しの際には間に合うのではないかと思います…ｗ）
今後も長くサービスを継続していきますので、引き続きどうぞよろしくお願いいたします！

0
watya1@watya1
（編集済み）

再公開おめでとうございます！相変わらず爆速ですね！すごい！
以前の公開→非公開の流れは自分も勉強にさせていただいていました。
権利周りの問題はどう解決したのですか？(あまり言及したくない部分でしたらすみません・・・)

0
thangnv@thangnv

本当にAPIレスポンスが早くてすばらいいです。
勉強のためですけど、検索アルゴリズムとかを共有することが可能でしょうか？

0
どのような問題がありますか？
あなたもコメントしてみませんか :)
ユーザー登録
すでにアカウントを持っている方はログイン
記事投稿イベント開催中
新人プログラマ応援 - みんなで新人を育てよう！
~
データに関する記事を書こう！
~
すべて見る
262
151
記事の改善
編集リクエストを送る
記事の情報
編集履歴編集リクエスト一覧LGTMしたユーザー一覧Markdown で本文を見る
どのような問題がありますか？
ユーザー登録して、Qiitaをもっと便利に使ってみませんか

この機能を利用するにはログインする必要があります。ログインするとさらに下記の機能が使えます。

  1. ユーザーやタグのフォロー機能であなたにマッチした記事をお届け
  2. ストック機能で便利な情報を後から効率的に読み返せる
ユーザー登録ログイン
ストックするカテゴリー