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

概要 📖 – 2D UI パネルの汎用コンテナ

Container COMPは、子パネル (Button / Slider / Container 等) を 2D UI として配置・整列・スクロールできる Panel COMPです。Panel / Look / Children Page に分かれた多彩なパラメータで、ダッシュボード UI からスクロールリストまで幅広く構築できます。

主な用途 🎯

• ダッシュボード UI 等の 2D Panel レイアウト構築 (Align / Grid)
• Background TOP + Border によるカード風 UI の装飾
• 子パネルのスクロール表示 (Horizontal / Vertical Scrollbar)
• マルチタッチ / Mouse UV の入力受付パネル
• Widget COMP の基盤としての再利用可能な UI 部品の組立

データフロー 🔄

入力: 子 Panel COMP + Background TOP + Layout パラメータ
 ↓
Align / Justify / Fit でレイアウト確定
 ↓
出力: 描画済み 2D UI パネル + Panel Values

---

パラメータ解説 ⚙️

Panel Page 📁

Display / Enable 👁️

パネルの表示・有効化:

• Display: display — パネルの表示/非表示。シンプルな overlay 切替なら opacity の方が高速
• Enable: enable — パネルへの一切のインタラクションを禁止
• Help DAT: helpdat — マウスホバー時にポップアップ表示する Text DAT のパス

Cursor .cursor 🎛️

パネル上にカーソルが乗ったときの表示形状

項目	内部名	説明
Normal Select	.pointer	標準矢印カーソル
Text Select	.ibeam	テキスト編集用 I ビーム
Precision Select	.cross	十字 (精密選択)
Busy	.busy	処理中表示 (砂時計 / スピナー)
Activate	.activate	クリック可能表示 (指マーク等)
Invisible	.invisible	カーソル非表示

Mouse / Touch / Wheel 🖱️

マウス・タッチ・ホイール入力:

• Multi-Touch: multitouch — マウスクリック相当の初回タッチを処理 (以降のタッチは無視)。Multi Touch In DAT で独自処理する場合は無効化推奨
• Constrain Cursor: constraincursor — カーソルがパネル内に入った瞬間ロック
• Click Through: clickthrough — マウスクリックを下のパネルにパススルー
• Use Mouse Wheel: mousewheel — マウスホイールイベントを取得
• Mouse UV Buttons: uvbuttons (left / middle / right) — どのマウスボタンで uv Panel Values を更新するか
• Relative UV: mouserel — uv 値を絶対座標ではなく相対移動量で更新

Resize / Reposition 📐

リサイズ・リポジション:

• Drag Edges to Resize: resize (resizel / resizer / resizeb / resizet) — 左 / 右 / 下 / 上のどの辺からリサイズを許可するか
• W Range / H Range: resizew / resizeh — リサイズ可能な幅・高さの範囲
• Drag to Reposition: reposition — ドラッグでパネルまたはウィンドウを移動
• Component (Reposition 対象): repocomp — Reposition が Component のとき移動対象とする Panel COMP のパス
• X / Y Range: repositionx / repositiony — 移動可能範囲
• Anchor Drag: anchordrag — Anchors 値または Offsets 値どちらを書き換えるか

Scroll Overlay .scrolloverlay 🎛️

スクロールバー操作に対するパネルの追従動作

項目	内部名	説明
Off	.off	スクロールに通常通り追従
Ignore	.ignore	スクロールしてもパネルは動かない (深度は Depth Layer に従う)
Ignore and Draw Over	.ignoreover	スクロール無視 + 兄弟パネル・スクロールバーの上に描画

---

Look Page 📁

Background 🎨

背景色・背景テクスチャ:

• Background Color (R / G / B / Alpha): bgcolor (bgcolorr / bgcolorg / bgcolorb) + bgalpha — 背景色とアルファ
• Background TOP: top — 背景に貼り付ける TOP のパス

TOP Fill .topfill 🎛️

Background TOP をパネルに収める方式

項目	内部名	説明
Stretch	.off	アスペクト比を無視して引き伸ばし
Fill Width	.horizontal	横幅に合わせる (上下は切詰めまたは余白)
Fill Height	.vertical	縦幅に合わせる
Fill Best	.best	アスペクト比を保ち中に収まる方を選択
Fill Outside	.outside	アスペクト比を保ちパネル全体を覆う

TOP Smoothness .topsmoothness 🎛️

Background TOP の拡縮時のフィルタリング方式

項目	内部名	説明
Nearest Pixel	.nearest	最近傍 (ピクセルアートに最適、ぼけない)
Interpolate Pixels	.linear	線形補間 (新規 Panel COMP のデフォルト)
Mipmap Pixels	.mipmap	ミップマップフィルタ (動画や高精細素材で sparkling 抑制)

Borders 🖼️

Border A / B 色 + 4 辺の選択:

• Border A / B 色 + Alpha: bordera (borderar / borderag / borderab) + borderaalpha / borderb + borderbalpha
• Left / Right / Bottom / Top Border: leftborder / rightborder / bottomborder / topborder — それぞれ 0 / Border A / Border B から選択
• Left / Right / Bottom / Top Border Inside: leftborderi / rightborderi / bottomborderi / topborderi — 内側 2 ピクセル目の色
• Border Over Children: borderover — 枠線を子パネルの上に描画

Composite .composite 🎛️

兄弟パネルとの合成方法

項目	内部名	説明
Over	.over	標準のアルファ合成 (上に重ねる)
Under	.under	下に重ねる
Inside	.inside	Inside 合成
Outside	.outside	Outside 合成
Add	.add	加算合成
Subtract	.subtract	減算合成
Multiply	.multiply	乗算合成

---

Children Page 📁

Align .align 🎛️

子パネルの配置レイアウト

項目	内部名	説明
None	.none	自動配置なし (Anchor / Offset で個別配置)
Left to Right	.horizlr	左→右に並べる
Right to Left	.horizrl	右→左に並べる
Top to Bottom	.verttb	上→下に並べる
Bottom to Top	.vertbt	下→上に並べる
Grid Rows	.gridrows	行単位のグリッド
Grid Columns	.gridcols	列単位のグリッド
Match Network Nodes	.nodes	Network エディタ上のノード配置を踏襲

Spacing / Margin / Max 📏

子パネルの間隔・マージン:

• Spacing: spacing — Align が None / Match Network Nodes 以外で有効、子パネル間の空き
• Max per Line: alignmax — 1 行/列に並べる最大子パネル数
• Margin (L / R / B / T): margin (marginl / marginr / marginb / margint) — パネル境界からの外側マージン (絶対ピクセル指定、ウィンドウ拡縮しても固定)

Justify (横 / 縦) ↔️

子パネルの揃え方:

• Justify Method: justifymethod — individual (子ごとに個別整列)
• Justify Horizontal: justifyh — Off / Left / Center / Right
• Justify Vertical: justifyv — Off / Top / Center / Bottom

Fit / Scale / Offset / Crop 🔍

Fit / Scale / Offset / Crop:

• Fit: fit — Off / Fit Width / Fit Height / Fit Best。Justify を上書き
• Scale (X / Y): scale (scalex / scaley) — 子パネルの一様スケール
• Offset (X / Y): offset (offsetx / offsety) — 子パネルのオフセット (Align / Justify で上書きされる)
• Crop: crop — On (はみ出し部分をクリップ) または Never

Scrollbar 🧭

スクロールバー設定:

• Horizontal Scrollbar: phscrollbar — Off / On / Automatic (子の幅がパネル幅を超えた時のみ)
• Vertical Scrollbar: pvscrollbar — Off / On / Automatic

---

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: ダッシュボード UI のレイアウトコンテナ 📊

Container COMP (Align = Grid Rows) → 内部 Button / Slider / Container COMP → 画面表示

Container COMP に複数の子 Panel COMP を配置し、Align を Grid Rows / Grid Columns にすることで、ウィンドウサイズ変更に追従するレスポンシブなダッシュボード UI を構築。Spacing と Margin で見た目を整える。

1. Container COMP を作成し、内部に Button COMP / Slider COMP を 6 個配置
2. Container COMP の Align を Grid Rows、Max per Line を 3 に設定
3. Spacing = 8、Margin (L/R/B/T) = 16 で余白調整
4. Window COMP に Container COMP を割り当ててフルスクリーン表示

Example 2: Background TOP + Border でカード風 UI 🃏

Movie File In TOP → Container COMP (Background TOP + Border A) → 画面表示

Container COMP の Background TOP に画像 TOP を指定し、TOP Fill を Fill Best に設定。Border A の色を白、4 辺すべてを Border A にしてカード風の枠付きパネルを実現。

1. Movie File In TOP / Constant TOP で背景素材を用意
2. Container COMP の Background TOP に TOP のパスを入力
3. TOP Fill = Fill Best、TOP Smoothness = Interpolate Pixels
4. Border A 色を白に、Left / Right / Bottom / Top Border をすべて Border A に設定

Example 3: スクロール可能なリストビュー 📜

Container COMP (Align = Top to Bottom + Vertical Scrollbar = Automatic) → 多数の子 Panel

子パネルを Align = Top to Bottom で縦並びにし、Vertical Scrollbar を Automatic にすると、内容が縦に溢れた瞬間に自動でスクロールバーが表示されるリストビューを実現。Crop = On でクリッピングも確実に。

• Container COMP を作成し、Align を Top to Bottom
• Vertical Scrollbar を Automatic、Crop を On に
• 子 Panel COMP を 20 個以上配置してスクロール挙動を確認

---

関連オペレータ 🔗

類似機能OP 🔍

• Base COMP — Panel 機能を持たない汎用コンテナ COMP
• Window COMP — OS ウィンドウとして出力できるトップレベル COMP
• Widget COMP — Container を内包した高機能 UI 部品

組み合わせ推奨OP 🔄

• Button COMP — Container 内に配置する基本クリック UI
• Slider COMP — Container 内に配置する数値入力 UI
• Movie File In TOP — Background TOP に動画素材を供給
• Panel Execute DAT — Container の Panel Values 変化を Python コールバックで処理
• Multi Touch In DAT — Multi-Touch オフ時のマルチタッチ独自処理

前処理・後処理COMP 🎯

• 前処理: Base COMP、Replicator COMP
• 後処理: Window COMP、Button COMP、Slider COMP

---

Info COMP情報 📊

この 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: エラー数

---

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

よくある問題と解決策 🔧

❌ Problem: 子パネルがコンテナからはみ出る / 切れる
✅ Solution:

• Crop を On にしてはみ出し部分を確実にクリッピング
• Vertical Scrollbar / Horizontal Scrollbar を Automatic にしてスクロール対応
• Align を Grid Rows / Grid Columns にしてパネル幅に応じた折返し

❌ Problem: クリックが下のパネルに吸い込まれる
✅ Solution:

• Click Through がオンになっていないか確認
• Panel COMP の Enable がオンになっているか確認
• 親 Container の Display がオフになっていないか確認

❌ Problem: Background TOP が引き伸ばされて歪む
✅ Solution:

• TOP Fill を Fill Best または Fill Outside に変更してアスペクト比を保つ
• TOP Smoothness を Interpolate Pixels または Mipmap Pixels にしてフィルタを改善
• Background TOP の解像度を Container のサイズに揃える

---

参考資料 📚

公式リソース 📖

• TouchDesigner公式ドキュメント – Container COMP
• COMP概要ページ
• TouchDesigner Category – Components

コミュニティ 💬

• TouchDesigner Forum – General Discussion
• Facebook – TouchDesigner Help Group

その他の記事はこちら

---