Save 37% off PRO during our Black Friday Sale! »

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

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

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

◆Webサービス
メトロ遅延なう - 東京メトロの電車遅延を1分単位で推定する非公式サイト
https://kram.nyamikan.net/metro_delay_now/

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

D833ebe946fb6c3ca990758737855f79?s=128

typewriter / takuya

June 12, 2020
Tweet

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サービス -完-