Timing Chart Editor 操作説明書
PLC・マイコン・上位 PC など、機器どうしの信号のやり取りを「タイミングチャート」として設計し、仕様書・フローチャート・検証用テキストまで一気通貫で作るためのツールです。
1. 概要
Timing Chart Editor は、横軸を Step（時間の区切り）、縦軸を信号とした表の上で波形を塗っていく、表計算ソフトに近い操作感の作図ツールです。BOOL の信号は ON / OFF の波形、数値や状態の信号は値を書いたブロック（バス表記）で表します。
ブラウザだけで動き、外部のライブラリやサーバーは使いません。入力したデータはこの端末のブラウザの中にだけ自動保存され、どこにも送信されません。作ったチャートは仕様書用の SVG、Draw.io、Markdown に書き出せるほか、同じフォルダにある Flowchart Editor に渡して、制御プログラムの流れ（フローチャート）の下書きを自動で作れます。
2. チュートリアル（最初の 1 枚を作る）
- ツールバーの「マスター」「スレーブ」に機器名を入れます（例: PLC / サーボ）。方向の表示とフローチャートの担当名に使われます。
- 左の変数リストの「取込…」を押し、Excel の信号一覧をコピーして貼り付けます。1 行目が見出しなら、列の並び順に関係なく「変数名・型・コメント・方向」を自動で見つけます。
- 変数をダブルクリック（またはチャートへドラッグ）して行を追加します。行番号をドラッグすると並べ替えられます。
- BOOL の行をクリック / 横にドラッグして ON の区間を塗ります。数値の行はダブルクリックで値を入力し、値のあるセルから横へドラッグすると延長できます。
- ツールバーの「矢印」を押し、要求信号の変わり目から、それに応えて変わる信号の変わり目へドラッグして因果関係を引きます。
- 「出力」メニューの「Markdown をコピー」で仕様書用の文章をクリップボードに入れ、Notion や GitHub に貼り付けます。
ヘルプメニューの「チュートリアル」を開くと、サンプルを読み込んで画面の該当箇所を確かめながら同じ手順をたどれます。
3. 波形の描き方
ツールバーの「エッジ」で切り替わりの描き方を選べます。「垂直」は理想的な論理波形、「斜め」は立ち上がり・立ち下がりに時間がかかる実際の信号に近い表現です。斜めにすると、数値の行も両端のとがった六角形のバス表記になり、値が変わる瞬間が読み取りやすくなります。特定の行だけ変えたいときは、行ラベルを右クリックして「エッジ」を選びます。
Shift+クリックや矢印キーで範囲を選び、Space（反転）・1（ON）・0（OFF）・Delete（消去）でまとめて編集できます。範囲は Excel と相互にコピー・貼り付けできます。
4. 因果関係の矢印
矢印は「A が変わったのを見てから B を変える」という関係を表します。矢印モード中（または Alt を押している間）は、各信号の変わり目に小さな ● が表示されます。原因の ● から結果の ● へドラッグして離すと矢印になります。結果は原因と同じ Step か、それより右に置きます。
波形を描き直して変わり目がなくなった矢印は、点線（警告色）で表示されます。矢印をクリックして Delete で消すか、波形を直してください。
5. 設計の考え方（M→S / S→M）
各信号には「誰が出力するか」を方向として付けます。M→S はマスターが出してスレーブが受ける信号（要求・指令）、S→M はスレーブが出してマスターが受ける信号（応答・状態）、内部 は機器の中だけで使う信号です。方向をそろえると、どちらの機器のプログラムで何を書くべきかがはっきりします。
ハンドシェイクの基本形は「要求 ON → 応答 ON → 要求 OFF → 応答 OFF」の 4 手順です。相手の応答を確かめてから次の信号を変える（インターロック）ことで、信号の取りこぼし・二重起動・タイミング依存の不具合を防げます。
矢印はこの「確かめてから変える」関係をチャート上に明示するものです。矢印を引いておくと、フローチャートを作るときに「どの入力を待ってから、どの出力を変えるか」を矢印どおりに組み立てます。矢印のない変化は、タイマーなど自分の都合で起きる変化として Step の順に並べます。
6. 取り込みと出力
- 取り込み: Excel の貼り付け、CSV / TSV、アドレスマップ（Address Map Editor）の JSON を読み込めます。アドレスや初期値の列は変数リストに保持されます。
- SVG: 白地・黒線固定の仕様書用の図。矢印も描かれます。
- Draw.io: 図形として編集できる形式。「Draw.io をコピー」で draw.io の画面へ直接貼り付けられます。
- Markdown: 信号一覧・タイミング表・変化点・因果関係・シーケンス図（Mermaid）をまとめた仕様書。
- AI 検証用テキスト: 生成 AI にロジックの矛盾を指摘してもらうための表形式のテキスト。
7. ショートカットキー
| キー | 動作 |
|---|
| Ctrl+S / Ctrl+O | 上書き保存 / 開く |
| Ctrl+Z / Ctrl+Y | 元に戻す / やり直し |
| Ctrl+C / X / V | 範囲のコピー・切り取り・貼り付け |
| Space / 1 / 0 | BOOL の反転 / ON / OFF |
| F2 / Enter | 数値の入力（Ctrl+Enter で範囲すべてに入力） |
| Ins / Ctrl+D | 変数の追加 / 行の複製 |
| Alt+ドラッグ | 因果関係の矢印を引く |
| Ctrl+E / Ctrl+I | 一括書き出し / チャート情報 |
| F1 | 操作一覧 |
8. データの保存と連携
作業内容はブラウザに自動保存され、次に開いたときに復元されます。ファイルとして残すときは Ctrl+S で JSON に保存します。JSON はプラットフォーム共通のスキーマ（variables と triggers）を含み、ほかの 3 つのツールと同じ形式で変数と因果関係をやり取りできます。ブラウザのデータを消去すると自動保存も消えるため、大切なチャートは必ずファイルに保存してください。
このツールは 4 つの設計ツールの 3 番目です。ツールバー右の行き来ボタンで前後へ移動できます。
- System Diagram Editor: 機器・ブロック・通信のつながりを決める
- Address Map Editor: 変数とアドレスを割り付ける（「← アドレスマップ」で開けます。向こうの「タイミングチャートへ →」でこちらに変数が届きます）
- Timing Chart Editor（このツール）: 時間的な動きと因果関係を決める
- Flowchart Editor: 「フローチャートへ →」で、因果関係を反映した流れ図を自動生成
不具合の報告・機能の要望は yk.builds.space@gmail.com までお寄せください。再現手順と、可能であれば保存した JSON を添えていただけると調査が早くなります。