【SPIRAL×スプレッドシート】Apps Scriptを用いたスプレッドシートとの簡単連携

学生インターンシップです！スパイラル株式会社の学生インターンとして、SPIRALを学習しながらユーザー目線で質問に答える活動をしています。補足情報や調査結果の提供を行い、皆様のお役立てができればと思っています！
※学生が学びの一環として調査・まとめた内容です。
　正確な仕様や最新情報は、公式リファレンスをご確認ください。

はじめに

googleアカウントを持っていれば、その他アプリなどのインストール不要！
誰でも簡単に出来るSPRAIL ver.2とgoogleスプレッドシートの連携方法について紹介します。
所要時間は30分ほどで連携できるので、ぜひお試しください！

事前準備

連携を始める前に、googleアカウントの登録が必要です。

SPIRALの設定　-DBとフォームの作成-

SPIRAL WebToolsを使用します。
事前にgoogleスプレッドシートに反映させたい情報を格納するDBと登録のためのフォームを作成します。

1. 右上の歯車から「アプリ管理」をクリックします。
2.「アプリ管理」の「＋」ボタンからアプリを作成します。
3. 作成したアプリにDBを作成します。
　今回はカフェの顧客アンケートを例に下記4つの項目を作成します

表示名	識別名	タイプ
来店日	visit_day	日時
都道府県	prefectures	テキスト
年齢	age	セレクト
性別	gender	セレクト

4. 右上の歯車から「サイト管理」をクリックします。
5.「サイト管理」の「＋」ボタンからサイトを作成します。
6.「ページ」の「＋」ボタンからページを作成します。
7. 作成したページの「ブロック設定」から登録フォームを作成します。
　選択するアプリとDBには先ほど作成したものを選択してください。
　続くフィールド選択では、先ほど作成した4つのフィールドを「使用」へ追加し、作成をクリックします。

これでDBからフォーム作成まで完成しました。

SPIRALの設定　-トリガ設定-

次にフォームからDBに登録された情報をgoogleスプレッドシートに渡すためのトリガ設定を行います。

1. 作成したDBからトリガ設定をクリックします。
2. 非同期アクション設定の「＋」をクリックし、PHP実行をクリックし作成します。
3. 下記コードを参考にPHPに張り付け、必要であれば識別名などをご自身の設定値に変更し保存します。

<?php
// 予約データの取得（$SPIRALから必要な情報を取得）
$record = $SPIRAL->getRecord();

$reservationData = array(
    'form_visit'      => $record["item"]["visit_day"],
    'form_pre'    => $record["item"]["prefectures"],
    'form_age'    => $record["item"]["age"],
    'form_gender' => $record["item"]["gender"], 
);

// Apps scriptに送信するための URL
$google_webhook_url = '（Apps scriptで取得したものに置き換えてください）';

// cURLを使用してにデータを送信
$ch = curl_init($google_webhook_url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($reservationData));
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// 送信実行
$response = curl_exec($ch);
curl_close($ch);
?>

4. トリガの作成が完了したら、アクションの「有効化」をクリックし、実行可能にしておきます。
　これでトリガ設定が完成し、SPIRAL側の設定が完了しました。

googleスプレッドシートの設定

googleスプレッドシート内のApps Scriptを使用して、SPIRALとgoogleスプレッドシートを連携します。

1. ご自身のgoogleアカウントのからgooleスプレッドシートを開き、新しいシートを作成します。
2. 作成したシート内から、拡張機能をクリックし、さらにApps Scriptをクリックします。
3. Apps Script内のスクリプトを用いて、SPIRALから取得した情報をスプレッドシート内に入力します。
　下記コードを参考にスクリプトに張り付け、必要であれば識別名などをご自身の設定値に変更し、
　デプロイをクリックします。
デプロイ時に作成されるウェブアプリURLをSPIRALのPHPに張り付けてください。

function doPost(e) {
  const contents = e.postData.contents;
  const json = JSON.parse(contents);
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

  let rawDate = json.form_visit;  
  let datePart = ""; // 日付用
  let timePart = ""; // 時刻用

  if (rawDate) {
    try {
      // T や Z を整理
      let cleanDate = rawDate.replace("T", " ").replace("Z", "");
      let dateObj = new Date(cleanDate);

      // 日本時間(JST)でそれぞれ抽出
      datePart = Utilities.formatDate(dateObj, "JST", "yyyy/MM/dd"); 
      timePart = Utilities.formatDate(dateObj, "JST", "HH:mm");   
    } catch(e) {
      datePart = rawDate;       timePart = "エラー";
    }
  }

  let pref = json.form_pre;   

  let ageRaw = json.form_age;
  let ageLabel = "";
  switch (String(ageRaw)) {
    case "1": ageLabel = "10代"; break;
    case "2": ageLabel = "20代"; break;
    case "3": ageLabel = "30代"; break;
    case "4": ageLabel = "40代"; break;
    case "5": ageLabel = "50代"; break;
    case "6": ageLabel = "60代"; break;
  }

  let genRaw = json.form_gender;
  let genLabel = "";
  switch (String(genRaw)) {
    case "1": genLabel = "男性"; break;
    case "2": genLabel = "女性"; break;
  }

  // シートへの書き込み
  sheet.appendRow([
    new Date(),
    datePart,
    timePart,  
    pref,  
    ageLabel,    
    genLabel   
  ]);

  return ContentService.createTextOutput("Success");
}

上記コード内では、スプレッドシートの書き込みにあたり、日付と時刻を別々のセルへ分けるための処理や、セレクトで選択されたIDから項目名を得るための処理を加えています。

これでスプレッドシート側の設定が完了しました。

動作確認

SPIRALで作成したカフェのアンケートフォームに以下の内容を含めた10件を送信しました。


来店日：2024/3/1 10:30
お住いの都道府県：東京都
年齢：20代
性別：女性

フォーム送信後、自動的にgoogleスプレッドシートにフォーム内容が反映されています。

まとめ

今回は、SPIRALとgoogleスプレッドシートを簡単に連携する方法をご紹介しました。
googleスプレッドシートとの連携で可能になる、その他のgoogleサービスとの連携も今後調査していきます！
googleアカウント以外不要の簡単な連携方法ですので、ぜひお試しください！

開発情報・ナレッジ

はじめに

事前準備

SPIRALの設定 -DBとフォームの作成-

SPIRALの設定 -トリガ設定-

googleスプレッドシートの設定

動作確認

まとめ

関連記事

SPIRALの設定　-DBとフォームの作成-

SPIRALの設定　-トリガ設定-