1 クリックでホテルの空き部屋を検索できる AKIBEYA を作ってみた

...と少々大げさな 1 クリック詐欺ですいません。

今回は googlemapsApi と rakutenApi を使って宿泊施設の空き部屋を検索できるアプリを作ってみたので紹介したいと思います。

作ったサイトはこちら「AKIBEYA.info」になります。

簡単な機能紹介

機能はとてもシンプルで下記の3項目を紹介します。

基本機能

上の Gif のとおり地図をクリックするとその周辺の「空き部屋」がある宿泊施設を検索してくれます。

「マーカー」をクリックし「予約ページ」をクリックすると楽天の予約ページに飛ぶ事ができます。

フィルタ機能

上の Gif のとおりメニューをクリックすると「検索オプション」サイドバーが出てきます。

検索オプションには次の種類がありマーカーを絞り込む事ができます。

  • 宿泊日
  • 宿泊人数
  • 部屋数
  • 宿泊料金

地名か住所から検索

「地名か住所から検索」欄にキーワードを入力すると「候補」が表示されクリックされた場所に移動し、空き部屋が検索されます。

なぜ作ったのか

さほど深い理由はありませんが下記の三つの理由になるかと思います。

  • 視覚的に空き部屋を検索したい
  • 楽天APIを使ってみたい
  • とりあえずリリースしたい

視覚的に空き部屋を検索したい

旅行の計画を立てる時にグーグルマップは、ほぼ必須だと思います。

私はいつも、とりあえず行きたい場所をグーグルマップに登録しマーカーを立てて行きます。

そして今度はそのマーカーを見ながら立地を考慮して宿泊施設を探して行きます。

色々条件を選択して予約ページまでたどり着きますが「すでに埋まっています。」と言う事があり、割とたらい回しにされました経験が何度かあります。(というのが先日の旅行のハイライト。)

なので、旅先との「距離感」が視覚的にわかって「予約可能」な宿泊施設が検索できたらな。

なんて思っていました。

楽天APIを使ってみたい

先日「個人開発」とかで検索していたら下記のサイトを見つけました。

【個人開発】リモートワーク時代なので、デスク周りに特化した写真投稿サービスを作りました

面白いですね。確かに youtube とかでもデスク回りを紹介する動画が結構増えた気がします。

ここで知ったのですが、楽天が出しているAPIがアフィリエイトにも対応しているらしいです。
なるほど、と思いRakutenDevelopers見ていたら緯度と経度を持っているAPIを発見しました。

それが「楽天トラベル空室検索API」でした。

とりあえずリリースしたい

Vue.js や GCP やデプロイ周りに時間を取りたいと思ったのですが、データを持つとどうしてもバックエンドの開発に時間が取られてしまいます。

今回はデータをすべて楽天のAPIに任せてとりあえずリリースまで持っていこうと思いました。

作成途中だった不動産検索サイトは緯度経度の情報を扱っていたので流用できると思い、バックエンドと余計な機能をそぎ落とすことでリリースまですぐにこぎつける事ができました。

最後に

実際直したい所や追加したい機能もありますが、リリースを目的としていたので今回はとりあえずOKと言う事にしています。

YouTube