Google フォームと kintone を連携してみよう!

著者名:Mamoru Fujinoki( Fuji Business International (External link)

目次

はじめに

アンケートやイベントの出欠など Google フォーム (External link) を使うと容易に作成、送信ができます。
今回は、 Google Apps Script (External link) を使って、その回答をすばやく kintone に登録してみたいと思います。

事前に必要なもの

開発の流れ

  • Google フォームの作成
  • kintone アプリの作成
  • Google Apps Script によるプログラムの作成

以上の手順で開発していきます。

Google フォームの作成

Step 1

Google アカウントにログイン後、右トップメニューの Google アプリアイコンより、Google フォームを選択し(または、 https://docs.google.com/forms/ (External link) から直接ログイン)、「新しいフォームを作成」の「+」サインをクリックします。

Step 2

Google フォームの作成画面が表示されるので、フォームのタイトル、フォームの詳細を以下の例のように入力します。

  • [フォーム名]
    • kintone Connect-to-Play LA Vol.1 −Cybozu サイボウズ−
  • [フォームの説明・詳細等]
    • Date: 7/13/2017, 6:30 PM - 9:00 PM
    • Event Address: 21515 Hawthorne Boulevard, Torrance, CA, 90503, US

Step 3

設定アイコンをクリックして、「メールアドレスを収集する」をチェックし、変更を保存します。

Step 4

次に「無題の質問」について、メニューより質問のタイプとして「ラジオボタン」を選択し、質問欄に質問を入力、回答の選択肢を以下のように入力します。
記号「?」は半角で入力してください。

  • [質問]参加しますか?
  • [解答例]
    • はい、参加します。
    • いいえ、参加できません。

回答を必須にしたい場合、以下のように「必須」を選択します。

Step 5

以下の画像を参考に質問を追加します。

  • [タイプ]記述式、[質問]参加人数、[必須選択]
  • [タイプ]段落、[質問]参加者の名前を記入してください。

以上で Google フォームの完成です。

kintone アプリの作成

Step 1

kintone のアプリ作成画面より、「はじめから作成」を選択し、以下の画像を参考にフィールドを追加します。

フィールドの種類 フィールド名 フィールドコード
リンク(入力値の種類:メールアドレス) メールアドレス Email
ラジオボタン 参加しますか? attend
数値 参加人数 number_of_attendee
文字列(複数行) 参加者名 name_of_attendee

Step 2

次にアプリの設定画面より、「API トークン」を作成します。

「API トークン」設定画面より、「生成する」ボタンをクリックし、「アクセス権」に「レコード追加」をチェックして「保存」します。

アプリの設定画面に戻ったら、「アプリを公開」をクリックして、作成したアプリを公開します。

以上で、アプリの完成です。

プログラムの作成

Step 1

上記で作成した Google フォームを再び開き、「その他」メニューから「スクリプトエディタ」をクリックします。

以下の画面が開くので、プロジェクト名、ファイル名を入力します。

Step 2

kintone API 呼び出しのライブラリが公開されているので、今回はこれを利用させていただきます。
Qiita Tip: kintone とGoogle Apps Script連携 (External link)

「ライブラリを追加」をクリックします。
Google Apps Script Library for kintone (External link) の README.md にある「Script ID(For New editor)」の値を「スクリプト ID」欄に入力し、「検索」ボタンでライブラリを検索します。
ライブラリが表示されたら、最新のバージョンを選択し、「追加」をクリックします。

Step 3

manifest ファイルに、OAuth scope を記載します。

プロジェクトの設定ボタンから 「appsscript.json」マニフェスト ファイルをエディタで表示する にチェックを入れます。

エディタに戻り、appsscript.json に、次のように OAuth scope を追加します。

最後の要素に追記する場合には、末尾のカンマ(,)は不要です。

1
"oauthScopes": ["https://www.googleapis.com/auth/forms.currentonly", "https://www.googleapis.com/auth/forms", "https://www.googleapis.com/auth/script.external_request"],

Step 4

下記を参考にコーディングします。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/*
 * Google フォームと kintone を連携するサンプルプログラム
 * Copyright (c) 2017 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
const getFormResponse = (e) => {
  'use strict';
  const itemResponses = e.response.getItemResponses();// アンケートの回答を取得
  let records = '[';
  records += Utilities.formatString('{"Email": { "value": "%s" }', e.response.getRespondentEmail());// 回答者のEmailアドレスの取得
  for (let i = 0; i < itemResponses.length; i++) {
    const itemResponse = itemResponses[i];
    switch (itemResponse.getItem().getTitle()) {
      case '参加しますか?':
        records += Utilities.formatString(',"attend" : { "value": "%s" }',
          itemResponse.getResponse());// 質問に対する回答を取得
        break;
      case '参加人数':
        records += Utilities.formatString(',"number_of_attendee" : { "value": "%s" }',
          itemResponse.getResponse());// 質問に対する回答を取得
        break;
      case '参加者の名前を記入してください':
        records += Utilities.formatString(',"name_of_attendee" : { "value": "%s" }',
          itemResponse.getResponse());// 質問に対する回答を取得
        break;
    }
  }
  records += '}]';
  Logger.log('Response JSON is "%s"', records);
  return records;
};

const sendToKintone = (e) => {
  'use strict';
  Logger.log('Form submitted');
  const subdomain = '{subdomain}.cybozu.com';// サブドメイン名
  const apps = {
    YOUR_APPLICATION1: {appid: アプリID, name: 'kintone Meetup 参加者', token: 'kintoneアプリのAPIトークン'}
  };
  const manager = new KintoneManager.KintoneManager(subdomain, apps);// ライブラリーの初期化
  let str = getFormResponse(e);
  str = str.replace(/\n/g, '\\n').replace(/\r/g, '\\r').replace(/\t/g, '\\t');
  const records = JSON.parse(str);// JSON形式に変換
  const response = manager.create('YOUR_APPLICATION1', records);// kintone レコードの生成
  // ステータスコード
  // 成功すれば200になる
  const code = response.getResponseCode();
  Logger.log('Response code is "%s"', code);
};

コーディング終了後、保存します。

解説
Google フォームの回答を取得

以下の API 関数で、フォーム送信時の回答のデータを取得します。

e.response.getItemResponse();

 8
 9
10
11
12
const getFormResponse = (e) => {
  const itemResponses = e.response.getItemResponses();// アンケートの回答を取得
  // ***
  // ***
};

kintone へ送信する JSON 形式のデータを作成します。 回答者のメールアドレスは以下の API 関数により取得できます。

e.reponse.getRespondentEmail();

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
let records = '[';
records += Utilities.formatString('{"Email": { "value": "%s" }', e.response.getRespondentEmail());// 回答者のEmailアドレスの取得
for (let i = 0; i < itemResponses.length; i++) {
  const itemResponse = itemResponses[i];
  switch (itemResponse.getItem().getTitle()) {
    case '参加しますか?':
      records += Utilities.formatString(',"attend" : { "value": "%s" }',
        itemResponse.getResponse());// 質問に対する回答を取得
      break;
    case '参加人数':
      records += Utilities.formatString(',"number_of_attendee" : { "value": "%s" }',
        itemResponse.getResponse());// 質問に対する回答を取得
      break;
    case '参加者の名前を記入してください':
      records += Utilities.formatString(',"name_of_attendee" : { "value": "%s" }',
        itemResponse.getResponse());// 質問に対する回答を取得
      break;
  }
}
records += '}]';

kintone へ送信するリクエストデータの JSON 形式の詳細は 1 件のレコードを登録する を参照してください。

kintone へデータを送信

上記で作成した kintone アプリの情報を設定します。

35
36
37
38
39
40
41
42
const sendToKintone = (e) => {
  const subdomain = '{subdomain}.cybozu.com';// サブドメイン名
  const apps = {
    YOUR_APPLICATION1: {appid: 'アプリID', name: 'kintone Meetup 参加者', token: 'kintoneアプリのAPIトークン'}
  };
    // ***
    // ***
};

先ほど設定した kintone API 連携用ライブラリを初期化し、上記関数で作成した、Google フォームの回答データを文字列から JSON 形式に変換し、kintone へデータを送信します。

42
43
44
45
46
const manager = new KintoneManager.KintoneManager(subdomain, apps);// ライブラリーの初期化
let str = getFormResponse(e);
str = str.replace(/\n/g, '\\n').replace(/\r/g, '\\r').replace(/\t/g, '\\t');
const records = JSON.parse(str);// JSON形式に変換
const response = manager.create('YOUR_APPLICATION1', records);// kintone レコードの生成

レスポンスのコードが 200 でしたら送信成功です。

49
const code = response.getResponseCode();

Step 5

トリガーの設定画面を表示し、[トリガーを追加]からトリガーを追加します。

イベント発生時に実行する関数、トリガーとなるイベントを設定し、保存します。

以上で Google Apps Script の設定は完了です。

動作の確認

作成した Google フォームの右上の送信ボタンをクリックし、「フォームを送信」画面にて送信先のメールアドレス、件名、メッセージを入力し、送信ボタンでフォームを送信します。

メールに届いた Google フォームへのリンクより、回答を入力し送信します。

送信後、回答したデータが kintone に記録されました。

まとめ

Google フォームを使うとアンケートやイベントの出欠等のフォームを簡単に作成できる上、Email や SNS で送信したり、自社のサイトにフォームを埋め込むことも可能です。
その回答を kintone アプリに自動的に記録することによって結果を効率的に管理できるのではないでしょうか。

参照サイト

更新履歴

  • 2020/2/18
    • Google Forms の仕様変更により、OAuth scope の記載が必要となったため、manifest ファイルに OAuth scope の記載を追加
  • 2021/4/6
    • Google Apps Script の UI 変更に伴い、画像を差し替え
information

この Tips は、2017 年 8 月版 kintone で動作を確認しています。