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

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