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

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

概要 📖 – 文字を表示し編集する

Text COMPは、パネル内に文字列を表示し、ユーザによる対話的編集と書式コードを用いた動的な装飾に対応するテキスト描画用 Panel COMPです。Container COMP や Window COMP と組み合わせ、シーン内のテキストラベル・入力欄・リアルタイム数値表示を一括して提供する用途で利用されます。

主な用途 🎯

UI 内のラベル・説明文・タイトル表示など静的テキストの描画
ユーザによる対話的なテキスト入力フィールド (Edit Mode オン、Word Wrap 対応)
Specification DAT / Specification CHOP による複数行・任意座標へのテキスト配置
Formatting (Float / Integer / 時間コード) と Custom Formatting によるリアルタイム数値表示
Formatting Codes (色・太字・下線等) を用いた装飾テキストの表示
Placeholder Text / Drag Drop Behaviour によるヒント表示付き入力 UI と D&D 対応欄

データフロー 🔄

入力: テキストソース (Text パラメータ / Specification DAT / Specification CHOP)
 ↓
Text COMP (Mode / Type / Formatting / Font / Padding / Align で書式化)
 ↓
Panel COMP として描画 (Look Page で背景・ボーダー、Children Page でレイアウト)
 ↓
出力: Container COMP / Window COMP に埋め込まれる対話的テキストパネル

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Text Page 📝

Mode `.mode` 🔀

テキストデータの取得元モード:

Mode: mode (モード) — テキストデータを Text パラメータから取るか、Specification DAT / Specification CHOP 経由で取るかを切替するメニュー

Text Source `.textsource` 🔤

テキストソースとなる Text パラメータ / DAT / CHOP:

Text: text (テキスト) — パネルに表示する文字列。数値・文字列・Python / bind 式による外部データ参照が可能。ユーザがパネル上で編集すると、この値または bind 元に書き戻される (例: op('table1')[0,0] で DAT セルにバインド)
Specification DAT: specdat (仕様 DAT) — Specification モード時にテキストデータの供給元となる Table DAT のパス。先頭行に x / y / text の 3 列ラベルを持ち、各行はパネル左下原点からの座標で 1 行ずつ描画される
Specification CHOP: specchop (仕様 CHOP) — Specification モード時に数値データを供給する CHOP。x / y チャンネルで Specification DAT の各行に対応するテキストの座標を指定

Type `.type` 🏷️

テキストの種別 (解釈方法):

Type: type (種別) — 値の解釈方法と、利用可能な書式化・編集オプションを決定するメニュー (シングルライン文字列、マルチライン文字列、整数、浮動小数等を切替)

Formatting `.formatting` 🎯

書式化メニューと付随パラメータ:

Formatting: formatting (書式化) — ソーステキストの書式化と表示方法を制御するメニュー。Type に応じてオプションが変化
Custom Formatting: customformatting (カスタム書式) — Python F-String / C++ Fmt 等のカスタムモードで使用する書式化文字列。{} 内が値の差し込み、外は固定文字列として扱われる
Precision: precision (小数精度) — Float モードで小数点以下の桁数を指定
Thousands Separator: thousandsseparator (3 桁区切り) — Float / Integer モードで 1,000,000 のように 3 桁ごとの区切りを追加して読みやすくする
Framerate: framerate (フレームレート) — Integer をタイムコードとして書式化する際の 1 秒あたりのフレーム数を指定

Smart Punctuation `.smartpunct` ✒️

スマート約物 (引用符・3 点リーダ・em ダッシュ自動変換):

Use Smart Punctuation: smartquote (スマート約物使用) — クォートのペアが自動的にカーリーな引用符に置換、3 つの連続ピリオドが 3 点リーダ、2 つのハイフンが em ダッシュに変換される
Smart Punctuation: smartpunct (スマート約物) — 上記と同等のスマート約物処理を有効化 (旧式互換用)

Formatting Codes `.formatcodes` 🎨

テキスト中の書式コードとエスケープ解釈:

Formatting Codes: formatcodes (書式コード) — テキスト中の書式化ディレクティブを有効化。例: {#color(255, 0, 0);} でその行の以降のテキストを赤に変更。利用可能な全コードは Text Formatting Codes を参照
Parse Escape Sequences: escapeseq (エスケープシーケンス解釈) — \t をタブ、\r / \n を改行に変換。Specification DAT 使用時のみ有効。Text モードでエスケープが必要なときは Python 式を使う

Word Wrap `.wordwrap` ↩️

マルチライン時の自動折り返し:

Word Wrap: wordwrap (ワードラップ) — Type が Multi Line のときのみ有効。パネル横幅 (Width から左右パディングを引いた値) を超える行を複数行に分割する。スペース・タブ・ハイフンを優先的に折り返し点とし、1 単語がページ幅を超える場合は単語の途中で折り返す

Edit Mode `.editmode` ✏️

ビューア直接編集と改行キー設定:

Edit Mode: editmode (編集モード) — ビューア上でユーザが直接テキストを編集できるかを制御するメニュー
Shift-Enter for New Line: shiftenter (Shift+Enter で改行) — マルチラインモードで有効時、Enter のみで編集確定・値保存となり、改行は Shift+Enter で行う

Drag Drop Behaviour `.dragdropmode` 🖱️

ドラッグ&ドロップ動作:

Drag Drop Behaviour: dragdropmode (ドラッグ&ドロップ挙動) — ユーザがパネル上に何かをドラッグしたときの動作を制御 (ファイルパスのテキスト化、OP パスの代入等)

Placeholder `.placeholder` 💬

プレースホルダーテキストと色:

Placeholder Text: placeholdertext (プレースホルダーテキスト) — テキスト未入力のときパネルに表示されるヒントテキスト
Placeholder Text Color: placeholdercolor (プレースホルダー色) — プレースホルダーテキストのデフォルト色。書式コードで部分的に別色を上書き可能

Reading Direction `.readingdirection` ↔️

テキスト読み方向 (LTR / RTL):

Reading Direction: readingdirection (読み方向) — テキストを LTR で表示するか RTL で表示するかを制御するメニュー。RTL モードでも LTR 文字が検出されると双方向レイアウトに対応

Focus Order `.fieldfocus` 🎚️

TAB キーフォーカス順を定義する Table DAT:

Focus Order: fieldfocus (フォーカス順) — 編集中に TAB / Shift+TAB でフォーカス対象パネルの順序を制御する、コンポーネントパス一覧を持つ Table DAT へのパス

Callbacks DAT `.callbacks` 📞

イベント駆動 Python コールバックを保持する Text DAT:

Callbacks DAT: callbacks (コールバック DAT) — ビューア内のイベント (編集開始・確定・キー入力等) に反応する Python コールバック関数群を含む Text DAT のパス

Font Page 🔠

Font Selection `.fontselection` 📚

フォント選択 (旧方式・新方式・任意ファイル):

Legacy Font Selection: legacyfontselection (旧フォント選択方式) — オンで旧式の Bold / Italic トグルを使ったフォント選択。オフ (新方式) の場合は Typeface パラメータで Bold / Italic 等の書体を直接選択
Font: font (フォント) — OS に登録されているフォントの中から使用するフォントを選択。初回利用時はレンダリング用中間ファイル生成のため若干の遅延あり
Font File: fontfile (フォントファイル) — OS に未登録のフォントを使用するためのフォントファイルへのパス指定
Typeface: typeface (書体) — 選択中フォントの具体的な書体 (Regular / Italic / Bold / Bold Italic) を選択。旧フォント選択モードでは無効
Bold: bold (太字) — 旧方式でテキストを太字表示
Italic: italic (斜体) — 旧方式でテキストを斜体表示

Scale Text to Fit `.scaletofit` 🔍

パネル内に収まるようフォントサイズを自動調整するモード

項目	内部名	説明
Never	`.never`	指定したフォントサイズをそのまま使用し、スケーリングは行わない
Always	`.always`	縦横比を維持したままパネルの縦横いっぱいに収まるようテキストをスケーリング
Only when Too Large	`.onlyshrink`	パネルに収まらないときのみ縮小。元サイズより小さい場合は変更しない

Font Size `.fontsize` 📏

フォントサイズ:

Font Size: fontsize (フォントサイズ) — フォントの大きさを指定。デフォルトでは出力ウィンドウの DPI 設定に応じて可変ピクセル数にレンダリングされる解像度独立のパネル単位

Font Size Units `.fontsizeunits` 📐

フォントサイズの単位

項目	内部名	説明
Panel Units (P)	`.panelunits`	ディスプレイの DPI 設定に応じて可変ピクセル数にレンダリングされる解像度独立単位
Fraction (F)	`.fract`	パネル高さに対する比率 (例: 0.5 はパネル高さの 50%)
Absolute Fraction (A)	`.relfract`	親に対する絶対比率 (Anchors / Offsets 機構での利用想定)
Points (Pt)	`.points`	Windows 慣例に従ったポイント単位 (100% 表示スケーリング時、96 ピクセル = 72 ポイント = 1.333 パネル単位)

Character Spacing `.charspacing` 🔡

字間・傾斜・横伸縮・行間:

Tracking: tracking (トラッキング) — 文字間の横方向スペース。0 がデフォルト、正値で広く、負値で詰める
Skew: skew (スキュー) — 文字の上部をベースラインに対して前後に傾ける
Horz Stretch: horzstretch (水平ストレッチ) — 現在の整列基準に対して文字を横方向に伸縮
Line Spacing: linespacing (行間) — マルチラインモードでの行間スペース。デフォルト値 (フォントサイズの 1.2 倍) に対する倍率

Font Color `.fontcolor` 🎨

フォント色とアルファ:

Font Color: fontcolor (フォント色) — テキストのデフォルト色 (RGB)。書式コードで部分的に別色を上書き可能
Font Alpha: fontalpha (フォントアルファ) — テキストの背景に対するブレンディング値。1 で不透明、0 で透明

Selection Color `.selectcolor` 🟦

テキスト選択バー色:

Custom Select Color: customselectcolor (カスタム選択色) — テキスト編集時の選択バーにカスタム色を使うかの切替。オフのときは背景色・テキスト色とのコントラストが最大になる色が自動選択される
Select Color: selectcolor (選択色) — Custom Select Color オン時の選択バー色

Drop Shadow `.dropshadow` 🌑

ドロップシャドウ描画と色・アルファ・オフセット:

Drop Shadow: dropshadow (ドロップシャドウ) — テキストの下にドロップシャドウを描画
Drop Shadow Color: dropshadowcolor (シャドウ色) — シャドウのデフォルト色 (RGB)
Drop Shadow Alpha: dropshadowalpha (シャドウアルファ) — シャドウのブレンディング値。Font Alpha 前乗算
Drop Shadow Offset: dropshadowoffset (シャドウオフセット) — 整列処理後にシャドウ位置に適用されるオフセット。正値で右上方向に移動

Offset Units `.offsetunits` 📐

ドロップシャドウオフセット・テキストオフセット・テキストパディングの単位指定

項目	内部名	説明
Panel Units (P)	`.panelunits`	解像度独立のパネル単位
Fraction (F)	`.fract`	パネル高さに対する比率
Absolute Fraction (A)	`.relfract`	親に対する絶対比率
Points (Pt)	`.points`	ポイント単位

Text Offset / Padding `.textoffsetpadding` 📏

テキスト位置オフセットとパディング:

Text Offset: textoffset (テキストオフセット) — 整列処理後のテキスト位置に適用するオフセット。正値で右上方向に移動
Text Offset Units: textoffsetunits (オフセット単位) — Text Offset の単位指定 (panelunits / fract / relfract / points)
Text Padding: textpadding (テキストパディング) — パネル端とテキスト間のスペース。L / R / B / T の 4 方向。整列モードと Word Wrap の状態によって反映の仕方が変化
Text Padding Units: textpaddingunits (パディング単位) — Text Padding の単位指定 (panelunits / fract / relfract / points)

Horizontal Alignment `.alignx` ↔️

テキストの水平方向の整列位置と整列基準

項目	内部名	説明
Left	`.left`	左揃え (左パディング分だけ離した位置に配置)
Center	`.center`	中央揃え
Right	`.right`	右揃え

Horizontal Align Mode `.alignxmode` 📊

水平整列計算の基準 (フォントメトリック / テキスト境界ボックス)

項目	内部名	説明
Use Font Metrics	`.metrics`	個別文字ではなくフォントの一般寸法を使用。テキストが変動する場面で整列を一定に保ちたい場合に推奨
Use Text Bounding Box	`.bbox`	現在の文字列の正確な寸法で整列。スラッシュなど標準字幅から外れる文字を正確に揃えたい場合に利用

Vertical Alignment `.aligny` ↕️

テキストの垂直方向の整列位置

項目	内部名	説明
Bottom	`.bottom`	下揃え
Center	`.center`	中央揃え。Font Metrics 整列ではベースラインから定義された ascent (通常ラテン大文字の高さ) までの距離を基準に中央化、`g` / `j` 等のディセンダは考慮されない
Top	`.top`	上揃え
Baseline	`.baseline`	ベースライン揃え

Vertical Align Mode `.alignymode` 📊

垂直整列計算の基準 (フォントメトリック / テキスト境界ボックス)

項目	内部名	説明
Use Font Metrics	`.metrics`	フォントの一般寸法を基準に整列。`g` / `j` 等のディセンダが文字列中に無くても、それを見越した位置に配置される (テキストが変動・未知の場面で一定の整列維持に推奨)
Use Text Bounding Box	`.bbox`	実際の文字列の境界ボックスで整列。ディセンダを含まない文字列は下端ぴったりに配置される

Panel Page 🪟

Display / Enable `.displayenable` 👁️

表示有無と対話可能性の制御:

Display: display (表示) — パネルを表示するか非表示にするかを指定。レイアウト処理コストが発生するため、単純なオーバーレイ用途では opacity パラメータの調整が高性能
Enable: enable (有効) — このパネルへの一切の対話を禁止

Help DAT `.helpdat` ❓

ロールオーバーヘルプ用 Text DAT:

Help DAT: helpdat (ヘルプ DAT) — コントロールパネル上でカーソルを乗せた際にポップアップヘルプとして内容が表示される Text DAT へのパス

Cursor `.cursor` 🖱️

パネル上でのカーソル表示を変更するメニュー

項目	内部名	説明
Text Select	`.ibeam`	テキスト選択用 I ビームカーソル
Precision Select	`.cross`	精密選択用クロスヘアカーソル
Busy	`.busy`	ビジー (砂時計) カーソル
Activate	`.activate`	アクティベート (指差し) カーソル
Invisible	`.invisible`	カーソルを非表示

Multi-Touch `.multitouch` 👆

マルチタッチ処理制御:

Multi-Touch: multitouch (マルチタッチ) — 有効時、このパネルは最初のタッチ入力をマウスクリックと同等に処理 (u / v / state 等を更新)。タッチイベントはパネル内で開始する必要があり、2 つ目以降のタッチは無視される。Multi Touch In DAT 経由で複数タッチを処理する場合は組み込みマルチタッチを無効にしてスクリプト処理との干渉を避ける

Constrain Cursor / Click Through `.constrainclickthrough` 🚫

カーソル拘束とクリック透過:

Constrain Cursor: constraincursor (カーソル拘束) — このパネルにカーソルが入った後、パネル内部に拘束 (パネル外へ出られなくする)
Click Through: clickthrough (クリック透過) — オンの場合、この Panel Component に対するすべてのマウスクリックを無視 (背後のパネルへ透過)

Mouse Wheel / UV Buttons `.mousewheeluv` 🖲️

ホイール・UV 更新ボタン・相対 UV:

Use Mouse Wheel: mousewheel (マウスホイール使用) — パネル上でマウスホイールが操作された際のイベントをキャプチャ
Mouse UV Buttons: uvbuttons (UV 更新ボタン) — どのマウスボタン (左 / 中 / 右) が uv Panel Value を更新するかを指定
Relative UV: mouserel (相対 UV) — 有効時、uv Panel Value は相対マウス移動量を反映

Drag Edges to Resize `.resize` ↔️

ドラッグリサイズ許可エッジと範囲:

Drag Edges to Resize: resize (リサイズエッジ) — L / R / B / T の 4 チェックボックスで、対応するエッジ・コーナーをマウスで掴んでリサイズ可能にする
W Range: resizew (幅範囲) — 左右 (幅) のリサイズ可能な範囲を制限
H Range: resizeh (高さ範囲) — 上下 (高さ) のリサイズ可能な範囲を制限

Drag to Reposition `.reposition` 🖐️

ドラッグ再配置と再配置範囲:

Drag to Reposition: reposition (ドラッグ再配置) — マウスドラッグでパネルまたはウィンドウを再配置できるようにするメニュー
Component: repocomp (対象コンポーネント) — Reposition で Component オプションを選択した際に、マウスで再配置する対象パネルコンポーネントへのパス
X Range: repositionx (X 範囲) — Component を再配置する水平方向の最大範囲
Y Range: repositiony (Y 範囲) — Component を再配置する垂直方向の最大範囲
Anchor Drag: anchordrag (アンカードラッグ) — Drag To Reposition が Component かつ Horizontal/Vertical Mode が Anchors のとき、ドラッグ操作で Anchor 値と Offset 値のどちらを変更するかを決定するメニュー

Scroll Overlay `.scrolloverlay` 📜

スクロールバー位置の影響を受けるかどうかを制御するメニュー

項目	内部名	説明
Off	`.off`	スクロールバーがパネル位置に通常通り影響
Ignore	`.ignore`	スクロールバー操作でもパネルは移動しない。深度は Depth Layer パラメータに従う
Ignore and Draw Over	`.ignoreover`	スクロールバー操作でも移動せず、スクロールバーと兄弟パネルの上に描画

Look Page 🎨

Background Color / Alpha `.bgcoloralpha` 🖼️

背景色とアルファ:

Background Color: bgcolor (背景色) — 背景の RGB 値 (デフォルト: 黒 (0, 0, 0))
Background Alpha: bgalpha (背景アルファ) — 背景色のアルファ値

Background TOP `.backgroundtop` 🖌️

背景 TOP テクスチャと表示モード:

Background TOP: top (背景 TOP) — パネルの背景として使用する TOP を指定
TOP Fill: topfill (TOP 充填) — Background TOP がパネル背景を埋める方式を指定するメニュー (Stretch / Fill Width / Fill Height / Fill Best / Fill Outside)
TOP Smoothness: topsmoothness (TOP 滑らかさ) — Background TOP のビューア滑らかさ設定 (Nearest / Interpolate / Mipmap)。旧バージョンは Mipmap 固定のため古いファイルではこの設定がロードされる。新規 Panel COMP のデフォルトは Interpolate Pixels

Border A / B `.borderab` 🟦

ボーダーカラー A / B とアルファ:

Border A: bordera (ボーダー A 色) — Border A の RGB 値
Border A Alpha: borderaalpha (ボーダー A アルファ) — Border A のアルファ値
Border B: borderb (ボーダー B 色) — Border B の RGB 値
Border B Alpha: borderbalpha (ボーダー B アルファ) — Border B のアルファ値

Border Sides (Outside) `.borderoutside` 🔲

外側 4 辺のボーダー色:

Left Border: leftborder (左ボーダー) — 左端 2 ピクセル列の色
Right Border: rightborder (右ボーダー) — 右端 2 ピクセル列の色
Bottom Border: bottomborder (下ボーダー) — 下端 2 ピクセル列の色
Top Border: topborder (上ボーダー) — 上端 2 ピクセル列の色

Border Sides (Inside) `.borderinside` 🔳

内側 4 辺のボーダー色:

Left Border Inside: leftborderi (内側左ボーダー) — 内側 (1 ピクセル内側) の左端ボーダー色
Right Border Inside: rightborderi (内側右ボーダー) — 内側右端ボーダー色
Bottom Border Inside: bottomborderi (内側下ボーダー) — 内側下端ボーダー色
Top Border Inside: topborderi (内側上ボーダー) — 内側上端ボーダー色

Border Over Children `.borderover` 🪞

子パネル上へのボーダー描画:

Border Over Children: borderover (子パネル上ボーダー) — パネルのボーダーをすべての子パネルの上に描画

Disable Color `.disablecolor` 🚷

Disable 時の専用色:

Disable Color (Enable): dodisablecolor (無効色使用) — Enable=Off のとき、下の専用無効色を使うかどうかを切替
Disable Color: disablecolor (無効色) — 無効化時に使う RGB 値 (デフォルト: 黒 (0, 0, 0))
Disable Alpha: disablealpha (無効アルファ) — 無効化色のアルファ値

Composite / Opacity `.compositeopacity` 🧩

RGB×Alpha 前乗算スイッチ、兄弟パネルとの合成方式、不透明度

項目	内部名	説明
Over	`.over`	通常の重ね合わせ
Under	`.under`	下に重ねる
Inside	`.inside`	内側のみ合成
Outside	`.outside`	外側のみ合成
Add	`.add`	加算合成
Subtract	`.subtract`	減算合成
Multiply	`.multiply`	乗算合成

Premultiply / Opacity `.premultopacity` 💧

アルファ前乗算と不透明度:

Multiply RGB by Alpha: multrgb (アルファ前乗算) — RGB チャンネルをアルファチャンネルで乗算 (premultiplied alpha)
Opacity: opacity (不透明度) — パネル全体の透明度

Children Page 👶

Align `.align` 📐

子パネルのレイアウト方式と整列順 (Layout Grid Rows / Columns / Match Network Nodes は子要素を Panel Component に合わせて拡縮)

項目	内部名	説明
None	`.none`	整列なし
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`	ネットワーク上のノード位置に一致

Spacing / Max per Line `.spacingalignmax` 📏

整列間隔と 1 行最大数:

Spacing: spacing (間隔) — Align が None / Match Network Nodes 以外のとき有効。整列時の子要素間スペース
Max per Line: alignmax (1 行最大) — Align が None / Layout Grid Horizontal / Layout Grid Vertical / Match Network Nodes 以外のとき有効。1 行または 1 列に配置される子要素の最大数

Margin `.margin` 📐

Panel Component 周囲のマージン:

Margin: margin (マージン) — L / R / B / T の 4 フィールドで Panel Component のボーダーと外側エッジ間のスペースを指定。マージンは絶対ピクセルでウィンドウサイズに伸縮せず、ノードのパネルビューアには反映されない (親が浮動ウィンドウに描画されたときにのみ反映)

Justify Horizontal `.justifyh` 🧭

子パネルを水平方向にどう正当化するか

項目	内部名	説明
Off	`.off`	水平正当化を行わない
Left	`.left`	左寄せ
Center	`.center`	中央寄せ
Right	`.right`	右寄せ

Justify Vertical `.justifyv` 🧭

子パネルを垂直方向にどう正当化するか

項目	内部名	説明
Off	`.off`	垂直正当化を行わない
Top	`.top`	上寄せ
Center	`.center`	中央寄せ
Bottom	`.bottom`	下寄せ

Fit `.fit` 📦

子パネルの拡縮方式 (Justify Horizontal / Vertical を上書き)

項目	内部名	説明
Off	`.off`	拡縮なし
Fit Width	`.horizontal`	横幅に合わせて拡縮
Fit Height	`.vertical`	高さに合わせて拡縮
Fit Best	`.best`	最も収まる方向に拡縮

Scale / Offset `.scaleoffset` 🔧

子パネルのスケール・オフセット:

Scale: scale (スケール) — 子パネル群を均一にスケーリング
Offset: offset (オフセット) — 子パネル群をオフセット (Align / Justify Horizontal / Justify Vertical で上書きされる点に注意)

Crop `.crop` ✂️

子パネルがコンポーネント外にはみ出した場合のクロップ動作

項目	内部名	説明
On	`.on`	外側にはみ出した子パネルをクロップ
Never	`.never`	外側に出ても切り取らない

Scrollbars `.scrollbars` 📜

スクロールバーの表示モードと太さ:

Horizontal Scrollbar: phscrollbar (水平スクロールバー) — Off / On / Automatic の 3 モードで水平スクロールバーの表示を切替
Vertical Scrollbar: pvscrollbar (垂直スクロールバー) — Off / On / Automatic の 3 モードで垂直スクロールバーの表示を切替
Thickness: scrollbarthickness (太さ) — スクロールバーの太さをピクセル単位で指定

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 のパス

Keep in Memory `.keepmemory` 💾

ロード済みコンポーネントのメモリ保持:

Keep in Memory: keepmemory — Load on Demand 等で動的ロードされたコンポーネントを以降もメモリに保持するかの切替

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: loadondemand — オンの場合、このコンポーネントは実際に必要となるまでメモリにロードされない (起動時間・メモリ消費の最適化)

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`	選択した色空間のデフォルト基準白を使用
Standard (SDR)	`.sdr`	標準ダイナミックレンジ (SDR) 基準白
High (HDR)	`.hdr`	ハイダイナミックレンジ (HDR) 基準白
UI	`.ui`	UI 表示用の基準白

実践アイデア 💡

Example 1: CHOP値のリアルタイム表示 🔢

LFO CHOP → Text COMP (Mode=Text, text に op('lfo1')['chan1'] 式バインド、Type=Float, Precision=3) → Container COMP

LFO CHOP の出力値を Text COMP の Text パラメータに Python 式で直接バインドし、Type を Float に切替えてリアルタイム数値表示パネルを作る基本構成です。Precision で小数桁数、Thousands Separator で 3 桁区切りを制御できます。

LFO CHOP を配置 (chan1 出力)
Text COMP を配置し、Mode を Text に維持
Text パラメータに op('lfo1')['chan1'] を Python 式で入力
Type を Float、Precision を 3 に設定
Font Size / Horizontal Align / Vertical Align でレイアウト調整

Example 2: ユーザ入力フィールド ⌨️

Text COMP (Edit Mode=On, Type=Single Line, Placeholder Text="名前を入力") → Callbacks DAT → 任意の後段処理

Edit Mode をオンにすることで、ユーザがパネル上で直接テキストを編集できる入力フィールドが作れます。Placeholder Text で空欄時のヒントを表示、Callbacks DAT で編集確定イベントを Python で受け取って後段処理に連携します。

Text COMP を配置し、Edit Mode をオン
Type を Single Line に設定
Placeholder Text に「名前を入力」等のヒント文字列、Placeholder Text Color を薄いグレーに設定
Callbacks DAT に Python 関数を持つ Text DAT を割り当て、onValueChange で値変化を受信
編集確定時の挙動が単行モードと改行で扱いたい場合は Shift-Enter for New Line をオンに切替

Example 3: 書式コードで装飾表示 🎨

Text COMP (Text に {#color(255,0,0);}WARN 等の書式コード入り文字列, Formatting Codes=On)

Formatting Codes をオンにすると、テキスト中に埋め込んだディレクティブが解釈され、行内で文字色や装飾を切替えられます。例えば {#color(255, 0, 0);}WARN でその位置以降を赤に変更でき、ステータス表示パネルやログビューア用途で有効です。

Text COMP を配置し、Formatting Codes をオン
Type を Multi Line に設定し、Word Wrap をオン
Text パラメータに書式コード入り文字列を Python 式で構築 (例: '{#color(255,0,0);}WARN: '+ msg)
Font Color をデフォルト色 (白等) に設定し、書式コードで部分的に上書き
詳細な書式コード仕様は Text Formatting Codes を参照

Info CHOP情報 📊

Text 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: 絶対時間基準でのクックフレーム番号
cook_start_time: オペレータがクックを開始した時刻
cook_end_time: クックが完了した時刻
cooked_this_frame: 現在のフレームでクックされた場合は 1

Panel COMP 情報 🪟

panel_width: Panel COMP の現在の幅 (ピクセル単位)
panel_height: Panel COMP の現在の高さ (ピクセル単位)
u: パネル上のマウス位置 (正規化 U 座標、0.0〜1.0)
v: パネル上のマウス位置 (正規化 V 座標、0.0〜1.0)

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

よくある問題と解決策 🔧

❌ Problem: Text パラメータに Python 式を入れたが値が表示されない・式リテラルがそのまま出る
✅ Solution:

Text パラメータを式モードに切替えたか確認 (右クリック → Expression)
参照先 OP のパス・チャンネル名が正しいか OP Find DAT 等で確認
Type が Single Line / Float / Integer 等、値の種別と一致しているかを確認

❌ Problem: Edit Mode をオンにしたのにパネル上で編集できない
✅ Solution:

Panel Page の Enable がオン、Click Through がオフであることを確認
親 COMP (Container COMP 等) 側で Enable がオフになっていないか、または Click Through がオンになっていないかを確認
Window COMP で開いている場合は対象パネルが Window のアクティブフォーカスを受け取っているかを確認

❌ Problem: Formatting Codes が文字通り表示され、装飾として解釈されない
✅ Solution:

Text Page の Formatting Codes がオンになっているかを確認
書式コードの構文を Text Formatting Codes で再確認 (波括弧・セミコロン位置の誤りに注意)
Specification DAT モードで使う場合は Parse Escape Sequences もオンにする

❌ Problem: Word Wrap をオンにしたのに長い行が折り返されない
✅ Solution:

Type が Multi Line になっているか確認 (Single Line では Word Wrap は無効)
Text Padding の左右値が大きすぎてテキスト描画幅がゼロに近づいていないか確認
Horz Stretch や Font Size でテキスト幅がパネルを大きく超えていないかを確認

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

概要 📖 – 文字を表示し編集する

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Text Page 📝

Mode .mode 🔀

Text Source .textsource 🔤

Type .type 🏷️

Formatting .formatting 🎯

Smart Punctuation .smartpunct ✒️

Formatting Codes .formatcodes 🎨

Word Wrap .wordwrap ↩️

Edit Mode .editmode ✏️

Drag Drop Behaviour .dragdropmode 🖱️

Placeholder .placeholder 💬

Reading Direction .readingdirection ↔️

Focus Order .fieldfocus 🎚️

Callbacks DAT .callbacks 📞

Font Page 🔠

Font Selection .fontselection 📚

Scale Text to Fit .scaletofit 🔍

Font Size .fontsize 📏

Font Size Units .fontsizeunits 📐

Character Spacing .charspacing 🔡

Font Color .fontcolor 🎨

Selection Color .selectcolor 🟦

Drop Shadow .dropshadow 🌑

Offset Units .offsetunits 📐

Text Offset / Padding .textoffsetpadding 📏

Horizontal Alignment .alignx ↔️

Horizontal Align Mode .alignxmode 📊

Vertical Alignment .aligny ↕️

Vertical Align Mode .alignymode 📊

Panel Page 🪟

Display / Enable .displayenable 👁️

Help DAT .helpdat ❓

Cursor .cursor 🖱️

Multi-Touch .multitouch 👆

Constrain Cursor / Click Through .constrainclickthrough 🚫

Mouse Wheel / UV Buttons .mousewheeluv 🖲️

Drag Edges to Resize .resize ↔️

Drag to Reposition .reposition 🖐️

Scroll Overlay .scrolloverlay 📜