List COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

記事更新の通知はXでアナウンス٩(๑❛ᴗ❛๑)
→ @maru6o6をフォロー

概要 📖 – コールバック駆動のスクロール可能テーブル型 UI パネル

List COMPは、Python コールバックでセル描画・インタラクションを定義する、スクロール可能なテーブル型 UI Panel COMPです。Container COMP や Table DAT と異なり、List COMP はセル単位の描画ロジックとインタラクションをコールバックスクリプトで完全に制御できるため、データ件数が動的に変化するインタラクティブリスト UI (ファイルブラウザ / プリセット一覧 / イベントログ等) の構築に最適です。

主な用途 🎯

データ駆動のテーブル型 UI として行 × 列のセルを Python コールバックで描画・更新
大量データのスクロール表示 (水平 / 垂直スクロールバー + 任意のセルサイズ)
固定ヘッダー (Lock First Row / Lock First Col) によるヘッダー行・列の追従表示
クリック・ロールオーバー等のセル単位インタラクション を Callbacks DAT の onSelectCell / onRollover 等で受け取り
動的なリスト再構築 を Reset pulse で initialize callback を再実行して即時反映

データフロー 🔄

Table DAT 等のデータソース
 ↓
Callbacks DAT (initialize / cell* / select* / rollover* 等を定義)
 ↓
List COMP (rows × cols + Callbacks 参照)
 ↓
セルごとに描画
 ↓
ユーザ操作 (クリック / スクロール / ホイール) → コールバック発火

Tips

初心者の方は、以下日本語書籍も手元にあると安心です。

リンク

まる。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です！

パラメータ解説 ⚙️

List Page 📋

Callbacks `.callbacks` 🐍

セル描画・インタラクションを担う Callbacks DAT への参照:

Callbacks: callbacks — initialize / onInitCell / onSelectCell / onRollover / onClick / onResize 等のコールバック関数を定義した Text DAT へのパス

Rows `.rows` ↕️

リストの行数:

Rows: rows — List COMP に表示する行数 (整数)。データソースの行数に合わせて動的にバインドする運用が一般的

Columns `.cols` ↔️

リストの列数:

Columns: cols — List COMP に表示する列数 (整数)。複数カラム表 (名前 / 値 / アクション等) を構成する際に増やす

Lock First Row `.lockfirstrow` 🔒

ヘッダー行の固定設定:

Lock First Row: lockfirstrow — オンにすると 1 行目が水平スクロール中もパネル上端に固定され、ヘッダー行として機能する

Lock First Col `.lockfirstcol` 🔒

ヘッダー列の固定設定:

Lock First Col: lockfirstcol — オンにすると 1 列目が垂直スクロール中もパネル左端に固定され、ヘッダー列として機能する

Horizontal Scroll Bar `.hscrollbar` ↔️

水平スクロールバー表示設定:

Horizontal Scroll Bar: hscrollbar — 列数がパネル幅を超えるときに水平スクロールバーを表示するかどうかの切替

Vertical Scroll Bar `.vscrollbar` ↕️

垂直スクロールバー表示設定:

Vertical Scroll Bar: vscrollbar — 行数がパネル高を超えるときに垂直スクロールバーを表示するかどうかの切替

Off Cell Callbacks `.offcellcallbacks` 🎯

セル外領域のコールバック発火設定:

Off Cell Callbacks: offcellcallbacks — オンにすると、List COMP のうちセルが配置されていない領域 (リスト下の余白等) に対してもクリック・ロールオーバー等のコールバックが呼ばれる

Reset `.reset` 🔄

リスト再構築のパルストリガー:

Reset: reset — パルスボタン。Callbacks DAT の initialize() を再実行し、行数 / 列数 / セルのスタイル等を再構築する。データソースが変化した後の手動再描画トリガーとして使用

Panel / Look / Children Pages 🪟

Panel COMP からの継承 `.panel_inherited` 📋

List COMP は Panel COMP の特殊化として動作するため、Panel COMP の全パラメータを継承:

Panel Page: display / enable / helpdat / cursor / multitouch / uvbuttons / mousewheel / resize / reposition / scrolloverlay 等、Panel COMP 共通のインタラクション設定一式
Look Page: bgcolor / bgalpha / top (背景 TOP) / topfill / border* / opacity / composite / disablecolor 等、見た目と合成方式の設定一式
Children Page: align / spacing / alignmax / margin / justifyh / justifyv / fit / scale / offset / crop / phscrollbar / pvscrollbar / scrollbarthickness 等、子パネルのレイアウト設定一式
詳細は公式リファレンス: 各パラメータの完全な説明は Panel COMP 公式 docs を参照

Common Page 🔧

Parent Shortcut `.parentshortcut` 🔗

コンポーネント内部からこの COMP へのパスとして使えるショートカット名:

Parent Shortcut: コンポーネント内部の任意の場所からこの COMP を参照する際のショートカット名 (parent.<name> 形式で利用可能)

Global OP Shortcut `.opshortcut` 🌐

プロジェクト全体からこの COMP を参照するグローバル名:

Global OP Shortcut: プロジェクト内のあらゆる場所からこの COMP へのパスとして使えるグローバル名 (op.<name> 形式で利用可能)

Internal OP `.iop` 📎

Internal OP シーケンス (コンポーネント内部 OP への名前付き参照):

Shortcut: iop0shortcut — コンポーネント内部の OP に対するショートカット名
OP: iop0op — このコンポーネント内部の対象 OP へのパス

Node View `.nodeview` 👁️

ノードビューア (Network エディタ上のサムネイル) に表示する内容を決定

項目	内部名	説明
Default Viewer	`.default`	コンポーネントタイプ標準のビューアを表示
Operator Viewer	`.opviewer`	指定した任意 OP のノードビューアを表示

Operator Viewer `.opviewer` 🖼️

Operator Viewer モード時に表示する対象 OP:

Operator Viewer パス: Node View が opviewer モードのとき、そのビューア内容として表示する OP のパス

Cloning `.cloning` 🧬

マスター COMP の内容を複製する Cloning 設定:

Enable Cloning: enablecloning — Clone Master の内容を継続的に複製するかを切替
Enable Cloning Pulse: enablecloningpulse — その瞬間だけ Clone Master の内容を瞬時に複製
Clone Master: clone — 複製元となるマスターコンポーネントへのパス

Load on Demand `.loadondemand` ⏳

必要時のみメモリにロードする遅延ロード設定:

Load on Demand: オンの場合、このコンポーネントは実際に必要となるまでメモリにロードされない (起動時間・メモリ消費の最適化)

External .tox `.externaltox` 💾

外部 .tox ファイルとの連携設定:

Enable External .tox: enableexternaltox — 起動時に外部 .tox ファイルからロード
Enable External .tox Pulse: enableexternaltoxpulse — 外部 .tox ファイルから即時リロード
External .tox Path: externaltox — ディスク上の .tox ファイルへのパス
Reload Custom Parameters: reloadcustom — コンポーネントのカスタムパラメータ値を再読み込み
Reload Built-In Parameters: reloadbuiltin — コンポーネントの組み込みパラメータ値を再読み込み
Save Backup of External: savebackup — .toe ファイル内に外部 .tox のバックアップコピーを保存
Sub-Component to Load: subcompname — .tox 内部の特定 COMP のみを取り出してロード

Relative File Path Behavior `.relpath` 📁

このコンポーネント内部での相対ファイルパスの解決基準

項目	内部名	説明
Use Parent’s Behavior	`.inherit`	親コンポーネントの設定を継承
Relative to Project File (.toe)	`.project`	`.toe` プロジェクトファイルからの相対パスとして解決
Relative to External COMP File (.tox)	`.externaltox`	外部 `.tox` ファイルからの相対パスとして解決

Parameter Color Space `.parmcolorspace` 🎨

このコンポーネント内の色パラメータをどの色空間として解釈するか

項目	内部名	説明
sRGB	`.srgb`	標準的な sRGB ガンマ空間
sRGB – Linear	`.srgblinear`	sRGB プライマリでガンマ線形 (1.0)
Rec.601 (NTSC)	`.rec601ntsc`	Rec.601 NTSC 規格の色空間
Rec.709	`.rec709`	HDTV 用 Rec.709 色空間
Rec.2020	`.rec2020`	UHDTV / HDR 向け Rec.2020 広色域
DCI-P3	`.dcip3`	デジタルシネマ DCI-P3 色空間
DCI-P3 (D60)	`.dcip3d60`	D60 白点 DCI-P3
Display-P3 (D65)	`.displayp3d65`	D65 白点 Display-P3 (Apple ディスプレイ等)
ACES2065-1	`.aces2065-1`	ACES アーカイブ用色空間 (AP0 プライマリ)
ACEScg	`.acescg`	ACES CG 作業用色空間 (AP1 プライマリ)
Passthrough	`.passthrough`	色変換を行わず値をそのまま扱う

Parameter Reference White `.parmreferencewhite` ⚪

色パラメータの基準白色の扱い

項目	内部名	説明
Default For Color Space	`.default`	選択した色空間のデフォルト基準白を使用
Use Parent Panel	`.useparent`	親パネルの基準白設定を継承
Standard (SDR)	`.sdr`	標準ダイナミックレンジ (SDR) 基準白
High (HDR)	`.hdr`	ハイダイナミックレンジ (HDR) 基準白
UI	`.ui`	UI 表示用の基準白

実践アイデア 💡

Example 1: Table DAT 駆動のシンプルなデータ表示リスト 📊

Table DAT (データソース) → Callbacks DAT (initialize で rows/cols を Table から取得 + onInitCell で表示テキスト設定) → List COMP

プリセット一覧やイベントログ等、Table DAT に格納された 2 次元データをそのままテーブル UI として可視化する最も基本的な使い方。initialize() で List COMP の Rows / Columns パラメータを Table DAT の行・列数に動的バインドし、onInitCell(comp, row, col, attribs) で各セルのテキスト・色・配置を設定する。

ネットワーク内に List COMP を配置 (Tab メニュー → COMP → List、または右クリック → Add Operator)
Table DAT を作成し表示したいデータ (ヘッダー行 + データ行) を格納
Text DAT を作成し initialize() / onInitCell() 等のコールバック関数を Python で記述
List COMP の Callbacks パラメータに先ほどの Text DAT のパスを指定
initialize() 内で comp.par.rows = sourceTable.numRows / comp.par.cols = sourceTable.numCols と書いてバインド
List COMP の Reset パルスを 1 回押して initialize を実行 → セルにテキストが表示される

Example 2: Lock Rowで固定ヘッダー表 🔒

Table DAT (1 行目 = ヘッダー / 1 列目 = 行ラベル) → Callbacks DAT (ヘッダー行 / 列の太字スタイル設定) → List COMP (Lock First Row = ON / Lock First Col = ON)

数百行のデータをスクロール表示しても、ヘッダー行・行ラベル列を常にパネル端に固定表示する Excel 風の表 UI を構築する例。Lock First Row と Lock First Col を両方オンにすると、垂直・水平スクロール中も 1 行目と 1 列目が追従し、列名と行ラベルが見失われない。

Table DAT を準備 (1 行目 = カラム名のヘッダー / 1 列目 = 各行を識別する行ラベル)
List COMP の Lock First Row をオンにしてヘッダー行を固定
List COMP の Lock First Col をオンにして行ラベル列を固定
Callbacks DAT の onInitCell() 内で row == 0 または col == 0 のセルに太字フォントや背景色を設定して視覚的に差別化
Horizontal Scroll Bar / Vertical Scroll Bar をオンにしてパネル幅・高を超えた範囲を読みやすくする

Example 3: クリックでセル選択するUI 🎯

Callbacks DAT (onSelectCell でクリックされた row/col を Storage / Table DAT に書き出し) → List COMP (Off Cell Callbacks = ON) → 他オペレータが選択結果を参照

ファイルブラウザやプリセット切替 UI のように、ユーザがリスト上のセルをクリックして選択値を確定する動的な選択 UI。onSelectCell(comp, row, col, ...) コールバックでクリック行を取得し Storage に書き出すことで、下流の Replicator COMP や Switch TOP が選択結果に追従する。Off Cell Callbacks をオンにするとリスト下の余白クリックでも選択解除等のロジックを発火できる。

Callbacks DAT に onSelectCell(comp, row, col, prevrow, prevcol) 関数を実装
選択行を保存するため comp.parent().store('selected_row', row) 等で Storage に書込
List COMP の Off Cell Callbacks をオンにし、セル外クリックでも onSelectCell が呼ばれるようにする
下流オペレータから op('list1').parent().fetch('selected_row', 0) 等で選択行を取得して動的に振る舞いを切替

Example 4: Reset パルスでデータ更新時にリスト再構築 🔄

外部データ変化検知 (DAT Execute / CHOP Execute) → List COMP の Reset パルス発火 → Callbacks initialize 再実行 → セル再描画

Table DAT の内容がリアルタイムに変化する (OSC で受信したログを追加 / 検索フィルタを変更した結果が変わる等) 用途では、データソースが更新されるたびに Reset パルスを発火して initialize() を再実行し、Rows / Columns / セル内容を最新状態に同期する。

Table DAT に DAT Execute DAT を接続し onTableChange() で変化を検知
onTableChange() 内で op('list1').par.reset.pulse() を呼び List COMP の Reset を発火
Callbacks DAT の initialize() 内で再度 comp.par.rows / comp.par.cols を最新の Table DAT サイズに合わせて設定
頻繁な更新が起きる場合はパフォーマンス面で Off Cell Callbacks をオフにし不要なコールバックを抑制

Info COMP情報 📊

List COMP は Info CHOP / Info DAT による詳細情報取得に対応しています。

COMP 固有情報 📦

num_children: コンポーネント内部の子 OP の総数
num_dats: 内部 DAT の数
num_chops: 内部 CHOP の数
num_tops: 内部 TOP の数
num_sops: 内部 SOP の数

汎用オペレータ情報 🔄

total_cooks: プロセス開始からのクック回数
cook_time: 最後のクック時間 (ミリ秒)
cook_frame: 最後にクックされたフレーム番号
warnings: 警告数
errors: エラー数
cook_abs_frame: 絶対時間基準でのクックフレーム番号
cooked_this_frame: 現在のフレームでクックされた場合は 1

Panel COMP 固有情報 📊

num_children: List COMP 内部の子オペレータ数
panel_width: List COMP パネルの幅 (ピクセル単位)
panel_height: List COMP パネルの高さ (ピクセル単位)

トラブルシューティング ⚠️

よくある問題と解決策 🔧

❌ Problem: セルにテキストが表示されない / リストが空のまま
✅ Solution:

Callbacks パラメータに有効な Text DAT のパスが入っているか確認 (空のままだと initialize が呼ばれない)
Rows / Columns が 0 でないか確認 (0 の場合セル自体が生成されない)
Callbacks DAT 内に onInitCell(comp, row, col, attribs) 関数が定義され、attribs.text が設定されているか確認
List COMP の Reset パルスを 1 回押して initialize を強制実行

❌ Problem: クリックしてもセル選択コールバックが発火しない
✅ Solution:

Panel Page の Enable がオンになっているか確認 (オフだとパネル全体が無反応)
Panel Page の Click Through がオフになっているか確認 (オンだとクリックが背面に貫通)
Callbacks DAT に onSelectCell(comp, row, col, prevrow, prevcol) が正しく定義されているか確認 (関数名のタイポは silent fail)
親 Container COMP に Click Through 等の設定がかかっていないかも併せて確認

❌ Problem: スクロール時に 1 行目 / 1 列目が固定されない
✅ Solution:

Lock First Row / Lock First Col がそれぞれオンになっているか確認
Children Page の Vertical Scrollbar / Horizontal Scrollbar ではなく、List Page の Horizontal Scroll Bar / Vertical Scroll Bar をオンにしているか確認 (List COMP では List Page 側のスクロールバーが正しい設定)
Lock 機能は List Page の固有機能なので、Container COMP では同等動作は得られない (List COMP を継続使用)

❌ Problem: リスト更新後も古いセル内容が残る
✅ Solution:

データソース更新後に op('list1').par.reset.pulse() で Reset を発火し initialize を再実行
Callbacks DAT の initialize() 内で comp.par.rows / comp.par.cols を最新のデータサイズに再設定
Table DAT が source の場合は DAT Execute DAT で onTableChange を捕まえて自動 Reset を発火するパイプラインを組む

❌ Problem: 大量行のリストでスクロールがカクつく / パフォーマンスが低下する
✅ Solution:

Callbacks DAT の onInitCell() 内で重い処理 (画像ロード / 文字列加工) を行わず、initialize 時に事前計算した結果を Storage から参照する形に変える
Off Cell Callbacks をオフにして余分なコールバック発火を抑制
Look Page の Background TOP に巨大解像度の TOP を指定していないか確認 (毎フレーム合成がボトルネックになる)
可視範囲外の行を仮想化するロジックを Callbacks DAT 側で実装 (TouchDesigner 標準機能では仮想化は提供されないため自前構築)

参考資料 📚

その他 🔗

公式リソース 📖

この記事はLLMと共に内容を執筆、更新しています。
最新バージョンとの項目差異など、情報の不一致を見つけた心優しい方はXもしくはInsta、メールなどよりサイト管理者までご連絡ください😎

まる。

お仕事のご依頼はDM又はメールにて。
━━━━━━━━━━━━━━━━━
Python/Touchdesigner/M5Stackをこよなく愛すフルスタックエンジニア。
専門は生理心理学、趣味はヨガやサウナ、EMS電気風呂などヘルスケア全般。
脳波や筋電、心拍を中心とした生体情報のセンシング＆インタラクティブアートづくりがライフワーク。

普段はワントゥーテンという会社で空間演出エンジニアをしています。
リファラル採用お繋ぎできますので、我こそはという尖った方は経歴と希望職種添えてDMください(エンジニア以外、営業職等もOK)。
ご飯行きましょう。

↓日常垢
Instagram：＠malmal0v0

概要 📖 – コールバック駆動のスクロール可能テーブル型 UI パネル

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

List Page 📋

Callbacks .callbacks 🐍

Rows .rows ↕️

Columns .cols ↔️

Lock First Row .lockfirstrow 🔒

Lock First Col .lockfirstcol 🔒

Horizontal Scroll Bar .hscrollbar ↔️

Vertical Scroll Bar .vscrollbar ↕️

Off Cell Callbacks .offcellcallbacks 🎯

Reset .reset 🔄

Panel / Look / Children Pages 🪟

Panel COMP からの継承 .panel_inherited 📋

Common Page 🔧

Parent Shortcut .parentshortcut 🔗

Global OP Shortcut .opshortcut 🌐

Internal OP .iop 📎

Node View .nodeview 👁️

Operator Viewer .opviewer 🖼️

Cloning .cloning 🧬

Load on Demand .loadondemand ⏳

External .tox .externaltox 💾

Relative File Path Behavior .relpath 📁

Parameter Color Space .parmcolorspace 🎨

Parameter Reference White .parmreferencewhite ⚪