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

概要 📖 – ブラウザと双方向通信

Web Server DATは、TouchDesigner 内で HTTP / WebSocket サーバーを起動し、クライアントと通信する DATです。ブラウザや外部アプリからの接続を受け付け、応答処理はすべて Callbacks DAT パラメータに指定した DAT 内の Python コールバックを通して行います。

主な用途 🎯

• TouchDesigner 内で動くHTTP Web サーバーの構築
• WebSocket によるブラウザとのリアルタイム双方向通信
• スマートフォンやタブレットからの遠隔操作インターフェイス配信
• 外部 Web アプリからの REST 風リクエスト受信と応答
• TLS (HTTPS) による暗号化された安全な接続の提供

データフロー 🔄

入力: クライアントからの HTTP / WebSocket リクエスト
 ↓
処理: Callbacks DAT の Python コールバックで応答を組み立て
 ↓
出力: HTTP レスポンスや WebSocket メッセージをクライアントへ返す

まる。

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

パラメータ解説 ⚙️

Web Server Page 📋

サーバー制御 🎛️

Web サーバーの起動・停止・接続ポートを制御するパラメータ

Active .active ✅
– Active (有効化) — Web サーバーを起動・停止します。
– オンにするとサーバーが待ち受けを開始します。

Restart .restart 🔄
– Restart (再起動) — サーバーが起動中のとき、パルスするとサーバーを再起動します。

Port .port 🔌
– Port (接続ポート) — Web サーバーの接続ポート番号を指定します。
– 例: ポート番号が 9980 の場合、同一マシンの Web ブラウザから localhost:9980 で接続できます。

TLS 暗号化設定 🔐

通信を HTTPS で暗号化するための TLS 証明書関連パラメータ

Secure (TLS) .secure 🔒
– Secure (TLS) (TLS で保護) — 有効にすると Web サーバーがトランスポート層セキュリティ (TLS) を使ってクライアントと安全な接続を確立します。
– 結果としてサーバーは HTTP ではなく HTTPS で動作します。

Private Key File Path .privatekey 🗝️
– Private Key File Path (秘密鍵ファイルのパス) — サーバーの TLS 証明書の秘密鍵ファイルへのパスを指定します。

Certificate File Path .certificate 📜
– Certificate File Path (証明書ファイルのパス) — サーバーの TLS 証明書ファイルへのパスを指定します。

Certificate Password .password 🔑
– Certificate Password (証明書のパスワード) — 上記で指定した証明書のパスワードを入力します。

応答処理 🐍

リクエスト受信時の応答ロジックを定義する Python コールバックの参照先

Callbacks DAT .callbacks 🐍
– Callbacks DAT (コールバック参照) — Python コールバックを記述した DAT への参照です。
– Web Server DAT はこの Callbacks DAT に大きく依存し、機能のほとんどがコールバックを通して処理されます。
– 主なコールバックは以下の通りです:

• onHTTPRequest — HTTP リクエスト受信時に呼ばれます。リクエストは HTTP ヘッダの辞書として渡され、応答も status や reason 等を含む辞書として返します。
• onWebSocketOpen — クライアントとの WebSocket 接続が開かれたときに呼ばれます。
• onWebSocketClose — WebSocket 接続が閉じられたときに呼ばれます。
• onWebSocketReceiveText — クライアントからテキストデータを受信したときに呼ばれます。
• onWebSocketReceiveBinary — クライアントからバイナリデータを受信したときに呼ばれます。
• onServerStart / onServerStop — サーバーの起動時・停止時に呼ばれます。

実践アイデア 💡

Example 1: スマホ遠隔操作パネル 📱

Web Server DAT → Callbacks DAT (onHTTPRequest) → Text DAT (HTML) → ブラウザ表示

Web Server DAT を起動し、Callbacks DAT の onHTTPRequest で Text DAT に書いた HTML を返すことで、スマートフォンのブラウザから TouchDesigner を操作するコントロールパネルを配信する基本フローです。

1. Web Server DAT を配置し Active をオンにしてポート番号を設定
2. Callbacks DAT の onHTTPRequest でコントロール画面の HTML を組み立てて応答に格納
3. スマートフォンを同一ネットワークに接続し localhost ではなく PC の IP アドレスでアクセス
4. ブラウザに表示されたパネルからパラメータを遠隔操作

Example 2: リアルタイム双方向通信 🔁

ブラウザ (WebSocket) → Web Server DAT → Callbacks DAT (onWebSocketReceiveText) → パラメータ反映

ブラウザからの WebSocket 接続を Web Server DAT で受け、onWebSocketReceiveText コールバックで受信テキストを解析して TouchDesigner 内のパラメータへ即時反映する、低遅延な双方向通信の例です。

• Web Server DAT を起動しブラウザ側 JavaScript から WebSocket で接続
• onWebSocketReceiveText で受信したメッセージを解析
• 解析結果を TouchDesigner 内のパラメータやチャンネルへ反映

Example 3: HTTPS 安全配信 🔐

Secure (TLS) → 証明書・秘密鍵指定 → HTTPS 接続 → ブラウザ

Secure (TLS) を有効にして証明書ファイルと秘密鍵ファイルを指定することで、暗号化された HTTPS 接続でコンテンツを配信し、外部公開時の通信を保護する構成例です。

• Secure (TLS) をオンにして HTTPS モードへ切り替え
• Certificate File Path と Private Key File Path に証明書・秘密鍵を指定

関連オペレータ 🔗

類似機能OP 🔍

• Web Client DAT — サーバーではなくクライアント側として外部 Web サーバーへリクエストを送信
• WebSocket DAT — WebSocket 専用クライアントとして双方向通信を行う
• TCP/IP DAT — より低レベルな TCP/IP ソケット通信を扱う

組み合わせ推奨OP 🔄

• Text DAT — 応答する HTML や JavaScript のソースを保持
• JSON DAT — API 応答用の JSON データを構築・整形
• Substitute DAT — 応答テンプレート内の変数を動的に置換
• Execute DAT — サーバー起動・停止に合わせた Python 処理を実行

前処理・後処理DAT 🎯

• 前処理: Text DAT、JSON DAT、Substitute DAT
• 後処理: Table DAT、Select DAT、Convert DAT

Info情報 📊

Web Server DAT は Info DAT や Info CHOP による状態情報の取得に対応しています。

DAT 固有情報 📋

• num_rows: DAT の行数
• num_cols: DAT の列数
• type: DAT の型 (table / text)
• is_table: テーブル形式の場合 1、テキスト形式の場合 0

汎用オペレータ情報 🔄

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

共通情報 📡

• total_cooks: オペレータが調理 (cook) された累計回数
• cook_time: 直近の調理にかかった時間 (ミリ秒)
• cook_frame: 最後に調理されたフレーム番号
• cpu_cook_time: CPU 上での調理時間 (ミリ秒)

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

よくある問題と解決策 🔧

❌ Problem: ブラウザからサーバーに接続できない
✅ Solution:

• Active がオンになっているか確認します。
• ファイアウォールで指定ポートが許可されているか確認します。
• 別マシンからアクセスする場合は localhost ではなく PC の IP アドレスを使います。

❌ Problem: リクエストを送っても応答が返らない
✅ Solution:

• Callbacks DAT の onHTTPRequest が定義され、応答辞書を return しているか確認します。
• 応答処理は前処理として Text DAT に HTML を用意して組み立てます。
• Textport にコールバック内のエラーが出ていないか確認します。

❌ Problem: HTTPS で接続が確立できない
✅ Solution:

• Secure (TLS) がオンで、証明書ファイルと秘密鍵ファイルのパスが正しいか確認します。
• Certificate Password が証明書と一致しているか確認します。
• ブラウザ側が自己署名証明書を拒否していないか確認します。

参考資料 📚

その他 🔗

• TouchDesigner Wiki — DAT 概要
• TouchDesigner Wiki — Category:DATs
• TouchDesigner Wiki ホーム
• TouchDesigner 公式 Forum
• Facebook — TouchDesigner Help Group

公式リソース 📖

• TouchDesigner公式ドキュメント – Web Server DAT

関連オペレータ 🔗

• TouchDesigner公式ドキュメント – Web Client DAT

まる。

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

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

↓日常垢
Instagram：＠malmal0v0

まる。をフォローする

その他の記事はこちら

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

2026/6/19

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

2026/6/19

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

2026/6/19

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

2026/6/19

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

2026/6/19