スプレッドシートからGASを実行する3つの方法

# はじめに
この記事は「[Ateam LifeDesign Advent Calendar 2023](https://qiita.com/advent-calendar/2023/ateam-life-design)」で完走賞を狙って25記事書いているうちの25日目の記事です。ようやく完走・・・！！

GASの書き方は今まで色々みてきたので、今日はスプレッドシート上からGASを実行する方法をいくつかご紹介します。今回はあらかじめ`hogeFunction()`を作っておいてそれを実行していきます。
```javascript
function hogeFunction() {
  SpreadsheetApp.getUi().alert('Hello, world');
}
```

# メニューから実行する
## 新たにメニューを追加する
[昨日の記事](https://qiita.com/kakakaori830/private/4181b5b25063a0cc436c#createmenu)で触れたメニューを追加して、そこから関数を実行する方法です。
```javascript
function onOpen(e) {
  SpreadsheetApp.getUi()
      .createMenu('My Menu')
      .addItem('My menu item', 'hogeFunction')
      .addToUi();
}
```
このようにしておくことでメニューに追加された「My menu item」をクリックすることでhogeFunctionを動かすことができます。

![スクリーンショット 2023-12-23 13.41.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/46c454fc-244a-b218-2701-378e1bd4ee60.png)


## マクロに追加する方法
「拡張機能」→「マクロ」から「マクロをインポート」を選択します。

![スクリーンショット 2023-12-23 13.42.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/7840bc24-4847-a4f2-231e-9291909132b1.png)

するとGASに書いてある関数が一覧で表示されるので実行したいものの「関数を追加」をクリックします。

![スクリーンショット 2023-12-23 13.43.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/95fec34d-f1db-7d9f-91e2-0b8a878c1ae2.png)

もう一度「拡張機能」→「マクロ」を見ると先程選択した関数が追加されていることが確認できます。このhogeFunctionのメニューをクリックすることで関数を実行することができます。

![スクリーンショット 2023-12-23 13.43.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/b6468327-fdf8-7eb8-9e43-f8c83da4bd5f.png)

# ボタンを配置してボタンを押すことで実行する
シート内に任意のボタンを配置して、そのボタンを押すことで関数を実行する方法を見ていきます。まず「挿入」→「図形描画」をクリック。
![スクリーンショット 2023-12-23 13.46.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/63f4f442-7e1f-50c9-d7fb-b99e1825a012.png)

好きな図形を作ったら「保存して終了」を押します。

![スクリーンショット 2023-12-23 13.47.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/e7be6a81-3311-892d-aca2-5d59f5ba4be0.png)

配置された図形の右上にある三点リーダーをクリックすると「スクリプトを割り当て」というのが出てくるのでここをクリック。

![スクリーンショット 2023-12-23 13.47.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/e9fee4da-2bdc-734a-5dce-fb452b24e316.png)

実行したい関数名を記入したら「確定」を押します。
これでこの図形をクリックされると関数が実行されるようになります。

![スクリーンショット 2023-12-23 13.47.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/6c484c73-9f59-a5fb-39d1-d7a3c3018f0f.png)

# サイドバーに実行ボタンをhtmlで配置する
[昨日の記事](https://qiita.com/kakakaori830/private/4181b5b25063a0cc436c#showsidebaruserinterface)で触れたサイドバーにボタンを配置してクリックすることで実行するようにする方法です。
`createHtmlOutput`のなかにはhtmlを書くことが出来るのでそこでhtmlでボタンを作成しonclickイベントで関数が呼び出されるようにしていきます。
```javascript:コード.gs
function onOpen(e) {
  let template = HtmlService.createTemplateFromFile('sidemenu');
  let htmlOutput = template.evaluate();
  htmlOutput.setTitle('サイドバーのタイトル');
  SpreadsheetApp.getUi().showSidebar(htmlOutput);
 }
 ```
 今回はhtmlファイルを別途sidemenu.htmlとして作成して、それを呼び出す形で使用しています。`template.evaluate()`で指定されたファイルのhtmlを取得します。この段階では、まだサイドバーには表示されていません。`htmlOutput.setTitle('サイドバーのタイトル')`でサイドバーのタイトルを設定します。
`showSidebar()`メソッドを使用して、作成したhtmlを含むサイドバーを実際に表示します。このコードが実行されると、サイドバーが表示されます。

 ```html:sidemenu.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function hogeFunction(){
        google.script.run.hogeFunction();
      }
    </script>
  </head>
  <body>
    <button onclick="hogeFunction()">hogeFunctionを実行する</button>
  </body>
</html>
 ```
 html側はこんな感じです。`<button>`タグでボタン要素を定義し、`onclick`イベントに`hogeFunction()`を関連付けます。こうすることでボタンがクリックされると、この関数が実行されるようにしています。`hogeFunction()`内では`google.script.run`を使ってサーバーサイドの`hogeFunction()`（つまりコード.gsで定義している`hogeFunction()`）を実行します。これにより、クライアント側からサーバーサイドのGASの関数を呼び出すことができるようになります。

![スクリーンショット 2023-12-23 14.04.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/505c5616-d25e-2321-9376-8a372104e945.png)

完成するとこのような画面になります。サイドバーにボタンが表示されており、ここをクリックすることで関数を実行することができます。

# 最後に
今回はスプレッドシートからGASを実行する方法についていくつかみていきました。簡単にできるものからちょっとコードを書く必要があるものまでありますが、用途に応じて適切なものを選んで、より使いやすいものを作っていきましょう。