ねこでじ(Nekodigi)

Nekodigi’s diary

学習中の気づきをまとめています。応援よろしくお願いします

【Next.js,Node.js】バスの遅延をリアルタイムに反映する電車乗り継ぎアプリ

概要

他の経路検索サービスのYahoo乗り換えでは遅延が反映できず、Google Mapではそもそもバス停自体が登録されていないので、自分でアプリを作ることにしました。 出発地点を1ヶ所に限定しているので、スクレイピング先に負荷はかかりにくいですが、違う地点を追加するにはFirestoreに定義されているデータを変更する必要があります。 実際に自分で毎日使用しているので、UIはなるべくシンプルで見やすくなるようにこだわりました。

使い方

※予め指定した1ヶ所だけしか対応していません。 Bus-Train

基本操作

ページをロードすると、Firestore上のデータが更新され、更新が完了すると自動で表示も更新されます。データ更新は1分おき、クライアント側の時間更新は1秒ごとです。 移動にかかる時間と残り時間から危険度を計算し、赤,黄色,白の3色で示します。表示される時間は遅延を反映した後の時間で、(+)の部分に遅延が表示されています。

詳細確認

駅名やバス名が表示されているチップをクリックすると、詳細画面が開きます。乗り継ぎ時間の詳細が分かり、駅名やバス停名をクリックすると参照元のサイトに移動することもできます。

ソースコード

フロントエンド、バックエンドどちらも以下のレポジトリに含まれています。 github.com

使用技術

  • Firebase Hosting
  • Firestore
  • Firebase Functions
  • Next.js
  • Node.js
  • MUI
  • スクレイピング

    注意点

    Firestoreのバス停情報、駅情報を参照してデータを取得するので各自設定する必要があります。GithubのReadmeに概要を示しているので参考にして記入ください。

    改善が必要な点

    バスデータの取得部分などリファクタリングをした方が良さそうです。ページのリロードを連打した際、更新が過剰に呼び出される現象があり、トランザクションの使用を検討した方が良いかもしれません。