とある日、北川宣浩氏のブログ「イケてる、モノ・コト」に掲載されていた「公共の宿サイト構築にDeep Researchを利用」・「公共の宿サイト構築にPowerShellを利用」という記事を読みました。
記事では、OTA（オンライン旅行会社）へのリンクを設置し、利用者がそのまま予約へ進める仕組みが紹介されていました。
それを見て、ふと、
「もしかして、自分でも旅行検索のWebアプリを作れるのではないか？」
と思ったのが、Travel Compass開発のきっかけです。
すでに私のポートフォリオサイトはWordPressをベースに構築しており、Webサイトを公開するための基盤はありました。また、以前には勤怠管理Webアプリも開発していたため、久しぶりに本格的なWebアプリ開発に取り組むことにしました。
目次
まずは「航空券検索」から
Travel Compassの基本構想は、OTAのように機能を
- 航空券
- ホテル
の2つに分けることでした。
第一段階では、まず「航空券」タブを作成しました。
出発地、目的地、片道・往復、搭乗日、人数などを入力し、検索ボタンを押すと航空券情報を取得して一覧表示する仕組みです。
当初は、航空券検索APIとして「Amadeus Self-Service API」を利用する予定でした。
しかし、2026年7月をもって個人開発者向けの利用が終了してしまったため、別の方法を探す必要がありました。
そこで代替手段として採用したのが、SerpApi（Google Flights）です。
無料枠では月250検索まで利用できるため、個人開発のTravel Compassには十分と判断しました。
導入にあたっては、Qiitaの記事も参考にしました。
世界約1000都市のIATAコードをデータベース化
航空券検索では、空港や都市を識別するためにIATAコードを使用します。
例えば東京の場合、TYOという都市コードが使われます。
ただし、利用者に「TYO」と入力してもらうのは使いにくいため、Travel Compassでは都市名を入力すると、自動的にIATAコードへ変換する仕組みを作りました。
例えば、
- 「東京」→
TYO - 「バンコク」→
BKK
のように変換します。
そのために、世界約1000都市のIATAコードをJSONデータとして整理し、MySQLデータベースへ登録しました。
さらに、都市名だけでなく別名や漢字表記などからも検索できるようにしています。
このIATA都市データベースは、今後の機能追加にも利用できるTravel Compassの重要な基盤の一つになりました。
検索結果から各OTAへ
航空券検索結果では、航空会社ごとにカード形式で表示するようにしました。
各カードには、
- 航空会社ロゴ
- 航空会社名
- Google Flightsの参考価格
- 各OTAへの検索リンク
を表示します。
利用者はTravel Compassで航空券を比較したあと、そのままTrip.com、Booking.com、Expedia、Agodaなどの予約サービスへ移動できます。
国内線の場合には、さくらトラベルやエアトリへのリンクも表示するようにしています。
Travel Compass自身が航空券を販売するのではなく、複数のサービスを比較するための入口として機能する設計です。
第二段階としてホテル検索を実装
航空券検索が形になったあと、次にホテル検索機能を追加しました。
「ホテル」タブでは、
- 宿泊地
- チェックイン日
- チェックアウト日
- 宿泊人数
を入力できます。
Google Hotels
SerpApi（Google Hotels）を利用し、ホテル情報を検索して一覧表示します。
航空券検索と同様に、都市情報を利用して検索できるようにしています。
楽天トラベル
楽天トラベルAPIを利用し、国内ホテルの検索結果を表示します。
Trip.com・Expedia
Trip.comとExpediaについては商品情報APIを使用せず、公式の検索機能やリンクを利用する構成としました。
これにより、一つの画面から複数のホテル検索サービスを使い分けられるようになりました。
実装にはAI（Codex）を活用
実装には、Visual Studio CodeにCodex拡張機能を導入して活用しました。
私自身が「どのような機能にするか」「どのAPIやサービスを利用するか」「検索結果をどのように表示するか」といった仕様や構成を考え、それをCodexに伝えてPHPやJavaScriptのコードへ落とし込んでいく形で開発しました。
実装後は実際に動作を確認し、検索できない都市やリンク生成の問題などを見つけながら、その都度仕様を修正しています。
AIにコード生成を任せることで、細かな記述そのものよりも、「何を作るか」「どうすれば使いやすくなるか」という設計や改善に時間を使うことができました。
「好きなテーマ」で作ると開発が続く
これまでポートフォリオでは、履歴書自動作成Excel VBAや勤怠管理Webアプリなど、実用性を重視したシステムも制作してきました。
一方、今回のTravel Compassは、自分自身が好きな「旅行」がテーマです。
そのため、
- 「このサイトも検索対象にできないか」
- 「この都市名でも検索できるようにしたい」
- 「ホテル検索も追加したい」
と、自然にアイデアが広がっていきました。
開発そのものを楽しみながら集中して作業できた点は、これまでの制作物との大きな違いだったと思います。
機能を一つずつ追加していった結果、航空券とホテルを複数のサービスから検索・比較できるWebアプリとして、Travel Compass V1.2まで完成しました。