Google Apps Scriptでダイアログボックスやサイドバーを作る

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

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

難易度：

リンク

1 今回使用するスプレッドシート
2 メッセージボックス
3 ダイアログボックス
4 サイドバー
- 4.1 Google Apps Script側コード
- 4.2 HTML側コード
5 関連リンク
- 5.1 関連記事

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

msgboxあれこれ – Google Spreadsheet

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

メッセージボックス

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

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

function normalmsg(){

Browser.msgBox("これは、スプレッドシートでしか使えない。");

}

図：シンプルなボックス

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

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

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

function defaultmsg(){

//SpreadsheetのUIを取得

var ui = SpreadsheetApp.getUi();

//メッセージを表示

ui.alert("これは、どんなアプリでも使えるメッセージ");

}

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

インプットボックス

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

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

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

function promptmsg(){

var ui = SpreadsheetApp.getUi();

var ret = ui.prompt("テキストボックスに何かいれて下さい",

ui.ButtonSet.OK_CANCEL);

　　//押されたボタンによって処理を分岐

switch(ret.getSelectedButton()){

//OKボタンを押した時の処理

case ui.Button.OK:

var str = ret.getResponseText();

ui.alert(str);

break;

//キャンセルを押した時の処理

case ui.Button.CANCEL:

ui.alert("何もせずに閉じました。");

break;

case ui.Button.CLOSE:

break;

}

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

問合せボックス

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

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

function specialbox(){

var ui = SpreadsheetApp.getUi();

var re = ui.alert("自爆スイッチ", "自爆してみますか？", ui.ButtonSet.YES_NO_CANCEL);

switch(re){

case ui.Button.YES:

ui.alert("命は大切にしましょう。");

return 0;

break;

case ui.Button.NO:

ui.alert("自爆を中止しました。");

return 0;

break;

case ui.Button.CANCEL:

ui.alert("自爆をキャンセルしました。");

return 0;

break;

}

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

ダイアログボックス

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

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

GAS側コード(スプレッドシートのみ）

function htmlbox() {

　var output = HtmlService.createTemplateFromFile('index');

　var ss = SpreadsheetApp.getActiveSpreadsheet();

　var html = output.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)

.setWidth(500)

.setHeight(600);

　ss.show(html); //メッセージボックスとしてを表示する

}

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

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

※但しこの方法は、スプレッドシートのみでしか利用できません。FormやDocument等で利用する場合は次の項目で。

GAS側コード（全アプリ共通）

function dialogopen(){

//formを取得する

var ui = FormApp.getUi();

//HTMLダイアログを表示する

var html = HtmlService.createHtmlOutputFromFile('index')..setWidth(500).setHeight(600);

ui.showModalDialog(html, "タイトル");

}

こちらの方法は、スプレッドシートだけでなく、FormやDocument、Slideなどで使える方法です。前項の方法はスプレッドシートのみでしか利用が出来ない方法なので、こちらを推奨します。

といっても大した変更はなく、getUiで取得後に、ui.showModalDialogで表示すればモーダルダイアログになります。ui.showModelessDialogであればモードレスダイアログになります。後者はダイアログ以外の操作も可能で、前者はダイアログ以外の操作を一時的にロックする状態になります。

HTML側コード

<style>

h1 {font-size:16pt; background:#AAFFAA;padding:5px;}

p {margin:10px;}

</style>

<h1>スペシャルメッセージ</h1>

<p>

HTML ServicesとCSSでデコレートしたメッセージボックスだよ。

</p>

<input type="button" class="action" value="メッセージを閉じる"

onclick="google.script.host.close()" />

</div>

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

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

サイドバー

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

Google Apps Script側コード

//入力用コンソールをsidebarで表示する

function openSidebar() {

var ui = SpreadsheetApp.getUi();

var html = HtmlService.createTemplateFromFile("index").evaluate()

.setTitle('データ作成').setSandboxMode(HtmlService.SandboxMode.IFRAME);

ui.showSidebar(html);

}

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

HTML側コード

<style>

h1 {font-size:16pt; background:#AAFFAA;padding:5px;}

p {margin:10px;}

</style>

<h1>スペシャルメッセージ</h1>

<p>

HTML ServicesとCSSでデコレートしたメッセージボックスだよ。

</p>

<input type="button" class="action" value="メッセージを閉じる"

onclick="google.script.host.close()" />

</div>

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

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

MENU

Google Apps Scriptでダイアログボックスやサイドバーを作る

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