Movable Type.net フォーム

マニュアル

フォームで収集したデータを自動で Google スプレッドシートに保存する

この機能は、エントリープラン以上で利用可能です。

受付データの保存先として、Webhook を利用することで Google スプレッドシートを設定することができます。
設定、利用方法は以下を参照してください。

Google スプレッドシート側の設定

  1. 新しくスプレッドシートを作成する
  2. スプレッドシートのツールバー「拡張機能」の「App Script」を選択する
  3. エディタ内の初期コードをすべて削除し、以下のサンプルスクリプトを貼り付ける
  4. [無題のプロジェクト] をクリックし、任意の名称を入力してプロジェクト名を変更する
  5. [ドライブにプロジェクトを保存] （フロッピーディスクアイコン）をクリックして、スクリプトを保存する

// プログラムの設定 ------------------------------------------------

// シグネチャ検証用シークレットのキー名（スクリプト プロパティ）
const secretKey = 'SECRET';

// 添付ファイル保存先フォルダ名のキー名（スクリプト プロパティ）
const folderNameKey = 'FOLDER_NAME';

// フォルダ名のデフォルト値（スクリプト プロパティ未設定時に使用）
const defaultFolderName = 'フォーム添付ファイル';


// プログラムの本体 ------------------------------------------------

const scriptProperties = PropertiesService.getScriptProperties();

function doPost(e) {
  try {
    return insertEntry(e);
  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({
      httpStatusCode: 500,
      message: error.message
    }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

function insertEntry(e) {
  // スクリプト プロパティからシークレットの値を取得
  const secret = scriptProperties.getProperty(secretKey);

  if (!secret) {
    throw new Error(`Script property "${secretKey}" is not set.`);
  }

  const sheet = SpreadsheetApp.getActive().getActiveSheet();
  const entryJson = e.parameter.entry;
  const signature = e.parameter.signature;

  // シグネチャの計算
  const byteArray = Utilities.computeHmacSha256Signature(entryJson, secret, Utilities.Charset.UTF_8);

  // 計算結果を16進数の文字列に変換
  const signatureVerify = Array.from(byteArray, function (byte) {
    return ('0' + (byte & 0xFF).toString(16)).slice(-2);
  }).join('');

  // シグネチャの検証（一致しなければエラーを出す）
  if (signature !== signatureVerify) {
    throw new Error(`Invalid Signature`);
  }

  const entry = JSON.parse(entryJson);

  // ヘッダーがなければヘッダーをつくる
  const a1 = sheet.getRange('A1').getValue();
  if (!a1) {
    const headers = ['受付番号', '日付'];
    for (let i = 0; i < entry.columns.length; i++) {
      const column = entry.columns[i];
      if (column.type !== 'note') {
        headers.push(entry.columns[i].label);
      }
    }
    sheet.appendRow(headers);
  }

  // 行を追加する
  const sequenceNumber = entry.sequence_number.toString();
  const rows = [
    sequenceNumber,
    new Date(Date.parse(entry.created_at) + 32400000) // 日本時間で表示
  ];

  let entryFolder;
  for (let i = 0; i < entry.columns.length; i++) {
    const column = entry.columns[i];

    if (column.type === "file" && column.url) {
      entryFolder = entryFolder || createFolder(sequenceNumber);
      try {
        const response = UrlFetchApp.fetch(column.url);
        const fileBlob = response.getBlob();
        const file = entryFolder.createFile(fileBlob);
        rows.push(file.getDownloadUrl());
      } catch (error) {
        rows.push(column.url);
      }
    } else if (column.type !== "note") {
      rows.push(column.value);
    }
  }

  sheet.appendRow(rows);

  return HtmlService.createHtmlOutput("Entry accepted");
}

function createFolder(sequenceNumber) {
  // スクリプト プロパティからフォルダ名を取得（未設定の場合はデフォルト値を使用）
  const folderName = scriptProperties.getProperty(folderNameKey) || defaultFolderName;

  // Google ドライブのフォーム用フォルダを取得
  let folder;

  const folderIterator = DriveApp.getFoldersByName(folderName);
  if (folderIterator.hasNext()) {
    folder = folderIterator.next();
  }

  // Google ドライブにフォルダがない場合は新規作成
  if (!folder) {
    folder = DriveApp.createFolder(folderName);
  }

  // entry 用のフォルダを作成
  let entryFolder;
  const entryFolderIterator = folder.getFoldersByName(sequenceNumber);
  if (entryFolderIterator.hasNext()) {
    entryFolder = entryFolderIterator.next();
  }

  if (!entryFolder) {
    entryFolder = folder.createFolder(sequenceNumber);
  }

  return entryFolder;
}

スクリプト プロパティを追加する

シグネチャ検証用のシークレットと、添付ファイルの保存先フォルダ名を「スクリプト プロパティ」に追加します。
この作業にて環境ごとの設定値をスクリプト プロパティで管理することにより、コードを直接書き換えずに、フォルダやシークレットを変更することができます。

  1. 左側のメニューの [プロジェクトの設定]（歯車アイコン） をクリックする
  2. [スクリプト プロパティを追加] をクリックする
  3. [プロパティ] にキー名、[値] に値を入力する
  4. [スクリプト プロパティを保存] をクリックする

スクリプトをデプロイする

注意：

Google Workspace をご利用の場合、管理者の設定により、デプロイ時に [アクセスできるユーザー] 項目で [全員] が選択できない場合があります。この項目が制限されていると、外部サービスとの連携が正しく機能しないため、事前に組織のポリシーをご確認ください。

スクリプトを「ウェブアプリ」としてデプロイ（公開）します。

なお、初回デプロイ時に「Google hasn't verified this app（Google はこのアプリを検証していません）」という警告画面が表示されることがありますが、これはエラーではありません。自作のプログラムを安全に公開するための Google の標準的な確認画面ですので、手順に沿って承認フローを続行してください。

  1. [デプロイ] - [新しいデプロイ] をクリックする
  2. [種類の選択] の隣の [デプロイタイプを有効にする]（歯車アイコン）- [ウェブアプリ] をクリックします。
  3. [次のユーザーとして実行] 項目で [自分]、[アクセスできるユーザー] 項目で [全員] を選択し、[デプロイ] をクリックする
  4. 「Google hasn't verified this app」画面左下の [Advanced] > [Go to...(unsafe)] をクリックする（※この画面が表示されない場合は、次のステップに進んでください）
  5. スクリプトへのアクセス権付与の同意画面で [Select all] にチェックを入れ、[Continue] をクリックする
  6. [ウェブアプリ] のURLをクリップボードにコピーする

MovableType.net フォーム側の設定

  1. 左サイドバーの [フォーム] - [一覧] をクリックする
  2. 受付データの保存先に Google スプレッドシートを利用したいフォームの名前をクリックする
  3. 「受付データ」項目で [Webhookに保存] を選択する
    「「サービス上に保存」以外を選択すると受付済みのデータも削除されますがよろしいですか？」と表示されるので、必要に応じて対応を行ってから [OK] をクリックしてください。
  4. 「Webhook設定」項目「Payload URL」にウェブアプリの URL を貼り付ける

  5. 「Webhook設定」項目「Secret」に スクリプト プロパティの値を貼り付ける
  6. [保存] ボタンをクリックする
マニュアル 一覧
資料ダウンロード まずは - 無料トライアル
MovableType.net フォーム