Googleスプレッドシートで使えるスピンボタン検証 -1

2023年1月19日 21:07

Excelにはあるけど Googleスプレッドシートには無い機能ってなーんだ？

ぶっちゃけ、いっぱいありすぎですよねｗ

テーブル機能とかシートの作業グループ、PowerQueryなどなど、数え上げればキリがないくらい Excel には機能が充実しています。

これに関しては Googleスプレドシート使いの mirも認めてまして、一部の作業は まだまだ Excel の方が便利で抜け出せないままですし、ぶっちゃけプレゼン資料作成は Powerpoint メインから変わってません。（なるべく意識して Googleスライドも使うようにしてますが）

でも、今回取り上げるのは Excelの中では比較的地味目な スピン機能（スピンボタン）。

あまり複雑な機能だと Googleスプレッドシートに手作業で実装するのは、ハードルが高いですし、この辺りの「ちょっと便利だけど無くても不便では無い」軽めなネタが良いかなと。

スピン機能を GAS や関数で Googleスプレッドシートに実装する方法を検証し、満足いくものが作れるのか？ どのアプローチがベストなのか？を考えてみたいと思います。

スピン機能（スピンボタン）とは？

Webの入力フォームとかで数字を入れる際に使う ▲ ▼ ボタンで増減できるアレですね。 Excelでは昔から機能として存在しており、活用している会社（個人）も多いんじゃないでしょうか？

Excelでの使いどころとしては、Excel方眼紙で作成したフォームで数字を入れる箇所に使い誤入力防止や入力の簡便性を向上。

もしくは、データテーブル＆関数と組み合わせることで、カチカチと数値を動かして、紙をめくる感覚で視覚的にわかりやすいデータを表示させたりする、カード型DBっぽい使い方があります。

上の画像ですが、下の部分は、VLOOKUP か XLOOKUP （もしくはINDEX）で別シートのデータテーブルから、番号に合致する横一行分のデータをもってきて、タイトルに応じた値を取得する式で出来ます。

今回の本題ではないので式の説明は省きますが、この表示部分は Googleスプレッドシートでも同じように数式で作れます。

問題となるのが、クリックしている上の上下ボタン部分と連動して変化するA2セルの数字の部分。これがスピンボタンなんですが、残念ながら Googleスプレッドシートにはありません。

個人的には数値を手入力するか、プルダウンで選択でもいいと思うんですが、どーしても使いたいという ~~老害~~　ユーザー がいたりします。

Excelの機能を大して使えてない人に限って、Excelでは出来るけど Googleスプレッドシートでは出来ないことの文句を言うんですよね。。

ま、愚痴はいいとして今回は Googleスプレッドシートでスピンボタンを実装する為の検証を 4回に分けて記事したいと思います。

今どき「スピ〇」って言ったら スピルだろ！っていわれそうですし、スピン機能ごときで全4回？ とネタの水増しを疑う方がいるかもしれませんｗ

でも、4種類のアプローチを通じて GASの基礎や関数の応用について理解が深まると思いますのでお付き合いください。

Q. セルの数字を増減させるスピンボタンを実装したい

・A2セルの数字スピンボタンで増減させたい

（以下は追加要件）
・できれば Excelみたいにサクサク動かしたい
・できればスマホ（アプリ版）でも使えるとよい
・増減の値はカスタムできるとよい。 1ずつ以外に5ずつとか。
・セル固定ではなく、アクティブセルでスピン機能使えたりする？

今回のスピン機能お題の要件

とりあえずは機能として無いスピンボタンをまずは作って、可能であれば追加要件に対応していくって感じでしょうか。

以下の4つの方法で検証してみます。

GAS を割り当てたスピンボタンを作ってみる
モバイル対応 onEdit で動くスピンボタンを考える
関数でスピンボタンは出来るのか？
HtmlService使ってダイアログでスピン

満足いくスピン機能は実現できるでしょうか？

A1.GAS を割り当てたスピンボタンを作ってみる

まず、今回はネット上でよく見かける GASを使った定番の方法。

GAS を割り当てたスピンボタンを作ってみる

を試してみましょう。手順としては以下の通り。

今回は簡単なネタなんで、丁寧に書いていきます。

1. スプレッドシートでスピンボタンと連動させるセルを準備
2. スクリプトエディタでコードを書き保存
3. 初回の実行の際の承認をする
4. エディタ上から試しに実行し動作確認
5. 図形描写でボタンを作成、ボタンを配置
6. ボタンにスクリプトを割り当て
7. ボタンを押してテストする
8. 完成

GASを割り当てたスピンボタン作成の流れ

A1-1. スプレッドシートでスピンボタンと連動させるセルを準備

まずは、スピンボタンに連動して数字が変化するセルを決めます。スピンボタンを動かすことが優先なので、まずは連動させるセルは固定で良いです。

とりあえず A2セルとして、枠線で目立たせ、フォントを36、太字にすることで目立たせておきましょう。

隣の B2セルは UPとDOWN 2つのボタンを置く予定なので、セルの塗りつぶしで薄いグレーにしてやや縦長にしておきます。

ちなみに上記のように不要な罫線を消して 白キャンバスとして使いたい場合は、表示メニューから グリッド線のチェックを外せばOK。わざわざ罫線の色を変える必要はありません。

A2-2. スクリプトエディタでコードを書き保存

それではGASを書いていきましょう。

とりあえずは、実行したら A2セルの値を 1増やす、シンプルな アップボタン用のコードを書きます。

メニューの 拡張機能＞ Apps Script でエディタを開きます。

function 【関数名】(){
　【ここにコードを書いていく】
}

まずは関数名を myFunction から変えときましょう。

どういう関数名にしたらいいの？
日本語でもいいの？
spin button みたいに複数単語を使ってもいいの？

この辺りの疑問がある方は、「いつも隣にITのお仕事」さんがまとめてくれている、GASにおけるコード記述のお作法（ガイドライン）を読みましょう。とても参考になります。

とりあえずは、セルの値を 1増やすGASなので関数名を spinUp としておきましょう。

ついでにプロジェクト名を変更しておきましょう。

GASはプロジェクトの中にファイルがあり、ファイルの中に複数の関数（function)を記述できます。

プロジェクト　（初期値「無題のプロジェクト」）
　L　ファイル　（初期値「コード.gs])
　　　L　関数　（初期値「myFunction])

意識せずとも使えますが、プロジェクト名はわかりやすい名前にしておきましょう。ここは functionと違って日本語でも問題ないです。

またファイル名「コード.gs」は、最初のうちは そのままで問題ないです。
ファイルを複数使い分けるようなレベルになってきたら、名前の付け方をルール化していけば良いです。

コードを最初に書く際の基本的な解説も、「いつも隣にITのお仕事」さんが充実しています。ほんと凄いわ。

spinUp のコードを以下のように書きました。

//A2セルの値を 1増やす
function spinUp() {
  const sheet = SpreadsheetApp.getActiveSheet();
  const spinCell = sheet.getRange("A2");
  const value = spinCell.getValue();
  spinCell.setValue(value + 1);
}

解説は後でするので、まずは保存し実行ボタンを押してみましょう。

※ GASは必ず保存をする必要があります。

A1-3. 初回の実行の際の承認をする

初回の実行では色々コードの権限チェックをしているようで、少し待ち時間が長いです。

そして GASからスプレッドシートやその他Google Docsファイル類の操作、読み取りをする場合は、初回に権限の許可をする承認プロセスが必要となります。

今回の場合は GASからスプレッドシートの読み書きをするので、上記のような権限許可の承認プロセスが初回に発生します。

もちろんスプレッドシートからエディタを開くコンテナバインドスクリプトでも、エディタ内で完結するだけのコードなら承認プロセスは必要ありません。

ここの流れも「いつも隣にITのお仕事」さんを参考に。

リンク先に細かく書いてありますが、無料アカウントの場合は 安全でないみたいな表記が出てビビらせてきます。

自分で作ったスクリプト実行するだけなのに、なんか恐ろしい関所を通過しないといけない感じで、ちょっとした初心者殺しですね。

このスクリプト承認は、誰か一人（たとえばオーナー）が実行すればOK
ってわけじゃなく、実行する全ての人が必ず初回に通る試練ってのが厄介なんです。

作成したGASを使ってもらう場合、ユーザーに初回承認の流れを周知する必要があります。

A1-4. エディタ上から試しに実行し動作確認

Chrome（Edgeもだけど）は、タブを掴んでポイって感じで タブを独立させることが出来ます。だから、わざわざ実行して切り替えてシート確認ではなく、上記のようにエディタとシートを並べた状態でテストが出来ます。

実行後にA2の数値が 1増えてますね。成功です。

ここで少しコードを解説しておきましょう。初歩的な部分です。

const sheet = SpreadsheetApp.getActiveSheet();

開いている状態での実行を前提とした、対象のスプレッドシートのエディタに記述したコンテナバインド型のスクリプトの場合、今開いているシートがアクティブシートです。

SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
と書いても問題ないですが、対象のスプレッドシート内の他のシートは関係ない場合は 直接アクティブシートを取得する上記の書き方がシンプルで良いです。

マクロの記録を参考にしたのか、getActive() や activate() を使った記述を使ってる人もいますが、あまりお勧めしません。

ちなみにアクティブシートですが、時間トリガー や対象のスプレッドシート以外の場所に記述されたコードから操作する場合は、アクティブなシートという概念がないので、誤作動のもとになります。このような利用の際は、シート名で指定しましょう。

const spinCell = sheet.getRange("A2");

これで A2セルを取得しています。
※ここで取得（get）できるのは、あくまでも Rangeオブジェクト であってセル内の値ではありません。

もちろん 行番号と列番号で getRange(2,1) として 2行1列目（つまりA2）を指定する書き方でもOK

状況に応じて使い分け出来ると良いです。

ちなみに getRange("R2C1") って書き方もできますが、これを使うことはないでしょうｗ

注意点として、A1表記の時は文字列なので ' クォート（もしくは " ダブルクォート）で括る必要があります。逆に行番号、列番号で取得する場合は数値なのでクォートで括ってはダメです。

getRange はスプレッドシートで GASを使う際の基本中の基本なんですが、結構間違った説明をしているサイトも多いです。大きくは間違ってないですが、細かいミスがあります。でも Google検索で上位表示という・・・。気をつけましょう。

ちなみに今回は const ばっかり使ってますが、他に let, var があります。これらは、いずれも 変数を宣言する際に使うものです。

GASは当初は var しか使えなかったんで、全て var で変数宣言しているコードを掲載しているサイトが多いんですが、今どきは const , let をメインで使うべきです。

使い分けについては、再代入や再宣言の可否、あとはスコープの違いなんですが、これは多くのJavaScript 系のサイトで解説されているので、そっち見た方が早いでしょう。

spinCell.setValue(value + 1);

spinCell(A2)に setValue で value + 1 を書き込んでいます。
これによって A2の値が +1 されたものに置き換わります。

ここは spinCell.setValue( ++value) と書くこともできますが、この書き方はちょっとわかりづらいですよね。

そもそも、 なぜ value++ ではなく、 ++value なのか？

これは説明すると長くなるので、以下のサイトを参考にしてください。
直接使う場合の前置き、後置きの挙動の違いがわかるかと思います。

  let value = spinCell.getValue();
  value++;　//++value でも一緒
  spinCell.setValue(value);

ちなみに、こう記述すれば value++ , ++value どっちでも良いです。

でも普通に +1 ってすりゃいいですね。
他にも

value +=1　

といった書き方もあります。

条件を考慮してコードを精査

・増減の値はカスタムできるとよい。

という要件を考慮すれば +1 をそのまま使うのではなく、以下のよう変数 numを宣言しておいて、 value + num と書いておいた方が汎用性があります。

//A2セルの値を 1増やす
function spinUp() {
  const num = 1;
  const sheet = SpreadsheetApp.getActiveSheet();
  const spinCell = sheet.getRange("A2");
  const value = spinCell.getValue();
  spinCell.setValue(value + num);
}

減ボタン用のコードは、マイナスすればよいので以下になります。

//A2セルの値を 1減らす
function spinDown() {
  const num = 1;
  const sheet = SpreadsheetApp.getActiveSheet();
  const spinCell = sheet.getRange("A2");
  const value = spinCell.getValue();
  spinCell.setValue(value - num);
}

これをそれぞれ増ボタン、減ボタンに割り当てれば良いんですが・・・。なんか重複する部分多くて無駄が多い感じですよね？

これを 共通部分を spin関数としてまとめて、Up と Down は引数で制御する形にして 簡略化 & メンテナンスしやすくしてみましょう。

【スピンボタン用コード完成版】

//図形をボタンとして使う GASスピン

//設定値
const sheet = SpreadsheetApp.getActiveSheet();
const num = 1;　//増減値
const spinCellAdd = "A2"; //対象のセル

//▲ボタン用　増
function spinUp(){
  spin(num);
}

//▼ボタン用　減
function spinDown(){
  spin(-num);
}

//基本動作となる関数
function spin(x) {
  const spinCell = sheet.getRange(spinCellAdd);
  spinCell.setValue(spinCell.getValue() + x);
}

設定値（対象シート、増減値、対象セル）を関数の外に出して、グローバル変数としています。

さらに、コードの共通部分を spin という関数にして spin(x) で、xという引数を持たせています。

増関数　spinUp の中では spin(num) として、spin の引数にそのまま num を指定することで numを加算。

一方減関数 spinDown は spin(-num) で -num を spinの引数に指定することで num 分を減算させています。

これでコードが完成しました。

この時点で先ほどと同じように保存、実行して動きをテストする必要がありますが解説は省略します。

A1-5. 図形描写でボタンを作成、ボタンを配置

Googleスプレッドシートで図形や線を入れる場合は、挿入＞図形描写 から作成します。

Googleスプレッドシートの図形描写は・・・

図形関連は、正直 Googleスプレッドシートはクソ仕様だと思います。
Excelに比べてすごーく不満。

図形描写で作成したオブジェクトは、スプレッドシート上では コピーすら出来ないし、編集もサイズ変更と設置場所の移動しかできず、色を変えたり枠線の太さを変えたりといった、ちょっとした修正をするにも再度図形描写のダイアログを表示して行う必要があります。

ついでに言うと、ハイパーリンクを付与することも出来ません。

さらに、スプレッドシート上でのサイズ変更は図形描写上のサイズ変更とは別扱いという仕様。

頑張ってシート上でいい感じのサイズに調整しても、少し色を変えようと図形描写で色を編集・保存するとシート側での調整がリセットされます。

つまり、同じサイズの図形をコピーする場合も、図形描写側で適切なサイズにしておく必要があるってことです。

シートとの位置関係が見えない図形描写の画面でサイズをいい感じにするってのが、結構手探りな作業なんですよね・・・。

というわけで今回のようにボタンを上下で2つ作る場合は、

・図形描写を開きまずは Upボタンとして ▲ の図形をいい感じに作成。
・保存して終了するとスプレッドシート上に表示される
・設置場所のセルに置く。
・編集で再び図形描写を開きサイズをいい感じに修正
　（シート側での確認と修正を何度か繰り返す）
・いい感じに完成したら、次は Downボタン。
・完成した▲を編集で図形描写を開き図形描写画面でコピー
・この図形描写は保存して終了。
・メニューから挿入＞図形描写で新しい図形描写を立ち上げ
・先ほどコピーした▲を貼付け
・回転させ下向きの ▼ とする（サイズは調整されてるのでそのまま）
・色を変えて保存して終了
・シート上で位置を調整
（シート上では 2つの図形を揃える機能はないので目視で位置調整 ※ガイド線は出る）
・完成

この程度の ▲ を反転させた 2つのボタンを作るだけで 結構な工数ですｗ

Excelだったら無料のオンライン版でもシート上で直接図形を挿入し編集できますし、タブレットとの相性のよい「描画」も若干不安定ですが便利に使えます。

実際のシートの上に別レイヤーを重ねてるような感じなんでしょうか？

この点はExcelが、かなーり羨ましい。GoogleWorkspace の図形描写関連は抜本的な見直しがあっても良いと思います。

A1-6. ボタンにスクリプトを割り当て

エディタで作成したスクリプトは、Googleスプレッド上の図形や挿入した画像に割り当てることが可能で、GAS実行ボタンとして利用できます。

スクリプトを割り当てる際は、関数名を入れるだけです。
今回であれば ▲の図形に spinUp、▼に spinDown ですね。
割当の際は、関数の後ろの() はつけません。

残念ながら、各図形から実行の際に 引数をもたせることができないので、1つの関数でボタン毎に違う動作をさせることはできません。

HTMLみたいに図形に id とか value 要素を付与できると面白そうなんですけけどね。

だらかGASの場合は、ボタン毎に関数(function)を用意してあげる必要があります。

ここが面倒です。

ただ、今回のようにほぼ同じ動き（ up か down で A2セルの数値をプラスかマイナスかってだけの違い）の場合は、同じようなコードを2回書くのではなく、基本形の関数を作って、そこに引数を渡して実行する関数を用意してあげるとスマートです。

A1-7. ボタンを押してテストする

実際に動かしてみましょう。

うーん、とりあえず動くけどもったりしてますね。
このGAS特有のもったり感は、結構ストレスを感じそうです。

そして、中央上部に表示される「スクリプトを実行しています」が、かなりウザい！ひどいと3つくらい表示されてます。

実はこれでも、かなりクリック速度に気を使ってますｗ
なぜならExcelと同じ感覚で連打しちゃうと・・・

図形をダブルクリックしたと検知され、図形の編集画面（図形描写）が開いてしまいました。これはユーザーに使わせるの微妙だなと。

【余談】Googleスプレッドシートの図形描写のイライラを解消する方法

今回の流れでは図形作成・調整の煩雑さ、シート上でコピーできない問題、さらに クリック連打で編集画面が開くという図形描写のクソ仕様に、作成時から利用時までイライラさせられっぱなしでした。

一応、これらをズバっと解消・ズバッと解決する方法があります。
（平成キッズは「かいけつ」と言えばゾロリでしょうが、昭和世代は怪傑ズバットですね）

その方法は、ExcelやPowerpointといった MSオフィスツールで作成した図形をコピペしちゃう方法。

ものすごーく本末転倒というか、そもそも Excel持ってないから Googleスプレッドシート使ってるって人も多いでしょうが、両方使える人は結構コレが楽だったりします。

もちろん、色や枠線の変更は Excel側でやっておく必要がありますが、これだと Googleスプレッドシート側では（背景透明の）画像扱いなので、普通にコピペが可能だし、ダブルクリックで図形描写が開くこともありません。（スクリプトは画像にも割り当て可能です）

注意点としては、あくまでもパソコンでインストールアプリのオフィスソフトからのみコピペ可能という点。残念ながら Web版のオフィスからはコピペ出来ません。

もちろんネット上の フリー素材をGASボタンに使う方法もありますね。

そして、もう一つの方法。こちらは図形のコピーが簡単に出来ない問題の解決策。

Androidアプリ版で図形をコピペする という スプシハックです。
（〇〇ハックって言葉はあんま好きじゃないですがｗ）

なぜか Androidアプリ版だと、シート上で図形がコピーができます。コピーした図形は勝手に画像に変換されたりもなく、PC側から図形描写で開いて編集もできますし、割り当てたスクリプトも引き継いでいます。

これは残念ながら Androidアプリ限定で、iPhone（iOS）版のスプレッドシートアプリだと使えません。タップしても選択肢が「削除」しかないという謎仕様。

いずれも完全なる解決とはいえませんが、図形描写でイライラが溜まってる人はお試しを。

さて、とりあえずはサクサクとはいきませんでしたが、スピンボタンとして一応は動きました。

最後に、その他の要件への対応可否を確認しておきましょう。

その他要件を満たせるかの確認

・できればスマホ（アプリ版）でも使えるとよい　NG

残念ながら、これは出来ません。2023年1月現在、スマホアプリ版では 図形（画像）からスクリプトは実行できません。

一応、スマホのブラウザで PC版を表示させて図形をタップすることで、GASを実行させることは可能です。（使いにくいですが）

・増減の値はカスタムできるとよい　OK

これは num を変えればよいだけですね。

シート上のセルから読み込んだ数値を num として使う方法もありますが、さらに遅くなりそうなんでエディタ上での設定変更としておきます。

・セル固定ではなく、アクティブセルでスピン機能使えたりする？

これはコードと構成を少し変えれば可能です。

//アクティブセルをスピン

//設定値
const sheet = SpreadsheetApp.getActiveSheet();
const num = 1;　//増減値
//const spinCellAdd = "A2"; //対象のセル　（使わない）

//▲ボタン用　増
function spinUp(){
  spin(num);
}

//▼ボタン用　減
function spinDown(){
  spin(-num);
}

//基本動作となる関数
function spin(x) {
  const spinCell = sheet.getActiveRange(); //　← ここを変更
  spinCell.setValue(spinCell.getValue() + x);
}

const spinCell = sheet.getActiveRange();

こう変えることで、選択しているセルをスピンで増減させることが出来ます。需要があるのかはわかりませんが・・・。

出来たこと、出来なかったこと、その他の注意点をまとめておきます。

A1.GASを割りあてたスピンボタンで、実現できたこと＆注意点

・A2セルの数字スピンボタンで増減させたい　→　OK

（以下は追加要件）
・できれば Excelみたいにサクサク動かしたい　→　×
・できればスマホ（アプリ版）でも使えるとよい　→　×
・増減の値はカスタムできるとよい。　　　　　 → OK
・セル固定ではなく、アクティブセルでスピン機能使えたりする？ → OK

（その他の注意点）
・ユーザー毎に初回はスクリプトの承認が必要
・連打すると図形描写の編集画面が開いてしまう

A1.GASでスピンボタンを作ってみるまとめ

結構できないこと、マイナス点が多いですね。

とにかく、サクサク動かない上に、実行してますの表示が次から次へと出てくるのが微妙。

さらには ユーザー毎に初回承認が必要だし、連打すると 図形描写がババーンと立ち上がるし。。

ぶっちゃけ 実用的ではありません！

↓ サクサク動かないのを逆手にとって、こんな感じで 9つの数値を全てスピンボタンで揃えてタイムを競うゲームは面白いかもｗ

今回はボタンに GASを割り当てる方法で、Googleスプレッドシートにスピン機能を実装してみました。が、まとめの通り実務に使うには微妙です。

より良い方法を求めて、次回は onEdit を組み合わせたスピンを検証してみましょう。

■このシリーズの次の記事

いいなと思ったら応援しよう！

チップ大歓迎です。やる気がアップしますｗ

Googleスプレッドシート で使えるスピンボタン検証 -1

スピン機能（スピンボタン）とは？

Q. セルの数字を増減させるスピンボタンを実装したい

A1.GAS を 割り当てた スピンボタンを作ってみる

A1-1. スプレッドシートで スピンボタンと連動させるセルを準備