【VRChat】プログラミング無しでVRChat内から現実に干渉するギミックを作る

# 概要
IFTTTのWebhookを使うとVRChatから他のアプリへの連携が簡単にできます。
スマホ通知を例として簡単にやり方を解説します。

https://x.com/Iiron_Lung/status/1728044227618111708?s=20


# IFTTTとは 
https://ifttt.com/ 

DiscordやGmail、DropBox等様々なWebサービス同士を連携させることができるサービスです。
その中のWebhookという仕組みを使うことでVRCのワールドからIFTTTの起動を呼び出すことができます。

できることは本当にたくさんあるので調べてみると面白いものが見つかると思います。むしろ多すぎて何をするかのアイディアを出すほうが難しいかも。。
[GoogleHomeでPCをリモート起動する](https://qiita.com/onm/items/6a141cf960a6bee787d6)
[拉致された時のためにLINEのメッセージで「助けて！」をワンタップで送れるウィジェットボタンをIFTTTで作ってみようとした](https://qiita.com/sh-suzuki0301/items/730daec039f3ff7665ff)
[布団から腕すら出さずに会社を休む [Google Home]](https://qiita.com/diescake/items/4f354a5dc7cb738efd4f)


# 作り方
## 1. IFTTTでアプレットを作る
IFTTのアカウントを作ってください。

https://ifttt.com/ 

Createから新しいアプレットを追加します
<img width=85%  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/0d071610-581a-85e4-463b-ba5654bb996a.png">

Thisを選んで
<img width=80%  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/323554cb-a182-f0aa-243f-71819f09adc2.png">

Webhooksを選択
<img width=80%  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/8e58d976-8477-7622-a4cd-c12291a79616.png">

「Receive a web request」を選びます。
<img width=80%  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/fb975662-99d7-260a-5e99-b6386c78cd84.png">

イベント名を付けます。
イベント名はあとでURLになるのでアルファベットでいい感じにしておくといいと思います。
CreateTriggerをクリック。
<img width=85%  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/1494d272-7bf0-440a-6814-fa94bacf9ece.png">

次はThen Thatを作ります。
<img width=85%  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/88889d70-44f0-14a6-2e8c-bd016dbbe7ac.png">

Notificationsを選んで
<img width=85%  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/a6453e25-e9b8-39a4-80bb-9b1bea123643.png">

どれでもいいんですがとりあえずシンプルそうなやつ
<img width=85%  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/dc67d7e1-7297-a34d-cbbd-623316706632.png">

通知内容を決めてCreate actionをクリック
<img width=85%  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/3bef5730-c01c-9e7a-ea41-b2aa74564ef2.png">

アプレットの説明を書いたりして完成です。
<img width=80%  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/2c547a64-c28f-df10-4dc0-99c9606747dd.png">



## 2. 動作確認
スマホに通知が来るので、まずは自分のスマホにIFTTTのアプリをインストールしてください。

起動URLを確認します。
右上のアイコンからMy services
<img width=80%  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/4ba1cd88-6029-fef4-e21b-ebbfad825b1d.png">

Webhooksを選んでSettingsをクリック
<img width=80%  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/db849d91-0de6-9c8d-d162-65d25842244b.png">

URLが表示され、一番後ろの部分が自分のKeyです。
<img width=80%  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/8d315ea5-3ac3-6154-4e16-ee93da080c70.png">

Keyと先ほど設定したイベント名をもとにURLを作ります。{}は要りません。

```
https://maker.ifttt.com/trigger/{イベント名}/with/key/{自分のKey}
```

ブラウザのURLに入力してこのような画面が出たら成功です。
スマホにも通知が出ているはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/3f396585-b6e6-77de-8be2-bda7a57fc8f3.png)

ブラウザの表示が違う場合はURLやアプレットの設定の確認を、表示が同じなのにスマホに通知が来ない場合はスマホの通知設定を確認してみてください。

## 3. VRChatのギミックを作る
StringDownloaderでもVideoPlayerでもPanoramaでもなんでもいいのでさっきのURLにアクセスします。
例としてStringDownloaderを使ったUdonを置いておきます。
5行なのでプログラミング無しの範囲です。

``` C#:Webhook.cs
using UdonSharp;
using UnityEngine;
using VRC.SDKBase;
using VRC.Udon;
using VRC.SDK3.StringLoading;

public class Webhook : UdonSharpBehaviour
{
    [SerializeField] private VRCUrl _url;

    public override void Interact()
    {
        VRCStringDownloader.LoadUrl(_url, this.GetComponent<UdonBehaviour>());
    }

}
```

キューブにくっつけてUrlにさっき作ったものを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495102/c02cab24-c810-9594-c716-2ee2f22c19a5.png)

後はトリガーすればスマホに通知が来るはずです！
IFTTTはVRCのホワイトリストに入っていないので、Allow Untrusted URLsにチェックを入れてください。

# おわり
「Then This」部分を変えることで、ワールドに人が来たらDiscordに通知が入ったり自分の部屋のライトのスイッチをワールドに置いてみたりできます。
少し前ですがこういったユースケースもありました。

https://speakerdeck.com/cleantted/usecase-of-ifttt-for-vrchat 

現実とVRをつなげて面白いものを作ってみてください。