> ## Documentation Index
> Fetch the complete documentation index at: https://private-7c7dfe99-vortex-format.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> 組み込み Web SQL UI（`/play`）のノートブックモードに関するドキュメント。ノートブックモードでは、タブをクエリセルとテキストセルの並びに変換できます

# Web UI ノートブックモード

組み込みの Web SQL UI (`play.html`。任意の ClickHouse HTTP ポートの [`/play`](/ja/concepts/features/interfaces/http) パスで提供されます) では、タブをノートブックに変換できます。ノートブックとは、セルを順番に並べたもので、各セルはそれぞれ独自の結果を持つクエリか、Markdown テキストのブロックのいずれかです。Jupyter、Observable、Hex、Deepnote と同じ形式のドキュメントであり、用途も同じです。つまり、一連のクエリのチェーンと、その間の考察を 1 つのページにまとめておくためのものです。

ノートブックモードはタブ単位で設定します。あるタブをノートブックにして、別のタブは通常の単一クエリエディタのままにしておくこともできます。また、各タブのノートブックは、ページを再読み込みしても保持されます。

<h2 id="adding-cells">
  セルの追加
</h2>

タブは最初、クエリセルが 1 つだけの状態で始まり、見た目は通常のエディタとまったく変わりません。ヘッダーもセルの装飾もなく、ノートブックであることは画面上からはわかりません。クエリが結果を返すと、その下に大きな `[+]` ボタンが表示されます。このボタンは結果の表示を邪魔しないよう、あえて控えめなデザインになっています。クリックすると展開され、追加できる 2 種類のセルが表示されます。

* **Query** — 新しいクエリセルを追加します。すぐにエディタにフォーカスが移るため、そのまま入力を始められます。
* **Text** — 新しい Markdown セルを追加します。セルは編集モードで開きます。

2 つ目のセルを追加すると、そのタブでノートブックモードが有効になります。

<h2 id="cell-headers">
  セルのヘッダー
</h2>

セルが2つ以上になると、各セルには位置と種類を示すヘッダーが表示されます (例: `1. Query`、`2. Text`) 。クエリセルでは、実行中はステータスを示すドットが表示され、失敗した場合は赤いドットが表示されます。完了したセルには何も表示されません。結果がすぐ下に表示されるためです。

ヘッダーのアクションは、セルにホバーまたはフォーカスしたときに表示されます。

| アクション | 意味 |
| - | - |
| `▶` | このセルを実行します (クエリセルのみ) |
| `✎` | このセルを編集します。エディタをこのセルに移すか、テキストセルをソース表示に戻します |
| `＋` | このセルの前に新しいセルを挿入します。同じ Query/Text の選択肢がその場に表示されます |
| `↑` / `↓` | セルを上または下に移動します |
| `✕` | セルを削除します |

共有エディタはクエリセル内に配置されるため、タブには常に少なくとも1つのクエリセルが残ります。そのため、最後に残ったクエリセルでは `✕` が無効になります。

<h2 id="query-cells">
  クエリセル
</h2>

ページ上のクエリエディタは常に 1 つだけです。これは構文ハイライト、オートコンプリート、クエリパラメータ入力を備えたフル機能のエディタです。ノートブックモードでは、このエディタはアクティブなクエリセルにドッキングされ、フォーカスがある間だけ表示されます。フォーカスが外れるとすぐにそのセルも折りたたまれるため、閲覧中のノートブックには開いたテキスト入力欄が一切表示されません。折りたたまれたクエリをクリックすると、そのクエリで再びエディタが使えるようになります(エディタが別のセルにあった場合は、そこから移動してきます)。エディタ内部でのフォーカス移動(クエリパラメータ入力や補完候補への移動など)では、エディタは折りたたまれません。

折りたたまれたクエリセルでは、クエリが 1 行で表示されます。構文ハイライトは適用されたまま、連続する空白(インデントや改行を含む)は 1 つのスペースにまとめられ、収まりきらない場合は末尾が右端でフェードアウトします。セル自体には背景がないため、折りたたまれたセルは入力欄ではなく、ページ上のテキストとして自然に読めます。

`Run` ボタン、進捗行、コピー/ダウンロードのアクションは、ページヘッダーから移動し、編集中のクエリの下、つまりクエリとその結果の間にドッキングされます。これらが示す実行と同じ場所に配置されるため、そのセルをどう実行すればよいかが一目でわかります。これらはエディタの一部であるため、セルにフォーカスが当たったり外れたりするのに合わせて、エディタとともに表示・非表示になります。

ノートブックモードでは、結果がよりコンパクトに表示されます。フォントが小さくなり、セルのパディングもそれに合わせて縮小され、テーブルの高さはビューポートの高さの 4 分の 1 までに抑えられます。結果の下端をドラッグすると、クエリエディタのサイズ変更とまったく同じ要領で表示領域を広げたり狭めたりできます。テキストセルの Markdown エディタにも同じハンドルがあります。テーブル自体が縦方向・横方向のスクロールコンテナーとなるため、細いスクロールバーはテーブル自身の端に表示されます。長い結果や幅の広い結果があっても、ノートブックの後続部分がページの下へ押し下げられたり、ページが横に広がったりすることはなく、スクロール中もカラムヘッダーはテーブルの上端に固定されます。ヘッダーがテーブルの最上部にあるため、カラムの型は、ページ全体をスクロールするテーブルのようにヘッダーの上ではなく、ヘッダーのすぐ下、先頭の行に重なる位置に表示されます。

実行方法は従来どおりです。`Ctrl/Cmd+Enter`(または `Run` ボタン)で、エディタ内のクエリ、つまりアクティブなセルが実行されます。1 つのタブで同時に実行できるクエリは 1 つだけです。同じタブの別のセルで実行を開始するか、`Stop` を押すと、前の実行は終了します。

`Logs` ビューと `Metrics` ビュー、および進捗行のリソースメーターは、それらが表す結果を生成したセルに属します。各セルはそれぞれ独自の選択状態とメーターを保持し、共有のトグルにはアクティブなセルが生成した内容が表示されます。セルを切り替えると、そのセル自身のログ、メトリクス、メーターが再び表示されます。クエリの実行中は、進捗行は実行中のセルに留まります。次のクエリを書くためにエディタを別のセルへ移動しても、ライブの進捗表示が消えたり、それらのトグルの対象が別のセルの結果に切り替わったりすることはありません。

カラムのカラーコーディング、ピン留めされたカラム、および[結果の形状](/ja/concepts/features/interfaces/web-ui-result-shaping)(ソート、フィルタ、ページ)もセルに属します。これらは結果に対して設定されるものなので、その結果に紐づきます。セルの結果をソートまたはフィルタすると、そのセルが再実行されます。その際、エディタが別のセルにあった場合は、まずエディタがそのセルに移動します。`Run all` によって複数のテーブルが生成されたセルでは、それらのテーブル全体で 1 つの設定が共有され、セルごとにそれぞれ独自の設定が保持されます。共有リンクとブラウザ履歴にはアクティブなセルの設定が含まれ、その他のセルの設定はそれぞれのセルとともに保持されます。

<h2 id="text-cells">
  テキストセル
</h2>

テキストセルには Markdown を記述します。編集中のテキストエリアには、記法のマーカーがハイライトされた状態でソースが表示されます。見出し、強調、コードスパン、リンク、リストの行頭記号、引用ブロックは色分けされるだけで、レンダリングされて記号が消えることはありません。つまり、編集しているのは常にソースそのものです。テキストエリアは内容に合わせて広がります。

テキストエリアからフォーカスを外す (他の場所をクリックする、`Escape` を押す、または `Ctrl/Cmd+Enter` を押す) と編集が終了し、テキストエリアはレンダリングされた Markdown に置き換わります。レンダリングされたテキストをクリックすると、再び編集モードに戻ります。

テキストセルは、どちらの状態でもクエリと同じ等幅フォントで表示されます。そのため、ノートブック全体を 1 つのドキュメントとして読むことができ、セルがソースとレンダリング結果の間で切り替わってもフォントが変わることはありません。

見出し、強調、インラインコードとフェンス付きコード、リンクと画像、URL の自動リンク、順序付きリストと順序なしリスト、引用ブロック、水平線、パイプテーブルがサポートされています。テキストセル内の生の HTML はレンダリングされずにエスケープされます。また、リンクおよび画像の URL は `http`、`https`、`mailto`、および相対パスに限定されています。`[guide](guide.md)` や `![pic](images/pic.png)` のような通常の相対リンクは機能しますが、`javascript:` や `data:` などのスキーム、およびプロトコル相対の `//host/...` (これは相対パスではなく別のオリジンを指します) はプレーンテキストのまま表示されます。

<h2 id="persistence">
  永続化
</h2>

タブのノートブック全体 (すべてのセル、その内容、および小さな結果スナップショット) は、ワークスペースの他のデータとともに IndexedDB に保存され、再読み込み時に復元されます。ベストエフォートでの動作となる点や結果サイズの制限は、[Web SQL UI](/ja/concepts/features/interfaces/web-sql) で説明されているものと同じです。

URL とブラウザの履歴はアクティブなセルに追従します。`#` フラグメントにはそのセルのクエリが格納され、ブラウザの「戻る」「進む」で、これまでに開いたセル (およびタブ) の間を移動できます。ノートブックの URL を共有した場合、共有されるのはノートブック全体ではなく、アクティブなセルのクエリのみです。

タブを複製すると、ノートブック全体が複製されます (結果は含まれません)。

タブを Markdown として保存すると (タブバーの保存ボタン)、ノートブックのすべてのセルが順番どおりに書き出されます。クエリセルはフェンス付きコードブロックとして書き出され、その後にパラメータと結果テーブルが続きます。テキストセルは、情報文字列 `markdown` を指定したフェンス付きコードブロックとして書き出されます。このドキュメントを読み込むと、すべてのタブがそれぞれのセルを含めて復元されます。ただし結果は復元されないため、読み込まれたクエリセルは未実行の状態になります。