東急線の運賃計算ツールを作ってみた

こんにちは。
今回はツールを作ろうと思った話です。

何か簡単なWebアプリを作ってみようと思い、題材を考えていました。
そこで、東急線の運賃を計算できるアプリを作ってみることにしました。

自力ではWebアプリを作る方法がよく分からなかったため、ChatGPTに相談しながら簡単なものを作ってみることにしました。

大まかな仕組み

Streamlitを使って、Webブラウザ上で動作するようにしています。
Streamlitは、PythonでWebアプリを作るためのフレームワークです。今回は、作成した運賃計算プログラムをブラウザ上で動かすために使用しています。

【構造】
運賃表を用意する
路線図をグラフとして表現する
駅をノード、駅間の距離をエッジに設定する

【動作】
出発駅と到着駅を入力する
グラフ上で、出発駅から到着駅までの最短経路を探索する
求めた経路の総距離から、対応する運賃を運賃表から取得する
経路と運賃を画面に表示する

運賃をまとめるファイル、駅情報を入れるファイル、UIについてのファイルなど複数のファイルに分割して作成しました。

運賃表のリスト化

こちらに記載されている運賃表から情報を記載します。
基本的に運賃は出発駅から到着駅までの最短経路の距離で決まります。
世田谷線とこどもの国線は均一運賃で別計算のため、今回はその２路線を除く路線に対応させます。
東急新横浜線の新綱島～新横浜を利用する際は大人の場合50円の加算運賃がかかります。

路線グラフの追加

ここでは、路線図を「グラフ」として表現します。

グラフとは、簡単にいうと、駅のような「点（ノード）」と、駅同士をつなぐ「線（エッジ）」で構成されたネットワークです。
今回は、各駅をノード、駅と駅の間の線路をエッジとして扱います。さらに、エッジには駅間の距離を持たせました。

例えば、
A駅 ── 1.0 km ── B駅 ── 1.8 km ── C駅
という路線は、グラフとして表現すると、
A ── B ── C
のようになり、それぞれの線に「1.0 km」「1.8 km」という距離の情報を持たせるイメージです。

各駅について、両隣の駅の名前と駅間距離を書き出すことで、このグラフを作成していきました。

グラフは路線ごとに作成し、あとから路線同士を結合できるようにしています。こうすることで、最終的にはすべての路線を含んだ一つの大きなグラフとして扱うことができます。

駅間距離については、先ほど紹介したリンクから確認できる普通運賃表のPDFファイルに記載されている距離を利用しました。

なぜグラフにするのか

路線図をグラフとして表現することで、単なる駅名の一覧ではなく、「どの駅とどの駅がつながっているか」「駅間の距離はどのくらいか」という情報をコンピュータ上で扱いやすくなります。

さらに、複数の路線を一つのグラフにまとめることで、路線をまたいだ経路についても同じ仕組みで計算できるようになります。

つまり、今回の目的では、「駅と駅のつながり」と「距離」をコンピュータが扱える形にするために、路線図をグラフとして表現しています。

また、駅と駅の間に複数の経路が存在する場合には、それぞれの経路を探索し、出発駅から到着駅までの距離が最も短くなる経路を求めます。

例えば、渋谷から等々力へ向かう場合、二子玉川経由と自由が丘経由の2種類の経路が考えられます。グラフ上でこれらの経路を探索し、駅間距離の合計が最も小さい経路を最短経路として採用します。

こうすることで、運賃計算に用いられる最短経路を求めることができます。

UIについて

東急線の駅名標をイメージして、東急線らしさを感じられるUIを目指しました。
駅ごとのWebサイトで使われている色を参考にするため、東急電鉄の公式サイトを開発者ツールで確認し、グレーの背景部分などのカラーコードを調べました。

また、計算結果の運賃は、カードのようなデザインで表示するようにしました。

PCだけでなく、スマートフォンなどの縦長の画面でも使えるようにレスポンシブ対応しています。
この部分は意外と苦労したところで、縦長の画面用にレイアウトを調整するのに試行錯誤しました。

実装できなかったこと

現在の実装では、世田谷線とこどもの国線を追加できていません。

今回のプログラムでは、基本的に「駅間の距離 → 距離に応じた運賃」という形で計算しています。しかし、この2路線は他の路線とは異なる運賃体系（均一運賃）を持っているため、単純に駅をグラフへ追加するだけでは、乗り継いだときの運賃を正しく計算できませんでした。

特にこどもの国線は、さらに複雑です。
こどもの国線の各駅と、青葉台・田奈・つくし野・すずかけ台との間では、乗り継ぎによる割引があります。そのため現在の仕組みだけでは、この割引を表現できません。

当初はグラフを2つに分けて対応する方法も考えましたが、路線をまたいだときの運賃計算をどのように扱うかという部分が解決できず、今回は実装を見送りました。
今後は、単純な「距離」だけでなく、路線や乗り継ぎ条件などの情報もグラフに持たせる方法などを検討したいと思います。

まとめ

今回、以前から作ってみたいと思っていたものを、実際に自分で形にすることができました。
駅名を入力すると運賃が表示されるというシンプルなものではありますが、自分で考えた仕組みが実際に動いたときは達成感がありました。

一方で、せっかくなのでWeb上で公開してみようとも思ったのですが、Webアプリを実際に公開するところまでの仕組みがよく分からず、今回はいったん断念しました。

今後やってみたいこと

東急線の全路線に対応する
Streamlitだけでなく、Webアプリを構築するための技術を勉強する