スライダー・グラフ・今の値を写すボタンの部品の定義を書く手順
読む人がスライダーで値を変えてグラフの変わり方を見、決めた値を JSON で写せる部品を文書に置くときに実行する。
param の印で囲む<!-- param -->
```json
{
"title": "返信の速さの見積もり",
"knob": { "key": "strength", "label": "反応の強さ", "min": 0, "max": 10, "step": 1, "value": 5 },
"chart": {
"title": "反応の強さごとの返信の進み",
"scope": "経過 0〜10 秒",
"updated": "2026-10-18",
"x": { "label": "経過（秒）", "ticks": ["0", "2", "4", "6", "8", "10"] },
"y": { "label": "返信の進み（%）", "min": 0, "max": 100, "step": 25 }
},
"table": {
"0": [0, 0, 0, 0, 0, 0],
"1": [0, 10, 18, 26, 33, 39],
"2": [0, 18, 33, 45, 55, 63],
"3": [0, 26, 45, 59, 70, 78],
"4": [0, 33, 55, 70, 80, 86],
"5": [0, 39, 63, 78, 86, 92],
"6": [0, 45, 70, 83, 91, 95],
"7": [0, 50, 75, 88, 94, 97],
"8": [0, 55, 80, 91, 96, 98],
"9": [0, 59, 83, 93, 97, 99],
"10": [0, 63, 86, 95, 98, 99]
}
}
```
<!-- /param -->
| 項目 | 説明 |
|---|---|
title |
部品の題 |
knob |
スライダー。key は写す JSON のキー、label は名前、min・max・step は範囲と刻み、value は既定の値 |
chart |
グラフの題・範囲・更新日と、軸（x・y）。系列は書かない |
table |
スライダーの値（文字にしたもの）ごとの点の並び |
table に持たせる文書には式もスクリプトも書けないので、グラフの点は計算せずに table へ書く。
min から max まで step ごとの全ての値を持ち、点の数は chart.x.ticks の数と同じにする。
値が漏れていたり点の数が合わなかったりすると、書き方の警告になる。
スライダーを動かす（フォーカスして矢印キーでも動く）と、今の値が output に出て、グラフの今の値の系列が描き直される。
グラフは今の値と既定の値の 2 つの系列を描く。
今の値を写すボタンを押すと、次の JSON がクリップボードに入り、ボタンのそばに クリップボードに写しました と出る。
{
"strength": {
"name": "反応の強さ",
"value": 8
}
}
クリップボードに書けないときは、クリップボードへ書けませんでした。下の JSON を選んで写してください と出て、写すはずだった JSON を選んで写せる形で見せる。
スライダーとグラフは操作できるまま。
即時。mount と update で描くたびに、操作を付け直す。
render が返す HTML には操作が付かない。
document.querySelector(".mdmark .mdmark-param")
スライダー・今の値・写すボタン・グラフを持つ部品が見つかる。
描いた図を確かめる の手順で、スライダーを動かして写す。 クリップボードの JSON が画面の値と一致する。
印と定義を消す。