G Suite上でアプリケーションを作る上で欠かせないものの１つに「ダイアログボックス」や「メッセージボックス」、「サイドバー」があります。非常に頻繁に使うだけでなく、ユーザに入力をしてもらう顔でもあるので、Google Apps Scriptのプログラミングを行う上でも一番はじめに学習する項目の１つです。
今回は、Google Apps Scriptで実現できるこれらボックスの全てをまとめてみました。
目次
今回使用するスプレッドシート
開くと、メニューに「▶メッセージ」という項目が出ます。5種類のボックスと1種類のサイドバーが出ます。
メッセージボックス
スプレッドシートのみで使える
旧来からあるメソッドですが、スプレッドシートでのみ使えるもので、現在は非推奨のメソッドです。ドキュメントやスライドなどのアプリでは、使うことが出来ません。
1 2 3 | function normalmsg(){ Browser.msgBox("これは、スプレッドシートでしか使えない。"); } |
図：シンプルなボックス
通常のメッセージボックス
現在、G Suiteでメッセージボックスをつくる場合には、このメッセージボックスのメソッドを利用します。今回はスプレッドシートのケースですが、フォームならば、FormApp.getUi()で始めます。
getUiでUIを取得させて、ui.alertで表示する仕組みです。
1 2 3 4 5 6 7 | 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()で値を取り出せます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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を指定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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で作成しますので、ありとあらゆるタイプの豪華なダイアログボックスを作成する事が可能です。自分も普段はこちらをよく利用しています。
Google Apps Script側コード
1 2 3 4 5 6 7 8 | 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ファイルを追加しています。
HTML側コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css"> <style> h1 {font-size:16pt; background:#AAFFAA;padding:5px;} p {margin:10px;} </style> <h1>スペシャルメッセージ</h1> <p> HTML ServicesとCSSでデコレートしたメッセージボックスだよ。 </p> <div align="center"> <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側コード
1 2 3 4 5 6 7 | //入力用コンソールをsidebarで表示する function openSidebar() { var ui = SpreadsheetApp.getUi(); var html = HtmlService.createTemplateFromFile("index").evaluate() .setTitle('データ作成').setSandboxMode(HtmlService.SandboxMode.IFRAME); ui.showSidebar(html); } |
HTMLダイアログボックスとは異なり、showSidebar()にて表示してくれます。
HTML側コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css"> <style> h1 {font-size:16pt; background:#AAFFAA;padding:5px;} p {margin:10px;} </style> <h1>スペシャルメッセージ</h1> <p> HTML ServicesとCSSでデコレートしたメッセージボックスだよ。 </p> <div align="center"> <input type="button" class="action" value="メッセージを閉じる" onclick="google.script.host.close()" /> </div> |
ダイアログと同じHTMLを利用しています。仕組みも全く同じです。但しサイズ指定が出来ないので、サイドバーを構築する場合には、HTMLの書き方に少しだけ気を使う必要があります。
図：サイドバーは右側に表示されます。
