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

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

概要 📖 – ネットワーク注釈とドキュメンテーション

Annotate COMPは、Network Editor 上にテキスト・色付き矩形・OP ビューア埋め込みでネットワークを装飾・整理する注釈 COMPです。Comment（テキストのみのポストイット）/ Network Box（ノードのグルーピング）/ Annotate（全機能搭載）の 3 モードを切り替えて、ドキュメンテーションとネットワーク整理を両立します。

主な用途 🎯

Network Editor 上にテキスト・色付き矩形を配置してネットワークを視覚的に整理
Comment / Network Box / Annotate の 3 モードを切り替えてポストイット・グルーピング・全機能注釈を使い分け
OP Viewer 埋め込み によりネットワーク内に TOP / CHOP / SOP のライブプレビューを表示
Backcolor / Opacity によるカラーゾーニングでサブシステムごとの責務を明示
Layer Zone / Order で注釈の重ね順を制御し、グリッド下・ノード上・ノード下のレイヤード情報設計を実現

データフロー 🔄

ユーザー入力（タイトル・本文・色・対象 OP のパス）
 ↓
Annotate COMP（Mode 設定で Comment / Network Box / Annotate を選択）
 ↓
Network Editor 上に矩形装飾として描画

Tips

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

リンク

まる。

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

パラメータ解説 ⚙️

Annotate Page 📁

Annotate 基本設定 ⚙️

Annotate COMP の対象 OP 指定・有効化・包含挙動パラメータ:

OP Viewer: opviewer — Annotate の領域内に表示する対象 OP のパス
Enable: enable — Annotate のインタラクション全体を有効 / 無効化
Enclose OPs: encloseops — オンの場合、Annotate の矩形範囲内に重なる他オペレータも一緒に移動・追従させる
Utility: utility — このノードを Utility ノード扱いにし、レンダリングパス等の特殊扱いを切替
Include in Order: includeinorder — 全 annotateCOMP の Order 順序に含めるか
Order: order — この annotateCOMP の Order 順序番号

Layer Zone `.layerzone` 🎛️

annotateCOMP を Network Editor のどのレイヤゾーンに重ねるかを選択するメニューパラメータ

項目	内部名	説明
Below Grid	`.belowgrid`	Network Editor のグリッド線よりも下のレイヤに描画 (ノードの背景としての装飾)
Between Grid and Nodes	`.betweengridandnodes`	グリッド線の上・ノードの下のレイヤに描画 (デフォルト的な配置)
Above Nodes	`.abovenodes`	全ノードよりも上のレイヤに描画 (前景注釈として目立たせる)

Layer `.layer` 📏

同一 Layer Zone 内での重ね順インデックス:

Layer: layer — 同じ Layer Zone の中で複数 annotateCOMP がある場合の重ね順 (値が大きいほど手前に描画)

Text Page 📁

タイトル設定 `.title` ✏️

タイトルバーのテキスト・高さ設定:

Title Text: titletext — タイトルバーに表示するテキスト
Title Height: titleheight — タイトルバーの高さ (Panel 単位)

Title Align `.titlealign` 🎛️

タイトルテキストの水平方向の位置揃えを選択するメニューパラメータ

項目	内部名	説明
Left	`.left`	タイトルテキストを左揃えで表示
Center	`.center`	タイトルテキストを中央揃えで表示
Right	`.right`	タイトルテキストを右揃えで表示

本文設定 `.body` 📝

本文エリアのテキスト・フォントサイズ・幅制限パラメータ:

Body Text: bodytext — 本文エリアに表示するテキスト (複数行可)
Body Font Size: bodyfontsize — 本文テキストのフォントサイズ
Body Limit Width: bodylimitwidth — オンの場合、Body Max Width に従ってテキスト幅を制限
Body Max Width: bodymaxwidth — 本文の最大横幅 (Panel 単位)。超過部分は折返しまたは切り詰めの対象

Settings Page 📁

Mode `.mode` 🎛️

Annotate COMP の表示形態を選択するメニューパラメータ。3 つの組み込みフォームを切替

項目	内部名	説明
Comment	`.comment`	テキストのみのポストイット風表示 (タイトルや OP Viewer 機能なし、Shift+C で配置)
Network Box	`.networkbox`	ノードをグルーピング・移動・ラベル付けする矩形 (Shift+B で配置)
Annotate	`.annotate`	タイトル・本文・OP Viewer・色設定など全機能を備えた完全アノテーション (Shift+A または Alt+ドラッグで配置)

テキスト整形 📝

テキストの自動整形・折返し設定:

Smart Quote: smartquote — オンの場合、ストレートクォート・3 点リーダー・ハイフンを Unicode の整形版に自動変換
Body Word Wrap: bodywordwrap — 本文テキストを右端で自動折返し

背景色と透明度 🎨

背景色とアルファ・全体不透明度のパラメータ:

Back Color: backcolor (backcolorr, backcolorg, backcolorb) — 背景色の R / G / B 各成分 (色覚的ゾーニングに利用)
Back Color Alpha: backcoloralpha — 背景色のアルファ値
Opacity: opacity — Annotate 全体の不透明度。下のノード・グリッドの視認性を確保するため通常 0.3〜0.7 に調整

OP Viewer Page 📁

Viewer 表示制御 👁️

OP Viewer の表示制御パラメータ:

OP Viewer Display: opviewerdisplay — オンの場合、Annotate 内に OP Viewer を表示
OP Viewer: opviewer — Viewer に表示する対象オペレータのパス
OP Viewer Interactive: opviewerinteractive — Viewer 内でのインタラクション (パン・ズーム等) を許可するか

OP Viewer Oversize `.opvieweroversize` 🎛️

OP Viewer のサイズ・アスペクト処理方式を選択するメニューパラメータ

項目	内部名	説明
Natural	`.natural`	OP 自体のネイティブ解像度・アスペクトをそのまま使用
Specify	`.specify`	OP Viewer Size パラメータで明示的に解像度を指定
Auto-fit	`.autofit`	Annotate の領域に合わせて Viewer を自動フィット

Viewer サイズ・位置調整 📏

OP Viewer のサイズ・スケール・位置揃え・オフセットパラメータ:

OP Viewer Size: opviewersize (opviewersizex, opviewersizey) — Oversize が specify のときの幅・高さ (W, H)
OP Viewer Scale: opviewerscale — Viewer 全体のスケール係数
OP Viewer Justify X: opviewerjustifyx — Viewer 境界を左端・中央・右端のどちらに揃えるか
OP Viewer Justify Y: opviewerjustifyy — Viewer 境界を上端・中央・下端のどちらに揃えるか
OP Viewer Fill Body/Title: opviewerfillbodytitle — タイトルバー領域にも Viewer を表示することを許可
OP Viewer Zoom: opviewerzoom — 表示サイズを増やさずに Viewer のズームレベルだけを変更
OP Viewer Offset: opvieweroffset (opvieweroffsetx, opvieweroffsety) — Viewer 内で表示する範囲のオフセット (X, Y)
OP Viewer Fill Alpha: opviewerfillalpha — OP Viewer 背景領域のアルファ値

About Page 📁

バージョンとヘルプ ℹ️

バージョン・ヘルプリンク:

Version: version — Annotate COMP のデフォルト構成バージョン情報
Help: help — 公式ドキュメントを開くパルスボタン

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

実践アイデア 💡

Example 1: サブシステムをカラーゾーニング 🎨

Annotate COMP (Mode=Annotate, Back Color=cyan, Layer Zone=Below Grid) → Network Editor 上に半透明矩形を描画 → 関連ノード群を包含

Annotate COMP を Annotate モードで配置し、Back Color と Opacity を調整して半透明の色付き矩形でサブシステム（例: 音響処理ブロック、入力ハンドリング、UI レイヤ）を視覚的に区分けする基本パターン。Layer Zone を Below Grid にしておけばノードのクリック・選択を妨げない。

Shift+A または Alt+ドラッグで Annotate COMP を配置
Mode を annotate、Title Text に「Audio Processing」等のサブシステム名を入力
Back Color を cyan 系、Back Color Alpha を 0.3、Opacity を 0.5 に設定
Layer Zone を Below Grid に切替えてノード操作を妨げないように配置
Enclose OPs をオンにすると Annotate 移動時に内部ノードも追従

Example 2: OP Viewer 埋め込みでライブプレビュー注釈 🖼️

対象 TOP / CHOP → Annotate COMP (OP Viewer Display=ON, OP Viewer=対象 OP のパス) → Network Editor 内にライブ Viewer を表示

Annotate COMP の OP Viewer 機能を使い、注釈矩形の中に対象オペレータ (例: モニタしたい Composite TOP や Audio Spectrum CHOP) のライブプレビューを埋め込む。コメント文と並べることで「このノードが何を出しているか」をネットワーク図上で即座に伝達できる。

Mode を annotate に設定
OP Viewer Display をオン、OP Viewer に対象オペレータのパス (例: ../composite1) を入力
OP Viewer Oversize を autofit にして矩形に合わせて自動調整
OP Viewer Interactive をオンにすればネットワーク表示中にも Viewer 内でパン・ズーム可能

Example 3: Comment モードでポストイット風メモ 📝

Shift+C で配置 → Annotate COMP (Mode=Comment) → Network Editor 上に小さなテキストメモを表示

Mode を comment に切り替えると、タイトルバー・OP Viewer・色設定が省かれたシンプルなポストイット風メモとして機能する。ノードの近くに置いて「ここで音量を 0.7 倍にしてからミックス」等の補足コメントを残すのに最適。

Shift+C で comment モードの Annotate COMP を配置
Body Text に補足コメントを入力 (Smart Quote をオンにするとクォート類が自動整形される)
Body Font Size と Body Max Width で読みやすさを調整

Example 4: Network Box でノードをグループ化 📦

Shift+B で配置 → Annotate COMP (Mode=Network Box, Enclose OPs=ON) → 矩形範囲内のノード群を一括移動

Mode を networkbox にすると、矩形範囲内のノード群を「グループ」として扱える。Enclose OPs をオンにしておけば Box を移動した際に内部のノードもまとめて追従するため、サブグラフ単位での再配置や整理に便利。

Shift+B で Network Box モードの Annotate COMP を配置
Title Text にグループ名 (例: 「Audio Stage」) を入力
Enclose OPs をオンにして範囲内ノードを移動連動
Layer Zone を betweengridandnodes にしてノードの背景として機能させる

Info COMP情報 📊

Annotate 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

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

よくある問題と解決策 🔧

❌ Problem: Annotate がノードを覆い隠してクリックできない
✅ Solution:

Layer Zone を belowgrid または betweengridandnodes に切替えてノードの背面に回す
Opacity を 0.3〜0.5 程度に下げて視認性とクリック性を両立
同じ Layer Zone 内で複数 Annotate が重なる場合は layer パラメータで重ね順を制御

❌ Problem: Enclose OPs をオンにしても内部ノードが追従しない
✅ Solution:

Mode が networkbox または annotate になっているか確認 (comment モードでは追従しない)
Annotate の矩形範囲内にノードが完全に含まれているかを確認 (端が外れていると非追従)
Layer Zone が abovenodes の場合はノード操作を奪う可能性 — betweengridandnodes に戻す

❌ Problem: OP Viewer に対象 OP の内容が表示されない
✅ Solution:

OP Viewer Display がオンになっているか確認、OP Viewer に正しい対象 OP のパスが入っているか確認
OP Viewer Oversize を autofit に切替えて Viewer 領域に合わせる
対象 OP がクックされているか (warnings / errors チャンネルが 0 か) を確認

❌ Problem: Body Text が領域からはみ出る・切れる
✅ Solution:

Body Word Wrap をオンにして自動折返しを有効化
Body Limit Width をオンにして Body Max Width を Annotate の幅に合わせる
Body Font Size を小さく調整、または Annotate の矩形自体を広げる

参考資料 📚

その他 🔗

公式リソース 📖

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

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

概要 📖 – ネットワーク注釈とドキュメンテーション

主な用途 🎯

データフロー 🔄

パラメータ解説 ⚙️

Annotate Page 📁

Annotate 基本設定 ⚙️

Layer Zone .layerzone 🎛️

Layer .layer 📏

Text Page 📁

タイトル設定 .title ✏️

Title Align .titlealign 🎛️

本文設定 .body 📝

Settings Page 📁

Mode .mode 🎛️

テキスト整形 📝

背景色と透明度 🎨

OP Viewer Page 📁

Viewer 表示制御 👁️

OP Viewer Oversize .opvieweroversize 🎛️

Viewer サイズ・位置調整 📏

About Page 📁

バージョンとヘルプ ℹ️

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 ⚪