Google FormsとDiscordでApex中毒の弟の勉強を監視する

# はじめに
中2の弟の塾の模擬テストの英語がヤバく、このままだと他のみんなに置いていかれてしまうというくらいになっていました。
僕はあまり勉強をしたり教えたりするのは得意ではないのですが、とりあえず教科書の本文を覚えてればある程度いけるんじゃないかと思い、弟の大好きなApex Legendsをするときは英語の教科書の勉強をしようみたいな軽いルールを決めました。（他にいいやり方があるかもしれないけどとりあえずこれにしようと思いました。）

とはいえApex Legendsの魔力は凄まじく、弟は学校から帰ると吸い取られるように僕の部屋のデスクトップPCに向かって座り、ついApexをスタートしてしまいます。

なので、狭い机に勉強用具を開かなくても弟が英語の勉強をできる & 弟がやったのかを監視できるので、`Google Forms`を使ってDiscordに通知が来るようにしました。

## Formを作成
最初は、formを作成するところからスタートします。
<img width="1384" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/db20cded-a63c-9134-0f01-ee25ce38b726.png">
こういう感じでformを作成しました。教科書本文のまんまです。

<img width="1253" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/591ff5b2-0f64-d929-9145-7747699a313b.png">
回答するとこのようにスコアが表示されます。

とりあえずformはこんな感じでいいと思います。
次はdiscordで色々と設定します。

## Discord側での設定
[Discord](https://discord.com/new)の方の操作に移ります。
まずは、
<img width="234" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/4cc4e527-c44c-589e-f0fc-7e7a996a2969.png">
チャンネルの欄にある歯車を選択し、<img width="1042" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/f4c929f7-8a27-4e9f-6d3f-8eb3da869ef7.png">
`Integrations`を選択します。すると、`Create Webhook`というボタンが表示されるので、ここでWebhookを作っちゃいます。
<img width="730" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/c1f03853-2aa4-b32d-72e1-5a7a3f149551.png">
適当にこんな感じで作ります。

これでDiscord側のWebhookの設定はできたので、次はformsのスクリプトエディタをいじります。

## スクリプトエディタ
<img width="323" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/8016fadf-de71-ebbe-4ec9-ac8bec7b4e60.png">
**縦に３つ並んだ点**のボタンから、`スクリプトエディタ`を選択することができます。

エディタが開いたら、次のプログラムを貼り付けます。

```javascript

var POST_URL = "WebHookのURL";

function onSubmit(e) {
    var form = FormApp.getActiveForm();
    var allResponses = form.getResponses();
    var latestResponse = allResponses[allResponses.length - 1];
    var response = latestResponse.getItemResponses();
    var items = [];

    for (var i = 0; i < response.length; i++) {
        var question = response[i].getItem().getTitle();
        var answer = response[i].getResponse();
        try {
            var parts = answer.match(/[\s\S]{1,1024}/g) || [];
        } catch (e) {
            var parts = answer;
        }

        if (answer == "") {
            continue;
        }
        for (var j = 0; j < parts.length; j++) {
            if (j == 0) {
                items.push({
                    "name": question,
                    "value": parts[j],
                    "inline": false
                });
            } else {
                items.push({
                    "name": question.concat(" (cont.)"),
                    "value": parts[j],
                    "inline": false
                });
            }
        }
    }

    var options = {
        "method": "post",
        "headers": {
            "Content-Type": "application/json",
        },
        "payload": JSON.stringify({
            "content": null, // This is not an empty string
            "embeds": [{
                "title": "TOP TEXT CHANGE THIS IN SCRIPT",
                "fields": items,
                "footer": {
                    "text": "BOTTOM TEXT CHANGE THIS IN SCRIPT"
                }
            }]
        })
    };

    UrlFetchApp.fetch(POST_URL, options);
};
```

そして、コードを保存します。
その次は、トリガーを設定します。

## トリガー
<img width="403" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/2204f0c3-c7ff-a56b-be70-fbd37672cc1b.png">
この時計マークのようなボタンをクリックして、トリガーの設定画面に遷移します。

<img width="1383" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/97265886-780b-80bc-4142-69c6177f7ff6.png">
このような画面です。

<img width="677" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/7512a12d-e3f9-e80b-3e5f-b1c0fad128a1.png">
ここにこのようにトリガーを設定しました。

そして、最後に**送信**ボタンを押して、リンクを取得します。
<img width="1372" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/7601cd00-1ddc-a6bc-4be5-b4ac956fb27e.png">


## 動作確認
回答するとこういう感じで届きました。
<img width="391" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/8023ab0f-a92a-b7e9-d664-c40b5b44c2eb.png">
最初は多少タイムラグが発生したりしていましたが、いじってくうちに勝手に消えました。

# 弟に使ってみた結果

**ダメでした**

PCを起動するとすぐにApexをしてしまいそこからはもう夢中になってしまっています。僕のFormsはあっけなくお蔵入りになってしまいました。恐るべしApex... 僕は下手なので長時間やれないんですが、相当惹きつけられるもののようです。
しかし、今回のformsテストはそこまで悪いアイデアではなかったと思うので、改良していつか弟を英語漬けにしてやろうと目論んでいます。

参考リンク
> https://qrunch.net/@RabbitFromHat/entries/DLoihiUeHrq8efTb?ref=qrunch