カテゴリー内の他の記事

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

フォローする

(Author : Fuji Business International Mamoru Fujinoki)

はじめに

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

1. 事前に必要なもの

  • Googleアカウント
  • kintoneアカウント ※開発者ライセンスの取得方法はこちら

2. 開発の流れ

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

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

3. Googleフォームの作成

Step 1

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

Gapps1.png

 

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

Gapps2.png

Step 3

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

Gapps3.png

 

Step 4

次に質問の追加アイコンをクリックし、メニューより質問のタイプとして「ラジオボタン」を選択し、質問欄に質問を入力、回答の選択肢を以下のように入力します。
※記号[?]は半角で入力してください。

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

Gapps4.png


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

Gapps5.png

 

Step 5

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

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

Gapps6.png

 

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

4. kintoneアプリの作成

Step 6

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

Gapps7.png

 

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

 

Step 7

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

Gapps8.png

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

Gapps22.png

アプリの設定画面に戻ったら、必ず「アプリを更新」をクリックして、アプリに設定を反映させます。

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

 

5. プログラムの作成

Step 8

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

Gapps10.png

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

Gapps23.png

Step 9

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

プロジェクトキー:MDT2NQ9jkAGYJ-7ftp_A0v08CaFRWuzzx
「リソース」メニューより、「ライブラリ」を選択します。

Gapps12.png

「ライブラリを追加」欄にプロジェクトキーを入力し、「追加」ボタンをクリックするとライブラリが追加されるので、最新のバージョンを選択し、設定を保存します。

Gapps13.png

 

Step 10

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

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

 

【解説】

[Google フォームの回答を取得]

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

e.response.getItemResponse();

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

e.reponse.getRespondentEmail();

kintoneへ送信するリクエストデータのJSON形式の詳細はこちらを参照してください。

 

[kintoneへデータを送信]

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

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

レスポンスのコードが200であれば送信成功です。

Step 11

編集メニューより、「現在のプロジェクトのトリガー」を選択し、イベント発生時に実行されるファンクション名を設定します。

Gapps14.png

実行ファンクション名をリストから選択し、トリガーとなるイベントを設定し、保存します。

Gapps15.png

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

6. 動作の確認

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

Gapps16.png

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

Gapps17.png

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

Gapps18.png

7. まとめ

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

8. 参照サイト

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
NORTH

お世話になります。
まさにGoogleFormsからkintoneに格納できないかと探っていたところこの記事にたどり着き、格納することが出来ました。
ありがとうございます。

そこで一点ご質問なのですが、この記事で言うとGoogleForms側の「参加者の名前を記入してください」のところ、
段落のタイプで複数行を想定されているかと思うのですが、ここに複数行のテキストを入力し送信すると
「SyntaxError: String contains control character」といわれてkintoneに格納できませんでした。
改行しないで送信すると格納可能です。

おそらく受け渡されるデータの型がJESONと合っていないものと思われますが、
いい解決方法はございますでしょうか?

いい解決法をご存知でしたらご教示いただけましたら幸いです。

Avatar
cybozu Development team

NORTH 様

お世話になっております。

返事が遅くなりまして申し訳ございません。

38行の後、次のように改行コードを変換するソースコードを追加することでkintoneに登録できることを確認しました。
var str = getFormResponse(e);
str = str.replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t");
var records = JSON.parse(str);// JSON形式に変換

ご確認お願い致します。

Avatar
NORTH

cybozu Development team さま

お世話になります。ご回答いただきありがとうございました。
頂きました件テストをしてみたところ無事格納出来ることを確認いたしました。

ありがとうございました!
ぜひ活用させていただきたく存じます。

Avatar
hide

Cybozu Development team さま

お世話になります。

記事を参考にしながら行なっているのですが、どうしても下記のメッセージが表示され先に進む事ができません。

お手数お掛けしますが、解決方法をご教授頂けませんでしょうか。




Avatar
cybozu Development team

hide 様

お世話になっております。

cybozu developer network 事務局です。

該当のエラーですが、変数「e」はイベントオブジェクトであり、

トリガーで選択した、「フォームからフォーム送信時」に値が入る変数です。

(実際にフォームに情報が入力され、回答が送信されたときにイベントオブジェクトが発生します。)

 

ですので、エラーに関してはそのままで次のステップに進んで問題ありません。

 

なお、仕様以外の技術的な質問に関してはコミュニティをご活用いただければ幸いです。

Avatar
hide

cybozu Development team 様

お世話になります。
内容了解いたしました。
仕様以外でのコミュニティへの投稿も了解いたしました。申し訳ございません。

Avatar
Satoshi Oda

Cybozu Development team 様

お世話になります。

追加でチェックボックスを使ってカスタマイズすると、Kintoneへデータが追加できません。

チェックボックスに何もチェックせずに登録するとうまく出来ます。

対処法はありますでしょうか。初心者なものですみません。

Avatar
cybozu Development team

Oda様

本記事を参考に、

Step6にフィールドを追加し、Step 10のサンプルコードの23行目以降にコードを追加すれば動作すると思いますが、

kintoneアプリ側に追加したフィールドコードにお間違いはないでしょうか。

なお、デバッグなど、仕様以外の技術的な質問に関してはコミュニティをご活用いただければ幸いです。

 

Avatar
Satoshi Oda

Cybozu Development team 様

 無事に動作できました。

 コードの部分に細かい誤りがありました…。

 Googleフォーム上チェックボックスは、Kintoneではチェックボックスではなくて記述欄にしないと飛ばせないんですね。

 ありがとうございました。

Avatar
H_ishi
お世話になります。
アンケート結果を反映したいと考えていますが、記事の手順に従ってもうまく反映がされていません。
お手数をお掛けしますが、解決方法をご教授願えますでしょうか?
以下コードです。
 
function getFormResponse(e) {
    'use strict';
    var itemResponses = e.response.getItemResponses();// アンケートの回答を取得
    var records = '[';
    // 回答者のEmailアドレスの取得
    records += Utilities.formatString('{"Email": { "value": "%s" }', e.response.getRespondentEmail());
 
    for (var i = 0; i < itemResponses.length; i++) {
        var itemResponse = itemResponses[i];
        records += ',';
        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;
}
 
function sendToKintone(e) {
    'use strict';
    Logger.log('Form submitted');
    var subdomain = '36';// サブドメイン名
    var apps = {
        YOUR_APPLICATION1: { appid:2, name: 'kintone Meetup 参加者', token: 'fXmGQaLcJ9aaO0dLwRwKIBN' }
    };
    var manager = new KintoneManager.KintoneManager(subdomain, apps);// ライブラリーの初期化
    var str = getFormResponse(e);
    str = str.replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t");
    var records = JSON.parse(str);// JSON形式に変換
    var response = manager.create('YOUR_APPLICATION1', records);// kintone レコードの生成
    // ステータスコード
    // 成功すれば200になる
    var code = response.getResponseCode();
    Logger.log('Response code is "%s"', code);
}
Avatar
cybozu Development team

H_ishi 様

お世話になっております。developer network事務局です。

記述していただいたプログラムを見たところ、サブドメインの指定が間違っているように見受けられました。

 

34行目 「var subdomain = '36';// サブドメイン名」

のところですが、こちら36というサブドメインで合っていますでしょうか。

サブドメインはブラウザでkintoneを開いて頂いたときのURL「○○.cybozu.com」の○○部分にあたります。

 

また、こちらのコメント等に記載する際は、サブドメインは伏せ字で記載していただくことをおすすめします。

 

お手数をおかけして申し訳ありません。

上記の内容について、ご確認のほどよろしくお願いいたします。

Avatar
H_ishi

Cybozu Development team 様

ありがとうございます。また、返事が遅くなり申し訳ありません。

サブドメインについては当方のサブドメインを使用しています。

書き込んだものは架空のものを使用しております。説明が足らず申し訳ありません。

コードがあっているとすると、他の問題ということでしょうか?

一度こちらでもやってみたいと思います。

Avatar
cybozu Development team

H_ishiさま

お世話になっております。cybozu developer network事務局です。

ご確認いただきありがとうございました。

弊社環境でも確認した結果、フォームのデータは取得できているもののkintoneに反映されないという現象を確認いたしました。

大変申し訳ございません。

これから詳細な確認を行いますが、場合によってはお時間がかかる可能性がございます。

ご不便をおかけして申し訳ございませんが、今しばらくお待ちいただけますようお願い申し上げます。

 

Avatar
H_ishi

Cybozu Development team 様

ありがとうございます。

よろしくお願いいたします。

Avatar
cybozu Development team

H_ishi様

お世話になっております。cybozu developer network事務局です。

大変お待たせいたしました。ソースコードを修正し、記事に反映しました。
お手数ですがご確認よろしくお願いいたします。

Avatar
H_ishi

Cybozu Development team 様

遅くなって申し訳ありません。

変更内容確認できました。

ありがとうございました。

ログインしてコメントを残してください。