VRChatの中からTwitterとDiscordに メッセージを送れるようにした話 (IFTTT×VRC_Panorama)/Usecase of IFTTT for VRChat

Transcript

1. VRChatの中からTwitterとDiscordに メッセージを送れるようにした話 (IFTTT×VRC_Panorama) テッド (cleantted) VRCLT #5
2. 自己紹介 ・cleantted (テッド) ・メガネの色が最新のcommit hash値な 　ニコアバターの人 ・「テッドの部屋」を毎週月曜日に開催 ・趣味： 　VRC 　音ゲー(DDR etc.) 　競技プログラミング ・twitter: @cleantted_s ・Discord: 妹尾/テッド#3519
3. 「テッドの部屋」 is 何？（宣伝） • フレンド限定向けで開催している「1対1でお話しましょう」という会 • 作業部屋代わりの雑談から相談まで、基本何でもあり • 毎週月曜日の22:00-25:00で開室 • 入室者はReq Inviteで管理 • 一人最低30分は確保 • 予約も可能 • TwitterとDiscordに 開室通知・次に何時に空くか・開催日の予告 を知らせている ↓アバターのサムネがこの時は開室中 「徹〇の部屋」 ではないです　
4. やり始めた当初… 全手動 ・文言はその都度入力 ・HMDをいちいち外す必要あり ・人がきてから書くので、 　「ちょっと待ってね！」 　になってしまう ・たまに忘れる ・SteamDesktopなんか使えない 　つらみしかない…
5. 日頃のつらみは 技術で解決しよう！！
6. 本日の主役 IFTTT
7. IFTTT（イフト）とは きっかけ (Trigger) 何か動作 (Action) があったら、 もし するアプリ https://ifttt.com/ を作成できる
8. IFTTT（イフト）とは Gメールが来たら twitterに投稿する twitterに投稿が あったら スプレッドシート に書き込む
9. やりたいこと • VRChatの中からHMDを外さずに、DiscordとTwitterに ・「テッドの部屋」が開いたこと ・だれかが入室して、次に空く時間 を知らせたい！ • 次の開催日を通知したい！ • ついでに、今日開室があることも知らせたい！ • 予約するフォームを作りたい！ ついでに開室日に予約があるかも知らせたい！
10. VRChat VRC_Panorama Webhooks IFTTT 開室 入室 閉室 予約 告知 Twitter Discord Google Drive スプレッドシート GAS 今回やることイメージ 今回話す部分 変更を検知 投稿 Webhooks
11. 成果物 VRC上 開室 入室 閉室
12. IFTTTの設定 • 時間の都合で割愛 • IFTTTの設定方法（参考） ：https://qiita.com/sikkim/items/60eac02554b37b14e5a6 • LT終了後に追加します _(:3」∠)_
13. VRChat uGUI Object VRC_Parnorama 1. （何もなし） 2. IFTTTのWebhooksのURL VRC_Panorama.NextPano IFTTT 注意点： ・VRC_Panoramaに設定したURLは、Activeになっていると人数分叩かれる 　対策：VRC_Panoramaの付いたObjectを非表示 　→Localで一人だけ表示 　→VRC_Panorama.NextPanoで操作。Localで表示した一人だけが URLが読まれるように switch SetGameObjectActive: True (Local) VRChatの設定 ① ②
14. やってみた感想 • VRCの中から投稿できるの快適 • IFTTT他にも色々できそう • uGUIとVRC_Panoramaがなんとなくわかった • IFTTT、IFTTT Platformの違いがわかりにくい • JavaScriptわからん（ほんとは終了時刻を出したかった） • 準備してるとき、作ったApplicationが開けなくなってた　ﾅﾝﾃﾞ!!
15. 日頃のつらみは 技術で解決しよう！！ もっといい方法あったら教えてください、お願いします _(:3」∠)_
16. IFTTTの設定（参考） • 簡単な方： ◦ 設定箇所がシンプル ◦ Thatに設定できるものは1つだけ ◦ なので、TwitterとDiscordと同時に投稿するにはこっちだと出来ない • 詳細に出来る方（IFTTT Platform）： ◦ Thatに複数設定できる ◦ Filter（JavaScript）で出力を加工できたりする ◦ 今回はこっちを使った IFTTTの設定方法（参考）： https://qiita.com/sikkim/items/60eac02554b37b14e5a6
17. IFTTTの設定（参考） 1. 「Personal Applets」を選択する 2. 「New Applet」を選択 3. 「Trigger」「Action」を設定する 注意：最初に使う場合は別の設定が必要かもしれないです！ Trigger Action
18. IFTTTの設定（参考） 1. 「Personal Applets」を選択する 2. 「New Applet」を選択 3. 「Trigger」「Action」を設定する a. 「Webhooks」を入力→選択 b. 「Receive a web request」を選択 c. “Event Name”の「Default value」を 設定する a. b. c. TriggerになるURL： https://maker.ifttt.com/trigger/[設定した値]/with/key/[ユーザー固有のID]
19. IFTTTの設定（参考） • Twitterの設定 a. 「Twitter」を入力→選択 b. 「Post a tweet」を選択 c. “Tweet text”の「Value」にツイート する内容を記入 a. b. c.
20. IFTTTの設定（参考） • Discordについて a. 「Add action」押す b. 「Wrbhooks」と入力→選択 c. “URL”にDiscordのWebhooksの URLを入力 d. “Method”に「POST」を選択 e. “Content Type”に 「application/json」を選択 f. “Body” に投稿内容を記入（json形式） i. 例：{“content”: “test”} a. b. c. d. e. f. DiscordのWebFookの使い方（参考）： https://qiita.com/Eai/items/1165d08dce9f183eac74