サイゼリヤ1000円ガチャをつくってみた(Heroku + Flask + LINEbot)
少し前に上記記事のサイゼガチャが流行りましたね。
そのサイゼガチャをスプレッドシートとGlideappsのみで概ね再現しました。
https://saizeriya.glideapp.io/
アプリの元となるスプレッドシート
この記事ではサイザガチャを再現するために行った工夫を紹介します。
最初に
スプレッドシートとGlideappsの可能性に挑戦するためにGASを一切使わないという一種の縛りプレイで作成しました。
はっきり言って適宜GASを組み合わせたほうが簡単です。
例: 1000円以内でメニューを無作為に選ぶ部分をGASに切り出すなど
また、今は１箇所に出力されたガチャの結果を共有しているため、誰かが引き直すと自分の画面も更新されます。
(まあ引き直せばええやろの精神)
サイゼガチャの仕様
- 1000円以内で無作為にメニューを選ぶ
- ユーザの操作を起点にメニューを選び直す
- 結果をtwitterでシェアする
1つずつ実装方法を紹介します。
1000円以内で無作為にメニューを選ぶ
メニューは次のように連番のidを付与してmenu_masterシートに保持しています。
無作為に選ぶ場合はスプレッドシートのRANDBETWEENとVLOOKUPを使います。
=RANDBETWEEN(1, メニュー数) #以下xとする
これで無作為にいずれかのidを取得できます。
このid xとVLOOKUPを利用することで無作為に選択したメニューの値段を取得できます。
=VLOOKUP(x, マスターデータ範囲, 値段列数, TRUE)
その値段が1000円以下であればid xのメニューはガチャ結果に加える。
2品目以降は無作為にidと値段を取得し、
N品目目の値段 + N-1品目までの合計 < 1000
であればガチャ結果に加え、そうでなければ加えません。
終了条件を工夫して設定してもよいですが、上記操作を100回繰り返すことで1000円を超える直前までメニューを追加する仕様に近い動作を実現しています。
具体的にはアプリの元となるスプレッドシートの下図部分を参考にしてください。
ユーザの操作を起点にメニューを選び直す
Glideappsはフォームやプルダウンリストなどの形式からユーザの入力を受け付けてスプレッドシートに反映することができます。
また、前述のRANDBETWEENは同一スプレッドシート内の値に変更が発生したときに、再度乱数を返します。
これにより、ユーザの操作に合わせたガチャの引き直しを実現できます。
入力を受け付ける方法はいくつか存在しますが、今回はシンプルなボタンのようなUIにもっとも近いトグルスイッチを設定します。
トグルスイッチの状態が反映されるセルはこちら。
結果をtwitterでシェアする
Glideappsではシェア用URLをlinkを開くボタンやlinkに設定することでtwitterシェアボタンを実現できます。
シェア用URLについてはツイートリンク生成ツールで作ってみると理解しやすいでしょう。
まずシェア時のテキストをスプレッドシートで作ります。シンプルな文字列連結は＆でできますが、範囲内の複数セルを連結させるときはJOINを利用しましょう。
実際の関数がこちら。
=JOIN(",",INDIRECT("_choices!C2:C"&COUNTA('_choices'!B2:B)))&"%0A"&"計"&": "&$C$2&", "&$D$2&"%0A"
# 例: スープ入りトマト味ボンゴレ(季節限定),ミルクジェラート%0A計: 957 円, 786 kcal%0A
# %0Aは改行です
Glideappsでの操作は次のとおりです。
twitterのURLを判別してロゴをつけてくれるのが嬉しいですね。
最後に
Glideappsでも動的なアプリが作れることを証明できました。
みなさんもどんどん使いましょう・・・と言いたいところですが、前述した通りうまくGASに切り分けて実装したほうが簡潔でおすすめです。
Glideappsはまだまだ発展途上で、アップデートの頻度も高いので目が離せませんね！
他にもGlideappsでアプリを作るときはこちらの記事も参考にしてみてください。
GlideでスプレッドシートからPWAを作る際に知っておきたい７つのこと
参考: 他のGlideapps製アプリ
- カンファレンスHPをアプリ化した静的アプリ: https://rubykaigi2019.glideapp.io/
- ブロガーコミュニティのRSSリーダのようなアプリ(GAS併用): https://w-b-e-w.glideapp.io/