jpskill.com
💼 ビジネス コミュニティ

evidence

Evidenceは、SQLとMarkdownを使って美しいダッシュボードを生成するBIフレームワークで、このSkillは、開発者がデータレポートをコードとして構築し、静的なサイトとして展開、重いBIツールなしでセルフサービス分析を実現するのを支援するSkill。

📜 元の英語説明(参考)

Expert guidance for Evidence, the open-source BI framework that generates beautiful, interactive dashboards from SQL queries and Markdown. Helps developers build data reports as code, deploy them as static sites, and create self-service analytics without heavy BI tools.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Evidenceは、SQLとMarkdownを使って美しいダッシュボードを生成するBIフレームワークで、このSkillは、開発者がデータレポートをコードとして構築し、静的なサイトとして展開、重いBIツールなしでセルフサービス分析を実現するのを支援するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o evidence.zip https://jpskill.com/download/14875.zip && unzip -o evidence.zip && rm evidence.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/14875.zip -OutFile "$d\evidence.zip"; Expand-Archive "$d\evidence.zip" -DestinationPath $d -Force; ri "$d\evidence.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して evidence.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → evidence フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Evidence — コード駆動型 BI ダッシュボード

概要

Evidence は、SQL クエリと Markdown から美しくインタラクティブなダッシュボードを生成する、オープンソースの BI フレームワークです。開発者がデータレポートをコードとして構築し、静的サイトとしてデプロイし、重い BI ツールなしでセルフサービス分析を作成するのに役立ちます。

手順

プロジェクトのセットアップ

# 新しい Evidence プロジェクトを作成
npx degit evidence-dev/template my-dashboard
cd my-dashboard
npm install
npm run dev    # localhost:3000 でダッシュボードを表示

レポートの作成

Evidence レポートは、SQL が埋め込まれた Markdown ファイルです。

<!-- pages/sales-overview.md — 売上ダッシュボードページ -->
# 売上概要

```sql monthly_revenue
SELECT
  date_trunc('month', created_at) AS month,
  SUM(amount) AS revenue,
  COUNT(*) AS orders,
  SUM(amount) / COUNT(*) AS avg_order_value
FROM orders
WHERE created_at >= '2025-01-01'
GROUP BY 1
ORDER BY 1

今月の収益は {fmt(monthly_revenue[monthly_revenue.length - 1].revenue, 'usd')} 増加しました。 先月からの変化は {pct_change} です。

<LineChart data={monthly_revenue} x=month y=revenue yFmt=usd title="月間収益" />

<BarChart data={monthly_revenue} x=month y=orders title="月間注文数" />

製品別収益

SELECT
  p.name AS product,
  SUM(oi.quantity * oi.unit_price) AS revenue,
  SUM(oi.quantity) AS units_sold
FROM order_items oi
JOIN products p ON p.id = oi.product_id
JOIN orders o ON o.id = oi.order_id
WHERE o.created_at >= current_date - interval '30 days'
GROUP BY 1
ORDER BY 2 DESC
LIMIT 10

<DataTable data={product_breakdown} rows=10> <Column id=product title="製品" /> <Column id=revenue title="収益" fmt=usd /> <Column id=units_sold title="販売ユニット数" fmt=num0 /> </DataTable>

<BarChart data={product_breakdown} x=product y=revenue yFmt=usd swapXY=true title="収益上位10製品" />


### データソースの設定

データベースに接続します。

```yaml
# sources/mydb/connection.yaml — PostgreSQL 接続
name: mydb
type: postgres
host: localhost
port: 5432
database: analytics
user: evidence_reader
password: ${POSTGRES_PASSWORD}    # 環境変数から取得
ssl: true

# sources/duckdb/connection.yaml — ファイルベースの分析用 DuckDB
name: local
type: duckdb
filename: data/analytics.duckdb

# sources/bigquery/connection.yaml — Google BigQuery
name: warehouse
type: bigquery
project_id: my-gcp-project
dataset: analytics
credentials_path: ./gcp-key.json

# sources/csv/connection.yaml — CSV ファイル
name: csvdata
type: csv
path: data/        # このディレクトリ内のすべての CSV ファイルがテーブルになります

インタラクティブコンポーネント

<!-- pages/cohort-analysis.md — インタラクティブフィルター -->
# コホート分析

<!-- ドロップダウンフィルター -->
<Dropdown name=time_period title="期間">
  <DropdownOption value="7 days" valueLabel="過去7日間" />
  <DropdownOption value="30 days" valueLabel="過去30日間" />
  <DropdownOption value="90 days" valueLabel="過去90日間" />
</Dropdown>

<Dropdown name=segment title="顧客セグメント" data={segments} value=id label=name />

```sql cohort_data
SELECT
  date_trunc('week', first_purchase) AS cohort_week,
  weeks_since_first AS week_number,
  COUNT(DISTINCT customer_id) AS customers,
  SUM(revenue) AS revenue
FROM customer_cohorts
WHERE first_purchase >= current_date - interval '${inputs.time_period}'
  AND segment = '${inputs.segment.value}'
GROUP BY 1, 2
ORDER BY 1, 2

<Heatmap data={cohort_data} x=week_number y=cohort_week value=customers title="コホート別顧客維持率" />

<!-- 大きな数値 KPI --> <BigValue data={cohort_data} value=customers title="総顧客数" fmt=num0 comparison=revenue comparisonTitle="総収益" comparisonFmt=usd />


### テンプレート化されたページ

データから動的にページを生成します。

```markdown
<!-- pages/products/[product_name].md — 製品ごとのページ -->
# {params.product_name}

```sql product_detail
SELECT * FROM products WHERE slug = '${params.product_name}'
SELECT
  date_trunc('day', o.created_at) AS date,
  SUM(oi.quantity) AS units,
  SUM(oi.quantity * oi.unit_price) AS revenue
FROM order_items oi
JOIN orders o ON o.id = oi.order_id
JOIN products p ON p.id = oi.product_id
WHERE p.slug = '${params.product_name}'
  AND o.created_at >= current_date - interval '90 days'
GROUP BY 1
ORDER BY 1

<LineChart data={product_sales} x=date y=revenue yFmt=usd /> <LineChart data={product_sales} x=date y=units />


### デプロイメント

```bash
# 静的サイトをビルド
npm run build

# 任意の静的ホスティングにデプロイ
# Vercel
npx vercel

# Netlify
npx netlify deploy --prod --dir=build

# Evidence Cloud (マネージドホスティング)
npx evidence deploy

# cron で更新をスケジュール
# Evidence はビルド時にクエリをリビルドします
# 定期的にリビルドするための cron ジョブを設定します:
# 0 */4 * * * cd /app/dashboard && npm run build && cp -r build /var/www/dashboard

例 1: 毎週の SaaS メトリクスレポートの作成

ユーザーリクエスト:

PostgreSQL データベースから、毎週の SaaS メトリクス (MRR、解約率、新規トライアル、コンバージョン率) を表示する Evidence ダッシュボードを構築します。

エージェントは Evidence プロジェクトをスキャフォールドし、evidence.plugins.yaml で PostgreSQL 接続を設定し、各メトリクスの SQL クエリ (select date_trunc('week', created_at) as week, sum(amount) as mrr from subscriptions...) を作成し、<LineChart><BigValue>、および <DataTable> コンポーネントを含む Markdown ページを構築し、フィルタリング用の <DateRange> を使用して日付範囲入力を追加します。

例 2: テンプレート化された顧客ヘルスページの構築

ユーザーリクエスト:

各顧客の使用状況の傾向、サポートチケット、および更新日を表示する、Evidence の顧客ごとの詳細ページが必要です。

エージェントは pages/customers/[customer_id].md にテンプレート化されたページを作成し、${params.customer_id} でフィルタリングする SQL クエリを作成し、各詳細ページにリンクする <DataTable> を含む顧客インデックスページを追加し、`<BarChar

(原文がここで切り詰められています)

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Evidence — Code-Driven BI Dashboards

Overview

Evidence, the open-source BI framework that generates beautiful, interactive dashboards from SQL queries and Markdown. Helps developers build data reports as code, deploy them as static sites, and create self-service analytics without heavy BI tools.

Instructions

Project Setup

# Create a new Evidence project
npx degit evidence-dev/template my-dashboard
cd my-dashboard
npm install
npm run dev    # Dashboard at localhost:3000

Writing Reports

Evidence reports are Markdown files with embedded SQL:

<!-- pages/sales-overview.md — Sales dashboard page -->
# Sales Overview

```sql monthly_revenue
SELECT
  date_trunc('month', created_at) AS month,
  SUM(amount) AS revenue,
  COUNT(*) AS orders,
  SUM(amount) / COUNT(*) AS avg_order_value
FROM orders
WHERE created_at >= '2025-01-01'
GROUP BY 1
ORDER BY 1

Revenue has grown {fmt(monthly_revenue[monthly_revenue.length - 1].revenue, 'usd')} this month, a {pct_change} change from last month.

<LineChart data={monthly_revenue} x=month y=revenue yFmt=usd title="Monthly Revenue" />

<BarChart data={monthly_revenue} x=month y=orders title="Orders per Month" />

Revenue by Product

SELECT
  p.name AS product,
  SUM(oi.quantity * oi.unit_price) AS revenue,
  SUM(oi.quantity) AS units_sold
FROM order_items oi
JOIN products p ON p.id = oi.product_id
JOIN orders o ON o.id = oi.order_id
WHERE o.created_at >= current_date - interval '30 days'
GROUP BY 1
ORDER BY 2 DESC
LIMIT 10

<DataTable data={product_breakdown} rows=10> <Column id=product title="Product" /> <Column id=revenue title="Revenue" fmt=usd /> <Column id=units_sold title="Units Sold" fmt=num0 /> </DataTable>

<BarChart data={product_breakdown} x=product y=revenue yFmt=usd swapXY=true title="Top 10 Products by Revenue" />


### Data Source Configuration

Connect to your databases:

```yaml
# sources/mydb/connection.yaml — PostgreSQL connection
name: mydb
type: postgres
host: localhost
port: 5432
database: analytics
user: evidence_reader
password: ${POSTGRES_PASSWORD}    # From environment variable
ssl: true

# sources/duckdb/connection.yaml — DuckDB for file-based analytics
name: local
type: duckdb
filename: data/analytics.duckdb

# sources/bigquery/connection.yaml — Google BigQuery
name: warehouse
type: bigquery
project_id: my-gcp-project
dataset: analytics
credentials_path: ./gcp-key.json

# sources/csv/connection.yaml — CSV files
name: csvdata
type: csv
path: data/        # All CSV files in this directory become tables

Interactive Components

<!-- pages/cohort-analysis.md — Interactive filters -->
# Cohort Analysis

<!-- Dropdown filter -->
<Dropdown name=time_period title="Time Period">
  <DropdownOption value="7 days" valueLabel="Last 7 Days" />
  <DropdownOption value="30 days" valueLabel="Last 30 Days" />
  <DropdownOption value="90 days" valueLabel="Last 90 Days" />
</Dropdown>

<Dropdown name=segment title="Customer Segment" data={segments} value=id label=name />

```sql cohort_data
SELECT
  date_trunc('week', first_purchase) AS cohort_week,
  weeks_since_first AS week_number,
  COUNT(DISTINCT customer_id) AS customers,
  SUM(revenue) AS revenue
FROM customer_cohorts
WHERE first_purchase >= current_date - interval '${inputs.time_period}'
  AND segment = '${inputs.segment.value}'
GROUP BY 1, 2
ORDER BY 1, 2

<Heatmap data={cohort_data} x=week_number y=cohort_week value=customers title="Customer Retention by Cohort" />

<!-- Big number KPIs --> <BigValue data={cohort_data} value=customers title="Total Customers" fmt=num0 comparison=revenue comparisonTitle="Total Revenue" comparisonFmt=usd />


### Templated Pages

Generate pages dynamically from data:

```markdown
<!-- pages/products/[product_name].md — One page per product -->
# {params.product_name}

```sql product_detail
SELECT * FROM products WHERE slug = '${params.product_name}'
SELECT
  date_trunc('day', o.created_at) AS date,
  SUM(oi.quantity) AS units,
  SUM(oi.quantity * oi.unit_price) AS revenue
FROM order_items oi
JOIN orders o ON o.id = oi.order_id
JOIN products p ON p.id = oi.product_id
WHERE p.slug = '${params.product_name}'
  AND o.created_at >= current_date - interval '90 days'
GROUP BY 1
ORDER BY 1

<LineChart data={product_sales} x=date y=revenue yFmt=usd /> <LineChart data={product_sales} x=date y=units />


### Deployment

```bash
# Build static site
npm run build

# Deploy to any static hosting
# Vercel
npx vercel

# Netlify
npx netlify deploy --prod --dir=build

# Evidence Cloud (managed hosting)
npx evidence deploy

# Schedule refreshes with cron
# Evidence rebuilds queries at build time
# Set up a cron job to rebuild periodically:
# 0 */4 * * * cd /app/dashboard && npm run build && cp -r build /var/www/dashboard

Examples

Example 1: Creating a weekly SaaS metrics report

User request:

Build an Evidence dashboard that shows our weekly SaaS metrics — MRR, churn rate, new trials, and conversion rate — from our PostgreSQL database.

The agent scaffolds an Evidence project, configures the PostgreSQL connection in evidence.plugins.yaml, creates SQL queries for each metric (select date_trunc('week', created_at) as week, sum(amount) as mrr from subscriptions...), builds a Markdown page with <LineChart>, <BigValue>, and <DataTable> components, and adds date range inputs with <DateRange> for filtering.

Example 2: Building a templated customer health page

User request:

I need a per-customer detail page in Evidence that shows usage trends, support tickets, and renewal date for each customer.

The agent creates a templated page at pages/customers/[customer_id].md, writes SQL queries that filter by ${params.customer_id}, adds a customer index page with <DataTable> linking to each detail page, and includes <BarChart> for usage and <Alert> components for upcoming renewals.

Guidelines

  1. SQL is the source of truth — Write queries directly in Markdown; no abstraction layer between you and the data
  2. Use parameterized queries carefully — Evidence supports ${inputs.x} but sanitize inputs; prefer dropdown constraints over free text
  3. One page per topic — Keep reports focused; use navigation for different areas (sales, product, customer)
  4. Templated pages for catalogs — Use [param].md for product pages, customer profiles, or any entity-level reports
  5. Read-only database users — Connect Evidence with a read-only database user; it should never write data
  6. Version control reports — Evidence projects are code; store in Git, review in PRs, deploy via CI
  7. Build-time queries — Queries run at build time, not on page load; schedule rebuilds based on data freshness needs
  8. DuckDB for local analysis — Use DuckDB as a data source for CSV/Parquet files; no database server needed