Tips

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で動作を確認しています。