> ## Documentation Index
> Fetch the complete documentation index at: https://clickhouse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

> Web SQL UI（Play）のドキュメント。`/play` で提供される、ブラウザー内蔵のクエリインターフェイス

# Web SQL UI（Play）

Web SQL UI (Play) は、ClickHouse に組み込まれたブラウザー内のクエリインターフェイスです。ClickHouse の任意の HTTP ポートで、`/play` パス (たとえば `http://localhost:8123/play`) から利用できます。これにより、クエリを作成して実行し、結果をテーブルまたはチャートとして表示したり、URL をコピーしてクエリを共有したりできます。

インターフェイス全体は `programs/server/play.html` に収められており、フレームワークやビルドステップなしで ClickHouse バイナリから直接配信される、単一の自己完結型ページです。唯一の例外はチャートのレンダリングです。`uPlot` チャートライブラリは、結果を初めてチャートとして表示する際にサードパーティの CDN から遅延読み込みされるため、オフライン環境または egress が制限されたデプロイ環境ではチャートを利用できません。

<div id="query-tabs">
  ## クエリタブ
</div>

タブを使うと、複数のクエリを並べて保持できるため、1 つのエディタで切り替えながら扱ったり、ブラウザの履歴に頼ったりする必要がありません。

各タブには、それぞれ独自のクエリテキスト、タイトル、クエリパラメータ、直前の結果があります。接続設定 (URL、ユーザー、パスワード) は共通で、すべてのタブで共有されます。

<div id="when-the-tab-bar-appears">
  ### タブバーが表示されるタイミング
</div>

タブバーは、クエリを実行すると、またはタブが複数になると表示されます。結果のないタブが 1 つだけの状態では、タブ機能が導入される前のページと見た目がまったく同じなので、必要になるまでタブバーは表示されません。

アクティブなタブは、見た目の上でページと自然に一体化します。背景色はクエリごとのハッシュ色 (ページ背景ですでに使われている色と同じ) に連動し、ライトテーマでは上部ほど彩度が高く、ダークテーマでは上部ほど明るいグラデーションになります。非アクティブなタブは、それぞれのクエリテキストのハッシュに応じて色づけされるため、タブごとの差が自動的に色で区別されます。

<div id="creating-closing-and-renaming-tabs">
  ### タブの作成、閉じる、名前の変更
</div>

* タブの右側にある `[+]` ボタンをクリックして、新しいタブを作成します。
* タブ上の `x` アイコンでタブを閉じます。
* 新しいタブには、デフォルトで `Query A`、`Query B` などの名前が付きます。
* アクティブなタブのタイトルをクリックするとその場で編集でき、編集欄はテキストの長さに合わせて広がります。

<div id="switching-tabs">
  ### タブの切り替え
</div>

* 非アクティブなタブをクリックすると、そのタブに切り替わります。
* タブパネル上でマウスホイールをスクロールすると、タブを切り替えられます。上にスクロールすると左のタブに、下にスクロールすると右のタブに切り替わります (存在する場合) 。縦方向・横方向どちらのホイールスクロールでも動作します。

タブバーは水平方向には固定されており、ページを横にスクロールしても左側に留まります (下部の ClickHouse ロゴと同様です) 。一方、縦方向にはページの他の部分と同様にスクロールします。

<div id="persistence-and-browser-history">
  ### 永続化とブラウザ履歴
</div>

ワークスペース (タブ、そのタイトル、アクティブなタブ、並び順、および小さな結果スナップショット) は IndexedDB に永続化され、再読み込み時に復元されます。永続化はベストエフォートで行われます。IndexedDB が利用できない場合、ワークスペースは現在のセッション中のみメモリ上の状態にフォールバックします。

タブは、ブラウザの History API と URL にも連携しています。

* 履歴状態にはアクティブなタブが保持されるため、ブラウザの戻るボタンと進むボタンでタブを切り替えられます。
* URL には `tab=<name>` パラメータが追加されます。読み込み時には、URL のクエリと `tab` パラメータが保存済みのタブとリコンサイルされます。つまり、その名前の既存タブがあればそれが再利用され (そのクエリで置き換えられます) 、名前が見つからない場合や名前未設定の場合は新しいタブが作成されます。これにより、自分で保存したタブを保持したまま、新しいクエリを含む URL を開けるようになります。

<div id="limitations">
  ### 制限事項
</div>

クエリの実行中にタブを切り替えると、そのクエリの実行状態は失われます。

復元用にスナップショットされるのは、小さな結果だけです。大きな結果 (スナップショットサイズの上限を超えるもの) や画像結果は永続化されません。つまり、タブを切り替えたり再読み込みしたりしても、そのタブにはクエリは残りますが、描画済みの結果は保持されず、クエリを再実行すると再現されます。これは、単一クエリの結果にも、"Run all" (複数クエリ) の実行でまとめて出力された結果にも当てはまります。