#2. スプレッドシートに独自のメニューボタンを追加する

Updated
2022/2/4 0:02
Author
Jumpei IkegamiJumpei Ikegami
 
ここから先は、実際に業務で使えるスプレッドシートの機能を自ら開発することを目指しましょう。スプレッドシートの中身自体を編集する方法についても学んでいきます。
まずこの記事では、スプレッドシートの画面に独自のメニューボタンを追加してみます。

前提知識

特にありません。ただし、JavaScriptに慣れる意味で、先に次のチュートリアルからやることをおすすめします。
ブックマークレットと簡単なJavaScriptで業務を効率化する2021/5/9 3:562021/6/20 8:09

作るもの

Googleスプレッドシートの画面に「独自メニュー > テストデータ生成」というボタンを追加します。ボタンを押したら、A1セルに現在の時刻が自動で入力されるようにします。
notion image

体験すること

このチュートリアルによって、以下を体験します。
  • スプレッドシートにボタンを追加する
  • スプレッドシートの特定セルの値を更新する

チュートリアルスタート!

ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。

GASのプロジェクトをデプロイする

実際に独自メニューボタンを追加してみましょう。まだ押しても何も起きないボタンです。
スプレッドシートの画面にアクセスし、スプレットシートを新規作成します。その後、[拡張機能 > Apps Script]を開きます。このとき別のブラウザタブで開く画面が、Apps Scriptのスクリプト編集画面です。スクリプトエディタを上書きし、次のプログラムを入力します。
JavaScript
入力できたら、次の手順でプロジェクトをデプロイします。デプロイすることで、実際に機能が使えるようになります。
  • プロジェクトにタイトルを付ける
    • 例: テストデータ生成
  • [プロジェクトを保存] ボタンを押す
notion image
  • [デプロイ > 新しいデプロイ] ボタンを押す
  • [種類の選択] から [ライブラリ] を選び、 [デプロイ] ボタンを押す
notion image
  • [完了] ボタンを押す
 
これで、GASのプログラムが実行可能な状態になりました。
 

独自メニューボタンを追加する

GASのプロジェクトの準備ができたら、実際に実行してみましょう。
まずは、次の手順で手動実行してみます。
  • 実行する関数を setCustomMenu に変更
  • [実行] ボタンを押す
notion image
これで、スプレッドシートに独自メニューを追加できました。
実際、スプレッドシートの画面に戻ってみると、 [★独自メニュー★ > テストデータ生成] というメニューボタンが追加されていることがわかります。
notion image
 

ボタンを押したらセルに現在時刻を入れる

残念ながら、まだボタンを押しても何も起きません。
せっかくなので、ボタンを押したときに目に見える結果がわかるような処理を追加してみましょう。
Apps Script編集画面を開き、関数genTestDataを次のように編集します。
JavaScript
 
編集できたら、次の手順で動作確認をしましょう。
(※今後も、プログラムを編集したら同様の手順で動作確認をしてください)
  • Apps Script編集画面
    • [プロジェクトを保存] ボタンを押す
  • スプレッドシート画面
    • [★独自メニュー★ > テストデータ生成] ボタンを押す
 
なお、スプレッドシートの閲覧や編集をプログラムから実行するには、そのプログラムにそれらの権限を許可する必要があります。危険そうな警告文が出ますが、自分の書いたプログラムなので、基本的には許可しても問題ありません。
notion image
これで、独自メニューボタンを押したら「ただいまの時刻」が表示されるようになりました。
つまりは、あなたが作った独自の機能をスプレッドシートに追加できたことになります!
notion image
 

起動時に自動でメニュー追加されるようにする

最後に、ちょっと便利な設定をしておきましょう。
現状では、ブラウザでスプレッドシート画面を更新するとせっかく追加した独自メニューボタンが消えてしまいます。次の手順で、これをスプレッドシート起動時に自動追加するようにします。
  • スプレッドシート画面で [拡張機能 > Apps Script] を押す
  • Apps Script編集画面で [トリガー > トリガーを追加] ボタンを押す
notion image
  • 次の設定になっていることを確認し、 [保存] ボタンを押す
    • 実行する関数: setCustomMenu
    • イベントのソース: スプレッドシートから
    • イベントの種類: 起動時
 
これで、スプレッドシート画面の表示時に(少し待つと)自動で独自メニューボタンが表示されるようになりました。便利ですね。
記念に、スプレッドシートに名前でも付けておきましょう。
notion image
 

次のチュートリアル

#3. スプレッドシートに複数行のデータを書き込む2022/1/30 3:582022/2/4 0:41