> ## 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.

# デモデイズ - 2026-06-26

> 2026-06-26のClickStackデモデイズ

<div id="anomaly-detection-for-alerting-continues-with-bar-charts">
  ## アラート向け異常検知の棒チャート対応を継続
</div>

*[@fleon](https://github.com/fleon) によるデモ*

<Frame>
  <iframe src="https://www.youtube.com/embed/AeibhN5dGQY" title="YouTube ビデオプレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

まだ実験段階です。異常を強調するための正規分布バンドは折れ線チャートでは有効ですが、棒チャートで表現するのははるかに困難です。Himanshu はエラーバンドや中空の棒チャートも試し、バンドをより見やすくしようとしましたが、結果は依然として煩雑です。塗りつぶしの棒の上にバンドを線として重ねる方法も同じ問題があり、棒が視覚的に目立ちすぎるため、バンドを見分けにくくなります。

当面は、異常バンドを確認したいユーザーには折れ線チャートを案内し、棒チャートのデザインは後で見直すことになりそうです。Himanshu は、これをリリースする前に最適なアプローチについてのフィードバックを求めています。

<div id="external-onclick-actions-for-tables">
  ## テーブルの外部 onclick アクション
</div>

*[@pulpdrew](https://github.com/pulpdrew)によるデモ*

<Frame>
  <iframe src="https://www.youtube.com/embed/8CV7ZEbFqhk" title="YouTube ビデオプレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

Drew は、ダッシュボードテーブルに追加された小規模ながら便利な機能として、行から外部ツールへ直接リンクできる機能をデモしました。

テーブルの行では、すでに Search や別のダッシュボードへのドリルダウンが可能です。これに加え、3 つ目のオプション「External」が導入されました。これは、選択した行の値を使って URL を組み立ててから開く機能です。デモでは、製品カタログの行をクリックすると製品名が Google 検索 URL に挿入される例で、この機能を紹介しました。同じ仕組みを使えば、Grafana、社内の runbook、チケットシステムなど、URL パラメーターを受け取る任意のツールにリンクできます。

シンプルな機能ですが、重要な機能です。ClickStack を単なる宛先として扱うのではなく、より広範なオブザーバビリティ workflow の一部として活用できるため、ダッシュボードから調査の継続に必要なツールへ簡単に移動できます。

**関連 PR:** [#2523](https://github.com/hyperdxio/hyperdx/pull/2523) feat: ダッシュボードテーブルのクリック時の動作による外部リンクをサポート

<div id="otel-profiling">
  ## OTel プロファイリング
</div>

*[@SpencerTorres](https://github.com/SpencerTorres) によるデモ*

<Frame>
  <iframe src="https://www.youtube.com/embed/-yAP8lXA2D8" title="YouTube ビデオプレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

プロファイリングは、まだ発展途上ではあるものの、ClickStack への導入が始まっています。Spencer は、フレームグラフの生成や pprof などのツールで使用される OpenTelemetry のプロファイリングサンプルを取り込む初期プロトタイプをデモしました。ClickHouse をバックエンドとする Grafana ダッシュボードで、データを繰り返しソートする小規模なプログラムを可視化し、新しいプロファイリングサンプルがストリーミングされるたびに個々のコールスタックブロックを掘り下げました。

実装はまだかなり粗く、クエリにもそれが表れています。各行はログとトレースの要素を組み合わせ、フレームグラフの span やスライスを表す、関数名とアドレスの長い配列を格納します。Grafana が想定するフォーマットを再構築するには、これらの配列をまたいで結合・集約する必要があります。一方、エクスポーターは ClickHouse に書き込む前に、生データのプロファイリングフレームを展開する必要があります。スキーマは引き続きブルームフィルタに依存しており、全テキスト検索も追加されたことから、互換性についての議論が起こりました。ClickHouse Cloud はすでに全テキスト検索をサポートしているため、チームでは、この機能を利用できないオープンソース版をいつまで維持する必要があるかが議論されました。

この作業は現在、オープンな PR でレビューされています。まずコア機能をオープンソースに取り込み、その後 ClickStack に統合する予定です。

<div id="autocomplete-for-otel-metric-sources">
  ## OTel メトリクスログソースのオートコンプリート
</div>

*[@brandon-pereira](https://github.com/brandon-pereira)によるデモ*

<Frame>
  <iframe src="https://www.youtube.com/embed/lvcv7IV2Bs8" title="YouTube ビデオプレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

Brandonは、メトリクスのオンボーディングをより便利にする小さな改善を紹介しました。OpenTelemetry Metricsログソースの作成時に、メトリクステーブルのフィールドは手動で一つずつ選択するのではなく、選択したデータベース内のテーブル名に基づいてオートコンプリートされるようになりました。これにより、メトリクスのオンボーディング体験が、ログとトレースですでに提供されているオンボーディング体験と統一されます。

**関連PR:** [#2524](https://github.com/hyperdxio/hyperdx/pull/2524) feat(app): Create Sourceフォームのメトリクステーブルのドロップダウンを自動入力

<div id="eval-framework-for-dashboards">
  ## ダッシュボードの評価フレームワーク
</div>

*[@brandon-pereira](https://github.com/brandon-pereira) によるデモ*

<Frame>
  <iframe src="https://www.youtube.com/embed/cg2pYb5rsKU" title="YouTube ビデオプレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

AI によるダッシュボード生成は改善されていますが、目視だけで進捗を判断するには限界があります。Brandon は、ダッシュボード生成が実際に改善しているか、そして同じく重要な点として、どこに課題が残っているかを測定するための評価フレームワークを構築しています。

この評価では、折りたたみ可能なセクション、タブ、ヒートマップ、円グラフ、ログソースに基づくタイルと生の SQL、サービスレベルのフィルター、ダッシュボード間のドリルダウンリンクなど、できるだけ多くの機能を意図的に使用するダッシュボードをモデルに生成させます。

その後の採点処理で、すべてが想定どおりにレンダリングされ、動作することを検証します。このプロセスでは、常に短すぎる状態でレンダリングされる Markdown タイルなど、実際の問題がすでに見つかっています。また、Drew の新しい onclick 機能で有効になったドリルダウンリンクをたどり、2 つ目の AI 生成ダッシュボードへのナビゲーションが正しく機能することも確認します。新しいダッシュボード機能が追加されるたびに評価へ組み込まれるため、手動テストに頼ることなく、リグレッションを自動的に検出できます。Brandon は、まもなくこのフレームワークの PR を公開したいと考えています。

**関連 PR:** [#2571](https://github.com/hyperdxio/hyperdx/pull/2571) feat(hdx-eval): ダッシュボード構築の評価シナリオを追加 (進行中)

<div id="connecting-to-prometheus">
  ## Prometheus への接続
</div>

*[@knudtty](https://github.com/knudtty) によるデモ*

<Frame>
  <iframe src="https://www.youtube.com/embed/qvM8-6A4two" title="YouTube ビデオプレーヤー" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

Aaron は、ClickStack と Prometheus を連携させる初期段階のブリッジをデモしました。ログソースの高度な設定に新たに追加された「Prometheus compatible」オプションを有効にすると、ClickStack は設定されたホストを ClickHouse インスタンスではなく、Prometheus API エンドポイントとして扱います。デモでは Thanos を使用しています。有効化後は、ダッシュボードタイルからそのエンドポイントに対して PromQL を直接実行できます。Aaron は、ClickHouse を介して変換するのではなく、クエリを Prometheus に直接送信し、ポッド全体の CPU 使用率をグループ化するチャートでこれを実演しました。デモ自体は比較的小規模でしたが、ユーザーエクスペリエンスに関する幅広い議論のきっかけとなりました。

長期的な目標は、ClickStack 内で Prometheus をネイティブにサポートすることです。この機能は実用的な第一歩として位置付けられており、Prometheus をすでに利用しているチームが、初日からすべてを ClickHouse 経由にすることを強いられることなく、ClickStack を導入しながら引き続き Prometheus を利用できるようにします。並列に、ClickHouse 内で PromQL をネイティブにサポートする取り組みも継続しています。

**関連 PR:** [#2518](https://github.com/hyperdxio/hyperdx/pull/2518) feat: 外部 Prometheus データストアへの接続機能を追加