Movable Type.net フォーム

マニュアル

受付データの保存先に Google スプレッドシートを利用する方法

この機能は、スタンダードプラン以上で利用可能です。

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

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

  1. 新しくスプレッドシートを作成する
  2. スプレッドシートのツールバー「拡張機能」の「App Script」を選択する
    「App Script」のページが開きます。

  3. 左側で「コード.gs」が選択されていることを確認し、以下のスクリプトを貼り付ける
    ※ スクリプト貼り付けの際、「App Script」のページに初期値で入力されている記述は削除してください。
    4. function doPost(e) {
  var sheet = SpreadsheetApp.getActive().getActiveSheet();
  var entryJson = e.parameter.entry;
  var signature = e.parameter.signature;
  
  // シグニチャの検証
  var secret = "secret" // Webhook設定の「secret」に入力した値に変更する。
  var byteArray = Utilities.computeHmacSha256Signature(entryJson, secret, Utilities.Charset.UTF_8);

  // シグニチャは１６進数で送られてくるのでbyte arrayを16進数の値に変換する。
  var signatureVerify = Array.from(byteArray, function(byte) {
    return ('0' + (byte & 0xFF).toString(16)).slice(-2);
  }).join('');
  
  if (signature !== signatureVerify) {
    throw new Error("Invalid Signature");
  }

  // Google Drive のフォーム用のフォルダを取得
  var folder;
  var folderName = 'Webhook Form';
  var folderIterator = DriveApp.getFoldersByName(folderName);
  if (folderIterator.hasNext()) {
    folder = folderIterator.next();
  }
  
  // Google Drive にフォルダが見つからなかったらフォルダを作成
  if (!folder) {
    folder = DriveApp.createFolder(folderName);
  }
  
  var entry = JSON.parse(entryJson);
  
  // ヘッダーがなければヘッダーをつくる
  var a1 = sheet.getRange('A1').getValue();
  if (!a1) { 
    var headers = ['受付番号', '日付'];
    for (var i=0; i<entry.columns.length; i++) {
      headers.push(entry.columns[i].label);
    }
    sheet.appendRow(headers);
  }
  
  // 行を追加する
  var sequenceNumber = entry.sequence_number.toString();
  var rows = [
    sequenceNumber, 
    new Date(Date.parse(entry.created_at) + 32400000) // 日本時間で表示する
  ];

  // entry用のフォルダを作成
  var entryFolder;
  var entryFolderIterator = folder.getFoldersByName(sequenceNumber);
  if (entryFolderIterator.hasNext()) {
    entryFolder = entryFolderIterator.next();
  }
  
  if (!entryFolder) {
    entryFolder = folder.createFolder(sequenceNumber);
  }
  
  for (var i=0; i<entry.columns.length; i++) {
    var column = entry.columns[i];
    
    if (column.type === "file" && column.url) {
      try {
        var response = UrlFetchApp.fetch(column.url);
        var fileBlob = response.getBlob();
        var file = entryFolder.createFile(fileBlob);
        rows.push(file.getDownloadUrl());
      } catch (error) {
        rows.push(column.url);
      }
    } else {
      rows.push(column.value);      
    } 
  }
    
  sheet.appendRow(rows);
   
  return HtmlService.createHtmlOutput("Entry accepted");
}
  4. 貼り付けたスクリプト内の「// シグニチャの検証」箇所にある「secret」を任意の文字列に変更する
    変更した値は以下「MovableType.net フォーム側の設定」にて利用します。
  5. 「App Script」ページの右上「デプロイ」の「新しいデプロイ」をクリックする

  6. 「種類の選択」右の歯車「ウェブアプリ」をクリックする
    ※ 他の項目はクリックしないでください。貼り付けたスクリプトが対応していないため、エラーとなる場合があります。
  7. 「説明」項目に任意の説明を入力する（未記入でも問題ありません）
    「ウェブアプリ」にGoogleアカウントを入力する
    「アクセスできるユーザー」で全員を選択する
  8. 「デプロイ」ボタンをクリックする

  9. 「新しいデプロイ　このウェブ アプリケーションを使用するには、データへのアクセスを許可する必要があります。」というメッセージが表示されたら「アクセスを承認」ボタンをクリックする
  10. Googleアカウントを選択する
  11. 「Google はこのアプリを検証していません」で「高度な」をクリックする
  12. 「受付データのスクリプトに移動します (安全ではありません)」をクリックする
  13. 権限を確認する画面が表示されるので「許可する」をクリックする
  14. 表示される「ウェブアプリURL」をコピーする
    以下「MovableType.net フォーム側の設定」にて利用します。

MovableType.net フォーム側の設定

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

  5. 「Webhook設定」項目「Secret」に Google スプレッドシート側の設定 手順 4 で設定した任意の文字列を入力する
    この部分にスクリプトと同じ文字列を入力していないと、フォームの受付データが Google スプレッドシートに正しく保存されません。
  6. [保存] ボタンをクリックする
マニュアル 一覧
資料ダウンロード まずは - 無料トライアル
MovableType.net フォーム