入力
開始時刻、終了時刻、固定の擬似現在時刻。今回は`NOW = 13:20`とする。
導出
終了・進行中・30分以内・それ以外を、同じ関数の境界規則から判定する。
表示
状態語、セルの境界色、11:00からの分差に基づく水平線を同じデータから出す。
転用
イベント、展示会、講座、受付、入替進行など「今どこか」を知らせる画面へ。
BOUNDARY / ONE RULE
境界を、
コードに一つだけ置く。
終了時刻と現在時刻が同じときに迷わないよう、判定順と不等号を固定します。
済 if end <= NOW
進行中 if start <= NOW < end
まもなく if 0 < (start - NOW) <= 30分
予定 otherwise
12:40–13:20
13:20と終了時刻が同値なので「済」。
済13:00–13:40
13:20が開始後・終了前なので「進行中」。
進行中13:30–14:10
開始まで10分なので「まもなく」。
まもなく15:10–15:50
開始まで30分を超えるので「予定」。
予定POSITION / GRID
線は、
セルの境界ではない。
11:00を起点に、13:20までの140分を10分粒度の14行分として位置へ変換します。
Grid row
セッションは開始分・終了分から`grid-row`の開始と終了を決める。名前の長さを固定高さで切らない。
横断線
現在線はタイムテーブルのトラック列全体を横断し、「現在 13:20」を同じ線に添える。
10分粒度
11:00〜16:00を30行に分け、30分ごとの補助線と時刻ラベルを置く。
中間幅
列が入らないdesktop/tablet幅はグリッドを横スクロールラッパー内に留める。
NOT / A CLOCK APP
時計を作るのではなく、
次の行動を示す。
リアルタイム同期や測位を追加するのではなく、時間と場所を判断に使える最小の状態表現を検証します。
しない
API、リアルタイム通信、GPS、実際の混雑計測。
範囲外残す
現在時刻、状態語、現在線、ゾーン、次に始まる時刻。
主役紙へ
★の予定はUIを除いた当日の予定表へ印刷できる。
転用SPECIMEN / SELF-MADE
この標本の根拠
これは現在時刻を基準にした進行状態表現を検証する自主制作モックです。実在イベントの時刻表や運行実績ではありません。
実装例
検証したこと
状態4種、現在線、フィルタ、セッション選択、★予定、print。
既存との差
在庫状態や素材差分ではなく、時刻の経過そのものを画面の構造にする。
制約
静的HTML、外部ライブラリなし、固定データ、画像なし。