🚌

【静岡県民必見!?】遠鉄バスどこ!?(PC版)作ってみた

2024/07/02に公開

遠鉄バスどこ!? って何!?

静岡県では遠鉄バスと呼ばれる遠州鉄道株式会社さんが運営しているバスが広く普及している.
そのため,遠鉄バスは静岡県で暮らしている人なら一度は乗ったことがある(はずの)バスなのである.
そんないつもお世話になっている遠鉄バスには「遠鉄バスどこ!?」と呼ばれるモバイルアプリがある.

しかし,これはモバイルアプリなので当然PCなどでは確認できない.
公式のホームページに行くと,PCでも一応確認できるページがあるみたいだが,そこまでいくのになかなかのステップが必要だった.

さっそく作っていく

本記事では,コードの説明よりも,どのような仕組みで実装したのか概要を説明していく.

全体概要図

システム概要図.png

まずは,基本設計から.
このシステムは主に2種類のAPIが必要になる.

まず,遠鉄バス公式HPには,乗車バス停と降車バス停を入力すると,その区間のリアルタイムな運行情報を検索できるページがある.
そのページに自動入力して運行情報を取得し,json形式に整形したデータを返すようなAPIが必要である.

このAPIだけでも,「遠鉄バスどこ!?」のシステムとしては最低限動作できる.
しかし,ユーザー目線に立った時,「バス停の入力が手間」「正確なバス停の名前なんて覚えていない」などが予想される.また,個人的にも「ユーザーの入力ミスを考慮したデバッグ設計が面倒」などがあった.
そのため,現在地などの情報から周辺のバス停がリストアップされて,セレクトボックス形式で入力する仕様にすることで,解決されると考えた.
つまり,地域を入力すると,その地域周辺のバス停をすべて取得し,json形式に整形して返すようなAPIも必要となる.

API作成

作成したAPIは以下の2つである.

  • 遠鉄バスHPから最新のバスの運行状況を取得するAPI
  • 任意の地域のバス停を取得するAPI

前者は,遠鉄バスHPから取得し,後者はNAVITIMEのHPから取得した.

https://bus.entetsu.co.jp/

https://www.navitime.co.jp/

作成したAPIは以下のように,FastAPIを用いて作成した.

from fastapi import FastAPI
from _getbustable import GetBusTable
from _getbusstop import GetBusStop
from starlette.middleware.cors import CORSMiddleware

# FastAPIでAPI作成
app = FastAPI()
# CORS対策
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"]
)

# 遠鉄バスHPから最新のバスの運行状況を取得するAPI
@app.get("/latest")
def read_bustable(from_station:str, to_station:str):
    try:
        getbustable = GetBusTable()
        result = getbustable.get_bustable(from_station=from_station, to_station=to_station)
        return result
    except:
        return None

# 任意の地域のバス停を取得するAPI
@app.get("/busstop")
def read_busstop(erea:str):
    try:
        getbusstop = GetBusStop()
        result = [getbusstop.get_busstop(erea=erea)]
        return result
    except:
        return None

APIの細かな部分は説明すると長いので,興味のある人はGitHubのリポジトリまで飛んで見てほしい.
また,作成したAPIはGithub Railwayにデプロイすることで誰でも使用可能なWebアプリケーションとして作成した.

HTMLを作成

APIを作成したら,次は実際のページを作成して,APIを叩いてみる.

実際に作ったHTMLファイルを乗せると300行弱になってしまうので控えるが,ざっくり説明すると,乗車バス停と降車バス停をセレクトボックスで入力して,検索ボタンを押すと,現時点での運行状況が表形式で表示されるって感じの流れだ!
※Githubではすべてのコードを公開しています

Github Railwayにデプロイ

Github Railwayに作成したAPIをデプロイしました.
(時間があれば,また流れを紹介します.)

実際の動作画面

サンプル映像.gif

今後の予定

・ユーザーの位置情報から乗車バス停のセレクト候補を変更

GitHubリンク

https://github.com/haradakaito/EntetuBus_Stream

個人アカウント紹介

https://github.com/haradakaito

https://qiita.com/muumin_0525

Discussion