リアルタイム風スパークライン
1秒ごとに新しい値が追加され、折れ線グラフが左に流れる。現在値と変化方向をリアルタイムで表示。
プレビュー
自動再生
操作自動で再生されます。
仕様書
- 向く場面
- CPU・トラフィックなど流れる指標の監視
- 現在値と直近の傾向を小さく見せるカード
- 更新頻度が秒単位のダッシュボード
- 避ける場面
- 過去の正確な値を読ませたい分析
- 更新が数分に 1 回の指標（流れる意味が無い）
- 構成要素
- 指標ラベル
- 現在値
- 変化方向の矢印
- 折れ線と面
- 時間軸ラベル
- 持っている状態
- 通常
- キーボード
操作要素なし（表示のみ）
- 支援技術
現在値はテキスト、方向は矢印（aria-hidden）に加えて隠しテキスト「上昇／下降／横ばい」で読める。svg は role=img で直近 20 秒の最小・最大を aria-label に持つ。毎秒の更新は aria-live にしない。非表示タブでは更新を止める
- 動き
1 秒ごとに点を追加して再描画（補間なし）。矢印の色 300ms
デザインの要点
- 点は 20 個固定で先頭を捨てて末尾に足す。配列を伸ばし続けると描画が重くなり、横軸の意味も変わる
- 補間せず 1 秒ごとに描き直す。滑らかに流すと「今の値」がどこか分からず、監視用途では逆効果
- 面（グラデーション）は線の下に薄く敷くだけ。濃いと最新の 1 点が埋もれる
- タブが非表示のときは setInterval を止め、戻ったら再開する。裏で回し続けると電池と CPU を無駄にする
コード（コピーして使えます）
<div class="rs-wrap">
<div class="rs-header">
<span class="rs-label">CPU 使用率</span>
<span class="rs-current">
<span class="rs-val">--</span><span class="rs-unit">%</span>
<span class="rs-arrow" aria-hidden="true">→</span>
<span class="rs-sr" id="rs-dir">横ばい</span>
</span>
</div>
<svg class="rs-svg" viewBox="0 0 220 90" preserveAspectRatio="none" role="img" aria-label="直近20秒の推移">
<defs>
<linearGradient id="rs-grad" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#2b50c7" stop-opacity="0.25"/>
<stop offset="100%" stop-color="#2b50c7" stop-opacity="0"/>
</linearGradient>
</defs>
<path class="rs-area" d=""/>
<polyline class="rs-line" points=""/>
</svg>
<div class="rs-footer" aria-hidden="true">
<span>20秒前</span><span>現在</span>
</div>
</div>