D-TIS

D-TIS — GitHub Pages版

SignageとControllerを静的なウェブアプリとして公開します。実行用のNode.jsサーバーやExpressは不要です。交通情報は各ブラウザーがODPT・GTFSから取得し、操作の中継と確定済み設定の記録にSupabaseを使用します。

最初に行うこと

  1. Supabaseでプロジェクトを作成します。
  2. SQL Editorでsupabase/setup.sql全体を実行します。再実行しても既存の端末と履歴を残します。
  3. Authentication → Users → Add userでメールアドレスとパスワードの運用ユーザーを作ります。確認済みユーザーとして登録します。アプリに新規登録機能はありません。一般公開のユーザー登録が不要なら、Authのユーザー登録を無効にします。
  4. Realtime → Settingsで Allow public access をオフにします。このアプリは所有者を確認するPrivate Broadcastを使います。テーブルのRealtime publicationやStorage、Edge Functionsの設定は不要です。
  5. フォルダーをGitHubへ追加し、Settings → Pages → Source → GitHub Actionsを選びます。mainへpushすると、同梱のワークフローがテスト・ビルド・公開を実行します。詳細はdocs/github-pages.mdを参照してください。
  6. 公開された/signage/と/controller/を開き、Supabase Project URLとPublishable keyを設定します。両方の画面に手順3の同じ運用アカウントでログインします。
  7. 両画面の右下の接続設定に、ODPT APIトークン、またはGTFS ScheduleのZIP URLを設定します。両方で同じ配信元を指定してください。Signageを表示したまま、Controllerで路線・施設名・案内文を設定し、Signageに反映して記録を選びます。

SupabaseのProject URLとpublishable keyは、GitHub Repository variablesのVITE_SUPABASE_URLとVITE_SUPABASE_PUBLISHABLE_KEYに設定して初期値にすることもできます。ブラウザーへ渡すのは公開用のキーだけです。service_role、sb_secret_…、データベースパスワードを使わないでください。

操作と同期の流れ

sequenceDiagram
  participant O as ODPT / GTFS
  participant C as Controller
  participant S as Signage
  participant B as Supabase
  O->>C: 路線・交通情報
  O->>S: 時刻表・交通情報
  C->>S: Private Broadcastで操作（ID・基準リビジョン付き）
  S->>S: 検証・データ取得・画面描画
  S->>B: 描画した設定と履歴を1トランザクションで記録
  B-->>S: 確定リビジョン
  S->>B: 確定状態を再照会
  S-->>C: 記録後の完了通知
  C->>B: 確定状態を再照会
  O->>C: 交通情報を更新
  S-->>C: 表示画像 / 共有映像

ライブ画面

ControllerのSignageのライブ画面には、Signage側で描画したDOMの画像を約2秒間隔で送信します。Controller側で時刻表を再現するプレビューではありません。画像には取得時刻と実際に表示している出力IDを表示し、切断後は最終画像であることを表示します。閲覧者がいる間だけ画像を送信します。

より滑らかな実画面を見るには、Signage左下の映像で画面を共有を押し、ブラウザーの選択画面でSignageタブを選びます。WebRTCで共有映像をControllerへ送ります。ブラウザーの仕様により、この画面選択は端末側の操作が必要で、自動許可はできません。音声・マウス・キーボードのリモート操作は扱いません。

標準の画像プレビューはSupabaseだけで利用できます。DOMの画像化ではフォントやアニメーションを完全には再現できない場合があります。WebRTCはネットワーク構成により接続できないことがあり、その場合は画像プレビューを継続します。必要な環境では任意でTURNサーバーをVITE_WEBRTC_ICE_SERVERSに設定できます。TURNが常時必要な運用では、その認証情報を固定の秘密情報として公開ビルドへ埋め込まないでください。

ODPT・GTFS

端末・設備の扱い

SignageはブラウザーごとのIDで登録され、同じSupabaseアカウントのControllerに表示されます。LAN内のIPアドレスやPINは使いません。別のブラウザープロファイル・別端末で開くと別のSignageになります。ブラウザーデータを消すと端末IDも失われるため、運用端末のデータを保持してください。

1つのブラウザーでは同じSignageを複数タブで同時に動かさないでください。対応ブラウザーではWeb Locksで二重起動を防ぎます。Signageタブは前面で表示して運用します。

設備ごとの設定は保持でき、Signage URLの?output=設備IDで表示対象を選びます。Controllerの設備タブを切り替えても、物理Signageの表示出力は切り替わりません。ライブ画面は、その端末で実際に開いている出力を表示します。LCD以外の物理LED・ベルの駆動は、機器側の対応が別途必要です。

ブラウザーの静的アプリからOSの再起動・電源オフはできないため、新しいControllerにはOSの電源操作を設けていません。旧server/とPi用スクリプトは移行前の参考資料です。新しい画面を旧LAN/PIN方式で動かす互換機能はありません。

ローカル開発・検証

Node.js 22以降を使用します。

npm ci
npm test
npm run build
npm run preview

プレビューは案内ページhttp://localhost:4173/、Signage/signage/、Controller/controller/です。開発時はnpm run devで3画面を起動できます。認証・操作の確認にはSupabaseを設定します。静的ビルドにはSupabaseの資格情報は不要です。

npx playwright install chromium
npm run test:e2e

ブラウザーテストはローカルの模擬Supabaseを使用します。実際のSupabaseプロジェクトに接続・変更しません。実プロジェクトでの認証・Realtime・ネットワーク条件の最終確認は、設定後に行ってください。

主なファイル

場所 役割
signage/src/useSignageRuntime.ts Signageでの操作検証・描画・記録・復旧
controller/src/main.tsx 設定編集・操作送信・確定状態照会
shared/cloud.ts Supabase Auth・Database・Private Broadcast
shared/cloud-protocol.ts 操作と設定の形式・期限検証
shared/browser-odpt.ts ブラウザーからの交通情報取得・キャッシュ
shared/browser-gtfs.ts GTFS Schedule ZIP読み込み
shared/live-preview.tsx 実表示の画像送信・WebRTC映像共有
supabase/setup.sql テーブル・所有者別RLS・記録RPC
.github/workflows/pages.yml GitHub Pagesへのテスト・公開

公式資料