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

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

Web DAT の HTTP 取得機能を示す図

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

概要 📖 – URLからページを取得

Web DATは、指定した URL のページをダウンロードしてテーブル形式で取り込む DATです。Fetch パルスで単純取得、Submit and Fetch パルスで入力 DAT の name/value ペアを POST してから取得します。Asynchronous Fetch をオンにすると、描画ループを止めずにバックグラウンドでダウンロードが進みます。

主な用途 🎯

  • 外部 Web ページ / REST API レスポンスの単発取得 (HTML / JSON / XML)
  • POST メソッドで name/value ペアをサーバへ送信してレスポンスを受け取る簡易フォーム送信
  • Asynchronous Fetch でバックグラウンドダウンロードし、描画ループを止めない非同期取得
  • HTTP ヘッダを出力に含めるレスポンス検査 (Content-Type / Status / Set-Cookie 等の目視確認)
  • HTTPS 証明書検証 (TLS) の手動オン・オフを含むネットワーク通信

データフロー 🔄

URL パラメータで取得先指定
 ↓
Fetch / Submit and Fetch パルスで HTTP リクエスト送出
 ↓
サーバから本文 (+ 任意でヘッダ) を受信
 ↓
DAT テーブルに本文を格納
 ↓
後段の Convert / JSON / XML DAT でパースして利用

Tips

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

まる。
まる。

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

パラメータ解説 ⚙️

Fetch Page 📋

URL設定 .url 🔗

URL .url 🔗
– 取得対象の Web ページ / API エンドポイントの URL アドレス
– http:// または https:// のいずれのプロトコルにも対応
– 文字列パラメータなので、Python や DAT 参照式で動的に書き換え可能

データ取得制御 ▶️

Fetch .fetch ⬇️
– パルスでこのパラメータを叩くと、URL で指定したページを取得
– 単純な単発ダウンロード用 (POST はせず GET 相当の取得)
– 既定では取得完了まで TouchDesigner の処理が停止する (= 同期取得)

Submit and Fetch .submitfetch 📤
– 入力 DAT の name / value ペアを POST 送信した後、URL のページを取得
– 1 番目の入力にテーブル DAT (1 列目=name, 2 列目=value) を接続して使用
– フォーム送信や Webhook 送出のような POST 用途で利用

Disconnect .disconnect ✂️
– パルスで現在のセッションを閉じる
– サーバ側で keep-alive 接続を残したくないときや、状態を初期化したいときに使用

送信メソッド .method 📮

Submit and Fetch 実行時のリクエストメソッド選択

項目 内部名 説明
POST .post name / value ペアを HTTP POST ボディとして送信 (現状の Web DAT で唯一実装されているメソッド)

※ 注意: 公式 docs によれば Submit Method は現時点では POST のみ実装されており、将来的に GET 等の他メソッドが追加される予定です。GET ベースのクエリ送信が必要な場合は URL 文字列にクエリパラメータを直接埋め込むか、Web Client DAT を使用してください。

引用元: 公式 docs

レスポンス制御 📥

Include Header in Output .includeheader 📑
– オンにすると HTTP レスポンスヘッダを本文と一緒に DAT テーブルへ出力
– Content-Type / Status / Set-Cookie 等の検査に使用
– デフォルトはオフ (本文のみ取得)

Verify Peer Certificate .verifypeer 🔒
– TLS (transport layer security) によるサーバ証明書検証の有効化
– オンにすると正規証明書が検証された場合のみ通信を許可
– オフにすると自己署名証明書 / 期限切れ証明書のサーバとも通信可能 (社内テスト環境向け、本番では非推奨)

タイムアウト .timeout ⏱️

Timeout .timeout ⏱️
– fetch リクエストのタイムアウト時間 (ミリ秒)
– 0 を指定するとタイムアウトしない (応答が返らない場合は永遠に待機)
– それ以外の値の場合、指定ミリ秒経過後にリクエストを打ち切る

非同期動作設定 .asyncfetch 🔄

Asynchronous Fetch .asyncfetch 🔄
– オンにするとダウンロードがバックグラウンドで進み、メインスレッドを止めない
– 完了通知は DAT Execute DAT の onTableChange 等で受け取って後続処理を起動
– ライブパフォーマンス中の外部リソース取得には必須の設定

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のJSON取得 🌐

Web DAT (URL=REST endpoint, Fetch) → JSON DAT (パース) → Table DAT (表示) → Replicator COMP (UI 生成)

Web DAT の URL に外部 REST API のエンドポイントを指定し、Fetch パルスでレスポンス JSON を取得するシンプルな構成。返ってきた JSON 本文を JSON DAT でパースし、Table DAT 形式に展開して Replicator COMP で動的に UI 要素を組み立てる。アイテム一覧やニュース feed のリアルタイム表示に向く。

  1. Web DAT の URL パラメータに REST エンドポイント (例: https://api.example.com/items) を入力
  2. Fetch をクリックして同期取得 — レスポンス本文が Web DAT 本体のテーブルに格納される
  3. 下流に JSON DAT を接続し、Source Data に Web DAT を指定して構造化テーブルへ展開
  4. Table DAT 経由で Replicator COMP に渡し、行数に応じて UI 要素を生成
  5. 本番運用では Asynchronous Fetch をオンに切替えて描画ループを止めない構成へ移行

Example 2: フォームをPOST送信 📨

Table DAT (name/value pairs) → Web DAT (Submit and Fetch) → Convert DAT (HTML パース) → Text TOP

Table DAT に入力フォームの name/value ペアを記述し、Web DAT の 1 番目の入力につなぐと、Submit and Fetch パルスで POST リクエストを送信できる。サーバから返ってきた HTML レスポンスを Convert DAT で簡易パースし、画面上の Text TOP に整形表示する Webhook 風の構成。

  1. Table DAT に 2 列 (name / value) のテーブルを作成し、送信する各フィールド (例: name=touchdesigner, message=hello) を入力
  2. Table DAT を Web DAT の 1 番目の入力に接続
  3. Web DAT の URL パラメータに POST 先のエンドポイント URL を設定
  4. Submit and Fetch パルスを発火 (Python から op('web1').par.submitfetch.pulse() でも可)
  5. 下流の Convert DAT で HTML 応答を行列形式に変換し、Text TOP の text パラメータに参照式で表示

Example 3: 非同期で裏取得 ⏳

Table DAT (URL) → Web DAT (Asynchronous Fetch=On) → DAT Execute DAT (onTableChange) → FIFO DAT (ログ蓄積)

ライブパフォーマンス中に外部から大きな JSON / HTML をダウンロードする際、Asynchronous Fetch をオンにしてバックグラウンドダウンロードに切替える。完了通知は DAT Execute DAT の onTableChange で受け取り、結果を FIFO DAT に時系列で蓄積していくことで描画ループを止めずに履歴を残せる。

  1. Web DAT の Asynchronous Fetch をオンに切替え
  2. URL を Table DAT 経由でセットし、Timeout を 30000 ms 程度に設定
  3. DAT Execute DAT を配置し、DAT パラメータに Web DAT を指定、Table Change をオンに
  4. onTableChange 関数内で op('fifo1').appendRow([absTime.seconds, dat.text[:120]]) を実行してログ追加
  5. Fetch パルスを発火 — 描画ループはそのまま動き続け、ダウンロード完了次第 FIFO DAT に行が追加される

関連オペレータ 🔗

類似機能OP 🔍

  • Web Client DAT — より新しい HTTP クライアント。ヘッダ指定 / GET / DELETE / PUT 等が可能で複雑な API 通信向け

組み合わせ推奨OP 🔄

  • JSON DAT — レスポンス本文を JSON として構造化パースし、後段で参照可能なテーブルに展開
  • XML DAT — XML / SOAP レスポンスを構造化テーブルにパース
  • Convert DAT — HTML / CSV / 改行区切りテキストを行列形式へ変換
  • Table DAT — Submit and Fetch 用の name/value ペアを 1 番目の入力に供給
  • DAT Execute DAT — Asynchronous Fetch 完了を onTableChange で検知して後続処理を起動
  • Substitute DAT — URL 文字列内の変数置換 / レスポンス本文からの特定パターン抽出に併用

前処理・後処理DAT 🎯

Info DAT情報 📊

Web DAT は Info DAT による詳細情報取得に対応しています (num_rows / num_cols / total_cooks / cook_time / cook_frame / warnings / errors 等の共通 DAT Info チャンネルを参照して取得状況・エラー有無をモニタリング可能)。

DAT 固有情報 📋

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

汎用オペレータ情報 🔄

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

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

よくある問題と解決策 🔧

❌ Problem: ページが取得できない / 404 が返る
✅ Solution:

  • URL パラメータのスペルとプロトコル (http:// / https://) を確認
  • 同じ URL をブラウザで開いて 200 系を返すか目視確認
  • サーバ側でユーザエージェント / リファラ / 認証ヘッダを要求する場合は Web DAT 単体では対応できないため Web Client DAT 経由でヘッダ付きリクエストへ切替

❌ Problem: Fetch するとプロジェクトが固まる
✅ Solution:

  • Asynchronous Fetch をオンに切替え、ダウンロードを描画ループから切り離す
  • Timeout を 0 以外の値 (例: 10000 ms) に設定して無限待機を防止
  • 完了通知は DAT Execute DAT の onTableChange で受信し、後続処理を起動

❌ Problem: HTTPS で証明書エラーが出る
✅ Solution:

  • 正規証明書サーバの場合、URL が正しい host 名で書かれているかを確認 (CN / SAN 不一致のチェック)
  • プロキシ / VPN 環境では OS 側の信頼ルート証明書ストアを最新化
  • 社内テスト環境で自己署名証明書を使う場合に限り、Verify Peer Certificate をオフに切替 (本番では非推奨)

❌ Problem: レスポンス本文が文字化け / 想定外の形式
✅ Solution:

  • Include Header in Output をオンにして Content-Type ヘッダの charset / MIME を確認
  • JSON が返る API は下流に JSON DAT、XML レスポンスは XML DAT を接続して構造化パース
  • HTML レスポンスは Convert DAT や Substitute DAT で必要部分のみを抽出

参考資料 📚

その他 🔗

公式リソース 📖

この記事は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をコピーしました