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

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

概要 📖 – 再利用できる UI 部品

Widget COMPは、複数の UI 部品をひとまとめにして、再利用できる独自パネルとして組み立てるための土台となるパネルコンポーネントです。Container COMP と同じく子パネルを内包でき、Children Page のレイアウト機能で部品を整列・配置できます。

主な用途 🎯

独自 UI 部品の作成 (スライダー・ボタン・ラベルなどをまとめて 1 つの再利用部品にする)
カスタム制御パネルの構築 (Container / Window COMP に組込んで操作画面を作る)
UI レイアウトの土台として子パネルを整列・配置する親パネル
VJ / ライブパフォーマンス用 UI の部品化とテンプレート化
複製可能なパネルテンプレートの作成 (Replicator COMP と組合せて UI を量産)

データフロー 🔄

ユーザーのマウス / タッチ操作
 ↓
Widget COMP (子パネルを Children Page で整列)
 ↓
各子パネルの panel value
 ↓
Panel CHOP で取得
 ↓
Math CHOP 等で正規化
 ↓
制御対象パラメータへ Export

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Panel Page 🪟

表示・有効化 👁️

Display .display 👁️
Display (表示) — パネルの表示／非表示を切替
– 単純な ON/OFF 切替なら Opacity (Look Page) のほうが性能上有利です

Enable .enable ✅
Enable (有効化) — このパネルへの全インタラクションを許可／禁止

Help DAT .helpdat 💡
Help DAT (ヘルプ文) — ロールオーバー時に表示するヘルプ文を格納した Text DAT のパス

Cursor `.cursor` 🖱️

Cursor (カーソル形状) — パネル上のマウスカーソル形状を指定するメニューパラメータ

項目	内部名	説明
Text Select	`.ibeam`	テキスト選択カーソル (I 字型)
Precision Select	`.cross`	精密選択用十字カーソル
Busy	`.busy`	処理中表示カーソル
Activate	`.activate`	クリック可能要素を示すカーソル
Invisible	`.invisible`	カーソルを非表示

Multi-Touch `.multitouch` 👆

Multi-Touch .multitouch 👆
Multi-Touch (マルチタッチ) — オンにすると最初のタッチをマウスクリックと同様に処理 (u / v / state を更新)
– タッチはパネル上で開始される必要があり、後続のタッチは無視されます
– Multi Touch In DAT で独自処理する場合は組込みマルチタッチを無効化してスクリプト処理との競合を避けます

マウス制御 🖱️

Constrain Cursor .constraincursor 🔒
Constrain Cursor (カーソル拘束) — カーソルがパネル内に入ったら外に出られないよう制約

Click Through .clickthrough ↘️
Click Through (クリック透過) — オンですべてのマウスクリックを無視 (背面パネルにイベントを透過)

Use Mouse Wheel .mousewheel 🖱️
Use Mouse Wheel (ホイール取得) — パネル上でマウスホイールが使われたときのイベントを取得

Mouse UV Buttons .uvbuttons 🖱️
Mouse UV Buttons (UV 更新ボタン) — u / v Panel Value を更新するマウスボタンを指定
– Left / Middle / Right の 3 チェックボックスから複数選択可能

Relative UV .mouserel 🔄
Relative UV (相対 UV) — オンで u / v Panel Value がマウスの相対移動を反映 (絶対位置ではなく差分)

リサイズ・再配置 ↔️

Drag Edges to Resize .resize 📏
Drag Edges to Resize (辺ドラッグでリサイズ) — パネルの 4 辺をドラッグでリサイズ可能にする 4 つのチェックボックス (Left / Right / Bottom / Top)

W Range / H Range .resizew ↔️
W Range / H Range (リサイズ範囲) — リサイズ時の幅 (W) / 高さ (H) の最小・最大範囲を制限

Drag to Reposition .reposition 🖐️
Drag to Reposition (ドラッグで再配置) — パネルやウィンドウをドラッグで再配置可能にするモードを指定 (Off / Component)

Component .repocomp 🧩
Component (対象コンポーネント) — Reposition で Component を選んだとき、マウスで再配置する対象パネルコンポーネントのパスを指定

X Range / Y Range .repositionx 📐
X Range / Y Range (再配置範囲) — Reposition が Component モードのとき、再配置可能な水平 (X) / 垂直 (Y) 範囲を制限

Anchor Drag `.anchordrag` ⚓

Anchor Drag (アンカードラッグ) — Anchor 配置時にドラッグ再配置が Anchor 値と Offset 値のどちらを変えるかを指定するメニューパラメータ

項目	内部名	説明
Anchors	`.anchors`	ドラッグ再配置で Anchor (アンカー) パラメータ値を変更
Offsets	`.offsets`	ドラッグ再配置で Offset (オフセット) パラメータ値を変更

Scroll Overlay `.scrolloverlay` 📜

Scroll Overlay (スクロール追従) — スクロールバー位置に対するパネルの追従挙動を指定するメニューパラメータ

項目	内部名	説明
Off	`.off`	スクロールバーがパネルに通常通り影響
Ignore	`.ignore`	スクロール時にパネルが移動しない (Depth Layer に従う)
Ignore and Draw Over	`.ignoreover`	スクロール時に移動せず、スクロールバーや兄弟パネルの手前に描画

Look Page 🎨

背景 🎨

Background Color .bgcolor 🎨
Background Color (背景色) — 背景の RGB 値 (デフォルト: 黒)

Background Alpha .bgalpha 🌫️
Background Alpha (背景アルファ) — 背景のアルファ値 (透明度)

Background TOP .top 🖼️
Background TOP (背景画像) — 背景に貼り付ける TOP のパス
– 画像・動画・グラデーション等をパネル背景に利用可能

TOP Fill `.topfill` 📐

TOP Fill (背景フィット) — Background TOP の背景フィット方法を指定するメニューパラメータ

項目	内部名	説明
Stretch	`.off`	パネルサイズに合わせて引き伸ばし (アスペクト無視)
Fill Width	`.horizontal`	横幅に合わせて等比スケール
Fill Height	`.vertical`	縦幅に合わせて等比スケール
Fill Best	`.best`	短辺基準でフィット
Fill Outside	`.outside`	長辺基準でフィット (はみ出しあり)

TOP Smoothness `.topsmoothness` 🪶

TOP Smoothness (補間方式) — Background TOP のビューア補間方式を指定するメニューパラメータ

項目	内部名	説明
Nearest Pixel	`.nearest`	最近傍ピクセル (拡大時にジャギーが目立つが正確)
Interpolate Pixels	`.linear`	線形補間 (新規 Panel COMP の既定値)
Mipmap Pixels	`.mipmap`	ミップマップ補間 (拡大縮小時のちらつき低減、32bit float では nearest に強制)

ボーダー 🟦

Border A / Border B .bordera 🎨
Border A / Border B (ボーダー色) — 2 種類のボーダー色を定義 (RGBA 各色)
– 各辺の Border 設定で A / B / なしを選択して内外 2 列のボーダーを構築できます

Left / Right / Bottom / Top Border .leftborder 🟦
Left / Right / Bottom / Top Border (各辺ボーダー) — 4 辺それぞれに対し 2px のボーダー色を指定
– 値は 0 (変更なし) / Border A / Border B のいずれか
– それぞれに Inside 版があり内側 2px のボーダーも独立指定可能

Border Over Children .borderover ⬆️
Border Over Children (子の前にボーダー) — ボーダーを子パネルより手前に描画

Composite `.composite` 🎛️

兄弟パネルとの合成方法 (詳細は Composite TOP と同じセマンティクス):

項目	内部名	説明
Over	`.over`	上に重ねる (アルファ合成、標準)
Under	`.under`	下に敷く
Inside	`.inside`	兄弟パネルのアルファ内側のみ描画
Outside	`.outside`	兄弟パネルのアルファ外側のみ描画
Add	`.add`	加算合成
Subtract	`.subtract`	減算合成
Multiply	`.multiply`	乗算合成

Disable Color / Opacity 🌫️

Disable Color .dodisablecolor 🚫
Disable Color (無効時の色) — Enable = Off 時に専用色を使用するかの切替 (チェックボックス + RGB + Alpha)

Multiply RGB by Alpha .multrgb ✖️
Multiply RGB by Alpha (アルファ乗算) — RGB チャンネルにアルファを乗算 (pre-multiplied alpha)

Opacity .opacity 🌫️
Opacity (不透明度) — パネル全体の透明度を制御 (軽量な ON/OFF 用途は Display より Opacity 推奨)

Children Page 👶

Align `.align` 📐

Align (整列方式) — 子パネルのレイアウト方式を指定するメニューパラメータ

項目	内部名	説明
None	`.none`	自動レイアウトなし (手動配置)
Left to Right	`.horizlr`	横方向 1 行に左から右へ並べる
Right to Left	`.horizrl`	横方向 1 行に右から左へ並べる
Top to Bottom	`.verttb`	縦方向 1 列に上から下へ並べる
Bottom to Top	`.vertbt`	縦方向 1 列に下から上へ並べる
Grid Rows	`.gridrows`	グリッド状に行優先で並べる
Grid Columns	`.gridcols`	グリッド状に列優先で並べる
Match Network Nodes	`.nodes`	ネットワーク上のノード配置を反映

余白・スケール ↔️

Spacing .spacing ↔️
Spacing (間隔) — 子パネル間のスペースを定義 (Align が None / Match Network Nodes 以外で有効)

Max per Line .alignmax 🔢
Max per Line (1 列の最大数) — 1 行 (1 列) に並べる子パネルの最大数 (Grid Rows / Grid Columns 系で有効)

Margin .margin 🔲
Margin (余白) — パネル外周の余白 (4 辺それぞれピクセル指定)
– ウィンドウサイズに追従せず絶対値で扱われます

Scale / Offset .scale 🔍
Scale / Offset (拡大・移動) — 子パネルを一括でスケール／オフセット
– Align / Justify が有効な場合は上書きされます

Justify Method `.justifymethod` 🎯

Justify Method (整列単位) — 子パネルを Justify する単位を指定するメニューパラメータ

項目	内部名	説明
Individual	`.individual`	各子パネルを個別に Justify

Justify Horizontal `.justifyh` ↔️

Justify Horizontal (水平整列) — 子パネルの水平方向 Justify を指定するメニューパラメータ

項目	内部名	説明
Off	`.off`	水平方向の Justify なし
Left	`.left`	左寄せ
Center	`.center`	中央寄せ
Right	`.right`	右寄せ

Justify Vertical `.justifyv` ↕️

Justify Vertical (垂直整列) — 子パネルの垂直方向 Justify を指定するメニューパラメータ

項目	内部名	説明
Off	`.off`	垂直方向の Justify なし
Top	`.top`	上寄せ
Center	`.center`	中央寄せ
Bottom	`.bottom`	下寄せ

Fit `.fit` 📏

Fit (フィット) — 子パネルをパネル領域にフィットさせるメニューパラメータ (Justify を上書き)

項目	内部名	説明
Off	`.off`	Fit なし (Justify 設定が有効)
Fit Width	`.horizontal`	横幅にフィット
Fit Height	`.vertical`	縦幅にフィット
Fit Best	`.best`	短辺基準でフィット (アスペクト維持)

Crop `.crop` ✂️

Crop (クロップ) — パネル領域からはみ出した子パネルのクロップ動作を指定するメニューパラメータ

項目	内部名	説明
On	`.on`	はみ出し部分をクロップ
Never	`.never`	クロップせず、はみ出し描画を許可

スクロールバー 📜

Horizontal Scrollbar / Vertical Scrollbar .phscrollbar 📜
Horizontal Scrollbar / Vertical Scrollbar (スクロールバー) — 横／縦スクロールバーの表示モードを設定
– Off (非表示) / On (常時表示) / Automatic (子要素サイズ超過時のみ表示) の 3 択

Thickness .scrollbarthickness 📏
Thickness (太さ) — スクロールバーの太さ (ピクセル指定)

実践アイデア 💡

Example 1: 再利用できるノブ部品の作成 🎛️

Widget COMP (Slider + Label を内包) → 複製して再利用 → Panel CHOP → Math CHOP → 制御対象

Widget COMP の中に Slider COMP とラベル表示用の Text COMP を組込み、1 つの「ノブ部品」として完成させてから、複数の制御対象向けに複製して使い回す基本フローです。

Widget COMP を配置し、内部に Slider COMP と Text COMP (ラベル) を入れる
Children Page の Align を Top to Bottom にしてラベルとスライダーを縦に整列
Panel CHOP で内部 Slider の u 値を取得
Math CHOP で 0–1 を制御対象のレンジにスケーリングして Export
完成した Widget をコピー&ペーストして別の制御対象にも使い回す

Example 2: ウィジェットを量産 🧩

Table DAT → Replicator COMP → Widget COMP (テンプレート) → 動的 UI 生成

Widget COMP をテンプレートにして Replicator COMP で複製し、Table DAT の行数に応じて UI 部品を動的に生成する応用例。チャンネル数が変わっても自動で UI が増減します。

1 個の Widget COMP をテンプレートとして作り込む
Replicator COMP の Template COMP に Widget COMP を指定
Table DAT に並べる項目 (1 行 = 1 ウィジェット) を記述
Replicator が行数ぶんの Widget を自動生成
各 Widget の panel value を Panel CHOP でまとめて取得

Example 3: 制御パネルにまとめる 🗂️

Container COMP → 複数 Widget COMP → Window COMP (独立ウィンドウ表示)

複数の Widget COMP を Container COMP に並べて 1 枚の操作パネルにまとめ、Window COMP で独立ウィンドウとして表示するワークフロー。VJ 用のオペレーション画面を組み立てる用途に向きます。

Container COMP を配置し、子要素として Widget COMP を複数並べる
Container の Children Page の Align を Left to Right に、Spacing を適度に設定
Window COMP の Operator に Container COMP を指定して独立ウィンドウ化
各 Widget の値を Panel CHOP で集約してエフェクトに分配

Example 4: 背景画像付きパネル 🖼️

TOP (デザイン画像) → Widget COMP (Background TOP) → 子 UI 部品を重ねる

Widget COMP の Background TOP にデザイン済みの画像を設定し、その上に Button や Slider を重ねて見栄えのするカスタム UI を作る例。Look Page で枠線や透明度も整えられます。

デザイン画像を TOP として用意 (例: グラデーション背景)
Widget COMP の Look Page で Background TOP に画像を指定
TOP Fill を Fill Best にして縦横比を保ったままフィット
Widget の内部に Button COMP / Slider COMP を配置して操作要素を重ねる
Opacity やボーダーで全体の見栄えを微調整

Panel Value 情報 📊

Widget COMP のパネル操作は Panel CHOP 経由で panel value として取得します。

COMP 固有情報 📦

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

汎用オペレータ情報 🔄

total_cooks: プロセス開始からのクック回数
cook_time: 最後のクック時間 (ミリ秒)
cook_frame: 最後にクックされたフレーム番号
warnings: 警告数
errors: エラー数

主なパネル値 📋

u: パネル上のマウス横位置 (0.0–1.0)
v: パネル上のマウス縦位置 (0.0–1.0)
state: パネルがクリック中かどうかのステート (0 / 1)
select: クリックで選択中かどうか (0 / 1)
inside: マウスカーソルがパネル内にあるかどうか (0 / 1)
rollover: カーソルがパネル上にあるかどうか (0 / 1)

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

よくある問題と解決策 🔧

❌ Problem: 子パネルが整列されない
✅ Solution:

Children Page の Align が None のままになっていないか確認
Spacing と Margin の値が大きすぎて子パネルが押し出されていないか確認
子パネルの Display がオンになっているか確認 (Panel Page)

❌ Problem: Widget を操作してもイベントが取れない
✅ Solution:

Enable がオンになっているか確認 (Panel Page)
Click Through がオンになっていると全クリックが透過するためオフに戻す
内部の子パネルではなく Widget 自身でイベントを取りたい場合は子の Enable を見直す

❌ Problem: 子パネルがパネル枠からはみ出す
✅ Solution:

Children Page の Crop を On にしてはみ出しをクロップ
Fit を Fit Best にして子パネル群をパネル領域に収める
スクロールが必要なら Horizontal / Vertical Scrollbar を Automatic に設定

❌ Problem: 複製した Widget が同じ値で連動してしまう
✅ Solution:

Panel CHOP で各 Widget を個別パスで参照しているか確認
後段の Math CHOP や Select CHOP でチャンネルを分離
Replicator で複製した場合は各クローンのパスが一意になっているか確認

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0