カテゴリー内の他の記事

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/ から直接ログイン)、「新しいフォームを作成」の「+」サインをクリックします。

001.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

002.png

Step 3

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

003.png

Step 4

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

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

004.png


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

005.png

Step 5

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

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

006.png

 

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

4. kintoneアプリの作成

Step 6

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

010.png

 

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

Step 7

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

008.png

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

009.png

 

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

011.png

 

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

5. プログラムの作成

Step 8

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

012.png

 

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

013.png

Step 9

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

スクリプトID:1M8DHQSWWGOM2RSRjDZmylHMl03nZHnliaVMGMk84m6jQ05ditPBTCSM8

「ライブラリを追加」をクリックして「スクリプトID」欄にスクリプトIDを入力し、「追加」ボタンをクリックするとライブラリが追加されます。

022.png

Step 10

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

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

015.png

 

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

016.png

Step 11

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

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

 

【解説】

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

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

e.response.getItemResponse();

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

e.reponse.getRespondentEmail();

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

 

[kintoneへデータを送信]

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

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

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

Step 12

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

017.png

 

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

018.png

 

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

6. 動作の確認

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

019.png

 

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

020.png

 

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

021.png

7. まとめ

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

8. 参照サイト

更新履歴

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

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
cybozu Development team

本田翔也 様

お世話になっております。cybozu developer network運営チームです。
返信遅くなり申し訳ございません。

こちら確認をしたところ、エラーメッセージは本連携と関係なく、
Google FormをChromeで実行するときに表示されるエラーのようです。

このエラーがある状態でも正常にコードが登録されますので、
無視していただいて問題ないかと存じます。

>こちら確認をしたところ、GoogleForms側に仕様変更があり、エラーが出ているようでした。
>現在調査中ですので、少々お待ちください。詳細分かり次第、再度ご連絡いたします。

こちらはエラーとは無関係で、GoogleForms側の仕様変更で、
OAuth の設定が必要だったので、記事に反映しました。

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

Avatar
本田翔也

cybozu developer network運営チーム 様

お世話になります。

エラーの件、了解いたしました。

調査までしていただき、

ありがとうございます。

Avatar
市川

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

たくさんの記事をみて現在勉強中の身です。

今回こちらの記事を参考に設定をし、無事にアンケート内容をkintoneアプリの新規レコードとして反映させることができました。

こちらの記事では「新規レコード」を生成ということですが、例えばメールアドレスをキーとして、既存のレコードに対して更新、上書きといったことは可能でしょうか?

その場合は上記記事のどの部分を変更するといいのでしょうか?

ご教示いただけますと幸いです。

Avatar
cybozu Development team

市川裕輝様

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

はい、既存レコードに対して更新をかけることは可能です。

まず、メールアドレスがキーであれば、メールアドレスを「値の重複を禁止する」設定を行います。(updateKey を使った更新を行うため

また、Step 11 に記載のコードで、38・39行目が登録するレコード情報の作成および登録処理になっているので、この箇所を更新処理に書き換えます。
この記事では、kintone に対する処理は、kintoe REST API を Google Apps Script で扱うためのライブラリ(有志の方が作成されています)を利用しています。
このライブラリについては、この記事でも記載している Qiita の記事 https://qiita.com/Arahabica/items/063877b0da439020d2c2#update をご参考ください。

なお、こちらのコメント欄はフィードバック欄となっております。
記事に記載されている以上の発展的な内容に関する質問は、コミュニティを利用していただきますよう、よろしくお願いいたします。

Avatar
市川

cybozu developer network 運営局様

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

ご回答いただきありがとうございます。

回答内容を基に実践してみます。

 

使い方がよくわかっておらず失礼いたしました。

以降はコミュニティを活用していきます。

Avatar
Taiki Goto

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

APIを使用しているという事はやはりルックアップフィールドの更新は出来ないのでしょうか?

Avatar
cybozu Development team

Taiki Goto 様

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

検証はしておりませんが、レコードを登録するアプリのAPIトークンと、ルックアップ元となるアプリのAPIトークンを認証ヘッダに指定すれば、ルックアップフィールドの更新はできる認識です。

https://developer.cybozu.io/hc/ja/articles/201941754#step7 より
> APIトークン認証
> 複数のAPI トークンを指定できます。複数トークンはカンマ区切りまたは別ヘッダーで指定します。

具体的には、Step11 のコード 33行目以下のように書き換えます。

レコードを登録するアプリのAPIトークンが「TOKEN1」で、ルックアップ元となるアプリのAPIトークンが「TOKEN2」の場合

YOUR_APPLICATION1: { appid: アプリID, name: "kintone Meetup 参加者", token: "TOKEN1,TOKEN2" }
 

なお、こちらのコメント欄はフィードバック欄となっております。
記事に記載されている以上の発展的な内容に関する質問は、コミュニティを利用していただきますよう、よろしくお願いいたします。

Avatar
Taiki Goto

cybozu developer network 運営局様

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

アドバイス通り複数トークン使用し、無事に登録することが出来ました。

また、何かありましたらよろしくお願いします。

 

Avatar
しんご

お世話になります。

イマイチ理解できないので質問させていただきます。

STEP10において、マニフェストファイルへの記載でエラーが出ます。

下記のURLの登録部分が必須という認識でよろしいでしょうか。

https://developer.cybozu.io/hc/ja/articles/360015955171?_ga=2.218060946.563699840.1616578307-89490584.1616578307

Avatar
cybozu Development team

しんご 様
お世話になっております。cybozu developer network 運営局です。

こちらで検証したところ、OAthクライアントを登録せずとも正常に動作することを確認いたしました。
お手数ではありますが、表示されているエラーの内容をご共有いただくことは可能でしょうか。

ご確認よろしくお願いいたします。

Avatar
しんご

cybozu developer network 運営局様

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

手順通りに進めてjsonにコピーした記述を貼り付けて、保存をかけると下記のエラーが発生し、保存ができません。

Unexpected character ('"' (code 34)): was expecting comma to separate Object entries at [Source: (String)"{ "timeZone": "Asia/Tokyo", "dependencies": { "libraries": [{ "userSymbol": "KintoneManager", "libraryId": "1M8DHQSWWGOM2RSRjDZmylHMl03nZHnliaVMGMk84m6jQ05ditPBTCSM8", "version": "4" }] }, "exceptionLogging": "STACKDRIVER", "runtimeVersion": "V8" "oauthScopes": ["https://www.googleapis.com/auth/forms.currentonly", "https://www.googleapis.com/auth/forms", "https://www.googleapis.com/auth/script.external_request"] }"; line: 12, column: 4]

Avatar
しんご

cybozu developer network 運営局様

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

先程の件は解消されました。

 

先に進めて、最後の回答を送信したところ下記エラーが発生します。

 

SSL エラー https://サブドメイン.cybozu.<?>/k/v1/records.json at [unknown function](KintoneManager:37) at sendToKintone(コード:44)

 

サブドメイン部分に入力は間違いのないものとします。

<?>の部分も怪しいかなと思いますが、全部コピーして一通りやってみようとしているのでどこがおかしいのでしょうか

Avatar
cybozu Development team

しんご 様

エラー内容のご共有ありがとうございます。

確認したところ、こちらではエラーを再現することができませんでした。
サブドメイン部分のコードをコピーされた際に制御文字等が含まれている可能性もございますので、
手入力で打ち直してみるなどの対応をお試しいただけますでしょうか。

また、記事のコメント欄は当記事の内容に関するフィードバックのみ受け付けております。
個別の事象に関する技術的なご質問については、お手数ですが cybozu developer コミュニティ のご利用をお願いします。

Avatar
しんご

cybozu developer network 運営局様

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

ご確認ありがとうございます。

 

ご案内ありがとうございます。

お手数をおかけしました。

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