手軽に楽しく学ぶ！Glideで作る「クイズアプリ」

こんにちは！
私はスーパーマーケットの本部に勤務しており、ポスターやPOP、チラシの作成・校正・手配など販促物の面で店舗をサポートする部署で働いています。
販促物を作成・校正するうえで重要なのが
**作成されたポスターやPOP、チラシ等の表記がコンプライアンスに違反していないか正しく判断すること**です。

# 景品表示法を学ぶ
販促物の表記が正しいかどうかは **「景品表示法」** という法律に基づいて判断しています。
ただこれが大変です…
難しい言葉や細かい条件などなかなか覚えられないんですよね…
部署には景品表示法のテキストが置いてあるので上司は「暇なときに見て覚えろよー」と仰います。
⇒　部下一同「えっ…暇な時とは…」

ということで**手軽に景品表示法を学べるクイズアプリ**を作ってみました。
# 作成したアプリの画面
**<font color="blue">まずは問題選択画面</font>**
![Screenshot_20220809-100019~2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/0af71db1-3007-cfa9-1d16-dff764f2c3f0.png)


**<font color="blue">続いてクイズ画面</font>**
![Screenshot_20220809-102340~2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/8c58c455-422b-4460-b9cf-f4257adbe619.png)

**<font color="blue">そして結果確認画面です。</font>**
![修正Screenshot_20220809-103853.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/a9ec607c-a2ef-f86a-da07-3f69c7f26764.png)


また結果はいつでも確認することができます！
![InkedScreenshot_20220809-105338_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/9e3f698c-a6f9-86ab-5152-461c25ea550d.jpeg)


# 使用ツール
* **[Glide](https://go.glideapps.com)**
Glideとはノーコードで手軽にアプリ開発ができるノーコードツールです。
データベースとしてスプレッドシートを使うのでプログラミング言語やデータベースの知識がなくても利用できます。
様々なテンプレートもあるのでそれを利用して作ることもできます。

https://nocodedb.world/archives/1180#:~:text=Glide%E3%81%A8%E3%81%AF%E3%80%81%E3%82%A2%E3%83%A1%E3%83%AA%E3%82%AB%E7%99%BA,%E7%89%B9%E5%8C%96%E3%81%97%E3%81%9F%E3%83%84%E3%83%BC%E3%83%AB%E3%81%A7%E3%81%99%E3%80%82

# 完成までの流れ
**1. Glideに登録、サインイン**
**2. テンプレートの中からCommunity Quizzesを利用**
**3. Addで自分の作りたい問題と解答・ダミーの選択肢を入力**
**4. 文字の表示や背景色などお好みで調整**

# 作成詳細
Glideにサインインしたらテンプレートの中から**Community Quizzes**を選択しコピーします。
![Inkedクイズテンプレ_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/5bbbd2a1-93ab-0844-1f8e-a643df0c8532.jpeg)


**Add**を押すと問題作成画面が開きます。
自分の作りたい問題と解答・ダミーの選択肢を入力します。
問題と解答の入力が完了したら**submit**を押してください。
![InkedADD_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/12841bf2-a145-df47-2e15-ec9dcc145561.jpeg)

![Inked問題作成_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/8fd88daf-adee-5475-3fb1-dd745b930f6f.jpeg)

これだけでそれっぽいものができます。
![それっぽい合体.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/91ec4c52-46b5-5560-e043-7e57fdbbaf72.png)



あとはお好みで文字の表示や背景色などを調整していけば完成です。

<details><summary><font color="Green"><b>デフォルトで入っていたクイズの消し方</font></b></summary><br>
テンプレートを使うとテンプレートにもともとあったクイズが入ったままになっていますので気になる場合は消しましょう。

![Inkedそれっぽい_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/5457c09d-cbd1-bb0c-749c-dcf6b64055c2.jpeg)

データテーブルから「Quizzes」をクリック
上から三つのデータを選択しキーボードの「deleteキー」を押すと消すことができます。

![消す.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/0f12bc17-2531-406c-da5d-014c797566da.png)


</details>
<details><summary><font color="Green"><b>背景色の変更</font></b></summary><br>

設定から「Appearance」をクリック
ここから背景色など変更ができます。
![背景色.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/d70e1d49-41e5-221b-74ef-f74153961981.png)

</details>

**※注意点**
デフォルトの状態だと問題文が長いと問題を表示した時に問題文が途中で切れて読めません。
![クエスチョン.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/c8e3b67e-4a31-8c16-42d7-e74caceed39d.png)

これは問題文が「Choice」内の **「Label」** に記載されているからです。
問題文は **「Text」** で別で用意しましょう。

![Inked問題文解決2_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/f06a49e1-2beb-ac42-9a17-e899433bff41.jpeg)
![テキスト追加.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728013/509eaba2-8a31-7af4-cacf-179998450d68.png)



# 部署メンバーの反応

* 同僚Aさん
>⭕おもしろいと思う。資格などの試験勉強にも使えそう。
>❌もっとたくさん問題を用意してもらって、3択より4択クイズにしてほしい。

⇒私も思ってましたが問題ってつくるの難しいんですよね…
　正直アプリより問題作りのほうが時間かかりました…
　今後問題作り頑張ります！

* 同僚Bさん
>⭕テキストだとなかなか手に取らないのでアプリだと手軽に学べたり復習できて良い。
>❌問題文見れないところあるよ

⇒Bさんのおかげで問題文が途中で切れてしまっていることに気付き修正することができました。

* 上司Cさん
>⭕すごいな！アプリなんて作るのに時間かかったんじゃない？
　 大事な法律についていつでもどこでも学習できるアイディアは良い。
　 研修で問題を出すときなんかにも使えそうだから他のジャンルのクイズも作ってほしい。
>❌一部「？」と思う問題があった。
　 問題の作り方を間違えると間違った認識、覚え方をされる可能性があるので注意が必要。
　 もし社内ルールなどをクイズにする際は手軽だからより簡単に情報流出しやすそうなのでその点も注意が必要。

⇒上司にも基本的にはお褒めの言葉をいただけました。
　ただ問題文やクイズのジャンルには細心の注意を払って作っていかないといけませんね。

# 作成してみて
今までも研修用に紙媒体でテストなど作成したことはありましたが印刷や回収、採点など大変でした。
最初はそこまで考えていませんでしたが、アプリなら登録したユーザーにはいつでも自分のスマホで参加でき、その場ですぐに結果もわかるので上司からのフィードバックにもあったように研修などでも使いやすいかもと思いました。
クイズ内容も簡単に追加・更新していけるので今後もクイズ内容をアップデートしていきたいと思います。
Glideは様々なテンプレートがあるおかげで意外と簡単にアプリを作ることができます。
ぜひ皆さんもオリジナルのアプリ作りにチャレンジしてみてください。

以上
最後まで読んでいただきありがとうございます。
少しでも何かの参考になれたら幸いです。
今後もいろいろと挑戦して発信できたらと思います。よろしくお願いします。