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

2020-06-12 社内LT会で発表した内容です。

◆Webサービス
終了しました（東京メトロオープンデータ API が 2022/03/31 をもって提供終了したため）。

GitHub: typewriter/tokyometro-delaytimeestimation
https://github.com/typewriter/tokyometro-delaytimeestimation

◆参考資料
MUI - Material Design CSS Framework
https://www.muicss.com/

国土交通省 東京圏の鉄道路線の遅延「見える化」（平成30年度）
http://www.mlit.go.jp/report/press/tetsudo02_hh_000126.html

JR東日本アプリ 列車運行情報・電車の乗換案内・電車と新幹線の時刻表 無料 - Google Play のアプリ
https://play.google.com/store/apps/details?id=jp.co.jreast&hl=ja

東京メトロアプリ【公式】 地下鉄の乗換案内（駅の乗換案内）・地下鉄路線図・運行情報などの電車アプリ - Google Play のアプリ
https://play.google.com/store/apps/details?id=com.tokyometro&hl=ja

◆にじさんじ性癖コンビ （現 Crossick ）
健屋花那【にじさんじ】KanaSukoya - YouTube
https://www.youtube.com/channel/UC8C1LLhBhf_E2IBPLSDJXlQ

白雪 巴/Shirayuki Tomoe【にじさんじ】 - YouTube
https://www.youtube.com/channel/UCuvk5PilcvDECU7dDZhQiEw

Transcript

1. 東京メトロの電車遅延を 1分単位で推定する Webサービスを作った 2020/02/28 Takuya Yamaguchi (@no_clock)
2. 通勤しなくなり、 使わなくなりましたとさ 作ったが… おわり
3. 東京メトロの電車遅延を 1分単位で推定する Webサービスを作った 2020/02/28 2020/06/12 Takuya Yamaguchi (@no_clock) 供養
4. すき：京都、百合 近況1： GoとTSとインフラ沼 パケットの気持ちになった 近況2： 好きな百合作家さんが推 しているVTuberコンビの 配信を見始めてしまった https://twitter.com/no_clock/status/1270034176364830720
5. メトロ遅延なう https://bit.ly/metro_delay 東京メトロの 電車の位置と 電車の遅延がわかる Webサービス
6. メトロ遅延なう https://bit.ly/metro_delay フロントエンド - TypeScript, React - MUI (Material Design) サーバサイド - Ruby, Sinatra
7. 東京圏の電車は よく 遅れる
8. 東京圏の電車は よく 遅れる リモートの方々は3ヶ月前くらいの 通勤していた頃を思い出してください 　　　ていましたよね
9. 遅延証明書の発行日数 JR 中央線（快速） 19.0日/20日 （95%） 出典： 国土交通省 東京圏の鉄道路線の遅延「見える化」（平成30年度） http://www.mlit.go.jp/report/press/tetsudo02_hh_000126.html 東京メトロ 千代田線 19.2日/20日 （96%）
10. 証明書発行時の遅延時間（平均） 出典： 国土交通省 東京圏の鉄道路線の遅延「見える化」（平成30年度） http://www.mlit.go.jp/report/press/tetsudo02_hh_000126.html
11. 遅れているときにありがちなこと 遅れている電車の すぐ後の電車は 比較的空いている ことがある 5分遅れ 1分遅れ
12. 遅れているときにありがちなこと 遅れている電車の すぐ後の電車は 比較的空いている ことがある 5分遅れ 1分遅れ 遅延がわかれば 混雑した電車を回避できる かもしれない
13. 鉄道各社の公式サービス 左: JR東日本公式スマートフォンアプリ　右：東京メトロ公式アプリ JR東日本: 1 分〜 東京メトロ: 5分〜 (要タップ) 微妙に不便
14. そこで… 東京メトロ オープンデータ
15. 東京メトロオープンデータ https://developer.tokyometroapp.jp/info RESTful API、JSON-LD 時刻表、列車位置など取得可 ユーザ登録のみで利用可能 商用利用・有料アプリ・広告掲載など不可
16. 東京メトロオープンデータ 列車時刻表 虎ノ門 23:10 新橋 23:13 銀座 23:14
17. 東京メトロオープンデータ 列車ロケーション情報 銀座線 B2227 渋谷発 浅草ゆき 現在地：虎ノ門→新橋 遅延0秒 ※5分未満切捨
18. 東京メトロオープンデータ 次のように遅延を推定 1. 全列車の時刻表をキャッシュしておく 2. 列車位置と時刻表を照らし合わせて 遅延を1分単位で推定
19. サーバサイド - 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
20. PWA (Progressive Web Apps) アプリっぽく見せたかった （何もキャッシュしていない） （これだけのために 　Service Workerが入っている） メトロ遅延なう
21. デザイン 脱Bootstrapしたと思ったら MUIを無加工で使っていた アイコン Public domain画像をGIMP加工 （いい方法教えて下さい…） メトロ遅延なう
22. • 便利。ほぼ毎日使用していた • 切り替わる電光掲示板を 見つめ続けなくてよい • CX (Commuter Experience) が向上した メトロ遅延なう
23. つらみポイント
24. つらみポイント 平日ダイヤか土休日ダイヤかわからない どちらのダイヤで運転しているか情報がない ▶ Ruby holiday_japan gemで対処 種別や駅の定義（150行）
25. つらみポイント 上り／下りがわからない 上下どちらの列車にも 「池袋方面 (Direction:Ikebukuro)」 と入っていたりする（副都心線など） ▶ いい感じにした 引用： 副都心線/F | 路線・駅の情報 | 東京メトロ https://www.tokyometro.jp/station/line_fukutoshin/index.html
26. つらみポイント Google「モバイルフレンドリーではありません」 Before After
27. つらみポイント Google「モバイルフレンドリーではありません」 Before After 確かにめちゃくちゃ 誤タップした 正直まだ 誤タップする
28. 通勤しなくなり、使わなくなった （スマートフォンのホーム画面からも消した） 一番のつらみポイント
29. メトロ遅延なう https://bit.ly/metro_delay 東京メトロの 電車の位置と 電車の遅延がわかる Webサービス -完-