公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術

https://asciistartup.connpass.com/event/377258/

【ライトニングトーク】LINKS:POWER of DATA x DATA 2025にて発表させていただいたスライドです。
React.jsとdeck.glを組み合わせて遅延情報を可視化する技術やTipsを共有させていただきました。

Transcript

1. Freelance Frontend Engineer Tsubasa SEKIGUCHI 公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術 Public Transportation Open Data x Mobile UX: Technology to transform complex operational information into "intuition". 2025.12.19 | LINKS:POWER of DATA x DATA 2025
2. 関口 翼 Tsubasa SEKIGUCHI aka TinyKitten フリーランス フロントエンドエンジニア 関口 翼 Tsubasa SEKIGUCHI aka TinyKitten / きったん フリーランス フロントエンドエンジニア 2 2025.12.19 | LINKS:POWER of DATA x DATA 2025
3. TinyKitten タイニーキトゥン aka 関口 翼 フリーランス フロントエンドエンジニア 3 2025.12.19 | LINKS:POWER of DATA x DATA 2025
4. TrainLCD スマートフォンで使えるトレインビジョン 鉄道での移動中に迷いそうな時、 電車から降りれるか不安な時 きっとあなたの役に立つはずです 日本全国の鉄道路線で使える 新感覚ナビゲーションアプリ 4 2025.12.19 | LINKS:POWER of DATA x DATA 2025
5. 5 2025.12.19 | LINKS:POWER of DATA x DATA 2025 縦画面対応 オープンβテスト を含む TrainLCD v10 Android版
 開始 縦画面表示・プリセット機能などを いち早く体験できます TrainLCD 直近のハイライト
6. デモのご紹介 Introduction to the demo 6 2025.12.19 | LINKS:POWER of DATA x DATA 2025
7. 7 デプロイ先 :https://delay-signage.vercel.app/ 2025.12.18 | 技術共有会 #15 JR東日本の駅とかに 設置されている サイネージの再現 今回のお題
8. 8 デプロイ先 :https://delay-signage.vercel.app/ 2025.12.18 | 技術共有会 #15 チャレンジ2025 専用のデータを 使用し、Web技術で いい感じに表示 ざっくりどう作ったの？
9. 9 デプロイ先 :https://delay-signage.vercel.app/ 2025.12.18 | 技術共有会 #15 レスポンシブ デザインにも対応 もちろん、
10. 10 2025.12.19 | LINKS:POWER of DATA x DATA 2025 アーキテクチャについて About the architecture
11. 11 2025.12.19 | LINKS:POWER of DATA x DATA 2025 技術的には React.js + deck.gl データはJR東日本 駅情報データ こんな感じに作ってます GTFS-RTについて 鉄道関連リアルタイム情報は 今回使用していません 駅情報データ ODPTデータセットの JR東日本 駅情報(JSON) フロントは Next.jsを採用、deck.glでプロット レスポンシブ対応
12. 12 2025.12.19 | LINKS:POWER of DATA x DATA 2025 React.jsで オープンデータと 地図を扱う フロントエンド構成を深掘り 地図表示にはMapLibreを使用 Mapbox GL JSのオープンフォーク WebGLを使用してインタラクティブな マップをレンダリング 遅延している路線のプロットにはdeck.glを使用 GPUを使用する巨大なデータセット にも対応した可視化ライブラリ React.jsとも相性が良い
13. 13 2025.12.19 | LINKS:POWER of DATA x DATA 2025 データを取得してみよう Let's try to get the data.
14. 14 2025.12.19 | LINKS:POWER of DATA x DATA 2025 駅情報取得には、 開発者サイトでの 登録が必須 開発を始める準備 https://developer.odpt.org/ 登録完了まで数日かかるので注意!!
15. 15 2025.12.19 | LINKS:POWER of DATA x DATA 2025 必要なデータを 探してみよう 開発者登録が完了したら 結構な数のデータセットが登録されています
16. 16 Protocol Buffers(GTFS-RT)とは 運行情報などのリアルタイム情報 バイナリ形式で軽量 GTFS(静的GTFS)とは 時刻表・路線・停留所などの固定情報 世界標準フォーマット JSONとは APIレスポンス全般に使われ、 柔軟なフォーマット 2025.12.19 | LINKS:POWER of DATA x DATA 2025 データの形式を 学んでみよう よく使われる3種類
17. 17 運用には注意が必要 DDoS攻撃にならないように 一元的にリクエストしよう WebSocketのようなものではない プッシュ型の仕組みではなく、 PB形式の静的ファイル GTFS-RTデータを使えば 遅延情報も事業者が対応していれば HTTP GETで情報が取れる 2025.12.19 | LINKS:POWER of DATA x DATA 2025 GTFS-RTを 深掘りしてみる 脱ハリボテ
18. 2025.12.19 | LINKS:POWER of DATA x DATA 2025 まとめ Conclusion 18
19. 19 たとえば、GTFS-RT等と連携すれば スマホでもPCでも、列車の運行情報を 自分なりの表現で演出できる 考え方次第で 現代のちょっとした交通の不便さを 私たちはデータで解決できる React.js + deck.glで パフォーマンスの高い 地図ベースのアプリが開発できる 2025.12.19 | LINKS:POWER of DATA x DATA 2025 公共交通データの 可能性は無限大 みんなも試してみよう
20. Freelance Frontend Engineer Tsubasa SEKIGUCHI ご清聴ありがとうございました！ Thank you for listening! 2025.12.19 | LINKS:POWER of DATA x DATA 2025