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

   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