G Suiteに当初より搭載されていたアプリの1つにアンケートや情報収集用のアプリとして「Google Form」があります。Office365にもMicrosoft Formsというものがありますが、驚くほど低機能です。新しいGoogle Formは旧Google Formよりも少しだけ進化していて、ノンプログラミングでもわりと使えるようになっています。

今回はこのGoogle Formの活用法その①として、Google Apps Scriptなしで既存のFormの機能のみで出来る事、やれる事、カスタマイズをしてみたいと思います。

今回使用するファイル

Google Formだけは他のファイル類と異なり、メニューからではなく、右上の「︙」をクリックしてから、コピーを作成する事が出来ます。

事前準備

フォームに質問を作り込む前にまず、色々と設定が必要です。この設定はいつでも可能ですが、最初に行うようにしたほうが良いでしょう(忘れちゃうので)。設定は右上にある⚙歯車アイコンをクリックすると可能になります。

図:フォームの設定はとっても重要です

全般設定

ここが一番重要な項目になります。

  • メールアドレスを収集 – 自動的にログインしてるGoogleアカウントのメールアドレスを取得します。誰が回答したのか特定が可能になります。匿名のままにしたりする場合には、オフで。但しオフの場合、回答者に回答を自動応答で送ることが出来ません。
  • 回答のコピーを送信 – 回答内容を自動的にメールで回答者に送信します。
  • 回答を1回に制限 – 何度もフォームにアクセスして回答できなくする為の項目です。
  • 送信後に編集 – 送信内容を後で修正出来るようにする場合には、チェックを入れます。
  • 概要グラフとテキストの回答を表示 – 回答後に現時点での概要のグラフと回答内容を、回答者にも見せる場合にはチェックを入れます。

プレゼンテーション設定

ここはFormの見た目の設定を行います。

  • 進行状況バーを表示 – よくある現在どれくらいまで回答を進めたか?の進捗バーを表示してくれます。
  • 質問の順序を並び替える – これは通常使いません。テストなどでシャッフルする場合にはチェックします。
  • 別の回答を送信するためのリンクを表示 – 回答後にもう一回回答をする事が出来る時にリンクを表示してくれます。
  • 確認メッセージ – 質問終了し送信後に表示されるメッセージを記述します。

テスト設定

この項目は一般企業では使う機会はないでしょう。オフのままでオッケーです。この設定はGoogle Formをテストアプリとして使う場合に使う設定で、点数の自動集計であったり、成績を回答者に表示する設定です。今回は使用しませんので、省略します。

フォームを作成する

質問パーツを作ってゆく

質問用のデザインパーツは全部で15個。普通のテキストやタイトル用の項目〜ドロップダウン項目やチェックボックス類〜動画の貼付けやファイルアップロード画面など結構昔よりも充実しています。セクションは次の「条件分岐」で使う特殊なパーツです。質問する内容に応じて、これらのパーツを継ぎ足して行きます。横についてる縦のツールボックスの➕をクリックして配置していきます。

択一式ならラジオボタンを、複数選択可ならばチェックボックスを。一覧選択ならばプルダウンといった具合に選び、それぞれの項目を充実させてゆきます。また、新しいGoogle Formからは選択式(グリッド)というものも増えていて、擬似的に簡易な複数データを送信出来るようになりました。

チェックボックスやラジオボタンでは候補にないものをユーザに追加させる「その他」という項目もあります。付けたい場合にはこれも追加してあげると内容がより充実しますね(飲み会の行き先でこれを付けると収拾がつかなくなる可能性も有り)。また、記述式テキストボックスでは、入力値の簡単な検証が出来るようになっており、パーツの右下「︙」の中の「回答を検証」をチェックすると使えるようになります。必須項目にしたい場合には、必須のスイッチをONにしましょう。

図:必要にして十分なパーツは揃ってます。

図:回答内容の検証をつけてみた(メールアドレス)

条件分岐を作ってみる

Google Formは前の回答状況に応じて条件分岐で質問を作ることも出来ます。例えば旅行アンケートで山のプランと海のプランで行き先を変えたい場合にはこの機能を使います。条件分岐のフォームのサンプルをご覧下さい。これは少々作るのが難しいですが以下の手順で作っておきます。実際のデモはこちらから

  1. まず条件分岐の元になる質問を普通に作る。条件分岐はラジオボタンで行わせる。回答はもちろん必須とする。
  2. 続けて、セクションを追加し例えば山の場合の旅行行き先の質問を作る(セクション2とする)
  3. 続けて、セクションを追加し例えば海の場合の旅行行き先の質問を作る(セクション3とする)
  4. そして最後に2.と3.のそれぞれが再度合流する為の最期の質問セクションを作る(セクション4とする)
  5. 1.の各ラジオボタンに於いて、ラジオボタン右側のプルダウンで、それぞれセクション2かセクション3に移動するよう設定する。
  6. 2.および3.のセクションの下にあるプルダウンから、回答後の移動先セクションを4にする。
  7. 実際に山を選んだ場合と海を選んだ場合とでフォームの質問内容が条件分岐します。

うまいこと作ればかなり複雑な条件分岐をいくつも用意して、より詳細なフォームを作り込むことが可能になりますよ。

図:1個目の質問で条件分岐させる

図:分岐先質問の回答後移動先はセクション4に合流させる

デザインをカスタマイズ

普通にカスタマイズ

普通にカスタマイズといっても、Google Formは昔から大したカスタマイズが出来ません。新しいGoogle Formになってからは更にそのカスタマイズの余地がなくなり、単体のフォームとして表示する分には良いのですが、メール送信や外部貼付け時には周りのデザインとマッチしません。現在カスタマイズ出来るのは色と全体のテーマ(主にヘッダーの画像)が変更出来るだけです。

  1. 編集画面右上の🎨パレットのアイコンをクリック
  2. 色が何種類か固定で選べる・・・
  3. 右下の写真アイコンをクリックするとテーマを選べる
  4. 自分の好みのテーマを選んで選択ボタンを押すと反映。中にはアニメーションGIFとなってるものもある。
  5. 自分で画像をアップロードしたりも可能

図:おしゃれなデザインは多い

魔改造してみる

この魔改造は、HTMLを自分でちょこっと書ける人でないと出来ません。また、Google Chromeに付属のデベロッパーツールが使えないと作るために必要な情報を手に入れる事ができませんので、注意が必要です。今回はWordPressの固定ページに貼り付けてみたいと思います。凄く面倒臭いので、入力項目は3つだけにしておきます。

WordPressの固定ページで作業

まずはWordPressにて固定ページを一個追加し、その中にFormで記述します。この時、質問を必須のものとしたい場合には、inputにrequired属性を追加しておくと良いです。このあたりは細かなHTML5のカスタマイズ方法を参照すると良いですね。

まだ、ここには送信先情報と各セクションのName属性値が不足していますので、これを集めます。

Google Formで作業

魔改造の元になるフォームを作成します。わかりやすいようにWordPressで記述した順番でパーツを作りましょう。作成をしたら、送信ボタンを押して、真ん中の🔗チェーンのアイコンをクリック。そのURLを新しいページで開きます。開いたら、Chromeの右上「︙」⇒「その他のツール」の中の「デベロッパーツール」を開きます。

凄い量のHTMLコードが出てくるので、一気にやる気が失せるかもしれませんがまずは、Ctrl+Fの検索でformResponseという文字が入ってるものを検索し探し当てます。これはすぐ見つかるはずです。これをコピーしておきます。

図:このformResponseという文字の入ってるURLが送信先情報です

次に各テキストボックスのName属性です。左側のフォームのテキストボックスを触って、右クリック⇒検証をすればその場所にすぐ飛べます。そのテキストボックスについてるName属性を一個ずつ取得しておきます。entry.111111といったような形で名前がついているはずです。これをボックスの数だけ取得しておきます。

図:name属性の値をこれで取得できます。

再びWordPressの固定ページへ

情報が集まったので、送信先情報とname属性値をWordPress側に記述した内容に反映します。まず、送信先情報ですが、formタグの中のaction属性にその値を入れてあげます。次に、各テキストボックスのname属性にそれぞれ取得したentryと名のついた値を入れ込んであげます。

まだ各項目の微妙なデザイン修正はしていませんが、これでもう動作します。サンプルページはこちら。required属性のおかげでメアドのValidationもきっちり効いています。送信をするときちんとフォーム側にデータが入るようになっているのを確認しましょう。送信を押すと、Google Formの画面にリダイレクトして終了した旨のメッセージが出れば成功です。

図:好きなデザインで弄り倒せます

Google Sitesに埋め込む時は

Google Sitesに上記で作成したコードを埋め込むと、ひどくしょぼい入力欄になります。WordPressと違ってCSSがないためです。そこで、埋め込むコードに一手間加えて、CSSを付け加えてあげました。また、各セクションが改行されず1行になってしまうので、各セクションの最期には<p>タグを入れてあります。

追加した項目は

  1. 各セクションの最期に<p>タグを追加しました。これで改行されます。
  2. Button要素にClass指定を加えて、ボタンもCSS装飾しました。
  3. inputやtextareaの要素にstyle要素などを加えて幅を追加しました。
  4. <style>セクションを追加し、テキストボックスや送信ボタンを装飾しました。
  5. 送信ボタンをセンタリングしました。

また、送信すると画面がGoogle Formのそれに飛んでいくのですが、現在のページではなく新しいウィンドウで開きたいのならば、<base target=”_blank”>を1行足してあげると良いです。

これで見栄えの良い形で、Google Sitesにも埋め込めました。オリジナルよりもデザインにマッチしてよりグッドです。尚今回のCSSの装飾コードは、こちらのサイトからお借りしました。

図:Google Sitesにも埋め込めるけれど・・・

図:デザインを良くするにはCSSの装飾が必要

アドオンについて

新しいGoogle Formに搭載されたアドオン機能。これはGoogle Apps Scriptで作成されてる追加モジュールです。主に製作者にとってプラスになるような追加機能をアドオンの形で誰でも使えるようにしたものです。ただ、殆どが英語表記であり、正直な所そこまで必要かなぁと思うようなアドオンが少数リリースされているだけなので、使うか使わないか?は判断が別れる所です。

今回のエントリーはGoogle Apps Scriptを使わないでのカスタマイズなので、英語表記でも大丈夫という人にとっては有用なものかもしれません。自動応答メールを送ったり、カレンダーと連携したり、QRコードを生成したり、ワークフローシステム的なものに仕上げたりなど、粒ぞろいなアドオンではあります。

使い方は右上の「︙」をクリックして「アドオン」を選択。気に入ったアドオンがあればクリックして、右上の無料と書かれたプラスボタンをクリックすれば、フォームに機能が追加されます。

図:ノンプログラミングならば有用です。

フォーム連携サービス

チャットボットを作る

作成したGoogle Formですが、そのままでもフォームとして使えますが、チャットボット化するとインタラクティブな感じでフォーム入力が出来るようになります。チャットボットにするためには、Fobi.ioというサービスを利用します。このサービスはGoogle Formに対応しており、また質問内容のパーツもほぼ対応してる優れものです。

作り方は以下の手順

  1. Google Formの右上の送信をクリックする
  2. 🔗鎖のマークをクリックして、リンクを取得する
  3. Fobi.ioのサイトに行き、下部のテキストボックスのPast from Linkに2.のリンクをコピペして「Create Bot」をクリック
  4. 次の画面の一番下の「Save Bot」をクリックする。尚この画面でもフォーム内容をちょっと修正できる
  5. チャットボット用のリンクが出て来るので、これをGoogle SitesやWordPressにiframeで埋め込む。
  6. iframeのコードのsrc=以下の部分のURLを自分が作ったボットのURLに置き換えてね。

埋め込むiframeのHTMLコードは以下のような感じ

実際にWordPressGoogle Sitesに埋め込んでみた。チャットに答えて送信するときちんとフォームにはデータが記録されている。凄く便利ですね。これならばGoogle Sitesに埋め込んでもデザイン的にもグッド。

図:Formのリンクをまずはコピペ

図:SAVE BOTで作成完了

図:リンクが出て来るのでこれを貼り付ける

図:チャットボットと会話する

タスクランナーサービスを使う

IFTTTMicrosoft FlowZapierなどのウェブサービスを連携させるタスクランナーサービスを利用する事ができます。ただそれぞれ一長一短があり、現在Google Formと連携出来るのはZapierのみです。今回は、Google Formで新しいエントリーが追加されたら、LINE Notifyへ通知するレシピを作ってみたいと思います。Google Apps Scriptでの通知は次回。

事前準備

まずは、以下の手順で準備を進めます。

  1. あらかじめLINEにてトークグループを作っておく。この時、Line Notifyをグループに追加しておく。
  2. Line Notifyにログインして、トークンを発行してもらう。トークン名を適当に入れ、トークグループ名を選択

この時きちんと動くかどうかは、OSXならばターミナルから以下のコマンドを投げればStatus:200と出ます。これが成功です。401や404はエラーですよ。

図:赤字でトークン文字列が出てきます。

図:terminalからテストしてみた

Zapierでレシピ作成

zapierにログインして、いよいよレシピを作ります。但しZapierはGoogleサービスに対して5分おきにチェックをしてるので、届くまで若干タイムラグがあります。Googleからのメール通知のほうが早く来るかもしれません。なのでこういう事が出来るよっていう参考程度にみて下さい。

  1. ZapierのDashboardを開き、上部にある「Make a Zap!」をクリック
  2. まずは、Google Formから。Choose TriggerでGoogle Formを選択し、次へ進む。
  3. New Response in Google Spreadsheetを選ぶ。
  4. 接続するGoogleアカウントを入れる。自分のアカウントですよ。
  5. SpreadsheetはGoogle Formが書き込んでるスプレッドシートを選択し、Worksheetはシート名が出て来るはずなのでそれを選択。
  6. Fetch&Continueをクリックして接続成功すれば完了。
  7. 次のActionではLINEは一覧にないので、Webhooks by Zapierを選ぶ。
  8. POSTを選択して次にすすむ
  9. URLには、https://notify-api.line.me/api/notifyを入力
  10. dataにはmessageと入れ、隣のボックスには適当にメッセージを入れておく。
  11. headersにはAuthorizationと入力し、隣のボックスにはBearer トークン名 と入れる。Bearerの後に半角スペースがあるのに注意。
  12. Send test webhook…をクリックして、LINEに届けばOKです。
  13. Finishボタンを押して、このレシピに名前を付けます。
  14. Your Zap isのスイッチをオンにします。オンにしないとトリガーが動きません。
  15. このレシピを捨てる時はスイッチをオフにしないとゴミ箱に入れられません。

図:Google Formの設定

図:Webhookの設定その1

図:Webhookの設定その2

図:スイッチはONを忘れずに

フォームの貼付け・送信

メールで送信する

このGoogleフォーム。便利なのは相手がGMailであればGMail内で回答を行わせるメールを送る事ができる点です。いちいちフォームの閲覧画面に行く必要が無いので、より多くの回答を期待出来ます。G Suiteなどで組織内でのアンケートなどに使う場合には最適な方法です。送信先は個別メールアドレスも、グループのアドレスも両方使用する事が可能です。

メールで送信する手順は以下の通り。

  1. 編集画面に於いて、右上の「送信」ボタンを押す
  2. メールを選択し、送信先を入力します。カンマ区切りで複数送信先を選べます。
  3. 件名、本文メッセージを入力する
  4. 最後に「このフォームをメールに含める」にチェックを入れる
  5. メールアドレスを収集するオプションは必要に応じてチェックを入れる。
  6. 送信ボタンを押すと完了

すると、受信者には以下のようなGMail内で回答が出来るメールが届きます。但しこのフォームメール、スマフォだと動きませんので注意!

図:PC版ではそのままGMail上で回答が出来ます

Google Sitesに貼り付ける

一番多い利用方法なのは固定的にフォームをGoogle Sitesに貼り付けて、ユーザに任せて回答してもらう方法です。Google Sitesの編集画面にて貼り付けたいページ上で普通右サイドバーから「フォーム」を選んで、貼り付けたいフォームをクリックするだけ。あとは縦横のサイズを調整すれば完了です。

実際に貼り付けてみたサンプルページはこちら。かならず公開ボタンを押してから皆様にお知らせしましょう。

図:ただそのままだとデザインがいまいちですが・・

外部サイトに貼り付ける

外部サイト(例えば自分のWordPressのブログなど)にも貼り付ける事が可能です。といってもiframeでフォームを表示しているだけですが。この時、Google Formだけは自分のドメイン外の人にも回答出来るように公開する事が出来るようになっています。その場合の外部の回答者は当然スプレッドシートにはさわれません。

貼り付け方ですが以下の手順です。

  1. 編集画面の右上の送信ボタンを押す
  2. <>」というタブをクリックして、HTMLを埋め込むを表示する
  3. 表示されてるコードをコピーする。コピー前にサイズ調整忘れずに。
  4. WordPressの編集画面にて、テキストモードで表示してコードを貼り付ける。
  5. 試しにつくってみたよ

デザインがいまいちでサイトと全くフィットしていませんが、貼り付けられます。魔改造して自サイトに合う形でカスタマイズして貼り付けるほうが良いかもしれません。

初期値をセットした状態で貼り付ける

新しいGoogle Formでは初期値をセットした状態でフォームを貼り付ける機能が追加されています。但し、この初期値は動的に変更する事が出来ません。また、初期値はURLに含めた形で生成されます。作り方は以下の通り。

  1. フォームを作り上げたら、右上の「︙」をクリックし、「事前入力したURLを取得」をクリック
  2. フォームが閲覧モードで開かれるので、フォームの項目を入れる。これが初期値になる。
  3. 「リンクを取得ボタン」をクリックする。
  4. この時、初期値含めた貼付け用フォームのURLがコピーされています。
  5. Google Sitesの場合、右サイドバーのフォームではなく、埋め込みを使ってURLを貼り付けて埋め込む。
  6. WordPressのような場合は、iframeを使って埋め込み用URLをセットしてあげる。

このURLを解析すれば、開く時に別のアプリから初期値入りのURLをセットして開かせれば、ユーザ名やメールアドレスを動的に入れることも出来ます。

図:リンクを取得のURLは分析すると面白い

フォームデータの分析

スプレッドシートに書き込む

回答されたアンケートを自動的にスプレッドシートに蓄積させる事ができます。スプレッドシートは二次利用が可能なので、通常はこのオプションを皆さん使うことになると思います。使い方は

  1. 編集画面にて「回答」タブをクリックする
  2. 回答タブの右方向にある「︙」をクリックする
  3. 回答先を選択をクリック
  4. 新しいスプレッドシートを作成ならば、名前を付けてフォームと同じ場所に自動生成されます。(作成事例
  5. 既存のスプレッドシートの場合、指定する事でそのスプレッドシートに新規シートが作成されて連結されます。
  6. 作成と連結されたスプレッドシートは、回答タブの右にある緑色のアイコンをクリックするとすぐ閲覧できます。

同じオプションにて、「新しい回答についてメールの通知を受ける」をクリックしてチェックすると、回答されるたびに作成者にはメールで通知が来るようになります。回答をダウンロードをクリックすると、現時点での回答内容をCSVファイル(ZIPで圧縮されています)で入手することが出来るようになります。

※一つ問題が・・・数値の場合頭が「0」のようなもの(例:電話番号など)は、書き込みした時に、この頭の0が消えます・・・故に自分はスクリプトで書き込むようにしてたりします。

※但しこのCSV、文字コードがBOM無しUTF-8になっており、Excel2013で読み込ませた所、文字化けしてます。Shift-JISと誤認識される為。一度以下の作業をします。

  1. メモ帳(notepad)を起動する
  2. 対象のCSVファイルを読み込ませて、そのまま上書き保存する
  3. メモ帳を閉じてそのまま、csvファイルをExcelに読み込ませる
  4. 文字化けせず開ける(BOM有りUTF-8となる)

簡単な作業です。

図:スプレッドシート連携が美味しいポイント

図:そのままだと文字化けしたCSVデータ😨

アンケート状況を確認する

回答されたアンケートは、フォーム自体にも蓄積されています。その内容はグラフ化されており、ひと目でアンケート状況が確認できるようになっています。見るためには編集画面にて以下の作業を行います。

  1. 編集画面を開いたら「回答」タブをクリックする
  2. 概要は全ての集計結果をまとめたデータになります。
  3. 個別は申請者個人ごとのデータが格納されています。メールアドレス収集をしてる場合、誰がどう答えたのかもわかります。

図:集計がグラフで一目瞭然

関連リンク