[ビギナー向け]TouchDesignerとYoutubeLiveを連携させてコメント取ってきちゃうよ vol.2

#動画の解説
[vol1](https://qiita.com/miwa_maroon/items/1b93c1b6673db744b546)の続きです
実際にAPIを使ってコメントの取得までやっています
画像クリックで飛べます！
[![thnb_youtube_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/d15efffd-e909-9342-71f7-d0a3148dbcf4.jpeg)](https://youtu.be/7dBzg0OR_r0)


#APIをいじくり倒す
[前回vol.1](https://qiita.com/miwa_maroon/items/1b93c1b6673db744b546)は[google cloud plattform](https://console.cloud.google.com/?hl=ja)でAPIのkeyを取得したりしました
つまらない環境設定みたいな感じで大変申し訳ない

で
す
が

ここからはついに[Youtube Data API](https://developers.google.com/youtube/v3/docs/videos/list?hl=ja)をいじくり倒して
<b>ライブチャット取得</b>まで駆け抜けるぜ!

#今回使うAPIはこいつだあ～！！
1つ目は、
でれでれでん
###[Youtube Data API](https://developers.google.com/youtube/v3/docs?hl=ja)
いえーいっていう効果音入ってます
こいつは、YoutubeのAPIの兄貴分てきな役割で、

- 動画の検索
- サムネイルの編集
- 動画のアップロード

などなど
Youtubeに関する **基本的な操作** ができます

その中でも、今回は、前回作ったパラメーターをもとに[動画のリストを取得する](https://developers.google.com/youtube/v3/docs/videos/list?hl=ja)
`https://www.googleapis.com/youtube/v3/videos`
を使いやす

API keyで僕こういうものなんですけどって自己紹介したのち
Video Idでこの動画の情報欲しいんですけどっていうと

兄貴が任せい！！

という感じで持ってきてくれます

あにきいい！いつもお世話になります。
取ってきた **情報(items)** の中に、
<b>chat id</b> 
たるもんがありますのでこいつが大事になるので
こいつを自分の懐にしまいます。

そして2つ目
###[Youtube LiveStreaming API](https://developers.google.com/youtube/v3/live/docs)
ドドン！っていう効果音入ってます。

こいつは、Youtubeの中でも **Live** を専門に仕切ってる特殊部隊
YoutubeLiveのことは俺に任せろと言わんばかりの機能を持っています

さっき兄貴からもらった
<b> chat id </b>
をAPI keyや
他のパラメーターを一緒に渡すと

- Liveの始まった時間
- LiveChatを送った人のアカウント名
- SuperChat

などなど、 **Liveに関する情報(items)** ならなんでも持ってきます
さすが特殊部隊

今回は、その中でも[LiveChatに関する情報取得する](https://developers.google.com/youtube/v3/live/docs/liveChatMessages/list)
`https://www.googleapis.com/youtube/v3/liveChat/messages`
を使い、LiveChatの内容とアカウント名をとってきます

#非同期処理とは
具体的にどうTouchDesignerで実装すんねん！
っていうところですが、
TextDATに

```python:TextDAT
import requests

url ='https://www.googleapis.com/youtube/v3/videos'

data = requests.get(url)

#この後にdataというlistに入ってるchat idを取り出す処理を書く
```

みたいな処理を書いて、
任意のタイミングでこのScriptをRunさせるみたいなことができる

**んですが！！！**
これだと取得している間、

**TouchDesignerが止まってしまいます！！**

(ちなみに、上のコードを鬼適当なので動きもしないし正しくもありません)

これは不便すぎる！
それを解決してくれるのが

[**Web Client DATです**](https://docs.derivative.ca/Web_Client_DAT)

なにそれ、どこにあるんだよ、使ったことないわ
そんな声が聞こえてきそうですが。。。
DATの中でも圧倒的優秀さを誇り
今回のようなAPIを使ってwebの情報を取ってきたり、逆に渡したりなどする処理をすることができます

**こいつを使えばTouchDesiignerが止まることがありません！！**

え、なんでかって？？

**それはWeb Client DATが非同期処理だからです。**

**来ました！非同期処理！！**

[非同期処理](https://www.rworks.jp/system/system-column/sys-entry/21730/#:~:text=%E9%9D%9E%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86%E3%81%A8%E3%81%AF%E3%80%81%E4%B8%80,%E5%AE%9F%E8%A1%8C%E6%96%B9%E5%BC%8F%E3%82%92%E3%81%84%E3%81%84%E3%81%BE%E3%81%99%E3%80%82)というのは、
あるタスクを実行している最中に、その処理を止めることなく別のタスクを実行できる方式を指します。
API自体が動画を取得している処理の間も、TouchDesigner側の処理を止めなくて済みます！

逆に言うと先ほどのtextDATでRunしていた方は、
**APIの処理が完了するまで、TouchDesignerの処理が止まっていた**

ということですね。はい。。。

#WebClientDATあるある言いたい
ここまでいろいろ説明してきて
ようやくTouchDesignerの画面戻るが、
前回でAPIkeyやidなどをmergeしたDATをWeb Client DATのInputに詰め込むんだけど、
ここで、mergeからノードひぱってきてWeb Client DAT置いて
![putting_webclient.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/ea0ab9c2-4250-b6ff-4a34-90d078e13ce1.jpeg)


よしurlにAPIも入れたぞ
ほれ！GET!
![push_request.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/ede407a9-8094-52ae-2772-7d6a972f52e1.jpeg)


ってやると、
あれ?なんかAPIkeyがダメって言われて取ってこれない、、、
![forbidden.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/6e41ddbf-406d-a38b-f64b-2e0f94828c2b.jpeg)

おい！なんでだよー
ってよくなります。

これ **Inputが上に入ってるから**なんですね。
**下**に入れないとダメみたい。
![Input_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/b489812c-7628-d068-483f-98140c089c2e.jpeg)

お気をつけあそばせ

#GETした後の処理
chad idを取得する`Web Client DAT`には
次ようにchat id を`ほかのtextDAT`に入れる処理を
`WebClientDAT`の **右下の↓** から`TextDAT(callback)`開いて書きます

```python:webclient_callbacks
# me - this DAT.
# webClientDAT - The connected Web Client DAT
# statusCode - The status code of the response, formatted as a dictionary with two key-value pairs: 'code', 'message'.
# headerDict - The header of the response from the server formatted as a dictionary. Only sent once when streaming.
# data - The data of the response

import json

table = op('chatid')
commentOp = op('comment')

table = op('chatid')

def onConnect(webClientDAT):
	return
	
def onDisconnect(webClientDAT):
	return

def onResponse(webClientDAT, statusCode, headerDict, data):
	table.clear()
	commentOp.clear()
	tdata = json.loads(data)
	liveStreamingDetails = tdata['items'][0]['liveStreamingDetails']
	if 'activeLiveChatId' in liveStreamingDetails.keys():
		chat_id = liveStreamingDetails['activeLiveChatId']
		table.appendRow(['liveChatId',chat_id])
	return
```

謎にオペレーター追加されてるけどそれは、 [**動画**](https://youtu.be/7dBzg0OR_r0)見てね
一旦、jsonに変換してそこから検索してtableDATに入れてます

LiveChatのメッセージを取得する処理も2つ目のWebClientDATのcallbackに書いていきます

```python:webclient4_callbacks
# me - this DAT.
# webClientDAT - The connected Web Client DAT
# statusCode - The status code of the response, formatted as a dictionary with two key-value pairs: 'code', 'message'.
# headerDict - The header of the response from the server formatted as a dictionary. Only sent once when streaming.
# data - The data of the response

import json

commentOp = op('comment')

def onConnect(webClientDAT):
	return
	
def onDisconnect(webClientDAT):
	return

def onResponse(webClientDAT, statusCode, headerDict, data):
	tdata = json.loads(data)
	for item in tdata['items']:
		usr = item['authorDetails']['displayName']
		msg = item['snippet']['displayMessage']
		commentOp.appendRow([usr, msg])
	return
```

こちらも同じようにjsonに変換して、他の`TableDAT(commentって名前の)`

`WebClientDAT`にてGETしたあとの処理がこれなわけですね

#コメントゲットだぜ
そんなわけでYoutubeAPIを使ってLiveのコメントを取ってくることができました!
**ここからビジュアルに起こしていきます**
次回vol3で

アデュー



そして、
TouchDesignerでのオンラインイベントの可能性を広げられることができんじゃね？
って思っている方いましたら是非参考にしていただければ