カレンダーUIをTableauで作る — パラメーターアクション2本で実現するインタラクティブ日付選択【#WOW2026 Week13】

難易度: 中級〜上級

今週のお題

#WOW2026 Week 13のテーマは「Let’s Viz Tsukurima Show!」。JTUG（Japan Tableau User Group）の「ビズ作りましょう！」企画とのコラボチャレンジで、Sample Superstoreの受注データを使いながら、Tableauでインタラクティブなカレンダーダッシュボードを10分で作り上げる課題です。

Requirements（要件一覧）

• ダッシュボードサイズ：1000 × 800 px
• Point 1 — カレンダー作成: Order Dateを使ってDecember 2025のカレンダーを作成する。年月ヘッダー・曜日ヘッダーを表示し、データのない日付は非表示にする
• Point 2 — 日付選択→地域別売上バーチャート: カレンダーの日付を選択したとき、地域別Salesの横棒グラフを表示する。ラベルに「Sales」と選択日付を含め、タイトルとグラフの間に#VizTSロゴを配置する
• Point 3 — 週次バーチャート: 選択した週の下に、曜日別Salesの横棒グラフを表示する。全7曜日を常時表示し、全日付が1画面に収まるようにする
• オプション: 日付のセルを円形背景で装飾、選択状態を濃い色で表現、同じ日付をクリックするとグラフを非表示にするトグル機能

作成したダッシュボード

→ Tableau Publicで見る

今週の技術テーマ

パラメーターアクション（Parameter Actions）

このチャレンジの核心はパラメーターアクションです。通常のフィルターアクションはビューをフィルタリングしますが、パラメーターアクションは「マークをクリックした値をパラメーターに書き込む」ことができます。

なぜパラメーターアクションを使うのか？

カレンダーの日付セルをクリックしたとき、「その日付」と「その週番号」という2種類の情報を同時に他のシートに渡す必要があります。フィルターアクションだけでは複数の異なる型の値を同時に扱うのが難しく、パラメーターアクションを2本組み合わせることでこれを実現しています。

要件ごとの実装方法

Point 1 — カレンダーの作成

Tableauでカレンダーを作るには、日付の「週番号」を行、「曜日番号」を列に配置します。

1. 列: DATEPART('weekday', [Order Date]) → 1（日）〜7（土）
2. 行: DATEPART('week', [Order Date]) → 週番号
3. テキストマーク: DAY([Order Date]) → セルに日付の「日」部分を表示
4. データなし日の非表示: ビューにOrder Dateが存在しない日は自動的に非表示（データドリブンで制御）

年月ヘッダーはテキストオブジェクトで固定表示し、曜日ヘッダーは列ヘッダーをカスタムラベルで上書きします。

Point 2 — パラメーターアクション：日付選択→地域別バーチャート

ワークブックには2つのパラメーターと2本のパラメーターアクションが定義されています。

パラメーター:

p.select date（パラメーター2）: date型、初期値 #2025-12-17#
p.select week num（パラメーター1）: integer型、初期値 51

計算フィールド（フィルター用）:

f.date: [Parameters].[パラメーター 2] = [Order Date]
  → 選択した日付と一致するレコードのみを抽出

f.week: DATEPART('week', [Order Date]) <= [Parameters].[パラメーター 1]
  → 選択した週番号以下の週のデータを抽出

パラメーターアクション（設定）:

• カレンダーシートのマークをクリック → p.select date にクリックした日付を書き込み
• カレンダーシートのマークをクリック → p.select week num にその週番号を書き込み

地域別バーチャートのシートは f.date = TRUE でフィルタリングされており、カレンダーをクリックするたびに表示データが切り替わります。

Point 3 — 2枚のカレンダーシートをパラメーターで切り替える（実装の核心）

このダッシュボードの最大のポイントは、カレンダーシートを2枚用意し、パラメーター p.select week num によって表示する週を切り替えている点です。

• カレンダーSheet A（選択週以外）: f.week = FALSE（選択週より前の週）のデータを表示。通常の日付数字のみ表示
• カレンダーSheet B（選択週）: f.week = TRUE（選択週に一致）のデータを表示。この行にSales by Regionのバーチャートと#VizTSロゴが埋め込まれる

ダッシュボード上でSheet AとSheet Bを縦に並べることで、「選択した週の行だけバーチャートが表示される」カレンダーUIを実現しています。1枚のシートで表現しようとするとレイアウトが複雑になりますが、シートを分割することでそれぞれのビューをシンプルに保てます。

Point 4 — 週次バーチャート（全7曜日常時表示）

全7曜日を常時表示するには、データが存在しない曜日もゼロ値で表示させる工夫が必要です。

• DATEPART('weekday', [Order Date]) を列に配置し、f.week フィルターを適用
• 曜日軸は固定（Show Missing Values）で全7日を強制表示

詰まったポイントと解決策

カレンダーの列を揃える — 空白列の表示

最も手間がかかったのが空白列（データのない曜日）の表示です。

Tableauはデフォルトでデータが存在しないマークを非表示にするため、注文のない曜日のセルが消えてカレンダーのグリッドが崩れます。例えばDecember 2025の第1週では日曜日に注文がなければ、その列が詰められてしまいます。

解決策: 列に配置した DATEPART('weekday', ...) フィールドを右クリック → 「Show Missing Values（欠損値を表示）」 をオンにする。

これにより、データのない曜日でも列が固定幅で表示され、7列のグリッドが崩れなくなります。行（週番号）側も同様に「Show Missing Values」を適用すると、すべての週で行の高さが揃います。

パラメーターアクションのトリガー設定

パラメーターアクションは「Select（選択）」「Hover（ホバー）」「Menu」の3種類から選べます。カレンダーで「同じ日付を再クリックでグラフ非表示」を実現するには、選択解除時の挙動（Clearing the selection will: の設定）を「Keep current value」ではなく特定の値（例：NULLや初期値）に戻すよう設定する必要があります。

この技術の応用場面

パラメーターアクションは、カレンダー以外にも幅広く応用できます。

• 動的な期間比較: 棒グラフのバーをクリックして「比較対象年」をパラメーターに渡し、前年比チャートをリアルタイムで切り替える
• ドリルダウン型ダッシュボード: 上位カテゴリをクリックすると、下位の詳細チャートが連動して切り替わるナビゲーション
• 動的な閾値設定: スライダーや散布図のマークをクリックして、KPI目標値やアラートラインをインタラクティブに変更する

---

Tableau Public プロフィール: https://public.tableau.com/app/profile/tamaball38175/vizzes