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

※当サイトにはプロモーションリンクが含まれます。

Web Client DAT の HTTP リクエスト送受信機能を示す図

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

概要 📖 – HTTP リクエスト送信とレスポンス受信

Web Client DATは、HTTP / HTTPS で外部 Web サーバへリクエストを送信し、レスポンスを取得する DATです。GET / POST / PUT / DELETE / HEAD / OPTIONS / PATCH の 7 リクエストメソッドに対応し、Basic / Digest / OAuth1 / OAuth2 の認証もサポートします。

主な用途 🎯

  • REST API 呼び出し (GET / POST / PUT / DELETE / PATCH / HEAD / OPTIONS) でサーバからデータ取得
  • JSON / XML / 任意テキストレスポンスを Text または Table 形式で受信
  • 認証付き APIへのアクセス (Basic / Digest / OAuth1 / OAuth2)
  • SSE / streaming レスポンスを Stream 設定で逐次受信
  • Callbacks DATでレスポンス受信ごとに Python で後処理を実行

データフロー 🔄

入力: URL + リクエスト方法 + 認証情報
 ↓
HTTP リクエスト送信
 ↓
サーバから HTTP レスポンス受信
 ↓
出力: テキスト / テーブル DAT + Callbacks 起動

Tips

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

まる。
まる。

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

パラメータ解説 ⚙️

Web Client Page 📋

接続有効化 ✅

Active .active ✅
– オペレータの動作 ON/OFF を切り替えるトグル

Request Method .reqmethod 📡

HTTP リクエストメソッドを選択するメニュー

項目 内部名 説明
GET .get 指定リソースの表現を要求 (読み取り専用、副作用なし)
POST .post リソースに対してエンティティを送信 (副作用ありの送信用)
PUT .put 対象リソースの全表現をリクエストペイロードで置換
DELETE .delete 指定リソースを削除
HEAD .head GET と同等だがレスポンスボディなし (メタ情報のみ取得)
OPTIONS .options 対象リソースで利用可能な通信オプションを問い合わせ
PATCH .patch リソースに対して部分的な変更を適用

URL とリクエスト送信制御 🌐

URL .url 🔗
– リクエスト送信先のサーバ URL
– HTTPS サーバへ送る場合は https:// から始める

Upload File .uploadfile 📤
– アップロードするファイルのパス (必要に応じてチャンク送信される)

Request .request 🚀
– パルスでリクエストを送信

Stop .stop ⏹️
– サーバからのストリーミングデータを停止

Stream .stream 🌊
– On 時、サーバが streaming に対応していれば逐次受信
– 通常の REST API では Off で使用

Verify Certificate (SSL) .verifycert 🔒
– TLS 証明書の検証を有効化 (本番では必ず On 推奨)

Timeout .timeout ⏱️
– サーバからの応答がない場合のタイムアウト時間 (ミリ秒)

Include Header in Output .includeheader 📋
– On 時、レスポンスヘッダも出力 DAT に含める

Authentication Page 📁

Authentication Type .authtype 🔐

認証方式を選択するメニュー

項目 内部名 説明
None .none 認証なし
Basic .basic ユーザ名とパスワードを Base64 エンコード (TLS なしでは生に近い)
Digest .digest ハッシュ関数で暗号化された Base64 エンコード (Basic より安全)
OAuth1 .ouath1 OAuth Version 1。App Key / App Secret / User OAuth Token / User OAuth Secret が必要
OAuth2 .ouath2 OAuth Version 2。事前に Client ID と Token をブラウザ経由で取得する必要あり

認証情報パラメータ 🔑

Username .username 👤
– Basic / Digest 認証で使用するユーザ名

Password .pw 🔒
– Basic / Digest 認証で使用するパスワード

App Key .appkey 🗝️
– OAuth1 のサーバ側で取得した App Key

App Secret .appsecret 🔐
– OAuth1 のサーバ側で取得した App Secret

User OAuth Token .oauthtoken 🎫
– OAuth1 ユーザトークン

User OAuth Secret .oauthsecret 🎟️
– OAuth1 ユーザシークレット

Client ID .clientid 🆔
– OAuth2 のサーバ側で取得した Client ID

Token .token 🎫
– OAuth2 のサーバ側で取得したアクセストークン

Output Page 📁

出力形式とコールバック 📥

Clear Output .clear 🧹
– パルスで DAT 出力をクリア

Clamp Output as Rows .clamp 📏
– On 時、出力をテーブル形式 (行) として扱い、Maximum Lines までクランプ
– Stream を On にする場合は出力肥大化防止のために必ず On 推奨

Maximum Lines .maxlines 🔢
– Clamp Output as Rows が On のときの最大行数

Callbacks DAT .callbacks 📜
– レスポンス受信時に呼ばれる Python コールバックを保持する DAT を指定

Common Page 🔧

Language .language 📝

DAT が動作するスクリプト言語の決定方法

項目 内部名 説明
Input .input 入力 DAT のスクリプト言語を使用
Node .node この DAT 自身のスクリプト言語を使用

Edit/View Extension .extension 📄

外部エディタに公開するファイル拡張子の選択

項目 内部名 説明
dat .dat 汎用的なファイル拡張子 dat を使用
From Language .language DAT のスクリプト言語に応じた拡張子を自動選択
Custom Extension .custom Custom Extension で指定したカスタム拡張子を使用

Custom Extension .customext 🔤

Edit/View Extension が Custom Extension のときに適用される拡張子:

  • Custom Extension 文字列: Edit/View Extension が custom のときに使用される任意のファイル拡張子

Word Wrap .wordwrap 🔁

ノード表示でのワードラップ (折り返し) の有効化

項目 内部名 説明
Input .input 入力 DAT の Word Wrap 設定を継承
On .on Word Wrap を有効化 (ノード上の長い行を折り返し表示)
Off .off Word Wrap を無効化 (折り返さずそのまま表示)

実践アイデア 💡

Example 1: 天気 API を GET してパラメータに反映 🌤️

Web Client DAT (GET) → Script DAT (JSON parse) → DAT to CHOP → 対象 OP
  1. URL に天気 API のエンドポイントを指定 (例: https://api.example.com/weather?city=tokyo)
  2. Request Method を GET、Verify Certificate を On に設定
  3. Request パルスでリクエスト送信、レスポンス JSON が DAT に格納される
  4. 後段の Script DAT で JSON をテーブル化し、DAT to CHOP で数値を取り出し

Example 2: Webhook サーバへ状態通知を POST 📤

状態変化検出 → CHOP Execute DAT (onValueChange) → Web Client DAT (POST)
  1. CHOP Execute DAT で状態変化を検出
  2. Web Client DAT の Request Method を POST に、URL を Webhook エンドポイントに設定
  3. コールバック内で op('webclient1').par.url = ... や Upload File でペイロードを準備して par.request.pulse()
  4. サーバ側のレスポンス (ACK / エラーコード) を Callbacks DAT で監視

Example 3: Streaming レスポンスを逐次受信して表示 🌊

Web Client DAT (Stream + Clamp) → Text TOP / リアルタイム表示
  1. Stream を On、Clamp Output as Rows も On に設定 (履歴肥大化防止のため必須)
  2. Maximum Lines を適切な行数に設定 (例: 200 行)
  3. Callbacks DAT で onResponse を実装し、行単位で逐次表示を更新
  4. 停止時は Stop パルスを送信

関連オペレータ 🔗

類似機能OP 🔍

  • Web Server DAT — 逆方向: TouchDesigner 内で HTTP サーバを立てる
  • TCP/IP DAT — HTTP より低レベルな生 TCP 通信

組み合わせ推奨OP 🔄

  • Script DAT — 受信した JSON / XML を Python でテーブル整形
  • DAT to CHOP — 整形後のテーブルの数値列を CHOP チャンネル化
  • CHOP Execute DAT — CHOP 値変化トリガで Web Client DAT に POST 送信
  • Timer CHOP — 定期的なポーリング (cron 的な GET 送信) のトリガに使用
  • Text TOP — 受信した文字列レスポンスを画面表示

前処理・後処理DAT 🎯

Info DAT情報 📊

Web Client DAT は Info DAT による詳細情報取得に対応しています。

DAT 固有情報 📄

  • num_rows: レスポンス行数 (Clamp Output as Rows On 時に有効)
  • num_cols: DAT の列数 (Include Header in Output On / Off で変動)
  • type: DAT の型 (table / text)
  • is_table: テーブル形式の場合 1、テキスト形式の場合 0

汎用オペレータ情報 🔄

  • total_cooks: プロセス開始からのクック回数 (≒ リクエスト送信回数の目安)
  • cook_time: 最後のクック時間 (ミリ秒) — レスポンス受信完了までの時間の指標
  • cook_frame: 最後にクックされたフレーム番号
  • warnings: 警告数
  • errors: エラー数 (タイムアウト / 接続失敗 / 認証失敗時にカウント)

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

よくある問題と解決策 🔧

❌ Problem: リクエスト送信してもレスポンスが返ってこない
✅ Solution:

  • Active が On になっているか確認
  • URL の https:// / http:// プロトコル指定が正しいか確認
  • Timeout が短すぎてサーバ応答前に切られていないか確認 (値を増やしてリトライ)

❌ Problem: HTTPS で SSL 証明書エラー
✅ Solution:

  • Verify Certificate (SSL) を On にして本番運用 (Off は開発時のみ)
  • サーバ側証明書が期限切れ / 中間証明書欠落でないか確認
  • ローカル開発で自己署名証明書を使う場合のみ Verify Certificate を Off に (本番では絶対 On)

❌ Problem: 認証エラー (401 / 403) で API を叩けない
✅ Solution:

  • Authentication Type が API 仕様と一致しているか確認 (Basic / Digest / OAuth1 / OAuth2)
  • Username / Password / Token 等の認証情報を再確認 (改行混入が頻発)
  • OAuth2 の場合、トークン期限切れがないか / リフレッシュフローを実装する必要がないか確認

❌ Problem: レスポンスが文字化けする / JSON parse に失敗する
✅ Solution:

  • Include Header in Output を On にしてレスポンスの Content-Type / charset を確認
  • 後段の Script DAT 内で json.loads 前にエンコーディング変換
  • サーバ側が gzip 圧縮で返している場合、TouchDesigner 側で自動展開されないことがある

参考資料 📚

公式リソース 📖

コミュニティ 💬

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


まる。

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

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

↓日常垢
Instagram：＠malmal0v0

まる。をフォローする
その他の記事はこちら
Math Combine POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED Select TOP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
ZED POP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Window COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】
Widget COMP 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

タイトルとURLをコピーしました