![見出し画像](https://assets.st-note.com/production/uploads/images/85844835/rectangle_large_type_2_c463b39a68a938adba4c6cb553ec18e1.png?width=1200)
GlideのButtonにGAS仕込んでみたハナシ🍑ランダムに並べ替え編
チサさんと先日アプリお披露目会をしまして(❁´ω`❁)
好きなものの話で盛り上がれるのは楽しいですね~
そのときに、体重管理アプリで運動メニューをランダムに表示させられないかな?という話になったんです。
その上で、今日はこの5つ!とかできたらいいなと。
![](https://assets.st-note.com/img/1661903519530-7giTRy7E85.png)
チサさんは、私が思いもしなかったことを思いつくから面白い~!
どうやってやったらいいかな~と考えていたのですが、Glideの設定と合わせてみたらいい感じにできたので、記録しておきます🎵
最終、こんなものができます!
![](https://assets.st-note.com/img/1661903990192-fBDMEyMVz1.png)
① スプレッドシート側の準備
こんな感じのスプレッドシートを準備。
「チェック用」はGlide側でチェックボックスを使うので、true/falseを記録する用の列です。
![](https://assets.st-note.com/img/1661904035771-JAtXJNhRvH.png)
② GASを書く
拡張機能メニュー→Apps Script を選択。
こんな感じのGASを書く。
![](https://assets.st-note.com/img/1661904130264-GZrODH16Zh.png?width=1200)
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);
};
チェックボックス用のB列の値をクリア
A列のメニューの値をランダムで並べ替え
処理終了のメッセージをブラウザで表示
という流れです。
③ GASをウェブアプリにする
右上のデプロイ→新しいデプロイを選択
![](https://assets.st-note.com/img/1661904372642-jIwNdPlgjI.png)
設定→ウェブアプリを選択
![](https://assets.st-note.com/img/1661904406495-mQcNfuPGur.png)
ウェブアプリの説明を入力→デプロイ
![](https://assets.st-note.com/img/1661904524473-usuB4TccrL.png?width=1200)
ウェブアプリの方のURLをコピー→完了
![](https://assets.st-note.com/img/1661904723002-DOIAO0G1CY.png?width=1200)
④ Glide側の設定
STYLEはDetailsにしておきます。
![](https://assets.st-note.com/img/1661904790093-oTaH5LKnIo.png)
初期値で入って来るコンポーネントは一度すべて削除して、Inline ListとButtonを配置。
![](https://assets.st-note.com/img/1661904901703-eI3sW4LQwW.png)
Inline Listの方の設定はこんな感じ。
![](https://assets.st-note.com/img/1661905073367-baAVIcAONt.png)
OPTIONSのLimit number of items で、表示する数を設定できます!
ここはベタ打ちなので、変数的に設定することはできません😢
⑤ ButtonにGASを仕込む
ButtonのACTIONをOpen Linkにして、コピーしておいたウェブアプリのURLを貼ります。
![](https://assets.st-note.com/img/1661905324174-plM0pfN3Fa.png)
これで完成です!✨
⑥ ボタン押してみる
試しにチェックボックスにチェックを入れてみると…
![](https://assets.st-note.com/img/1661905408526-387aw3sM4v.png)
スプレッドシート側はこんな感じ。
![](https://assets.st-note.com/img/1661905434724-uyxLGJTpPN.png)
ボタンを(。・Α・)σポチッ
![](https://assets.st-note.com/img/1661906485453-drD1jGAwVX.png)
しばらくすると、ブラウザで処理完了のメッセージが表示されます。
![](https://assets.st-note.com/img/1661905508015-m3VDLezxgb.png)
ブラウザを閉じて、スプレッドシートを確認すると…
![](https://assets.st-note.com/img/1661905555055-LZzVPcO200.png)
並び変わってる!チェック消えてる!!🙌✨
ちょっと反映に時間がかかりますが、アプリの表示も変更されました🎵
![](https://assets.st-note.com/img/1661905603057-Hy1kZOizIO.png)
⑦ 所感
あぁ楽しい、Glide楽しい…🤤
ListのSORT DATAにRandomlyというランダムに並べ替える設定があるのですが、これだと開くたびに値が変わってしまうんですね…
スプレッドシート関数のRANDBETWEEN×VLOOKUPだと、スプレッドシートが更新されるたびにRANDBETWEENの値も更新されてしまって💦
![](https://assets.st-note.com/img/1661906747056-gQF2izYQXo.png)
今回は一度決めた値はそのまま残しておきたかったので、ウェブアプリを活用しました🎵
チサさんはさらに、危険度で表示するメニューを数を変えたいということだったんだけど、GASが今よりちょい複雑になるのでnoteに書くのはここまでで😆
私はひたすら記録して行くアプリしか作っていないのですが、チサさんは入力した後データクリアとか、設定用のタブとか、私の使い方とは全然違うことをしていて、とても勉強になります。
情報交換できるのはいいですね~😍
これからも私にアイディアをください(`・ω・´)キリッ
*GASとの連携は、こちらのnoteでもやっています!*
GlideのButtonにGAS仕込んでみたハナシ🍑データクリア編
GlideのButtonにGAS仕込んでみたハナシ🍑メール送信編
事務員が少しの背伸びでできる効率化を目指す🌈✨ 自分の好きなものを、楽しく発信していきたいです! いただいたサポートは学習費にあてさせていただきます🥰