Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

サーバサイド - 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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

つらみポイント

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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