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

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

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

getUiメソッド

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

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

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

あわせて読みたい

無料のアカウントでGASに初回の実行許可を与える方法【超入門】 今回と次回の投稿では、Google Apps Scriptでその他のG Suiteサービスの操作を行う際に必要なアクセス許可について説明します。Googleアカウントには無料のGoogleアカウ…

SpreadsheetApp.getUi().alert()

ダイアログを表示させるメソッドです。

状況に合わせて3種類の記述方法が用意されています。

alert(“表示内容”)

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

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

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

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

書き方は下記のサンプルコードを参考にしてください。

function alertWithButtonSettings() {
  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を記述していますので画像では

• はい
• いいえ
• キャンセル

の3つが表示されています。

そのほかに指定できるのは、

があります。

クリックされたボタンに連動して、返り値が変わるので、条件分岐でクリックされたボタンに合わせた処理が実現できます。

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

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

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

SpreadsheetApp.getUi().prompt()

こちらはテキストフィールド付きのダイアログを表示させるメソッドです。
こちらもalertと同じく3種類の表示方法があり、使い方もalertと同じで先ほどのコードのalert部分をpromptに変更するだけで機能します。
タイトルが出るサンプル画像とスクリプトだけ載せておきます。

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

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

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

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

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

function sampleCodeForShowModalDialog() {
  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などで選択肢を入れることなども可能になります。
位置づけとしては、カスタムダイアログとでも言いましょうか。

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

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

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

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

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

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

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

SpreadsheetApp.getUi().createAddonMenu()

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

あわせて読みたい

【GAS】スマホやタブレットからスプレッドシートのスクリプトを実行する方法 【GASでモバイル端末からスプレッドシートのスクリプトを実行する方法】 このブログへアクセスする方の検索ワードを分析していると、多くの方がスマートフォンやタブレ…

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

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

アドオン名はtestと出ていますがこちらはスクリプトエディタの名前が表示されます。

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

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

SpreadsheetApp.getUi().createAddonMenu().addItem(“アドオンアイテム名”, “関数名”)

任意のアドオンメニュー項目を追加することができます。

アドオンアイテム名は任意の名前を設定します。
関数名は先ほどshowSidebar(ユーザーインターフェイス)で作成した関数名sampleCodeForshowSidebarを入れています。
addItemはメソッドチェーンで複数回実行することで複数の項目を作成可能です。

そして最後に.addToUi()を入れることによってスプレッドシートにアドオンメニューを追加します。
サイドバーをクリックしてみると関数sampleCodeForshowSidebarで作成したサイドバーが出てきます。

createMenu(“メニュー名”)

スプレッドシートの上部メニューにカスタムメニューを追加します。
Googleリファレンスを少し中身を変えて作成したものを説明します。
先ほどのcreateAddonMenuと違うのは新たにサンプルメニューというカスタムメニューがスプレッドシート上に追加されました。

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

こちらも最後に.addToUi()つけてスプレッドシート上にカスタムメニューを追加します。
このほかにも、スプレッドシートでは、GASで作成した処理をキーボードのショートカットキーで実行する方法なども用意されています。

あわせて読みたい

GASをキーボードのショートカットキーで実行する方法 皆さんは今まで、スプレッドシート上でGASをエクセルのマクロをショートカットキーで呼び出すように実行したいと思ったことはありませんか？ スプレッドシートにも「マ…

まとめ

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

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

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