4
1

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

Last updated at Posted at 2024-06-25

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

この記事を読む前に..
遠鉄バスについて既にご存じの方はこの章をスキップ!
動作画面だけ見たいって人は,ページの一番下までスキップ!!

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

モバイルアプリ「遠鉄バスどこ!?」
乗車バス停と降車バス停を入力すると,そのルートを通るバスが,あとどのくらいで乗車バス停に到着するのかを確認できるアプリ

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

さっそく作っていく

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

全体概要図

システム概要図.png

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

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

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

API作成

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

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

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

作成した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ではすべてのコードを公開しています

Koyebにデプロイ

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

実際の動作画面

  • セレクトボタンで選択し検索する様子

サンプル映像.gif

  • ライトモードとダークモードの切り替え機能の追加もしました

サンプル映像_ダークモード.gif

GitHubリンク

2024/7/2 更新

先日7月1日に,遠鉄バスの公式HPがリニューアルされており,はるかに使いやすく遠鉄バスどこ!?のPC版が作成されていました...(少し複雑な気持ち)

マイページ紹介

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1