売上ダッシュボード.twb 構造仕様書

1. .twb ファイル全体像

.twb（Tableau Workbook）は UTF-8 / XML 1.0 形式のテキストファイル。 「データへの接続定義」「ワークシートのビュー設計」「ダッシュボード配置」「サムネイル画像」を 1 ファイルにまとめます。 実データ本体は内包せず、外部 CSV や DB への参照のみが保存されます。

2. 公式スキーマ (tableau-document-schemas) の位置づけ

tableau/tableau-document-schemas は、 .twb / .tds / .tfl 等を検証する XSD を公開する Tableau 公式リポジトリです。 本ワークブックで実際に登場する要素を XSD 定義と対応づけると次のとおり。

3. ルート XML 構造ツリー

本ファイルの XML を「親子関係＋繰り返し回数」で書き起こすと次のとおり。

4. <datasources> ブロック詳解

Tableau の外部接続は 2 層構造：上位 <connection class="federated"> が論理ビュー、下位 <named-connection class="textscan"> が CSV 物理接続。

<datasource caption='売上データ'
            inline='true'
            name='federated.040vubn0bkhset12iho5301wrojj'
            version='18.1'>
  <connection class='federated'>
    <named-connection
        name='textscan.1hjsv7m116t9ak1dgmyae0ba7djn'>
      <connection class='textscan'
                   directory='/path/to/data'
                   filename='売上データ.csv'/>
    </named-connection>
    <!-- relation, metadata-records (39 columns) ... -->
  </connection>
</datasource>

<relation> は CSV のテーブル構造を宣言。文字コード Shift_JIS、ロケール ja_JP、ヘッダ行あり。

5. データ列メタデータ（39 列）

各列は <metadata-record class="column"> として宣言。remote-type は ADO の型コード（20=integer、129=string、133=date）。

6. column-instance と group

6.1 派生フィールド (column-instance)

6.2 アクション用動的グループ (group / groupfilter)

Tableau のダッシュボードアクションのターゲットとして 2 件の動的グループが宣言されています（いずれも hidden='true'）。

• [Action (YEAR(年月日),MONTH(年月日))]: 年×月の crossjoin。売上推移バーをクリックすると他シートに伝播するアクション ID Action1_EA66... のキーになる。
• [Action (大分類名称)]: 大分類のメンバー。大分類別売上のパイをクリックすると他シートに伝播するアクション ID Action2_E83F... のキー。

7. <style> ブロック（色エンコード）

マーク（element='mark'）に対して 2 系統の色マッピングが固定値で定義されています。

7.1 大分類名称 → カラー（Tableau 10 風）

7.2 日(年月日) → カラー

1〜31 の日付値に対する色マップも併存（直接の表示は無し、ハイライト時の色保持用）。

8. <worksheets> ブロック詳解（3 シート）

<encodings>
  <color      column='[...].[none:大分類名称:nk]'/>
  <wedge-size column='[...].[sum:売上金額:qk]'/>
  <text       column='[...].[none:大分類名称:nk]'/>
</encodings>

<rows>[...].[none:店舗名称:nk]</rows>
<cols>(
  [...].[none:大分類名称:nk] /
  ( [...].[none:中分類名称:nk] / [...].[none:小分類名称:nk] )
)</cols>

9. <dashboards> ブロック（売上ダッシュボード）

3 つのワークシートと 1 つの色凡例カードを zone tree に配置したダッシュボード。sizing-mode='automatic'。

9.1 zone tree（デスクトップ）

zone は入れ子可能なレイアウト要素で、type-v2 属性によって役割が決まります。本ダッシュボードの構造を SVG で可視化したものが下図。

対応する XML（要約）：

<dashboard name='売上ダッシュボード'>
  <size sizing-mode='automatic'/>
  <zones>
    <zone id='4' type-v2='layout-basic'>
      <zone id='12' param='vert' type-v2='layout-flow'>
        <zone id='13' type-v2='title'/>           ← タイトル
        <zone id='8'  param='horz' type-v2='layout-flow'>
          <zone id='6' type-v2='layout-basic'>      ← 3 シートの容器
            <zone id='3'  name='売上推移'/>           ← 1段目フル幅
            <zone id='5'  name='大分類別売上'/>       ← 2段目左
            <zone id='10' name='商品別店舗売上'/>     ← 2段目右
          </zone>
          <zone id='7' fixed-size='160'>            ← 右側固定 160px
            <zone id='9' type-v2='color'
                  param='[...].[none:大分類名称:nk]'/>     ← 大分類カラー凡例
          </zone>
        </zone>
      </zone>
    </zone>
  </zones>
  ...
</dashboard>

9.2 Phone デバイスレイアウト

auto-generated な Phone レイアウト（vscroll、min/max-height 1000）が自動で追加されています。 同じ 3 シート＋凡例を縦スクロールに並べ替えた構造で、各 zone に fixed-size='280' が付与されます。

<devicelayout auto-generated='true' name='Phone'>
  <size maxheight='1000' minheight='1000' sizing-mode='vscroll'/>
  <zones> ... タイトル → 売上推移 → 大分類別売上 → 凡例 → 商品別店舗売上 を縦並び </zones>
</devicelayout>

10. <windows> ブロック

各ワークシート／ダッシュボードの UI 配置情報が <window> 4 件にまとまっています。

11. <thumbnails> ブロック

Tableau Server / Reader 表示用のサムネイル PNG が Base64 で埋め込まれています。 ワークブックの末尾、ファイル容量の大半を占めるのがここ。

12. Tableau → HTML 再現マッピング

添付の 売上ダッシュボード_再現.html では、Tableau の各要素を以下のように対応付けています。

13. 再現ダッシュボードへのリンク

本仕様書と同じフォルダに配置した再現ダッシュボードを直接開けます。

▶ 売上ダッシュボード_再現.html を開く

両ファイルとも単一 HTML（CDN 依存なし）。Google ドライブ同期フォルダ に同居。