東京メトロの電車遅延を1分単位で推定するWebサービスを作った

東京メトロの電車遅延を 1分単位で推定する Webサービスを作った 2020/02/28 Takuya Yamaguchi (@no_clock)

通勤しなくなり、使わなくなりましたとさ作ったが… おわり

東京メトロの電車遅延を 1分単位で推定する Webサービスを作った 2020/02/28 2020/06/12 Takuya Yamaguchi (@no_clock) 供養

すき：京都、百合近況1： GoとTSとインフラ沼パケットの気持ちになった近況2：好きな百合作家さんが推しているVTuberコンビの配信を見始めてしまった https://twitter.com/no_clock/status/1270034176364830720

メトロ遅延なう https://bit.ly/metro_delay 東京メトロの電車の位置と電車の遅延がわかる Webサービス

メトロ遅延なう https://bit.ly/metro_delay フロントエンド - TypeScript, React - MUI (Material Design)
サーバサイド - Ruby, Sinatra

東京圏の電車はよく遅れる

東京圏の電車はよく遅れるリモートの方々は3ヶ月前くらいの通勤していた頃を思い出してください　　　ていましたよね

遅延証明書の発行日数 JR 中央線（快速） 19.0日/20日（95%）出典：国土交通省東京圏の鉄道路線の遅延「見える化」（平成30年度） http://www.mlit.go.jp/report/press/tetsudo02_hh_000126.html 東京メトロ
千代田線 19.2日/20日（96%）

証明書発行時の遅延時間（平均）出典：国土交通省東京圏の鉄道路線の遅延「見える化」（平成30年度） http://www.mlit.go.jp/report/press/tetsudo02_hh_000126.html

遅れているときにありがちなこと遅れている電車のすぐ後の電車は比較的空いていることがある 5分遅れ 1分遅れ

遅れているときにありがちなこと遅れている電車のすぐ後の電車は比較的空いていることがある 5分遅れ 1分遅れ遅延がわかれば混雑した電車を回避できるかもしれない

鉄道各社の公式サービス左: JR東日本公式スマートフォンアプリ　右：東京メトロ公式アプリ JR東日本: 1 分〜東京メトロ: 5分〜 (要タップ) 微妙に不便

そこで… 東京メトロオープンデータ

東京メトロオープンデータ https://developer.tokyometroapp.jp/info RESTful API、JSON-LD 時刻表、列車位置など取得可ユーザ登録のみで利用可能商用利用・有料アプリ・広告掲載など不可

東京メトロオープンデータ列車時刻表虎ノ門 23:10 新橋 23:13 銀座 23:14

東京メトロオープンデータ列車ロケーション情報銀座線 B2227 渋谷発浅草ゆき現在地：虎ノ門→新橋遅延0秒 ※5分未満切捨

東京メトロオープンデータ次のように遅延を推定 1. 全列車の時刻表をキャッシュしておく 2. 列車位置と時刻表を照らし合わせて遅延を1分単位で推定

サーバサイド - Ruby, Sinatra メトロ遅延なう 134 viewer/src/App.tsx 47 viewer/src/railway/RailwayList.tsx 295
viewer/src/railway/RailwayMap.tsx 230 server/app.rb 72 server/get_railway.rb フロントエンド - TypeScript, React

PWA (Progressive Web Apps) アプリっぽく見せたかった（何もキャッシュしていない）（これだけのために　Service Workerが入っている）メトロ遅延なう

デザイン脱Bootstrapしたと思ったら MUIを無加工で使っていたアイコン Public domain画像をGIMP加工（いい方法教えて下さい…）メトロ遅延なう

• 便利。ほぼ毎日使用していた • 切り替わる電光掲示板を見つめ続けなくてよい • CX (Commuter Experience) が向上した
メトロ遅延なう

つらみポイント

つらみポイント平日ダイヤか土休日ダイヤかわからないどちらのダイヤで運転しているか情報がない ▶ Ruby holiday_japan gemで対処種別や駅の定義（150行）

つらみポイント上り／下りがわからない上下どちらの列車にも「池袋方面 (Direction:Ikebukuro)」と入っていたりする（副都心線など） ▶ いい感じにした引用：副都心線/F
| 路線・駅の情報 | 東京メトロ https://www.tokyometro.jp/station/line_fukutoshin/index.html

つらみポイント Google「モバイルフレンドリーではありません」 Before After

つらみポイント Google「モバイルフレンドリーではありません」 Before After 確かにめちゃくちゃ誤タップした正直まだ誤タップする

通勤しなくなり、使わなくなった（スマートフォンのホーム画面からも消した）一番のつらみポイント

メトロ遅延なう https://bit.ly/metro_delay 東京メトロの電車の位置と電車の遅延がわかる Webサービス -完-

東京メトロの電車遅延を1分単位で推定するWebサービスを作った

東京メトロの電車遅延を1分単位で推定するWebサービスを作った

typewriter / takuya

More Decks by typewriter / takuya

Other Decks in Programming

Featured

Transcript