$30 off During Our Annual Pro Sale. View Details »

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

 東京メトロの電車遅延を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

typewriter / takuya

June 12, 2020
Tweet

More Decks by typewriter / takuya

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. つらみポイント

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide