googleフォームを使いたいけど味気ないデザインは嫌だ
友人の結婚式2次会の余興でアンケートを使ったゲームを行いました。
マッチングアプリで出会った2人なので馴れ初め再現VTR中に動画を停止して、その場で参列者に「マッチングアプリ内で誰にいいね！を送るか」というアンケートに回答してもらい、その結果で流す動画を変更するというものです。
新婦以外を選ぶと短いバットエンド映像を流し、その次に票数の高かった選択肢を流す形にしました。
アンケートは受付で渡したQRコードを各自のスマホで読み込んでサイトに飛んでもらいます。
そのアンケートフォームとしてgoogleフォームを使用したのですが、googleフォームはそのままではかなり味気ないデザインです。
機能としてはこれで十分なのですが、動画はかなり凝ったものを作ったのでここも妥協したくない…
「まあアンケートはどうしてもこういうデザインになるよね…仕方ない」と思われたくないのだ！
googleフォームをサイトに組み込む方法やデザインを変える方法を調べてもgoogleフォームっぽさを完全に消したものは見つかりませんでした。
PHPを使えばそもそもgoogleフォームを使わずに出来るんでしょうが僕は扱えませんのでhtml、css、javascript、googleフォームという手札だけで作りたい。
PHPを使えば出来るんでしょうが僕は扱えませんのでhtml、css、javascript、googleフォームという手札だけで作りたい。
googleフォームっぽさを完全に消して作ったアンケートサイト
そこで友人の力を借りて作ったのがこちら↓、一度触って確かめて下さい。
トップページ<index.html>
QRコードを読み込むとまずこのページが表示されます。
そこから気になる人のサムネイルをタップしてプロフィールページへ移動(検索やメールなどのアイコンはダミー)。
※実際の結婚式では新婦の画像や本人情報を使用していますがその辺はAIで作られたフリー画像&適当な情報へ変更しています。
プロフィールページ<profile.html>
各人のプロフィールページでは一般的なマッチングアプリと同じく＜＞で他の人(選択肢)のプロフへ移動や左上の×でトップページへ戻れます。
下へスワイプすると自己紹介文や趣味、好きなタイプなどの項目があるのでそれらを参考に選択肢を選んでもらいます。
投票する人を決めたらプロフ画像かその下の❤マークを押して投票、その際に確認画面が出現。
集計結果ページ<result.html>
確認画面で「はい」を押すと集計結果ページへ移動、参列者がリアルタイムで集計結果を確認できるようにしています。
とはいえ各人の投票時間には微妙なズレがあるので(制限時間10分ほど)投票終了時間に自分で集計結果を更新してもらう必要があり、そのためのボタンも設置。
表示が票数ではなく％なのは、投票してくれた人数が参列者の総数に比べてあまりにも少ないと見てられない為。
これならgoogleフォームを使用していると悟られることはないでしょう！
サイトの構成
サイトの構成はこちら↓
html
トップページ(index.html)、プロフィールページ(profile.html)、集計結果ページ(result.html)からなっていて、特筆する事と言えばトップページからプロフィールページへの遷移でしょうか。
4人のプロフィールページを1枚のprofile.htmlで表示できるようにクエリ文字列を使用しています。
index.html
トップページ(index.html)は4人の選択肢のサムネイルと集計結果ページへの直リンク以外は見た目をそれっぽくする為のダミーとなっています。
当初はアイコンにタッチすると「有料会員限定のサービスです」というアナウンスが出るように作りましたが、限られた時間内の操作においてはノイズになって混乱を招く恐れがあるので却下しました。
それぞれのアイコンを押すとその人のプロフィールページに遷移しますが、そのURL末尾にクエリ文字数を追加しています。
profile.html(googleフォームとの紐づけあり)
URLのクエリ文字数の数字に対応したプロフィール情報をlist.jsから引き出して表示しています。
result.html
集計結果ページでは各選択肢の割合を棒グラフで表示していて、「集計結果を更新する」ボタンや投票後に戻って色々見たい人の為に「ホームへ戻る」ボタンを用意しています。
css(googleフォームとの紐づけなし)
cssはごく普通にreset.cssとstyle.cssの構成で、特に書くことがありません。
しいて言うならコードが汚いってことくらい
javascript
list.js
list.jsは人数分のプロフィール情報を配列にして管理する為のjsです。
プロフィール情報を追加削除することでトップページとプロフィールページの表示数も変化します。
main.js
main.jsはプロフィールページに適用されるjsで、サムネイルを人数分複製してそれぞれの画像や基本情報を差し込む役目を持っています。
prof.js(googleフォームとの紐づけあり)
prof.jsはプロフィールページに適用されるjsで、クエリ文字列をもとにプロフィールを表示したり「いいね！」を押したときのアニメーションや＜＞を使って他の人のプロフィールへの移動の制御を行っています。
また、ここでgoogleフォームでのラジオボタンの選択と送信を行っています。
プロフィールページへ遷移と同時にクエリ文字数を元にラジオボタンの選択をjsで行い、最終確認ポップアップの「はい」を押すことでフォームの送信と集計結果ページへの遷移を行います。
ラジオボタンの見た目はcssで消してあります。
result.js(googleフォームとの紐づけあり)
resurt.jsは集計結果ページに適用されるjsで、棒グラフのアニメーションの制御とgoogleフォームからデータを取得する役割があります。
googleフォームからデータを取得するのにgoogleスプレッドシートとGAS(Google Apps Script)を使用しています。
googleフォームの組み込み方
このサイトへのgoogleフォームの組み込み方を解説するのですが、サイトの見た目のコーディングまで解説しだすと長くなりますし作りたいサイトはそれぞれ違うと思うのでそこは割愛します。
また、集計結果のページはGAS(Google Apps Script)を使用しておりやや複雑なので今回は送信側の解説を行います。
気になる方はgithubのコードをご覧ください。
cssとか特に汚いのであんまり見られたくはないですが…汗
①googleフォームのページを作る
まずはgoogleフォームでアンケートを作成しましょう。
作成にはgoogleアカウントが必要です。
「空白のフォーム」を選択して
必要項目を記入。１つだけ選んで欲しいのでラジオボタンにします。
その後「送信」を押してURLを取得。
②必要な情報を抜き出す
先ほどのURLから投票したデータをgoogleフォームに送信する為に必要な情報を取得します。
まずはURLのサイトを表示。
デベロッパーツールを開き、ctl＋Fで検索窓を開き「<form」と検索
action属性に記載されている長大なURL（https://docs.google.com/forms/・・・中略・・・formResponseというもの）をメモ帳などにメモ。
続いて「entry.」と検索して出てきた「entry.○○○○(10桁ほどの数字)」もメモ。
③プロフィールページにフォームを組み込む
html
先ほど得た情報を使ってprofile.htmlにformを作ります。
<body>直下に以下のコードを書きました↓
<form class="apri-form" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdV4ET0XSiNeuF2XY324cIVrG838YcfKeb7dai09kgzwmJo1A/formResponse" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
<input type="radio" name="entry.2052485800" value="Ａ子" id="select_1" class="list-check">
<input type="radio" name="entry.2052485800" value="Ｂ美" id="select_2" class="list-check">
<input type="radio" name="entry.2052485800" value="Ｃ奈" id="select_3" class="list-check">
<input type="radio" name="entry.2052485800" value="Ｄ葉" id="select_4" class="list-check">
<div class="check-back hidden" id="check-back">
<dl class="check" id="check">
<dt id="check-final" class="check-text">
〇〇さんを選びますか？
</dt>
<dd>
<input type="submit" value="はい" class="check-text submit" id="check-text">
<div class="check-no" id="check-no">いいえ</div>
</dd>
</dl>
</div>
<script type="text/javascript">
var submitted = false;
</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='result.html';}"></iframe>
</form><form>のaction属性にコピーしたURLを挿入。
<input>のname属性にentry.○○○を挿入し、value属性にそれぞれの選択肢名を書き込みます。
フォームの送信ボタンとなる「○○さんを選びますか？」→「はい」を<dl>で入れ込みます。
これでgoogleフォームへの送信が出来るようになりました。
しかし、このままでは送信後自動的にgoogleフォームの投票完了ページに遷移してしまいます。
それを阻止する為にあるのが20行目の<iframe>で、これによりgoogle公式投票完了ページへの遷移をキャンセルし、result.htmlへの遷移を促します。
css
<input>のラジオボタンは存在としては必要ですが実際には押さずにjsで自動選択するのでcssで「display: none」してあります。
javascript
profile.jsのフォーム関連部分はこちら、プロフィールページへの遷移と同時にクエリ文字数を元にラジオボタンのチェックを行うのと、最終確認ポップアップ内の名前の変更を行っています。
// ↓↓ form用ラジオボタン自動選択 ↓↓ ------------------
const selects = document.getElementsByClassName("list-check");
selects[getParam("p")].checked = true;
const check_final = document.getElementById("check-final");
check_final.innerHTML = `${persons[getParam("p")].name}さんを<br>選びますか？`;
// ↑↑ form用ラジオボタン自動選択 ↑↑ ------------------「getParam(“p”)」は関数を使ってクエリ文字数を単純な数字に変換したものです(こちらはlist.js内に記載)↓
//URL変数を変換する為の関数(例：「?p=4」を「4」にする)
function getParam(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
};まとめ
これでgoogleフォームらしさを消したアンケートサイトの送信部分が出来ました。
投票者に結果を見せる必要が無いならこれだけで良いですね。
このサイトを作ったのが半年以上前で、僕自身たまにしかコーディングを行わないので説明の不足や分かりにくい部分があると思いますがご容赦ください。
完全に忘れないうちに書き残しておくことにしました。
質問等あれば気軽にコメント下されば分かる範囲でお答えします。
また、要望があればGASを使用した集計結果ページの解説も行います。
コメント