Glide&スプレッドシートで百人一首の初心者向けスマホアプリを1時間で作った

# 作ったもの
https://itchy-cats-3526.glideapp.io/
iOSの場合はSafariで開いて「ホーム画面に追加」，Androidの場合はChromeで開いて「アプリをインストール」でアプリとして使えるようになる，PWAです。PCでも動きを確認することができます。


### 機能
百人一首の決まり字を一覧表示します。
タップするとゴロ合わせや歌の詳細を確認できます。
登録，ログイン不要の簡易アプリです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632954/46f6b1ec-d6a2-7fff-7d95-7d7f10719971.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632954/a1ffeefa-bcc7-f98f-88dc-36931925abb4.png)


### 作った経緯
[**前回作った LINE Bot**](https://qiita.com/AmaiOmikan/items/923e56aa1209ecc97d64) は検索するには便利ですが，以下の欠点がありました。

- 初心者がどの札から覚えていいかわからない。
- 「LINE Botって何？」状態の人は割といる。

Glideを使ってNocodeで簡単なものから始めてみようと思い，作りました。


# 画像の準備
### 画像を用意する
ゴロ合わせの画像は，4年前に自分で作ったものがあったので，改良して作りました。
Keynoteで作ったものをPNG保存しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632954/f36d5989-6092-fd5c-6aa2-04dfa8edbb41.png)　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632954/fb25a022-d44d-d78f-e633-3c57cc36955a.png)

取り札の画像は以下のフリーソフトで作っています。
https://pjmtdw.github.io/kazesomiso/


### 画像をアップする
以下の記事を参考に，画像を置く場所として [**Netlify**](https://app.netlify.com/) を使いました。

https://www.ultra-noob.com/blog/2020/2020-06-05-LINE%20Bot%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E9%80%81%E4%BF%A1%E3%81%99%E3%82%8B%E3%81%A8%E3%81%8DNetlify%E3%81%AB%E7%94%BB%E5%83%8F%E3%82%92%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%A6%E9%80%81%E4%BF%A1%EF%BC%8BGoogle%20%E3%83%89%E3%83%A9%E3%82%A4%E3%83%96%E3%81%8C%E3%83%80%E3%83%A1%E3%81%AA%E7%90%86%E7%94%B1%E3%80%82/

ファイル名には`goro_1.png`のように，歌番号をつけてあります。
(同様にして，一覧ページのサムネ画像も作っています)


※追記：今ではGlide自体に画像アップできるようですね。


# スプレッドシートの準備
LINE Botのときにも使って慣れていたので，データベースとしてGoogleスプレッドシートを使いました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632954/a8f780c8-5465-669d-6435-94a9bbace385.png)
百人一首だとデータの追加がないので，アプリ制作の入門としてやりやすいですね。


# Glideでアプリを作っていく
### とりあえずスプレッドシートを読み込ませる
https://go.glideapps.com/
Googleアカウントからの登録もできます。

Glideを開いたら，New App → Google Sheets → Continue
作成したスプレッドシートを選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632954/1c447a81-17c4-40f1-8852-6b1c8ce4b163.png)　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632954/268dfdde-5806-1f82-1119-1c6fde6fa357.png)

何もしてなくても，割とそれっぽいものができた。
スマホ画面をクリックするだけで，挙動を確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632954/5a83c919-944e-964a-c6b1-8798c054b6fd.png)


### リスト画面の設定
右のSTYLEの設定を色々と変えることで，様々な表示ができます。
今回はListのままが良さそうです。

右上の「Options」タブで，GROUPの項目を「Group by 枚数」としました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632954/864f0dd2-ca70-0484-6599-aee1b39cb18e.png)

札が「1枚札」「2枚札」というようにグループ分けされて表示されるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632954/d4da6619-cdb9-7504-9411-1daf5acce35f.png)


### 詳細画面の設定
スマホ画面で適当な項目をクリックすると，詳細ページになります。
まだごちゃごちゃしているので，並べ替える必要がありそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632954/246c38e6-5da4-a5fc-20d1-44c99d6751e5.png)

左の項目をドラッグアンドドロップして並び替えたり，×ボタンで削除ができます。
また，各項目をクリックすると右側で項目ごとの設定ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632954/01c3d86b-2dd5-6853-7db3-7862d2ffc8e5.png)


### アプリ全体の設定
中央上部の六角形マークをクリックすると，アプリ全体の設定画面が開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632954/21ef0af3-6b60-af99-7a77-e0d71816db4f.png)

今回，主に設定したのは，上の3項目です。

- Appearance:配色の変更
- App info:アプリアイコン，アプリ名，作者名の設定
- Privacy:登録の必要の有無の設定など(今回は誰にでも使えるよう，Publicにしました)

できたら，右上のPublishで公開できます。
URLやQRコードが出てくるので，使ってほしい人に教えましょう。


# 今後やりたいことなど
NocodeツールGlideを使うことで，1時間ほどで簡易アプリを開発できました。
(画像の用意には4,5時間くらいかかりましたが…)
機能は限定されますが，ちょっとしたアプリ作りには便利ですね。

百人一首に興味を持った人が「百首覚える」という最初のハードルを越えやすくなればと思います。

4月からプログラミングスクールに通い，Webアプリを1から作れるよう開発技術を磨いていきます。
学校教育，そして趣味の競技かるたの世界をより豊かにしていくための開発ができたらと思います。