雨の日通学バスナビ
授業用 UI 試作・3D版
⚠ 授業用サンプルです。時刻と接近状況は架空で、現在の運行情報ではありません。
COMMUTE SUPPORT

バス、まだかな?を
少し安心に。

雨の日の通学を、実際の公共交通データで助けるアプリを考えよう。

🏫 都立あおぞら高校〈架空〉

3Dで見る:バスはいまどこ?

ドラッグで向きを変えられます。下の3つのボタンで状況を切りかえます。

実際のAPI接続前でも、表示の違いとコード変更の効果を確認できます。

この通学ルート

馬場下町 → 早大正門

学校は早大正門の近くにある設定です
学02
乗る:馬場下町降りる:早大正門
次の時刻表上の便
08:20
実際の到着を保証する時刻ではありません
接近状況〈デモ〉
3 停留所手前
時刻表の便との一致は未照合
まだ少し距離があります時刻表と接近状況を両方確認しよう。

バスと乗る停留所の関係

バス
途中
途中
馬場下町
データ時刻:08:12〈サンプル〉時刻表:授業用仮データ都バス公式の運行情報を開く ↗

生徒が変えるところ

コードを自分で編集

「誰を助けるか」と「何停留所手前で準備を促すか」を変えて、同じ状況の案内を比較します。

編集パネルを開く
変更例
GUIDE_FOR →「荷物が多い新入生」
PREPARE_AT_STOPS → 4
CHARACTER_STYLE →「青いバス帽の案内係」

この試作では3つの設定値だけを読み取ります。入力したコードをそのまま実行しません。
最初の案内2停留所手前で準備を促す
いまの案内2停留所手前で準備を促す
3Dにも反映されます。PREPARE_AT_STOPS を変えると黄色い準備ゾーンが伸び縮みし、CHARACTER_STYLE に色(青・赤・緑・ピンク・紫・オレンジ・水色)を書くと傘の色が変わります。