第3木曜LT会 #28

第3木曜LT会 #28 にて発表させていただいたスライドです。
基本的に内容は以前に発表させていただいた https://speakerdeck.com/tinykitten/tk-links-lt1 がベースです。

Transcript

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