G Suite上でアプリケーションを作る上で欠かせないものの1つに「ダイアログボックス」や「メッセージボックス」、「サイドバー」があります。非常に頻繁に使うだけでなく、ユーザに入力をしてもらう顔でもあるので、Google Apps Scriptのプログラミングを行う上でも一番はじめに学習する項目の1つです。

今回は、Google Apps Scriptで実現できるこれらボックスの全てをまとめてみました。

今回使用するスプレッドシート

開くと、メニューに「▶メッセージ」という項目が出ます。5種類のボックスと1種類のサイドバーが出ます。

メッセージボックス

スプレッドシートのみで使える

旧来からあるメソッドですが、スプレッドシートでのみ使えるもので、現在は非推奨のメソッドです。ドキュメントやスライドなどのアプリでは、使うことが出来ません。

図:シンプルなボックス

通常のメッセージボックス

現在、G Suiteでメッセージボックスをつくる場合には、このメッセージボックスのメソッドを利用します。今回はスプレッドシートのケースですが、フォームならば、FormApp.getUi()で始めます。

getUiでUIを取得させて、ui.alertで表示する仕組みです。

図:Browser.msgboxと見た目は変わらない

インプットボックス

ユーザに値を入力させる為のボックスです。但し、テキストボックスだけしかないので、使い所はそう多くありません。

getUiから始めるのは通常のメッセージボックスと同じですが、ui.promptでインプットボックスになります。その場合、第二引数にui.ButtonSet.OK_CANCELという項目がありますが、これを必ず入れる必要があります(これでOKボタンとキャンセルボタンが付きます)。

テキストボックスの値は、retという変数で受取ます。その場合、OKボタンを押した時にだけ取得させるので、switch文を用いて、OKボタンを押した時(ui.Buttn.OKの時)、retの変数に対してgetResponseText()で値を取り出せます。

図:テキストを入力してもらう為に使う

問合せボックス

ユーザに問合せを行う場合に利用するメッセージボックスです。通常は、OKボタン、NOボタン、キャンセルボタンの3つで構成されています。インプットボックス同様、どのボタンを押されたか?で処理を分岐させます。

ui.alertで表示する点は通常のメッセージボックスと同じ。第一引数がボックスのタイトル、第二引数がメッセージ、第三引数がインプットボックスと同じくボタン定義のui.ButtonSet.YES_NO_CANCELを指定します。

図:処理開始前の確認などで使います。

ダイアログボックス

これまで紹介したメソッドは、極めて単純なメッセージボックスで、それ以上の機能を持ち合わせていません。その為、ユーザにより複雑な処理をしてもらいたい場合(例えばカレンダーで日付を指定であったり、テキストではなく、ラジオボタンで選択させたり)、そのままでは実現ができません。

そこで利用するのが、HTML Serviceを使ったダイアログボックスです。HTMLで作成しますので、ありとあらゆるタイプの豪華なダイアログボックスを作成する事が可能です。自分も普段はこちらをよく利用しています。

Google Apps Script側コード

今回はcreateTemplateFromFileを使ってますが、createHtmlOutputFromFileを使っても問題ありません。スプレッドシートを取得して、ss.show()にてHTMLのボックスを表示します。

ダイアログのサイズを任意に指定が出来ます。setWidthsetHeightのそれぞれに数値を入れれば、pixcel単位でダイアログボックスのサイズを指定可能です。また、表示するHTMLファイルを予めスクリプトエディタの画面上で追加しておく必要があります。今回はindexというHTMLファイルを追加しています。

HTML側コード

HTML表示なので、jQueryBootstrapなどのUIライブラリももちろん利用出来ます。CSSで加工も出来ます。ダイアログボックスを閉じる時には、ボタンに対してonClickイベントにて、google.script.host.close()を指定する事で閉じる事が可能になります。

図:自在にライブラリを使う事が可能です。

サイドバー

サイドバーはHTMLダイアログボックスと非常に似ていますが、ダイアログボックスと異なりユーザの画面上ではなく右サイドに出てきます。作業の邪魔をしないので、設定関係であったりスプレッドシートのデータに対して作業するようなツールボックス的な利用が主流です。作り方自体は、ダイアログボックスと同じく、HTMLを使って作成します。

Google Apps Script側コード

HTMLダイアログボックスとは異なり、showSidebar()にて表示してくれます。

HTML側コード

ダイアログと同じHTMLを利用しています。仕組みも全く同じです。但しサイズ指定が出来ないので、サイドバーを構築する場合には、HTMLの書き方に少しだけ気を使う必要があります。

図:サイドバーは右側に表示されます。

関連リンク

共有してみる: