【GAS】スプレッドシートに設置したボタンのクリックでGASスクリプトを実行する方法

# はじめに
本記事では、スプレッドシートにGASのスクリプトを実行するカスタムメニュー（実行ボタン）を追加し、クリック一つでGASのレスポンスをスプレッドシートに書き込むする処理を実装します。

# ゴール
スプレッドシートに設置した `スクリプト実行` ボタンを押下すると、GASのスクリプトが実行され、スプレッドシートのセルに自動で値が書き込まれる事を確認します。イメージは次の通りです。

![gas-sc-ui.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/4fe2d467-f8a3-db0a-b5a5-65405b773e7d.gif)


# 作るもの

- スプレッドシート：1つ
- GASのスクリプト：2つ


# 1: スプレッドシートの準備

スプレッドシートを作成し項目とデータを記載しておきます。
本記事ではサンプルとして下記のデータを入れておきます。

- input_data：入力データ
- response：レスポンス

| input_data | response |
|------------|--------------|
| {"id": "A001", "count": 5} |  |
| {"id": "A002", "count": 0} |  |
| {"id": "A003", "count": 12} | |
| {"id": "A004", "count": 3} |  |
| {"id": "A005", "count": 8} |  |
| {"id": "A006", "count": 0} |  |
| {"id": "A007", "count": 4} |  |
| {"id": "A008", "count": 15} |  |
| {"id": "A009", "count": 7} |  |
| {"id": "A010", "count": 2} |  |

イメージは次の画像の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/785298be-7c1b-befc-b6e9-ce920992094d.png)


# 2: GASエディタを開く

スプレッドシートの「拡張機能」→「Apps Script」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/7b1f8927-8f2d-8046-f130-4c14591b9777.png)


 新しいプロジェクトが作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/678e3c2d-a661-4bd2-2a18-6aaf394c40e8.png)


# 3: スクリプトの実装

2つのスクリプトファイル（main.gs、mockApi.gs）を作成します。

- **main.gs**
メインの処理を行うスクリプトです。スプレッドシートの操作と疑似的なAPIコール処理を実行します。

```javascript:main.gs
function processData() {
  const sheet = SpreadsheetApp.getActiveSheet();
  const lastRow = sheet.getLastRow();
  const startRow = 2;
  
  for(let row = startRow; row <= lastRow; row++) {
    const inputJson = sheet.getRange(row, 1).getValue();
    
    try {
      // JSONをパース
      const inputData = JSON.parse(inputJson);
      
      // 模擬APIを呼び出し
      const response = mockApiCall(inputData);
      
      // レスポンスを書き込み
      sheet.getRange(row, 2).setValue(JSON.stringify(response));
      
    } catch(error) {
      sheet.getRange(row, 2).setValue('Error: ' + error.message);
    }

    // 0.1秒待って実行
    Utilities.sleep(100);
  }
}

// カスタムメニューの追加
function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('スクリプト実行')
      .addItem('実行', 'processData')
      .addToUi();
}
```

- **mockApi.gs**
API呼び出しを模倣するスクリプトです。実際のAPIの代わりとして、入力データを加工したものをレスポンスとして返します。引数で受けとった値を2倍して返します。

```javascript:mockApi.gs
function mockApiCall(requestData) {
  // 今回はcountを2倍にして返すシンプルな処理
  return {
    id: requestData.id,
    count: requestData.count * 2
  };
}
```

# 4: 動かしてみる
1. スプレッドシートを更新すると、メニューバーに「スクリプト実行」が表示されます。
2. 「スクリプト実行」→「実行」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/1fb6dcce-22ec-c1cb-b5c2-c3445e00ac86.png)

:::note warn
初回実行時は権限の承認が必要です。
:::

![gas-sc-ui.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/4fe2d467-f8a3-db0a-b5a5-65405b773e7d.gif)

GASの実行結果が順にB列に書き込まれることを確認できました。


# 活用例
生成AIのプロンプトテストなどで活用できそうだなと感じました。
スプレッドシートに記載した100件のプロンプトに対して、一括でAIのレスポンスを取得できると思います。

1. **大量のプロンプトテスト**
   - 様々なプロンプトパターンの結果を一括で確認できる
   - プロンプトの効率的な検証ができる

2. **結果の整理と分析**
   - インプットとアウトプットを同じ行で管理することにより比較が容易

3. **操作の簡略化**
   - スプレッドシートで操作が完結する

# 参考

https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet-app?hl=ja#getUi()