どんなことができる？

STUDIO で作ったサイトのフォーム結果データを外部 API で受け取って簡単な処理をしたい場合、外部連携機能を使えば実現することができます！この記事ではサンプルとして、スプレッドシートを介した Slack との連携方法をご紹介します。

※ こちらのヘルプの内容は Googe Apps Script の知識がある方向けの応用的な内容となっており、Google Apps Script に関する不明点等を STUDIOで個別にサポートすることはできかねますのでご了承ください！ Google Apps Script を使わずに GUI ベースで設定が可能な Zapier との連携方法もご紹介しているのでそちらも参考にしてください！

事前準備

STUDIO上でフォームの作成

こちらのヘルプを参考にフォームを作成してください。
このヘルプでは下記項目を持つフォームを対象に設定を行います。

Slack の Incoming Webhook の作成

Slackの公式ドキュメントを参考に Incoming Webhook URL を取得してください。

Spreadsheet の設定

STUDIOのフォーム結果をスプレッドシートと連携します。

こちらの解説を参考に、目的のフォームの設定メニューより連携を行ってください。

Google Apps Script の設定

スクリプトの作成

連携した Spreadsheet を開き、「ツール」→「スクリプトエディター」からスクリプトの作成画面へ遷移してください。

スクリプト作成画面へ遷移したら、エディター部分に実際のコードを記述していきます。Google Apps Script から外部 API の呼び出しは、UrlFetchApp.fetch というメソッドを利用すると可能です。以下は、Slack の webhook API へ JSON をリクエストのペイロードとして送る場合のサンプルコードです。


function sendToSlackSample(e) {
　　　// 行の追加イベントのみを対象とする
　　　if (e.changeType != "INSERT_ROW") {
　　　　　　　return;
　　　}
　
　　　　//有効なGooglesプレッドシートを開く
    const sheet = SpreadsheetApp.getActiveSheet();

　　　　//　新規追加された行番号を取得
    const lastRow = sheet.getLastRow();
    // メッセージ内容を作成
    const text = "Name:: " + sheet.getRange(lastRow,1).getValue() + "\n"
        + "Email:: " + sheet.getRange(lastRow,2).getValue() + "\n"
        + "Message:: " + sheet.getRange(lastRow,3).getValue();

    // Slack API へ送るパラメータの設定
    const data = {
         'channel': '<slack channel name>',
         'icon_url': '<slack icon path>',
         'text': text,
         'link_names': 1,
         'username': '<slack user name>'
    };
    const options = {
        'method': 'post',
        'contentType': 'application/json',
        'payload': JSON.stringify(data)
    };
　　　// Slack API の呼び出し
    const response = UrlFetchApp.fetch('<slack webhook api endpoint>', options);
}