Playground
Playground はブラウザ内で .tdsl を編集し、構文チェックと SVG プレビューをリアルタイムに確認できるツールです。インストール不要で、Timeline DSL の文法を学習したり、スニペットを素早く検証したりするのに適しています。
Playground を開く
リアルタイム検証
Section titled “リアルタイム検証”エディタに .tdsl を入力すると、自動的に構文チェックが走ります。エラーや警告は画面下部の診断パネルに行番号と詳細メッセージとして表示されます。
SVG プレビュー
Section titled “SVG プレビュー”検証が通ると、右パネルに年表の SVG が描画されます。コードを変更するたびにプレビューも更新されます。
コンパイルエラーが発生した場合は、直前に成功したプレビューが維持されたまま「直前の成功時プレビューを表示中」バッジがプレビューパネルに重畳表示されます。エラーを修正すると通常表示に戻ります。
テンプレートギャラリー
Section titled “テンプレートギャラリー”ツールバーの「Templates」ボタンからテンプレートギャラリーモーダルを開けます。examples/ に収録されたすべての .tdsl サンプルをサムネイル一覧で確認し、クリック一発でエディタに読み込めます。
| サンプル | 内容 |
| ------------------------------------- | ---------------------------------------------------- |
| 中国王朝 | 王朝の span / event / event_range を含む実践例 |
| 近現代史 | 近現代の span / event_range を含む実践例 |
| DSL 基本文法（最小構成） | span / event / event_range の最小構成サンプル |
| Wikidata インポート（オフライン不可） | Wikidata import 構文の参考例（WebUI では実行不可） |
ギャラリーからサンプルを選択するとエディタの内容が置き換わります。作業中の内容を保持したい場合は、先にダウンロードしておいてください。
.tdsl ダウンロード
Section titled “.tdsl ダウンロード”ツールバーの「Download」ボタンで、現在のエディタ内容を timeline.tdsl としてダウンロードできます。
コード整形（Format）
Section titled “コード整形（Format）”ツールバーの「Format」ボタン、または Ctrl/Cmd+Shift+F でエディタの内容を整形できます（v1.10.0〜）。AST から再 emit するため、2 スペースインデントとブロック間空行 1 行の標準形に揃います。整形は CodeMirror の transaction として適用されるため、Undo/Redo がそのまま機能します。
パースに失敗した場合はエラーが Toast 通知され、エディタ内容は変更されません。コメントは tdsl fmt と同様に保持されますが、ブロック内コメントは正準位置へ移動する場合があります。
エディタとプレビューの分割幅調整
Section titled “エディタとプレビューの分割幅調整”エディタとプレビューの間にあるドラッグハンドルを左右に動かすと、分割比率を 15%〜85% の範囲で変更できます。デフォルトはエディタ 40% / プレビュー 60% です。
モバイル・タブレット対応
Section titled “モバイル・タブレット対応”画面幅に応じてレイアウトが自動切り替えします。
| 幅 | レイアウト | | --------------------------- | --------------------------------- | | ≤768px（スマートフォン） | エディタ／プレビュー タブ切り替え | | 769px〜1024px（タブレット） | 上下2段レイアウト | | 1025px以上（デスクトップ） | 左右分割レイアウト |
?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 のセットアップ