GlideのButtonにGAS仕込んでみたハナシ🍑ランダムに並べ替え編

チサさんと先日アプリお披露目会をしまして(❁´ω`❁)
好きなものの話で盛り上がれるのは楽しいですね～

そのときに、体重管理アプリで運動メニューをランダムに表示させられないかな？という話になったんです。
その上で、今日はこの5つ！とかできたらいいなと。

チサさん、画像お借りします🙏

チサさんは、私が思いもしなかったことを思いつくから面白い～！

どうやってやったらいいかな～と考えていたのですが、Glideの設定と合わせてみたらいい感じにできたので、記録しておきます🎵

最終、こんなものができます！

① スプレッドシート側の準備

こんな感じのスプレッドシートを準備。
「チェック用」はGlide側でチェックボックスを使うので、true/falseを記録する用の列です。

② GASを書く

拡張機能メニュー→Apps Script を選択。
こんな感じのGASを書く。

関数名の「doGet」が大事です✨

function doGet() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('メニュー');

  const rangeDelete = sheet.getRange("B2:B12");
  rangeDelete.clearContent();

  const rangeMenu = sheet.getRange("A2:A12");
  rangeMenu.randomize();

  const html = '<h1>本日のメニューを表示しました！</h1>';
  return HtmlService.createHtmlOutput(html);
};

1. チェックボックス用のB列の値をクリア

2. A列のメニューの値をランダムで並べ替え

3. 処理終了のメッセージをブラウザで表示

という流れです。

③ GASをウェブアプリにする

右上のデプロイ→新しいデプロイを選択

設定→ウェブアプリを選択

ウェブアプリの説明を入力→デプロイ

ウェブアプリの方のURLをコピー→完了

④ Glide側の設定

STYLEはDetailsにしておきます。

初期値で入って来るコンポーネントは一度すべて削除して、Inline ListとButtonを配置。

Inline Listの方の設定はこんな感じ。

OPTIONSのLimit number of items で、表示する数を設定できます！
ここはベタ打ちなので、変数的に設定することはできません😢

⑤ ButtonにGASを仕込む

ButtonのACTIONをOpen Linkにして、コピーしておいたウェブアプリのURLを貼ります。

これで完成です！✨

⑥ ボタン押してみる

試しにチェックボックスにチェックを入れてみると…

スプレッドシート側はこんな感じ。

ボタンを(。・Α・)σﾎﾟﾁｯ

しばらくすると、ブラウザで処理完了のメッセージが表示されます。

ブラウザを閉じて、スプレッドシートを確認すると…

並び変わってる！チェック消えてる！！🙌✨

ちょっと反映に時間がかかりますが、アプリの表示も変更されました🎵

⑦ 所感

あぁ楽しい、Glide楽しい…🤤

ListのSORT DATAにRandomlyというランダムに並べ替える設定があるのですが、これだと開くたびに値が変わってしまうんですね…

スプレッドシート関数のRANDBETWEEN×VLOOKUPだと、スプレッドシートが更新されるたびにRANDBETWEENの値も更新されてしまって💦

今回は一度決めた値はそのまま残しておきたかったので、ウェブアプリを活用しました🎵

チサさんはさらに、危険度で表示するメニューを数を変えたいということだったんだけど、GASが今よりちょい複雑になるのでnoteに書くのはここまでで😆

私はひたすら記録して行くアプリしか作っていないのですが、チサさんは入力した後データクリアとか、設定用のタブとか、私の使い方とは全然違うことをしていて、とても勉強になります。

情報交換できるのはいいですね～😍
これからも私にアイディアをください(｀・ω・´)ｷﾘｯ

＊GASとの連携は、こちらのnoteでもやっています！＊
GlideのButtonにGAS仕込んでみたハナシ🍑データクリア編
GlideのButtonにGAS仕込んでみたハナシ🍑メール送信編