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

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

概要 📖 – テキスト・数値入力用パネルコンポーネント

Field COMPは、テキスト・数値・パスワード等のユーザー入力を受け取り、panel value としてネットワーク内に渡すパネルコンポーネントです。Field Type で String / Float / Integer を切り替え、桁数・小数桁・マスク表示・マルチライン入力など細かい表示制御が可能です。

主な用途 🎯

ユーザーからのテキスト入力受付（名前・コメント・検索クエリ等）
数値入力フィールドとしての利用（Float / Integer 型で値域を指定可能）
パスワード入力欄の構築（文字を * でマスク表示）
マルチライン入力によるメモ・ノート・コードエディタ風 UI
カスタム制御パネルの入力部品としてパラメータを動的変更

データフロー 🔄

ユーザーキーボード入力
 ↓
Field COMP（型バリデーション + 表示整形）
 ↓
panel value (string)
 ↓
Panel CHOP / 参照 expression / Python callback で取得

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Field Page 📋

Field Type `.fieldtype` 🎛️

フィールドに入力可能なデータの種類を指定するメニューパラメータ

項目	内部名	説明
String	`.string`	任意の英数字・記号を含む文字列入力を許可
Float	`.float`	浮動小数点数値のみ許可（小数桁・桁数指定が有効になる）
Integer	`.integer`	整数値のみ許可

数値表示フォーマット 🔢

Enable Field Format Numbers .fieldformatnumbers ✅
– Field Type が Float または Integer のとき有効
– オンにすると桁数・小数桁・ゼロ埋め系の表示整形パラメータが利用可能になります

Field Total Digits .fielddigits 🔢
– 表示する総桁数を指定（Float / Integer のみ）
– 桁数に満たない場合は後述の Leading / Trailing Zeros で埋められます

Field Decimal Digits .fielddecimal 🔢
– 小数点以下の桁数を指定（Float 型のみ）

Field Trailing Zeros .fieldzeroes ✅
– オンで小数末尾を 0 で埋めて総桁数を揃えます（Float 型のみ）

Field Leading Zero .fieldleadzero ✅
– オンで整数部先頭を 0 で埋めて総桁数を揃えます（Float 型のみ）

入力制御 🔒

Field Lock .fieldlock 🔒
– オンでフィールドを編集不可（ロック）状態にします
– 値表示専用 UI として使う場合に便利

Expand Tscript Variables .fieldexpand 🔄
– オンで入力テキスト中の Tscript 変数を展開します

Render Password Protected .fieldprotected 🔐
– 全文字を * 表示にしてパスワード入力欄として使用
– 値そのものは内部的に保持されるので Panel CHOP / expression で取得可能

Spaces to Underscores .fieldconspaces 🔁
– 入力された半角スペースを自動的に _ に変換
– ファイル名や Python 識別子として使う入力欄で有効

Allow Multi-Line Input .fieldmultiline 📝
– オンで改行を含むマルチライン入力が可能
– オフの場合は 1 行入力に制限されます

Enter as Newline with no Shift .fieldnoshift ⌨️
– オンで Enter キー単独を改行として扱います（Shift+Enter 不要）
– Multi-Line Input がオンのときに併用するのが一般的

Render Cursor .fieldcursor ▌
– フィールド内のカーソル（キャレット）表示を ON/OFF します

Focus Order .fieldfocus 🔀
– フォーカス順序を定義した DAT のパスを指定
– Tab / Shift+Tab で複数 Field 間のフォーカス遷移を制御できます

Panel Page 🪟

表示・有効化 👁️

Display .display 👁️
– パネルの表示／非表示を切替
– 軽量に切替したい場合は Opacity (Look Page) のほうが性能上有利です

Enable .enable ✅
– パネルへの全インタラクションを許可／禁止
– オフにすると入力もマウス反応も受け付けません

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

Cursor `.cursor` 🖱️

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

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

マウス・タッチ制御 👆

Multi-Touch .multitouch 👆
– オンでパネルがマウスクリックと同様に最初のタッチを処理
– Multi Touch In DAT で独自処理する場合はオフ推奨

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

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

Use Mouse Wheel .mousewheel 🖱️
– マウスホイールイベントを取得

Look Page 🎨

背景 🎨

Background Color .bgcolor 🎨
– 背景の RGB 値（デフォルト: 黒）

Background Alpha .bgalpha 🌫️
– 背景のアルファ値（透明度）

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

TOP Fill `.topfill` 📐

Background TOP を背景に表示する際のフィット方法

項目	内部名	説明
Stretch	`.stretch`	パネルサイズに合わせて引き伸ばし
Fit Horizontal	`.fithorz`	横幅に合わせて等比スケール
Fit Vertical	`.fitvert`	縦幅に合わせて等比スケール
Fit Best	`.fitbest`	短辺基準でフィット（余白あり）
Fit Outside	`.fitoutside`	長辺基準でフィット（はみ出しあり）
Native Resolution	`.nativeres`	TOP 本来の解像度のまま表示

ボーダー 🟦

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

Left / Right / Bottom / Top Border .leftborder 🟦
– 4 辺それぞれに対し 2px のボーダー色を指定
– 値は 0（変更なし）/ Border A / Border B のいずれか

Border Over Children .borderover ⬆️
– ボーダーを子パネルより上に描画

合成・不透明度 🌫️

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

Composite .composite 🎛️
– 兄弟パネルとの合成方法を選択
– 詳細は Composite TOP と同じセマンティクスです

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

Children Page 👶

Align `.align` 📐

子パネルのレイアウト方式を指定するメニューパラメータ

項目	内部名	説明
None	`.none`	自動レイアウトなし（手動配置）
Layout Grid Rows	`.layoutgridrows`	グリッド状に行優先で並べる
Layout Grid Columns	`.layoutgridcolumns`	グリッド状に列優先で並べる
Layout Grid Horizontal	`.layoutgridhorz`	横方向 1 行に並べる
Layout Grid Vertical	`.layoutgridvert`	縦方向 1 列に並べる
Match Network Nodes	`.matchnetworknodes`	ネットワーク上のノード配置を反映

余白・スケール ↔️

Spacing .spacing ↔️
– 子パネル間のスペースを定義

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

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

スクロールバー 📜

Horizontal Scrollbar / Vertical Scrollbar .phscrollbar 📜
– 横／縦スクロールバーの表示モードを設定（Always / Auto / Never 等）

Thickness .scrollbarthickness 📏
– スクロールバーの太さ（ピクセル指定）

実践アイデア 💡

Example 1: ユーザー名入力フォーム 📝

Field COMP (String) → Panel CHOP → Text DAT (record)

Field Type を String に設定したフィールドでユーザー名を受け取り、Panel CHOP で panel value として取得後、Text DAT に追記保存する基本的な入力フォームの構築例です。

Field COMP を配置し Field Type を String に設定
Allow Multi-Line Input をオフ（1 行入力に制限）
Panel CHOP で Field COMP を参照して入力テキストを panel value として取得
Submit ボタン押下時に Text DAT へ 1 行追記
保存後に Field の panel value を op('field1').panel.value = '' でクリア

Example 2: 数値スピンボックス（Integer 型） 🔢

Field COMP (Integer) → Panel CHOP → Math CHOP → 制御パラメータ

Field Type を Integer にして整数値専用の入力欄として使い、Panel CHOP で値を取り出して Math CHOP でスケーリングし、別 OP のパラメータへ橋渡しするパターンです。総桁数と Leading Zero でゼロ埋め表示にもできます。

Field COMP の Field Type を Integer に変更
Enable Field Format Numbers をオン、Field Total Digits を 4 に設定
Field Leading Zero をオンで 0042 のような表示に整形
Panel CHOP の panel value を Math CHOP で正規化（例: 0–9999 → 0.0–1.0）
Math CHOP の出力を Render TOP の Light Intensity 等に Export

Example 3: パスワード入力フィールド 🔐

Field COMP (String + Render Password Protected) → Python callback → 認証ロジック

Render Password Protected をオンにして入力文字を * でマスク表示しつつ、内部的には生のパスワード文字列を保持できる構成。Submit イベントで Python callback を発火させ認証ロジックへ渡します。

Field COMP に Field Type String + Render Password Protected をオン
Allow Multi-Line Input をオフ（パスワードは 1 行入力）
Field COMP の panelexec DAT で onSubmit イベントを実装
callback 内で op('field_password').panel.value を取得して比較
認証成功で State CHOP の値を更新し UI を切り替え

Example 4: マルチラインコメント入力 📄

Field COMP (Multi-Line) → Text DAT → JSON 保存

Allow Multi-Line Input + Enter as Newline with no Shift をオンにしてコメントエディタ風 UI を構築し、入力内容を Text DAT に流し JSON ファイルへ保存するワークフロー。フォーカス遷移は Focus Order で別 Field と連携可能です。

Field COMP の Allow Multi-Line Input をオン
Enter as Newline with no Shift をオンで Enter 単独で改行可能に
Background Color を暗めの灰に、Border を入れてエディタ風に装飾
Save ボタンの onClick で Field の panel value を Text DAT に書き込み → op('text_comment').save('comment.json')

Panel Value 情報 📊

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

value: 現在のフィールド入力文字列（String / 数値の場合は文字列表現）
state: フィールドが編集中かどうかのステート（0 / 1）
u / v: パネル上のマウス位置（0.0–1.0 正規化）
select: クリックで選択中かどうか（0 / 1）
lselect: ロックセレクト状態（持続選択フラグ）

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

よくある問題と解決策 🔧

❌ Problem: Enter キーを押しても改行されない
✅ Solution:

Allow Multi-Line Input がオンになっているか確認
Enter as Newline with no Shift をオンにすると Shift キー不要で改行可能
オフの場合は Shift+Enter での改行が必須

❌ Problem: 数値入力なのに小数点が入力できない
✅ Solution:

Field Type が Integer になっていないか確認（整数のみ受け付け）
Float に切り替え、Enable Field Format Numbers + Field Decimal Digits で小数桁を設定
前段で Math CHOP で値域を確認

❌ Problem: panel value がスクリプト側で取得できない
✅ Solution:

op('field1').panel.value で取得（.par ではなく .panel）
Panel CHOP を併用して値変化を CHOP として観測
panelexec DAT でフォーカスイベント・キーイベントの callback を確認

❌ Problem: パスワード表示が解除できない
✅ Solution:

Render Password Protected をオフに戻す
Field Lock がオンになっていると編集自体ができないので併せて確認
実行時に表示と入力値が異なる場合は Expand Tscript Variables の影響も確認

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

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

概要 📖 – テキスト・数値入力用パネルコンポーネント

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Field Page 📋

Field Type `.fieldtype` 🎛️

数値表示フォーマット 🔢

入力制御 🔒

Panel Page 🪟

表示・有効化 👁️

Cursor `.cursor` 🖱️

マウス・タッチ制御 👆

Look Page 🎨

背景 🎨

TOP Fill `.topfill` 📐

ボーダー 🟦

合成・不透明度 🌫️

Children Page 👶

Align `.align` 📐

余白・スケール ↔️

スクロールバー 📜

実践アイデア 💡

Example 1: ユーザー名入力フォーム 📝

Example 2: 数値スピンボックス（Integer 型） 🔢

Example 3: パスワード入力フィールド 🔐

Example 4: マルチラインコメント入力 📄

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理COMP 🎯

Panel Value 情報 📊

COMP 固有情報 📦

汎用オペレータ情報 🔄

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

その他の記事はこちら

概要 📖 – テキスト・数値入力用パネルコンポーネント

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Field Page 📋

Field Type .fieldtype 🎛️

数値表示フォーマット 🔢

入力制御 🔒

Panel Page 🪟

表示・有効化 👁️

Cursor .cursor 🖱️

マウス・タッチ制御 👆

Look Page 🎨

背景 🎨

TOP Fill .topfill 📐

ボーダー 🟦

合成・不透明度 🌫️

Children Page 👶

Align .align 📐

余白・スケール ↔️

スクロールバー 📜

実践アイデア 💡

Example 1: ユーザー名入力フォーム 📝

Example 2: 数値スピンボックス（Integer 型） 🔢

Example 3: パスワード入力フィールド 🔐

Example 4: マルチラインコメント入力 📄

関連オペレータ 🔗

類似機能OP 🔍

組み合わせ推奨OP 🔄

前処理・後処理COMP 🎯

Panel Value 情報 📊

COMP 固有情報 📦

汎用オペレータ情報 🔄

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

よくある問題と解決策 🔧

参考資料 📚

その他 🔗

公式リソース 📖

その他の記事はこちら

Field Type `.fieldtype` 🎛️

Cursor `.cursor` 🖱️

TOP Fill `.topfill` 📐

Align `.align` 📐