知識と技術を増やすが吉

Googleフォームの回答をチャットワークに通知しよう！

Google Apps Script

みなさん、こんにちは！
現役エンジニアの”ます”です。

今回はGoogleフォームで送信された回答をチャットワークへ送信するプログラムを組んでいきます。
Google Apps ScriptとChatwork APIを活用したプログラムの開発です。

Googleフォームって便利ですよね！しかし、回答を通知するにもメールになりますし、その回答内容をメールでは見ることができません。
決まったチャットグループにGoogleフォームの回答内容が送信されたらいいなぁと思ったことはありませんか？

今日はそんなかゆいところに手が届くプログラムの開発の仕方を紹介していきます。
また、途中でGoogleフォームの送信項目が変わっても対応できるようなプログラムにしていきます。

目次

スプレッドシートを作成する

まずはスプレッドシートを作成していきます。
Googleドライブを開き、新規のスプレッドシートを作るだけでOKです。タイトル名を変更してください。

※Googleフォームにコンテナバインド型でスクリプトを作成することもできますが、スプレッドシートの方が柔軟性が高くなります。

Googleドライブからスプレッドシートやスクリプトを導入する方法はこちらで説明しています。
詳しく知りたい方はこちらをご参照ください。

Google Apps Scriptの導入方法

スプレッドシートに紐づいたGoogleフォームを作成する

スプレッドシート上部の「ツール」というタブから「新しいフォームを作成」をクリックしてください。

すると、このスプレッドシートに紐づいたGoogleフォームが作成されます。
作成されたGoogleフォームに質問項目を記入していきます。

Googleフォームの細かい作り方に関しては今回は割愛します。

Googleフォームの編集が終わったらスプレッドシートを開いてください。
「フォームの回答 1」というシートが作成されているかと思います。

そうしたら次にスクリプトを作成していきます。

Google Apps Scriptの導入

スプレッドシートの「拡張機能」タブから「Apps Script」をクリックしてスプレッドシートに紐付けたプロジェクトを作成します。
プロジェクト名を変更しておきましょう。

プログラムを必要な処理の順番に記入していく

さて、ここからのプログラムはどのような処理が必要なのか丁寧に考えていく方がスムーズに開発できます。

フォームの質問と回答のオブジェクトを取得

フォームが送信されると動く関数を作成していきます。
引数に「e」としていますが、フォームの送信情報を受け取るイベントの略でよく「e」が用いられるためそのように名付けています。

function runForm(e) {
  const NAMED_VALUES = e.namedValues;
}

この「e」で受け取るイベントオブジェクトには「namedValues」というGoogleフォームで送信された質問と回答がkeyとvalueでセットになっている連想配列があります。
namedValuesではそのオブジェクトを定数に格納しています。

namedValuesはフォームの質問の順番がランダムに取得されてしまうため注意が必要です。
forEach文などでループして取り出すと順番がバラバラになります。

ヘッダーを取得

次に、Googleフォームの質問内容が記載されているヘッダーの情報をスプレッドシートから取得していきます。
こちらを行うことでGoogleフォームの質問内容が変更になった際もスプレッドシートが自動で変更してくれるため、
プログラムを変更する必要がなくなります。

また、後ほど設定するメッセージの順番を変更したい場合はこのスプレッドシートの列順を変更してあげるとそのようにメッセージも形成されます。

※runForm関数の中に追記してください。

// ヘッダーを取得
const HEADER = 
  // スプレッドシートを取得
  SpreadsheetApp.getActiveSpreadsheet()
  // スプレッドシートからフォームのシートを取得
  .getSheetByName("フォームの回答 1")
  // 1行目を範囲選択
  .getRange("A1:1")
  // 選択範囲のデータを2次元配列で取得
  .getValues()
  // 1行が対象のため、2次元配列を1次元配列へ変換
  .flat()
  // 空白列は削除
  .filter(col => col != "");

一度に複数のメソッドをチェーンしておりますが、1行ずつ説明を記載しています。
スプレッドシートから対象のシートを取得し、1行目のヘッダーの値を取得した上で扱いやすいように変換しています。

チャットワーク送信に必要なデータを揃える

チャットワークAPIを使用してメッセージを送信するため、
チャットワークAPIのTOKENと送信先のルームID、送信内容のメッセージが必要になります。

今回はダミーのデータを入れていますが、こちらはみなさんでご調整ください。

チャットワークAPIの利用方法はこちらで解説しておりますので、よろしければご参照ください。

 

Chatwork APIの利用申請方法

// チャットワークTOKEN(ダミーのトークンを記入しています。)
const TOKEN = '524a8642b673f6448d2d47333b0d2c0f';
// 送信先チャットワークルームID
let room_id = '264557229';
// チャットワーク送信用のメッセージを作成
let message = createMessage(HEADER, NAMED_VALUES);

messageを作り出しているcreateMessage()はオリジナルの関数です。

Googleフォームの内容が質問、回答と見やすいようにメッセージを生成します。
※runForm()関数の外側に書いてください。

function runForm() {
  // 中略
}

/**
* フォームの送信内容を順番に取得
*/
function createMessage(header, namedValues) {
  let message = "Googleフォームの送信を確認しました。";

  // 質問項目を順番に取り出し
  header.forEach(question => {
    let answer = namedValues[question];
    // 質問内容
    message += "\n" + "■" + question;
    // 質問に対する回答内容
    message += "\n" + answer;
    // 「\n」は改行で見やすくしています。
    message += "\n";
  });

 return message;
}

引数でヘッダー（質問内容一覧）情報を渡しているため、質問内容を順番に抽出するforEach文を活用しています。

取り出した値を「question」で受け取っており、namedValuesオブジェクトから「question」のキーを取得すると回答の値を得ることができます。

それらを結合し、改行を加えているのがこの関数の役割となります。

チャットワークにメッセージを送信

sendMessage()関数を実行します。

sendMessage()関数も自作の関数です。
チャットワークトークンと送信先のルームID、送信内容を引数に設定しています。

※runForm()関数内の最後に記入してください。

sendMessage(TOKEN, room_id, message);

sendMessage()関数ではチャットワークAPIを活用し、外部との通信を行っています。
UrlFetchAppというGoogle Apps Scriptの機能でチャットワークに送信を依頼しています。

当ブログの他の記事ではGoogle Apps Scriptのライブラリ「Chatwork Client」を活用している記事もございますが、
今回は自分の手でAPIを叩くための設定を行っています。

※下記sendMessage()関数の宣言はrun()関数の{}の外に記入するようにしてください。

function runForm() {
  // 中略
}

/**
* チャットワークへメッセージを送信する
* https://developer.chatwork.com/reference/post-rooms-room_id-messages
* TOKEN : チャットワークAPIトークン
* room_id : 送信先ID
* message : 送信内容
*/
function sendMessage(TOKEN, room_id, message) {
  const options = {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded',
      'X-ChatWorkToken': TOKEN
    },
    payload: {
      'body': message
    }
  };

  UrlFetchApp.fetch('https://api.chatwork.com/v2/rooms/' + room_id + '/messages', options);
}

実はこの関数、この記事でも同じように活用しているため、応用を目指したい方はこちらもご参照ください。

チャットワークの自動予約送信機能をGASで作ろう

簡単にコードを分けて説明してきましたが、いちどまとめたものを参照ください。

コードまとめ

/**
 * フォームが送信されると動く関数
 * e : フォームの送信情報を受け取ります。
 */
function runForm(e) {
  // フォームの質問と回答のオブジェクトを取得
  const NAMED_VALUES = e.namedValues;
  /**
   * namedValuesはフォームの質問の順番がランダムに取得されてしまうため注意
   * for文などでループして取り出すと順番がバラバラになります。
   */

  // ヘッダーを取得
  const HEADER = 
    // スプレッドシートを取得
    SpreadsheetApp.getActiveSpreadsheet()
    // スプレッドシートからフォームのシートを取得
    .getSheetByName("フォームの回答 1")
    // 1行目を範囲選択
    .getRange("A1:1")
    // 選択範囲のデータを2次元配列で取得
    .getValues()
    // 1行が対象のため、2次元配列を1次元配列へ変換
    .flat()
    // 空白列は削除
    .filter(col => col != "");


  // チャットワークTOKEN(ダミーのトークンを記入しています。)
  const TOKEN = '524a8642b673f6448d2d47333b0d2c0f';
  // 送信先チャットワークルームID
  let room_id = '264557229';
  // チャットワーク送信用のメッセージを作成
  let message = createMessage(HEADER, NAMED_VALUES);

  sendMessage(TOKEN, room_id, message);

}

/**
 * フォームの送信内容を順番に取得
 */
function createMessage(header, namedValues) {
  let message = "Googleフォームの送信を確認しました。";

  // 質問項目を順番に取り出し
  header.forEach(question => {
    let answer = namedValues[question];
    // 質問内容
    message += "\n" + "■" + question;
    // 質問に対する回答内容
    message += "\n" + answer;
    // 「\n」は改行で見やすくしています。
    message += "\n";
  });

  return message;
}

/**
* チャットワークへメッセージを送信する
* https://developer.chatwork.com/reference/post-rooms-room_id-messages
* TOKEN : チャットワークAPIトークン
* room_id : 送信先ID
* message : 送信内容
*/
function sendMessage(TOKEN, room_id, message) {
  const options = {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded',
      'X-ChatWorkToken': TOKEN
    },
    payload: {
      'body': message
    }
  };

  UrlFetchApp.fetch('https://api.chatwork.com/v2/rooms/' + room_id + '/messages', options);
}

以上がコードの全容となります。
1つ1つ見ていくと簡単に思えませんか？

しかし、これだけではまだ自動で実行されません。
最後に自動実行のための設定も行っていきましょう。

Googleフォーム送信時に起動するトリガーをセットする

Google Apps Scriptのプロジェクトに戻り、左サイドバーをご覧ください。

「トリガー」というのがあります。
こちらは手動でボタンや関数の実行を命令せずとも何らかのイベントをもとに自動で関数を実行してくれる設定になります。

今回は毎分、「時間」をベースに自動実行の設定にします。

トリガーを開く

トリガーを追加

画面右下に「トリガーを追加」というボタンがあるため、そちらをクリック。

トリガーの詳細設定

トリガーの詳細設定をします。
今回は毎分チェックをしたいのでこのように設定してください。

実行する関数：runForm

実行するデプロイを選択：Head

イベントのソースを選択：スプレッドシートから

イベントの種類を選択：フォーム送信時

保存をクリック

※保存する際に認証が求められることがあります。その場合はこちらをご参照ください。

Google Apps Script初回実行時の承認方法

Googleフォームを入力して試してみる

実際に入力してコードが正しく処理されるか確かめていきましょう。

Googleフォームに入力して送信

チャットワークの指定のルームを確認

Googleフォーム、スプレッドシートと同じ内容になっているか確認

うまく動いてますね！

今回は簡易的に作成しましたが、Googleフォームを活用した月報や週報のサービスも対応しております。
社内のエンゲージメントを測るための規模の大きいカスタマイズも可能です。

その他、予約システムなどGoogleフォームを活用してやってみたいことがありましたらお気軽にご相談ください。
何ができて何ができないのかもお教えすることが可能です。

問い合わせはこちらにてお願い致します。

お問い合わせ

まとめ

最後までお読みいただきありがとうございます。

Google Apps Scriptと外部APIの連携は柔軟性も高く、導入コストも安いため、かなり有効活用しております。
今回はGoogleフォームとチャットワークを活用する私の本業でも大活躍のシステムを紹介いたしました。

この通知昨日の開発1つで作業が大幅に改善され、多くの人のコスト減を実現しています。
今回のGoogleフォームとチャットワークの連携では売上に貢献できるシステムへ応用も効きそうですね！

実際にゼロから簡易的なものを作ってみましたが、30分以内で完了しました。

本ブログではこれまでもこれからもGoogle Apps Scriptを紹介していきますので、
ぜひまたご覧になってくださいましたら幸いです。

Google Workspaceを活用している場合はGoogle Apps Scriptを覚えると業務の効率化および自動化ができます。
Google Apps Scriptが学べるスクールはコチラで紹介しています。よかったら見てみてください。

Google Apps Scriptを学べるスクール3選

Google Apps Scriptが学べたらコチラの記事で収益化してみてはいかがでしょうか？

Google Apps Scriptのプロが教える！成功するGAS副業完全ガイド

また次の記事でお会いしましょう！

最新情報をチェックしよう！

Google Apps Scriptの最新記事8件