Googleフォームは知っていますか？
GoogleフォームはGoogleが提供するオンラインのアンケートフォームです。
こんなページを見たことがある方は多いでしょう。
実際オンラインで回答を回収できるので便利ですが、Googleフォームのデザインってみんな同じでダサいんです。
今回はこのGoogleフォームを魔改造して自分の好きなデザインに改変することを目標とします。
docs.google.com
引用：
https://docs.google.com/forms/u/0/
まずはここにアクセスをします。
ここで自分で質問を作ったりして項目を増やしていきます。
最終更新を見るだけでも、2012年からこのアンケートフォームを使っています。
見ていただければわかると思うのですが、どれも「紫色」のデザインが標準でダサいです。
今回はGoogleの用意したデザインは使わずオリジナルデザインにしていこうと思います。
GoogleChromeのウェブディベロッパーツールを使う
まずウェブディベロッパーツールって何？というかと思います。
わかりやすく言えばウェブページの設計図を見るためのツールです。
難しいソフトではなく、みなさんがお使いのGoogleChromeにも標準で備わっていて、
食品の場合、成分表を見れば何が入っているか？わかりますし…
建築の場合、設計図を見ればどんな建物か？わかります。
ウェブページも同じことが言えて、
引用：
https://iwb.jp/chrome-console-website-html-code-copy/
ソースコードを表示させれば、このコードがどのようなコードでその挙動をしているのかがわかります。
起動方法は
willcloud.jp
引用：
https://willcloud.jp/knowhow/dev-tools-01/
ここでは特に説明しません。
今回はこのツールを使いこなせる人向けにGoogleフォームを改造していくことを目標とします
このでディベロッパーツールを冒頭で見せたGoogleフォームで使用してみます。
ここでインスペクタをする。
インスペクタ聞き慣れない言葉かと思います。
インスペクタとは、調査官、検査官、査察官、監督官、監査役、選挙管理委員などの意味を持つ英単語。 ITの分野では何らかの対象の内部状態などを調べる働きをするソフトウェアなどをこのように呼ぶことが多い。
空港で荷物検査することを「Baggage Inspection」と言い、荷物の中に不審物が入っていないか？を検査します。
同様にウェブページでもInspectionという概念があり、どうしてこのウェブページはこうゆう動きをしているんだ？というのを解析するために使います。
ウェブページのインスペクションとはこのようなことを表しまして、
Chromeメニューバー最下部デベロッパーツール
インスペクションツールを押すとこんな意味不明な英語の羅列が出てきます。
先程作ったフォームの「事前入力フォーム」からインスペクションかける
事前入力フォームというのが肝心です。
事前入力フォームである必要があって、ノーマルのフォームだと入力フォームのパラメータが隠されていてわかりません。
大事なことなので２度言いました。
日本人ってすごい手作業とか手計算とか大好きで、今の時代も試験は手計算させたりします。
でもコンピュータのインスペクション機能を使えば、コードが100行でも1000行でも簡単に目的のソースコードを探すことができます。
なので各フォームのテキスト欄に隠された項目の簡単にnameタグがわかります。
氏名欄のnameタグは
entry.1820618384
出席欠欄のnameタグは
entry.420047651
引き出物配送住所のnameタグは
entry.1407615245
ここまで来たらあとはhtmlをGoogle上で書いていき、公開しましょう。
コードは
//URLをたたいたときに呼ばれる function doGet(req) { const template = 'form'; const htmlOutput = HtmlService.createTemplateFromFile("form").evaluate(); return HtmlService.createTemplateFromFile(template).evaluate(); } // CSSを読み込む関数 function include(filename) { return HtmlService.createHtmlOutputFromFile(filename).getContent(); }
まずはフォームのurlを叩いたときにform.htmlファイルを呼び出すようにします。
ここでform.htmlの拡張子htmlは無視して、コードを記述するようにしましょう。
次にフォーム本体のhtmlを書いていきます。
ここはhtmlの知識が必要になりますので、htmlの勉強は別途必要です。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Form</title> </head> <body bgcolor="pink"> <h1>フォーム</h1> <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSczWS63qMtBkHQzYCAX2zxKuPRCbmOJ8rpAs8bh_jo-GG-u5Q/formResponse" method="post"> 氏名を教えてください<br> <input type="text" name="entry.1820618384"><br> <br> 出欠はいかがでしょうか？<br> <input type="radio" name="entry.420047651" value="参加">ご出席<br> <input type="radio" name="entry.420047651" value="欠席">ご欠席<br> <br> メッセージ<br> <textarea name="entry.1407615245" rows="3" cols="50"></textarea> <br> <button type="submit">送信</button> </form> </body> </html>
こちらをコンパイルしたものを公開しておきます。
こちらがGoogle上でコンパイルした魔改造Googleフォームです。
https://script.google.com/macros/s/AKfycbxn0Ko-Aa868Y05C2gH4_Br_ho3o2DbhE3J_M3YW3pJ/dev
パスワードなどは送信しないでください。
このフォームで回答いただいたものはこちらで閲覧ができます。
https://docs.google.com/spreadsheets/d/1VjcOyMEUoRe4t6oLzjxEHM4PQxhak8I9UxUNQveWFJg/edit?usp=sharing
