めざせ一発合格！！Glideでクイズアプリ作成

金融業界で働いている事務員兼主婦です。
いつもは職場の業務効率UPのため、ノーコードツールの**Glide**で管理簿アプリ作成などにチャレンジしています。

![ゴールド ブラウン 鮮やかなプロフェッショナルスタイル メモ Docsのバナー (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/0465c89c-8b1e-c02e-3201-6f3ac2235ee3.png)


https://qiita.com/kiku_2005/items/67f67ca8340dab7206de

https://qiita.com/kiku_2005/items/953d67e6c7c75a285b32

https://qiita.com/kiku_2005/items/8483dc00e7d1af716b94

https://qiita.com/kiku_2005/items/10c22d8b6b6c32ebf0be


# Let's一発合格！Glideでクイズアプリ作成
今回は、自動車免許取得へ向けて息子たちが頑張っているところだったので、**Glide**を使用して試験勉強用にクイズアプリを作成してみることにしました。
![343a4ba3d942a0e6541b05a2113a8fc6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/93918c88-0763-0889-79da-734d1857f7bd.jpeg)



# 完成品


https://x.com/kiku_2005/status/1762108942917021999?s=20





## 使用ツール
* Glide
https://www.glideapps.com/
* Googleスプレッドシート

# 製作開始
## １. Glideに使用するGoogleスプレッドシートを作成
今回は標識問題と学科問題の２つのシートを準備しました。
➀標識問題
![クイズ㉒.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/bec567fd-d38e-fa14-0dda-72dbb324d0ea.png)
➁学科問題
![クイズ㉓.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/63774341-ffea-31a2-52aa-0a0b14cb4470.png)


## ２. Glideの設定

基本的な使い方は下記を参考にしています。


https://hikari-sedori.com/glide2/

`＋New app`を押して新規作成します。
![クイズ㉔.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/6db6e5bb-593a-5374-23c8-d86627ff7c9b.png)

名前を付けて、今回はモバイル版を選択します。
![クイズ㉕.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/8da2b06d-7418-460b-46a9-55d42a6dbc0e.png)

連携させるソースはGoogle Sheetsを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/a4f41719-54da-b6af-b5bf-a9edb1a46e8e.png)


### ➀標識問題
* 標識問題については画像imageを元に問題を出題するようにするため、はじめに標識問題の`Data`画面で`image`欄を１つずつダブルクリックし画像をアップロードしていきます。
![クイズ⑪.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/aebefe1b-64a0-84e6-71be-bfb5fe2b2dcc.png)
![クイズ㉑.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/6abcfdbe-c1d8-611f-a842-1ee5192c3b7b.png)
※スプレッドシートの方を確認するとURLで登録されていきます。
![クイズ①.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/9885d094-f1e0-47de-4eeb-8bff9b7479f6.png)

* SCREENの`Source`を標識問題シートからに選択し、`Label`を「標識問題」と表示させ`icon`を選択します。`Layout`は`Grid`スタイルにして画像から問題を出題させるようにします。
![クイズ➂.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/1cde45c2-d972-e6db-666e-682aa3b20b33.png)


* 画像を選択して詳細設定をしていきます。問題文章は`Text`コンポーネントを選択し「この標識は？」と問題文を入力し表示させます。デザインスタイルは`Headline Large`を選択して少し文字を大きめにして見やすくし、`Align`で左側に寄せて表示させます。
![スクリーンショット 2024-02-25 003136.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/8fbd4041-d106-1c0a-fcdd-6e298ccd2f0f.png)

* `image`コンポーネントを選択し画像`image`を`Full`で大きめに中心に表示させるよう設定します。
![クイズ㉖.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/5461abbf-ed36-d50f-6468-4ef8206674cc.png)


* 答えは`Switch`コンポーネントを選択し、`Label`に「答え」と入力し表示させます。
![クイズ⑥.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/cef83b26-c940-5163-abba-d55f2d8124b9.png)

* 答えの表示は`Hint`コンポーネントで設定し、オプションで`Mode`を`Dager`に選択して赤字で表示させます。
![クイズ⑨.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/5ec99f39-055a-d5a4-7b95-ba36ff05b3d5.png)

* オプションの`＋Add Condition`で`Swich`が入れば答えを赤字表示させるように`is`と`true`の設定をして完成です。
![クイズ⑩.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/f91dfde9-a3c4-c68c-dbac-d8be9a56aa0c.png)




### ➁学科問題
* 続いてSCREENの`Source`を学科問題シートからに選択、`Label`を「学科問題」と表示させ`icon`を鉛筆マークにしてみました。問題を一覧表示させるように`Cheacklist`スタイルに選択します。
![スクリーンショット 2024-02-25 004008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/269a6edb-078b-f3f5-7c98-9e8152431c0b.png)

* `Text`を選択し学科問題から１問ずつ問題を表示させます。Styleは丁度良い大きさの`Headline Medium`を選択し、`Aline`で左側表示にしています。
![スクリーンショット 2024-02-25 004057.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/bd49d7bd-f914-c815-fac7-30f8aa78e2f9.png)

* 答えは`Switch`を選択し、`Label`に「答え」と入力し表示させます。
![スクリーンショット 2024-02-25 004140.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/86a7a6df-1582-26d4-cf3c-156798e5565c.png)

* 回答の表示は`Hint`コンポーネントで設定し、オプションで`Mode`を`Dager`に選択して赤字で表示させます。
![スクリーンショット 2024-02-25 004220.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/22f5f80f-6e5e-7c05-34d0-74f157b16bca.png)

* オプションの`＋Add Condition`で答え`Swich`が入れば回答を赤字表示させるように`is`と`true`を選択して設定します。
![スクリーンショット 2024-02-25 004303.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/fccabe72-9253-f1fe-447c-9b59cf48e847.png)

* 詳細説明も同じく`Hint`コンポーネントで設定、オプションの`Mode`を`Dager`に選択して赤字で表示させます。
![クイズ⑰.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/93efb393-fd11-60a4-9e87-166640c2d158.png)

* オプションの`＋Add Condition`で答え`Swich`が入れば詳細説明も一緒に赤字表示させるように`is`と`true`を選択し設定したら完成です。
![クイズ㉗.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/f0ecddec-9aed-679d-6e66-9da7af87a41e.png)

# 周囲からの評判
ママ友や息子の友人たちからは「コレ使える～！」と好評でしたが、ウチの息子だけが「問題数が全然足りないよ。」との辛口コメント:expressionless:でした。

![gakkari_tameiki_woman (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/d3041f66-e577-e01b-e003-774f504ba4cf.png)



# 感想
今回は試しにひっかけ問題を参考に作成してみたので、圧倒的に問題数が足りませんでした。これから増やしていきます:triumph:
他にも〇✖形式や四択式問題にも応用できそうなので、職場や自分の試験問題にも復習を兼ねながら作成できそうです。あらためて**Glide**は幅広いな～と感じました。どこまで活用できるのか、また引き続き色々とチャレンジしていきたいと思います。

![タイトルなし.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/e3e7d060-5027-f14b-c6e5-1e404cf1cdf1.jpeg)



# 参考資料

https://hikari-sedori.com/glide-visibility/

https://qiita.com/akao-dx/items/e1f333860aa238ec1ac0

https://rakuraku-menkyo.jp/exam/gakka-scoreup/

http://carlicense.shikaku-shinsei.com/2019/11/16/post-274/


ここまでお付き合い頂きまして、ありがとうございました。