ホテル比較
ポイントトラベル
MarriottとHiltonのポイント宿泊候補を、地域や条件、地図から探せる静的サイト。施設一覧、確認済みの詳細、座標、写真を分けて管理し、絞り込んだホテルを地図にも反映する。日付別の必要ポイントや空室は自動取得せず、予約時の確認先へ案内する。
公開サイトを見る （新しいタブ）
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| Astro | ホテル一覧と施設別ページを静的に生成する。施設データをビルド時にまとめ、公開ページでは条件選択に応じて表示を切り替える。 |
| JavaScript | 入力された地域やキーワードなどでホテルを絞り込み、表示中のカード情報を地図側へ伝える。条件変更のイベントで表示を更新する。 |
| Leaflet | 出典と確認日を持つホテル座標を地図へ描画する。画面上の候補に対応するピンだけを表示し、施設詳細へのリンクも置く。 |
| MarkerCluster | 近接する複数のホテルのピンをまとめる。地図の拡大に合わせて個々の候補を確認でき、同じ地域の密集を整理する。 |
| Cloudflare Workers | Astroが生成した静的アセットを配信する。ホテル情報の閲覧には都度サーバーで検索する処理を置かない。 |
処理の流れ
施設データをまとめる
公式一覧と確認済みの詳細を施設単位で合わせ、座標や写真の出典情報を別に保持する。
条件で候補を絞る
キーワードなどの条件でカードの表示を切り替え、現在見えているホテルの識別子を集める。
地図へ同期する
地図を開くとLeafletを読み込み、絞り込み結果に対応するピンをクラスタに再配置する。
実装の工夫
根拠を持つ施設データ
元の施設一覧、確認した設備や住所、座標、写真を別のデータとして管理する。座標には出典URLと確認日があり、地図のポップアップから確認先へ進めるため、表示位置の根拠を追える。確認内容を更新するときも施設ごとに記録を見直せる。
一覧と地図の同期
ホテルカードの表示状態から対象施設を集め、地図のピンを更新する。条件を変えた後に地図だけ古い候補が残ることを避け、一覧で見つけたホテルの位置を同じ絞り込み結果の中で確認できる。地図側は表示中の識別子を使ってピンを再配置する。
地図を必要時に読み込む
地図を初めて表示する段階でLeafletとクラスタ表示のコードを読み込む。地図を使わず一覧を探す場合は地図の初期化を待たずに閲覧でき、密集した施設のピンは拡大に応じてまとまる。初回表示後は条件変更に合わせて同じ地図を更新する。
構成と制約
- 日付別の必要ポイント、現金料金、空室は自動取得せず、公式予約先での確認が必要。
- 地図の位置は収録した座標とその確認時点に依存し、全施設に同じ詳細情報が揃うとは限らない。
実装確認：