スプレッドシートとGlideappsだけでサイゼリヤ1000円ガチャを再現する技術

[サイゼリヤ1000円ガチャをつくってみた(Heroku + Flask + LINEbot)](https://qiita.com/marusho_summers/items/a2d3681fac863734ec8a)
少し前に上記記事のサイゼガチャが流行りましたね。

そのサイゼガチャをスプレッドシートとGlideappsのみで概ね再現しました。
https://saizeriya.glideapp.io/
![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112173/ba300588-f9e5-d724-9a3d-738387a97cf9.png)
[アプリの元となるスプレッドシート]
(https://docs.google.com/spreadsheets/d/1d_QCSrBIoXujAA1s2Gl8sk3aQH_Pe-8_ypfJ_QdQ70M/edit?usp=sharing)

この記事ではサイザガチャを再現するために行った工夫を紹介します。

## 最初に
スプレッドシートとGlideappsの可能性に挑戦するためにGASを一切使わないという一種の縛りプレイで作成しました。

はっきり言って適宜GASを組み合わせたほうが簡単です。
例: 1000円以内でメニューを無作為に選ぶ部分をGASに切り出すなど

また、今は１箇所に出力されたガチャの結果を共有しているため、誰かが引き直すと自分の画面も更新されます。
(まあ引き直せばええやろの精神)

## サイゼガチャの仕様
- 1000円以内で無作為にメニューを選ぶ
- ユーザの操作を起点にメニューを選び直す
- 結果をtwitterでシェアする

1つずつ実装方法を紹介します。

## 1000円以内で無作為にメニューを選ぶ
メニューは次のように連番のidを付与してmenu_masterシートに保持しています。
![メニューデータ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112173/a02cecc4-b962-0835-8938-7fa7ce008d22.png)

無作為に選ぶ場合はスプレッドシートの[RANDBETWEEN](https://support.google.com/docs/answer/3093507)と[VLOOKUP](https://support.google.com/docs/answer/3093318)を使います。

```
=RANDBETWEEN(1, メニュー数) #以下xとする
```
これで無作為にいずれかのidを取得できます。
このid xと[VLOOKUP](https://support.google.com/docs/answer/3093318)を利用することで無作為に選択したメニューの値段を取得できます。

```
=VLOOKUP(x, マスターデータ範囲, 値段列数, TRUE)
```

その値段が1000円以下であればid xのメニューはガチャ結果に加える。

2品目以降は無作為にidと値段を取得し、
N品目目の値段 + N-1品目までの合計 < 1000
であればガチャ結果に加え、そうでなければ加えません。

終了条件を工夫して設定してもよいですが、上記操作を100回繰り返すことで1000円を超える直前までメニューを追加する仕様に近い動作を実現しています。

具体的には[アプリの元となるスプレッドシート]
(https://docs.google.com/spreadsheets/d/1d_QCSrBIoXujAA1s2Gl8sk3aQH_Pe-8_ypfJ_QdQ70M/edit?usp=sharing)の下図部分を参考にしてください。
![screenshot-docs.google.com-2019.07.05-01-14-50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112173/3373e101-e441-7db2-6e71-81ed82a09a33.png)

## ユーザの操作を起点にメニューを選び直す
Glideappsはフォームやプルダウンリストなどの形式からユーザの入力を受け付けてスプレッドシートに反映することができます。
また、前述の[RANDBETWEEN](https://support.google.com/docs/answer/3093507)は同一スプレッドシート内の値に変更が発生したときに、再度乱数を返します。
これにより、ユーザの操作に合わせたガチャの引き直しを実現できます。

入力を受け付ける方法はいくつか存在しますが、今回はシンプルなボタンのようなUIにもっとも近いトグルスイッチを設定します。
![screenshot-go.glideapps.com-2019.07.05-01-23-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112173/7fa3bd70-54c2-1f97-b3f2-cbae4a73121d.png)

トグルスイッチの状態が反映されるセルはこちら。
![screenshot-docs.google.com-2019.07.05-01-24-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112173/ecbe5d14-82de-524f-e66f-b14c3e23ff9d.png)


## 結果をtwitterでシェアする
Glideappsではシェア用URLをlinkを開くボタンやlinkに設定することでtwitterシェアボタンを実現できます。
シェア用URLについては[ツイートリンク生成ツール](https://tools.ikunaga0.com/tweet-link/)で作ってみると理解しやすいでしょう。

まずシェア時のテキストをスプレッドシートで作ります。シンプルな文字列連結は＆でできますが、範囲内の複数セルを連結させるときは[JOIN](https://support.google.com/docs/answer/3094077)を利用しましょう。
実際の関数がこちら。

```
=JOIN(",",INDIRECT("_choices!C2:C"&COUNTA('_choices'!B2:B)))&"%0A"&"計"&": "&$C$2&", "&$D$2&"%0A"
# 例: スープ入りトマト味ボンゴレ(季節限定),ミルクジェラート%0A計: 957 円, 786 kcal%0A 
# %0Aは改行です
```

Glideappsでの操作は次のとおりです。
![screenshot-go.glideapps.com-2019.07.05-01-35-26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112173/652d22a7-22a7-3d35-2891-dc2719f7750c.png)

twitterのURLを判別してロゴをつけてくれるのが嬉しいですね。


## 最後に
Glideappsでも動的なアプリが作れることを証明できました。
みなさんもどんどん使いましょう・・・と言いたいところですが、前述した通りうまくGASに切り分けて実装したほうが簡潔でおすすめです。
Glideappsはまだまだ発展途上で、アップデートの頻度も高いので目が離せませんね！

他にもGlideappsでアプリを作るときはこちらの記事も参考にしてみてください。
[GlideでスプレッドシートからPWAを作る際に知っておきたい７つのこと](https://qiita.com//ngmt83/items/5581a177d13540237623)

### 参考: 他のGlideapps製アプリ
- カンファレンスHPをアプリ化した静的アプリ: https://rubykaigi2019.glideapp.io/
- ブロガーコミュニティのRSSリーダのようなアプリ(GAS併用): https://w-b-e-w.glideapp.io/