GASのUIクラスについて見てみよう

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

# UIクラス
GASでは[UIクラス](https://developers.google.com/apps-script/reference/base/ui?hl=ja)が用意されており、これらを使うことでユーザーインターフェースを作成し、管理することができます。
今日はこのクラスに用意されているメソッドを実際の表示と併せて見ていきます。

# alert
## alert(prompt)
ダイアログが開いて指定したメッセージとOKのボタンが表示されます。
```javascript
SpreadsheetApp.getUi().alert('Hello, world');
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/1e54c20a-5ea6-270e-0f33-69b5aaa83308.png" width="300">

## alert(prompt, buttons) 
見た目は先程と似ていますが`buttons`に特定のボタンを指定することでOK以外のものを表示できるようにします。

```javascript
var ui = SpreadsheetApp.getUi();
var response = ui.alert('Are you sure you want to continue?', ui.ButtonSet.OK_CANCEL);
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/19dcca68-a3c6-bd5d-9435-a04fa8892b37.png" width="300">

buttonsには以下のものを指定することができます。

| プロパティ       | 種類     | 説明                                                                           |
|----------------|---------|--------------------------------------------------------------------------------|
| OK             | Enum    | OKのみ表示されたボタン    |
| OK_CANCEL      | Enum    | 「OK」と「キャンセル」を選択できるボタン|
| YES_NO         | Enum    | 「はい」と「いいえ」を選択できるボタン          |
| YES_NO_CANCEL  | Enum    | 「はい」「いいえ」「キャンセル」の３つから選択できるボタン |

## alert(title, prompt, buttons) 
ダイアログにタイトルを表示できるようになります。
```javascript
var ui = SpreadsheetApp.getUi();
var response = ui.alert('Confirm', 'Are you sure you want to continue?', ui.ButtonSet.YES_NO);
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/70b59e95-d3d7-f375-aeed-843df0446278.png" width="300">


# createMenu
メニューを追加することができます。`onOpen()`は、スプレッドシートが開かれた際に呼び出されるイベントなので、ここでメニュー追加の処理を書くことでスプレッドシートを開いたときに独自のメニューが追加された状態にします。

まず`createMenu('My Menu')`を呼び出して、名前が"My Menu"の新しいメニューオブジェクトを作成しています。そして`.addItem('My menu item', 'myFunction')`を使って、この新しいメニューに"My menu item"という名前のメニューアイテムを追加し、それが選択された時に`myFunction`という関数が実行されるように設定しています。`.addSeparator()`を使って、メニューに区切り線を追加しています。
さらにサブメニューを追加するために`.addSubMenu()`を使います。ここではMy sub-menuという名前のサブメニューを作成しています。`.addItem()`を使って、サブメニューに2つのアイテムを追加しています。"One sub-menu item"というアイテムが選択されたときに`mySecondFunction`が実行され、"Another sub-menu item"が選択されたときに`myThirdFunction`が実行されるように設定しています。
最後に`.addToUi()`を使って、作成したメニューを実際のスプレッドシートUIに追加しています。

```javascript
function onOpen(e) {
  SpreadsheetApp.getUi()
      .createMenu('My Menu')
      .addItem('My menu item', 'myFunction')
      .addSeparator()
      .addSubMenu(SpreadsheetApp.getUi().createMenu('My sub-menu')
          .addItem('One sub-menu item', 'mySecondFunction')
          .addItem('Another sub-menu item', 'myThirdFunction'))
      .addToUi();
}
```

![スクリーンショット 2023-12-23 12.59.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/aab0018e-0fe7-69f9-d1be-bc4485b4ad3f.png)

# prompt(prompt) 
入力ダイアログボックスをひらきます。これも`alert`同様に`prompt(prompt, buttons)` と`prompt(title, prompt, buttons)`でそれぞれボタンを変更したりタイトルを追加することも可能です。
```javascript
var ui = SpreadsheetApp.getUi();
var response = ui.prompt('Enter your name:');
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/9b7cd688-c58d-c76e-49d4-dcadb325c356.png" width="300">

# showModalDialog(userInterface, title)
特定のhtmlコンテンツを含む独自のサイズのモーダルを生成し、ユーザーがスプレッドシート上でそれを表示できるようにします。ダイアログは指定されたhtmlコンテンツを表示し、ユーザーの入力待ち状態になります。

`HtmlService.createHtmlOutput('<p>A change of speed, a change of style...</p>')`でhtml出力を生成します。ここでは、`<p>`タグで囲まれたテキストを含む簡単なHTMLを指定しています。そして`.setWidth(250)`と`.setHeight(300)`でモーダルダイアログの幅と高さをそれぞれ250ピクセルと300ピクセルに設定しています。最後に`showModalDialog()`メソッドを使用して、作成したhtmlを含むモーダルダイアログを表示しています。`'My add-on'`はダイアログのタイトルとして表示されます。

```javascript
var htmlOutput = HtmlService
    .createHtmlOutput('<p>A change of speed, a change of style...</p>')
    .setWidth(250)
    .setHeight(300);
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'My add-on');
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/064c742b-1b0e-00bb-0f7a-81f1e661929c.png" width="400">


# showModelessDialog(userInterface, title) 
さきほどのモーダレス版です。こちらの場合はダイアログが出てる間もスプレッドシートを触ることができます。

```javascript
var htmlOutput = HtmlService
    .createHtmlOutput('<p>A change of speed, a change of style...</p>')
    .setWidth(250)
    .setHeight(300);
SpreadsheetApp.getUi().showModelessDialog(htmlOutput, 'My add-on');
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/c12d9ea6-269e-4576-d3c9-92302ca0a54e.png" width="400">

# showSidebar(userInterface) 
サイドバーを開いて任意のコンテンツを表示することができます。サイドバーの幅は300pxで固定されています。

```javascript
var htmlOutput = HtmlService
    .createHtmlOutput('<p>A change of speed, a change of style...</p>')
    .setTitle('My add-on');
SpreadsheetApp.getUi().showSidebar(htmlOutput);
```
![スクリーンショット 2023-12-23 13.19.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/756016b9-c8aa-0c4b-9f19-7a71ba7a47a2.png)


# 最後に
今日はUIクラスについて見ていきました。どれもうまく使えばより便利にGASを活用できそうですね！