Playground
Playground はブラウザ内で .tdsl を編集し、構文チェックと SVG プレビューをリアルタイムに確認できるツールです。インストール不要で、Timeline DSL の文法を学習したり、スニペットを素早く検証したりするのに適しています。
Playground を開く
リアルタイム検証
Section titled “リアルタイム検証”エディタに .tdsl を入力すると、自動的に構文チェックが走ります。エラーや警告は画面下部の診断パネルに行番号と詳細メッセージとして表示されます。
SVG プレビュー
Section titled “SVG プレビュー”検証が通ると、右パネルに年表の SVG が描画されます。コードを変更するたびにプレビューも更新されます。
コンパイルエラーが発生した場合は、直前に成功したプレビューが維持されたまま「直前の成功時プレビューを表示中」バッジがプレビューパネルに重畳表示されます。エラーを修正すると通常表示に戻ります。
サンプルの選択
Section titled “サンプルの選択”ツールバーの「サンプル」セレクトから、エディタに読み込むサンプルを選べます。
| サンプル | 内容 |
|---|---|
| Hello Timeline — 1 event だけの最小例 | event 1 件だけの最小構成 |
| 3 種のマーカー — span / event / event_range | span / event / event_range を並べた例 |
| 複数 lane — 並列イベントを階層化する | lane を使って並列イベントを階層化した例 |
| Wikidata import（CLI 専用機能のデモ） | Wikidata import 構文の参考例（Playground では実行不可） |
サンプルを選択するとエディタの内容が置き換わります。作業中の内容を残したい場合は、先に「.tdsl を保存」で保存してください。
「表示倍率」セレクトで、プレビューの倍率を「自動」/ 0.5× / 1× / 2× / 4× / 8× から選べます。
ラベルを常時表示（一覧・印刷向け）
Section titled “ラベルを常時表示（一覧・印刷向け）”ツールバーの「ラベルを常時表示（一覧・印刷向け）」チェックボックスを ON にすると、Event / EventRange のラベルをホバー不要で常時描画します（CLI の --show-event-labels と同機能、v1.17.0〜）。全項目を一覧・印刷資料として確認したい場合に利用できます。選択状態はブラウザに保存され、次回アクセス時も維持されます。
ファイルを開く
Section titled “ファイルを開く”「ファイルを開く」ボタンで、ローカルの .tdsl / .txt ファイルをエディタに読み込めます。
保存（.tdsl / .svg / HTML）
Section titled “保存（.tdsl / .svg / HTML）”ツールバーの「.tdsl を保存」で現在のエディタ内容を .tdsl として、「.svg を保存」「HTML を保存」で描画結果を SVG / HTML として保存できます。SVG / HTML はプレビューが描画できているときのみ押せます。
エディタ・プレビュー・診断パネルの 3 つが並びます。エディタとプレビューの幅比率は固定で、ドラッグでの調整はできません。画面幅が 820px 以下になると 1 列の縦並びに切り替わります。
?source= クエリによる共有
Section titled “?source= クエリによる共有”URL に ?source= クエリを付けると、指定したソースコードがエディタに読み込まれた状態で Playground を開けます。Quick Start や文法ドキュメントの「このサンプルをPlaygroundで開く」リンクはこの仕組みを利用しています。
/playground/?source=timeline%20%22サンプル%22%20%7B...%7D「共有リンクをコピー」ボタン
Section titled “「共有リンクをコピー」ボタン”ツールバーの 共有リンクをコピー ボタンを押すと、現在編集中のソースを gzip 圧縮した URL がクリップボードにコピーされ、別タブで開くと同じソースが復元されます。SNS や Issue でのコード共有に使えます。
/playground/?src=<gzip+base64url 圧縮されたソース>URL 全体が 8,192 文字を超えると共有リンクを作成できません（その場合は .tdsl の保存とファイル添付などをご利用ください）。
Playground はブラウザ内の WebAssembly で動作します。以下の機能は利用できません。
import wikidata— 外部ネットワークアクセスが必要なため- ファイルシステムへの書き込み — ローカルの
.tdslへの直接保存には CLI が必要
本格的なワークフローへの移行は インストール と Quick Start を参照してください。
- 文法とサンプル —
.tdslの構文リファレンス - Quick Start — CLI を使った最初のワークフロー
- インストール — CLI のセットアップ