Googleフォーム と Googleスプレッドシートを使ったTwitter抽選ツールの作り方【Part.2 応募用フォーム画面の作成】
『Googleフォーム と Googleスプレッドシートを使ったTwitter抽選ツールの作り方』の【Part.2】です。
※この抽選ツールの作成には、googleアカウントが必要になります
Part.2は、
Googleフォームで応募用フォーム画面(Google Froms)を作っていきます。
前回の記事はコチラ
目次
1.画面レイアウトの作成
必要な画面は1画面のみ！
画面の中に必要な項目は、
- TwitterIDを入力するフィールド
- 送信ボタン
以上の2つです。シンプルです。
送信ボタンは自動で追加されますので、実質作るのは1つだけです。
それでは実際に作っていきます。まずはGoogleフォームにアクセスします。
[新しいフォームを作成]の、一番左[空白]をクリックします
このようなアンケートフォームを作成する画面に移ります。
フォームのタイトルと説明を入力します
各部分をクリックすることで、文字を入力することが出来ます。
タイトルと説明は好きに変更してください！
次に質問を追加していきます。
始めからラジオボタン(選択肢から1つ選ぶタイプのボタン)がありますが、これを文字入力のフィールドに変更していきます。
画面の下側をクリックすると質問を編集出来るようになるので、ラジオボタンと書かれた右側の逆三角(▽)をクリックします
[記述式]をクリックします
クリックすると、質問がラジオボタンから記述式に変わります。
「Untitled Question」となっている部分をクリックして、質問内容を入力します
初期表示だと「Untitled Question」となっているので、ここに質問を入力します。
ここでは「TwitterIDを入力してください(例:@hogehoge)」という文章にしてみました。
右下の[必須]をクリックして、この質問を必須入力にします
TwitterIDを未入力で応募されるのを防ぐため、質問を必須にします。
必須にするとスライダーに色が付きます。
こういったツールを作る場合、使用する方が間違う前提で入力チェックをつけることが大切です。
初めて使う人というのはあなたが思う以上にシステムのことをわかってくれないものです。
ボタンがあったらとりあえず押してみるかもしれませんし、純粋に選択肢を見逃すことだってあります。ユーザ視点に立って画面を設計していきましょう。
画面レイアウトの作成は以上で終了です。
2.回答を1回に制限する
重複で応募があると不公平ですので、回答を1人1回に制限します。
右上の歯車マークをクリックします
[回答を1回に制限する]にチェックを入れて、[保存]をクリック
保存を忘れずにクリックしてください！
この設定をONにすると、応募者はGoogleアカウントへのログインが必要になります。
応募者のGoogleログインなしで1人1回に制限することは出来ないのか疑問に思うかもしれませんが、自分で作ってしまえば可能です。
しかしGoogle Apps Script(GAS)でプログラミングを行う必要があるため今回は説明しません。
3.プレビューしてみよう
今まで見ていた画面は開発用の画面です。実際に使ってもらう時に、応募者が見る画面とは微妙に違います。
実際に応募者が見る画面を確認してみましょう。
確認は先程のページから確認することが出来ます。
右上の目のマークをクリックします
応募者が見る画面
これが実際に応募者が見る画面になります。
たったこれだけの作業でそれっぽい応募フォームが出来上がりました！
Googleフォームってすごい！
参考書籍
この抽選ツールを作るのにコチラの書籍で学習しました。
高橋宣成さんという有名なブロガーの方の書籍です。高橋さんのブログはコチラ
いつも隣にITのお仕事
4.次回予告
次回は『フォームとスプレッドシートの連携』を行っていきます。
Part.1 完成品の紹介
Part.2 応募用フォーム画面の作成(当記事)
Part.3 フォームとスプレッドシートの連携
Part.4 抽選画面の実装
Part.5 抽選機能の実装
Part.6 抽選機能の実装2
