個人開発した賃貸物件検索サービスのシステム構成と使用技術
本記事で紹介している賃貸物件検索サービス Comfy は 2021/07/30 13:48 をもって閉鎖いたしました。使用していた物件データに関して、データの掲載元より利用許諾を得られなかったためです。本記事で紹介しているサービスが閲覧いただくことができなくなってしまい、大変申し訳ございません。本記事は、サービスに関する一部の内容を削除した上で、使用技術等に関する内容についてはいったんそのまま残しておきますが、近いうちに記事自体を削除するかもしれません。
個人開発で 賃貸物件検索サービス Comfy (上記サービス閉鎖に伴い、リンクを外しました) を作りました。
先週、リリース後の告知ツイートをしたのですが、幸いなことに多くの人にリツイート・いいねの反響を頂きました(リアクションして頂いた方、本当にありがとうございます…!!!)
この記事では、Comfy のシステム構成及び使用した技術・サービスを紹介します。
システム構成
図の通り、システムは大きく 3 つに分けられます。
- フロントエンド
- バックエンド
- スクレイピング基盤
上記 3 つのサブシステムについて、使用している技術をそれぞれ述べます。
フロントエンド
Comfy は一切ページ遷移のない SPA(Single Page Application) として作っています。
2021/07/28 現時点では Routing もない(URL が https://comfy.maison/ のみ)、ガチなシングルページのアプリケーションです。
フレームワーク
フレームワークとして Next.js + Preact を使用しています。
Preact は、React と全く同じシンタックスで書ける軽量版 React といったフレームワークです。多分 React に置き換えても全く問題なく動作します。
状態管理は、React の標準機能である Props と State のみ使用しています。
Redux, Recoil 等の状態管理ライブラリや React の Context は使用していません。
使用ライブラリ
-
Leaflet
地図の表示に使用しています。Google Maps 的なライブラリですが、Google Maps API が有料である今、無料で使える地図ライブラリの数少ない選択肢です。Google Maps API に似た API が整備されており、ドキュメントも非常に調べやすくかつ分かりやすく書かれていて、素晴らしいライブラリです。 -
chart.js
棒グラフの表示に使用しています。柔軟な表現力を持ち、美しい API を備えた素晴らしいライブラリです。 -
React Slick
物件ごとの画像ビューアに使用している、カルーセルのライブラリです。リリース 1 日前に使用し始めてまだ全く使いこなせていません。。。もう少しスムーズに動作させたかったりしますが、まだまだ使い倒す必要がありそう。
その他、スライダーやモーダル、セレクト、ハンバーガーメニュー等は自作コンポーネントです。
デプロイ先
静的サイトのホスティングサービスである Cloudflare Pages を使用しています。
Vercel や Netlify など他サービスも今まで使用してきましたが、無料プランで帯域制限がないのは Cloudflare Page のみだったことが今回の選定理由です。実際、使用帯域幅はリリース後 1 週間強ですでに 80 GB ほどいっているので正解だったなーと思っています。
Cloudflare Pages は使い勝手も最高です。個人的には、バックエンドの API サーバへの DNS と合わせて使うのにも最高だと思います[1]。
バックエンド
バックエンドは Ajax のリクエストを処理する API サーバとして機能します。
言語・フレームワーク
Python3 で動作させています[2]。Web フレームワークとして Python ベースの FastAPI (+ Uvicorn + Gunicorn) を使用しています。
色々な高速化の工夫をしていますが、何か特殊なライブラリやサービスを使っているわけではありません。あらゆるチューニングがそうであるように、ボトルネックとなる処理に対して様々な高速化を施していき、そういった細かいチューニングをたくさん積み上げているだけです[3]。そしてまだまだ高速化できる余地はたくさんあるので、今後も引き続きチューニングしていく感じです。
高速化の特殊な処理・サービスの利用をしていると思った方には期待はずれの答えかもしれず、すみません。工夫は非常に多岐に渡るのでここには書ききれませんが、コンピュータサイエンスの様々な知識と、書籍『ハイパフォーマンス Python 』の内容がとても役に立っていることは間違いありません[4]。
使用ライブラリ
Python に標準で入っている RDBMS の SQLite を使っています。ただし SQLite は必要最小限の使い方しかしていません(リリースする数日前くらい前までは、SQLite は使用せず全てファイルシステムベースでいこうと思っていたくらい)。
処理すべきデータはなるべくメモリに乗るようにして、メモリには乗りきらない一部のデータのみ SQLite に乗せて参照しています。
デプロイ先
バックエンドは GCP (Google Cloud Platform) 上の GCE (Google Compute Engine) で動かしています。
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) でも十分高速に動作するのを確認しているのですが、一度本番環境で使用してみたところ instance group 内でじゃんじゃんスケールアウトして大変なことになってしまったのでw、暫定的に e2-small にしています(そのうち対応して e2-micro にしたい)
-
なお、選定に当たっては CatNose さんによる比較記事 をめちゃくちゃ参考にしました。 ↩︎
-
著者は Python が大好きです。 ↩︎
-
色々積み重ね過ぎて、もはや超シンプルな検索エンジンを自前実装しているような感じになっています。 ↩︎
-
高速化に関して書けるネタ・話せるネタはたくさんあるので、今後の記事執筆、イベント登壇などでちょいちょい表に出せればと思っています。 ↩︎
Discussion
驚くほどレスポンスが速く、使い勝手も非常に良いサービスだなと感じました。
質問させてください。上記利用規約の第17条(禁止事項)にて以下のとおり記載があります。無許諾ということでこちらの禁止事項に抵触するように思われたのですが、どのようにお考えでしょうか?
記事を読んで頂き、コメントまで頂きありがとうございます。
そして利用規約に関してのご指摘、ありがとうございます。
スマイティさんのデータを利用するにあたり、僕もそちらの条項を拝読しています。
僕は法律の専門家ではないので、利用規約の法的効力などについては詳しくありません。
ただ、今回公開した Web サービスと利用規約との関連についてもっとも大事な点は「スマイティさんにとって不利益となる行為かどうか」という点ではないかと考えています。
この Web サービスは、スマイティさんにとっての競合などではなく、「検索部分をユーザさんにとってより快適なものとした上で送客をする」という位置づけにあります。つまり、競合や不利益ではなく、スマイティさんの利益となるように設計しています(少なくとも現時点では)。データの利用に関しての著作権法での位置づけに関しては、「このサービスについて」の「使用している物件情報に関する注意」に記載いたしましたので、もしよろしければそちらもご覧頂ければと思います。
ただし、僕の気づいていない点でスマイティさん側の不利益になる行為が絶対にないとは言い切れません。もしくは本サービスの運営自体で気付かぬどなたかにご迷惑がかかっているかもしれません。
「このサービスについて」という箇所に記載をした通り、万が一スマイティさん及びデータの著作権者の不利益につながることがある場合には、サービスの即刻停止など然るべき対応を取る所存です(なお、2021/07/28 現時点ではスマイティさんからの問い合わせはありません)。
また、このまま無断でデータを使用させていただくのは、挙げていただいた利用規約の点などサービスの運営に納得感がないユーザさんに対しても不誠実な点と言えるかもしれません。それは絶対に避けなければいけないと考えているので、可能な限り迅速に、直接コンタクトを取りご相談させていただいた上で承認を頂きたいと考えています。そして安心してユーザさんにご利用頂けるサービスとして運営していきたいと思っています。
長文となりすみません。もしよろしければ、たろすけさんのご意見・お考えもお聞きできれば幸いです(もちろんお返事いただかなくてもだいじょぶです!!)。
どうぞよろしくお願いいたします。
返信ありがとうございます。
規約にあることを承知のうえで禁止事項を犯しているとのことで、率直に申し上げ、技術者倫理に欠ける振る舞いと感じました。
スマイティに益するサービスを目指すのであれば、規約に則りまずは同意を得た上でデータの収集を開始するのが筋かと思います。
また少し調べただけでもスマイティにとって不利益となりうるケースは想定できます。
~【注意】物件情報の無断掲載はトラブルの元~ などご参照ください。仮に許諾が得られていても、最新の情報の即時反映ができない仕組みのように見受けられました。