Googleフォーム と Googleスプレッドシートを使ったTwitter抽選ツールの作り方【Part.4 抽選画面の実装】

GoogleApps

『Googleフォーム と Googleスプレッドシートを使ったTwitter抽選ツールの作り方』の【Part.4】です。
※この抽選ツールの作成には、googleアカウントが必要になります

Part.4は、
抽選画面を作っていきます。

目次

前回の記事はコチラ

1.事前準備

抽選画面を作る前にまず、抽選を行うためにもう少し回答の数を増やしておきます。
自演になりますが、動作確認のためにはこういった作業も必要です!

回答を追加するのは、「回答を1回に制限する」設定をまずは解除します。

Googleフォームの右上の歯車マークでしたね

このチェックを外します

回答をするのは右上の目のマーク押したプレビューから、回答を3~5つくらい追加します。
ランダムに抽選されていることを確認するため、とりあえずこのくらいの数を追加しておけば良いでしょう。
追加された回答を、緑の十字マークから確認出来るのでした。

はい、追加されていることを確認できました。

2.抽選シートの作成

ここからスプレッドシートでの作業です。
シートを1つ追加し、そこに抽選画面を作っていきます。

Googleフォームと連携しているシートを開いて、左下のプラスボタン(+)からシートを追加

シート名をダブルクリック または 右クリックして、名前を「抽選」に変更

わかりすいようにシートに名前を付けます。

今後のこのシートを「抽選シート」と呼びます。

抽選に必要な項目をセルに設定

必要な項目は、

  • 当選者一覧
  • 当選人数
  • 抽選ボタン (※後で作成)

です。
抽選ボタンは後で作成するので、当選者一覧と当選人数を入れるセルを配置してください。

デザインはおまかせします!
私が作ったのはめちゃくちゃシンプル

3.抽選ボタンの作成

ツールバー[挿入] → [図形描画]をクリック

ツールバーの[(丸と四角が重なったマーク)] → [図形] → [ベベル]

私はベベルを選びましたが、ボタンっぽければ、押したくなるような図形なら何でもいいです!

図形を作成

マウスアイコンが十字マークに変わります。適当な大きさでボタンっぽいものを作って下さい。

図形をダブルクリック または 右クリックして[テキストを編集]をクリック

図形上に文字を入力出来るようになるので、「抽選」を入れます。
文字はセンター寄せしておきます。

ボタンっぽいものが完成しました。オメデトウ

[保存して閉じる]をクリック

スプレッドシートの画面に戻ってくると、作成したボタンが配置されています。
これで画面は完成です!

参考書籍

この抽選ツールを作るのにコチラの書籍で学習しました。

GoogleAppsScript(GAS)を使うことで、様々なGoogleサービスを自動化し、そして連携をすることができるようになります。スプレッドシートで表や帳票を作る…

高橋宣成さんという有名なブロガーの方の書籍です。高橋さんのブログはコチラ
いつも隣にITのお仕事

4.次回予告

次回は、このツールの核となる『抽選機能の実装』を行っていきます。

スポンサードリンク

ITリテラシー・プログラミングのまとめ記事