> ## 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`）のカラムごとの色分けモードに関するドキュメント

# Web UI の色分け

組み込みの Web SQL UI (`play.html`。任意の ClickHouse HTTP ポートの [`/play`](/docs/ja/concepts/features/interfaces/http) パスで提供) では、結果セルに色を付けることで、カラム内のパターンをひと目で見つけやすくできます。各カラムには、個別に切り替え可能な独自の色分けモードがあります。

<div id="switching-the-mode">
  ## モードの切り替え
</div>

各カラムヘッダーの右側に 🌈 アイコンが表示されます。これをクリックすると、そのカラムで使用できるモードが順番に切り替わります。ホバー可能なポインター (マウス) を備えたデバイスでは、アイコンはヘッダーにホバーしている間だけ表示されるため、通常は邪魔になりません。一方、ホバー操作のないタッチデバイスなど、粗いポインターのデバイスでは、直接タップできるようアイコンが常に表示されます。

カラムで使用できるモードは、型によって異なります。

* 数値カラムと `Date`/`DateTime`/`Date32`/`DateTime64` カラムでは、`bar` → `heatmap` → `categorical` → `none` の順に切り替わります。
* それ以外のすべてのカラムでは、`none` と `categorical` が切り替わります。

既定のモードは、数値カラムでは `bar`、日付と時刻のカラムを含むそれ以外のすべてのカラムでは `none` です。

<div id="modes">
  ## モード
</div>

* **`bar`** — 値に比例した横棒をセル内に描画します。数値カラムでは棒は 0 を基準に伸びますが、`Date`/`DateTime` カラムではタイムスタンプに対して 0 基準は意味をなさないため、代わりにカラムの `min`..`max` の範囲で表示されます。
* **`heatmap`** — カラムの最小値から最大値までの範囲で値をスケーリングし、その値を表す色でセルの背景全体を塗りつぶします。
* **`categorical`** — セルの値をハッシュ化して得た色でセルの背景を塗りつぶすため、同じ値には同じ色が、異なる値には異なる色が付きます。これはどのカラム型でも機能します。
* **`none`** — 色分けは行いません。

`Date`、`DateTime`、`Date32`、`DateTime64` の各カラムは、時刻の値に基づいて色付けされます。値は UTC として解釈されるため、スケールは閲覧者のブラウザのタイムゾーンに依存しません。

`heatmap` と `categorical` の背景色には `oklch` 色空間を使用し、テーマごとに lightness と chroma を固定したまま hue のみを変化させることで、ライトテーマとダークテーマのどちらでもセル内の文字の可読性を保っています。背景は、1 つの行が複数行にわたる場合でもセル全体を塗りつぶします。

<div id="categorical-emphasis">
  ## categorical モードでの選択範囲の強調
</div>

`categorical` モードでは、セルを選択すると、同じ値を持つほかのセルが強調され、太字と高コントラストの文字色 (ダークテーマでは純白、ライトテーマでは純黒) で表示されます。選択したセル自体は強調されません。これにより、特定の値がそのカラム内のほかのどこにあるかを簡単に確認できます。

<div id="persistence">
  ## 状態の保持
</div>

選択したモードは、ページの URL とブラウザの履歴にカラムごとに保存されるため、ページを再読み込みしたり、リンクを共有したり、戻る／進むで移動したりしても維持されます。URL と履歴の状態をコンパクトに保つため、保存されるのはデフォルト以外の選択肢のみです。

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

* 縦方向 (転置) の単一行レイアウトでは、色分けは表示されません。
* `DateTime64(9)` の差が 1 マイクロ秒未満の場合、グラデーションでは視覚的な意味がないため、カラー スケール上では区別されません。