【コピペで使える】GASでサイドバーやダイアログを表示してみる

スプレッドシートを使っているとオリジナルのサイドバーの機能以外にも自分で作った機能があればと思う時があります。誤った情報を入れた時にアラートを出したい、完了と入力した際にメッセージを表示させたいと思う時があります。

今回はそんな時に役に立つgetUiメソッドを今回ご紹介します。ちなみにこのgetUiメソッドはスプレッドシートだけではなくドキュメント　スライド　フォームでも使用可能ですが今回はスプレッドシートで説明していきます。

getUiメソッド

アラート、ダイアログ、サイドメニューなどのインターフェイスを表示させることができます。使用する際は各サービスのスクリプトエディタ内に記載する必要があります。

（スプレッドシートならスプレッドシート内のスクリプトエディタ）getUiに続いて記載するメソッドがいくつかあるのでそちらを紹介していきます。

対象クラス：SpreadsheetApp　SlidesApp　DocumentApp　FormApp

注意：初めてコードを実行する際にアクセス権限の許可を求められますが許可をしてください。アクセス権限についての詳細は以下の記事に詳しく載っています。

無料のGmailアカウントでGASに初回の実行許可を与える方法

alert()　3種類

アラートを表示させます。表示方法が３種類あります。

alert(“表示内容”)

スクリプトを実行すると表示内容とOKボタンが表示されます。

function setAlert() {
  var ui = SpreadsheetApp.getUi();
  ui.alert('アラートが表示されます');
}

alert(“表示内容”,ボタン)

表示内容と指定したボタン内容が表示されます。

スクリプトはこちらです。

function setAlert2(){
  var ui = SpreadsheetApp.getUi();
  var response = ui.alert('選択肢が表示されます。', ui.ButtonSet.YES_NO_CANCEL);
  if (response === ui.Button.YES) {
    ui.alert('はいが押されました');
  } else {
    ui.alert('いいえが押されました');
  }
}

ボタンはButtonSet.ボタン形式で記入します。今回のボタン形式はYES_NO_CANCELで記載していますので画像でははい　いいえ　キャンセルとでています。他には

OK　：はい
OK_CANCEL　：はい　キャンセル
YES_NO　：はい　いいえ
YES_NO_CANCEL　：はい　いいえ　キャンセル

があります。そしてはいといいえが押された場合にアラートを出すためif条件を記載しています。ですのではいを押すとはいが押されましたとでます。どちらのボタンを押されたかの判別方法は.Button.ボタン名となっています（４行目）

alert(“タイトル”,”表示内容”,ボタン)

先ほどの表示にタイトルがつけられます。タイトルがつくだけですのでコードだけ記載しておきます。

function setAlert3(){
  var ui = SpreadsheetApp.getUi();
  var response = ui.alert("タイトル",'選択肢が表示されます。', ui.ButtonSet.YES_NO_CANCEL);
  if (response === ui.Button.YES) {
    ui.alert('はいが押されました');
  } else {
    ui.alert('いいえが押されました');
  }
}

prompt()　3種類

こちらはinputダイアログが表示されるメソッドです。こちらもalertと同じく3種類の表示方法がありますがalertの部分をpromptに変更するだけで変更ができます。タイトルが出るサンプル画像とスクリプトだけ載せておきます。

function setPrompt(){
  var ui = SpreadsheetApp.getUi();
  var response = ui.prompt("タイトル",'選択肢が表示されます。', ui.ButtonSet.YES_NO_CANCEL);
  if (response === ui.Button.YES) {
    ui.alert('はいが押されました');
  } else {
    ui.alert('いいえが押されました');
  }
}

showModalDialog(ユーザーインターフェイス, “タイトル”)

モーダルダイアログが表示されます。モーダルインターフェイスとは表示画面が出ている間は他の作業ができないダイアログのことです。

下の画像のようにダイアログを閉じない限り他の作業ができないダイアログのことです。先ほどのalertやpromptとは違いhtmlでダイアログを作成できるので自由度が高いです。

スクリプトを見ていきます

function setModalDialog1(){
  var contents = '<p>htmlで作成されたものが記載されます。</p>';//html
  var htmlOutput = HtmlService
      .createHtmlOutput(contents)//変数contentsで作成したhtmlを入力
      .setWidth(250) //幅250のサイズを設定
      .setHeight(300); //高さ300のサイズを設定
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'タイトル');
}

今回はHtmlServiceというサービスを使用します。こちらついては別の機会で説明したいと思っていますので、今回はHTMLを作成できるものだと思っていてください。

このスクリプトのようにダイアログのサイズも変更することが出来るのでこの中にinputを入れてみたりselectなどで選択肢を入れることなども可能になります。

showModelessDialog(ユーザーインターフェイス, “タイトル”)

こちらはモーダレスダイアログなので以下の画像のようにダイアログが出ていてもスプレッドシートなどの作業が可能です。その他の作成方法はshowModalDialogと同じですのでスクリプトだけ載せておきます。

スクリプト（７行目だけモーダルダイアログと違うだけで他の作成方法は同じです。）

function setModalDialog2(){
  var contents = '<p>htmlで作成されたものが記載されます。</p>';//html
  var htmlOutput = HtmlService
      .createHtmlOutput(contents)//変数contentsで作成したhtmlを入力
      .setWidth(250) //幅250のサイズを設定
      .setHeight(300); //高さ300のサイズを設定
  SpreadsheetApp.getUi().showModelessDialog(htmlOutput, 'タイトル');
}

showSidebar(ユーザーインターフェイス)

サイドバーを表示させるメソッドです。こちらもHtmlServiceを使用するので自由に設定ができます。画像のように右側にサイドバーが作成されます。

以下コードです。showSidebarメソッドではタイトルを設定する際はsetTitleが必要です（５行目）。

function showSidebar(){
  var contents = '<p>htmlで作成されたものが記載されます。</p>';
  var htmlOutput = HtmlService
      .createHtmlOutput(contents)
      .setTitle('タイトル');
  SpreadsheetApp.getUi().showSidebar(htmlOutput);
}

createAddonMenu()

これ以降のスクリプトはスプレッドシートを開いた際に起動するonOpenという関数（トリガー）を使用します。トリガーの種類に関しては以下の記事内のトリガーの種類についてを参考にしてみてください。

【GAS】スマホやタブレットからスプレッドシートのスクリプトを実行する方法

またサンプルでは今まで書いたコードを使用するので全てスクリプトに記載しておいてもらえると同じ結果が再現できます。

アドオンにメニューを作成するメソッドです。以下のサンプルのアドオンメニューにtestというアドオンが作成されています。ここが今回createAddonMenu()で作成された部分です。

アドオン名はtestと出ていますがこちらはスクリプトエディタの名前が取得されます。下の画像の左上のtestの部分ですね。

ではスクリプトを見ていきましょう。onOpenですのでスプレッドシートが開かれると起動するスクリプトです。

function onOpen(e) {
  SpreadsheetApp.getUi()
      .createAddonMenu()
      .addItem('サイドバー', 'test6')
      .addToUi();
}

.addItem(“アドオンアイテム名”,”関数名”)　：testメニューのアイテムを追加（複数可）

アドオンアイテム名は任意で構いません。関数名は先ほどshowSidebar(ユーザーインターフェイス)で作成した関数名test6を入れています。このaddItemは追加をすることで複数作成可能です。

そして最後に.addToUi()を入れることによってスプレッドシートに表示されるので忘れずに入れてください。サイドバーをクリックしてみると関数test6で作成したサイドバーが出てきます。

アドオン機能をスクリプトで拡張したい場合に自作できるので便利な機能ですね。

createMenu(“メニュー名”)

メニューを作成します。googleリファレンスを少し中身を変えて作成したものを説明します。先ほどのcreateAddonMenuと違うのは新たにサンプルメニューという形でメニューが作成されていますね。

ではスクリプトを見ていきましょう。

function onOpen(e) {
  SpreadsheetApp.getUi()
      .createMenu('サンプルメニュー')
      .addItem('サイドバー', 'test6')
      .addSeparator()
      .addSubMenu(SpreadsheetApp.getUi().createMenu('サブメニュー')
          .addItem('アラート', 'test1')
          .addItem('アラート２', 'test2'))
      .addToUi();
}

解説

.createMenu(“サンプルメニュー”)　：メニューを作成（　）内にメニュー名を記載

.addItem(“アドオンアイテム名”,”関数名”)　：メニューアイテムを追加（複数可）

.addSeparator　：　サブメニューとの区切りをつけるための線を追加（サイドバーとサブメニューの間の線です。）

.addSubMenu()　:サブメニューを作成　作成する際はgetUi.createMenyを再び記載が必要

こちらも最後に.addToUi()が必要です。各アイテムをクリックすると記載した関数が起動しますので確認してみてください。

メニューを作成することでスクリプトエディタを開いて起動する手間が省け、自由にスクリプトを作成することが可能になります。

まとめ

画面上で様々な表示が出来るgetUiをご紹介しました。この機能が使えるようになると作業終了時にエラーがないか確認するためのメニューボタンが作成できたり、ドキュメント作成に必要な各マニュアルを開くために必要な資料をクリックひとつで表示させたりすることが可能になります。

今回はスプレッドシートでしたがドキュメントやフォームなどでも作成できますのでぜひ活用してオリジナルのドキュメントを作成してみてください。

最後までご覧いただきありがとうございました。