リッチなメッセージボックスを作成する

通常、ユーザにメッセージを表示する手法として、メッセージボックス（Browser.msgBoxメソッド）や、ポップアップメッセージ（toastメソッド）を利用しますが、これらのメッセージボックスは大きさも小さいことや、メッセージとして送れる量が限られている点、また、見た目が実にシンプルで複雑なダイアログを作るには向いていません。また、これらは基本的にスプレッドシートでしか利用することが出来ません。他のアプリには実装ができないメソッドです。

そこで、HTML Serviceを利用したリッチなメッセージボックスを使うと複雑なことや、見た目がリッチなメッセージボックスを作成することが可能です。やや難易度の高いものではありますが、ユーザとのやり取りにも使用することができ、また、JavaScriptの処理も記述できる柔軟性があるため、利用価値の高いものと言えます。

HTML Servicesを利用したメッセージボックス

サンプル

呼び出すスクリプト側

function doGet() {
  var output = HtmlService.createTemplateFromFile('overlaplist');
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var html = output.evaluate();
  ss.show(html);    //メッセージボックスとしてを表示する
}

表示するHTML側（overlaplist.html）

<html>
<head>
  <meta http-equiv="Content-Type"
  content="text/html; charset=utf-8">
  <title>重複分析結果</title>
  <style>
    h1 {font-size:16pt; background:#AAFFAA;padding:5px;}
    p {margin:10px;}
  </style>
</head>
<body>
  <h1>重複している項目一覧</h1>
  <p>
<?
  
  output.append(viewovlap); 
  
  ?>
</p>
<div align="center">
<input type="button" value="メッセージを閉じる"
  onclick="google.script.host.close()" />
</div>
</body>
</html>

書き方

書き方であるが、今回はあらかじめ別のプロシージャ側にHTMLタグ付きの値を格納しておいてあるケースをもって説明する。

  1. doGet()にてコードを記述する。
  2. 表示に使用するHTMLファイルをプロジェクトに追加しておく。
  3. HtmlService.createTemplateFromFileメソッドを使用し、2.で追加したHTMLファイルの拡張子なしの名称を引数に入れておく。
  4. 変数に3.をoutput.evaluate()メソッドにて出力しておく
  5. show()メソッドにて表示させる引数には4.の変数を入れておく。
  6. HTML側にHTMLをコーディングするが、変数の値を表示する時や処理をさせたいときは<?と?>との間に記述する。
  7. また、その際、HTMLタグ付きの値を表示する場合には、タグ解釈させるためにoutput.appendメソッドで引数にその格納しておいてある変数を指定する。
  8. クローズボタンを記述する時はGoogle Apps Scriptの場合、google.script.host.close()でonclickイベントに記述する。

ヒント

  • 通常、Siteなどで使用する時には、return output.evaluate(); で表示されるが、スプレッドシートの場合これでは何も表示されないので、一旦変数に格納した後、show()メソッドで表示をしてあげないといけない。
  • HTMLファイル側では<?タグと?>タグとの間にJavaScriptの処理や他のプロシージャで格納した変数の値を記述する。<?=でも表示されるのだが、問題があるので通常は使用しない。
  • HTMLファイル側では、ヘッダーやスタイルシートを適用することが出来るが、ケースによっては<html>タグや<body>タグは取り除いておかないと表示されない場合がある。
  • HTMLファイル側では、ボタンなどのフォームコンポーネントを記述することができる。
  • 別のプロシージャで変数に格納した文字列を表示できるが、改行や装飾を個別にしたい場合には、変数に格納する前に文字列に<BR>タグや<B>タグなどをあらかじめ合わせて格納しておく必要性がある。HTML側でoutput.appendメソッドでそれらの文字列はHTMLタグとして解釈してくれる。改行コード（\\nなど）はダメ。
  • また、その時半角スペースなどは入れてもスルーされるので、&nbsp;を入れてあげておく。この辺りはHTMLの記述のルールと全く同じ。

実行結果

参考URL

UiInstanceを利用したメッセージボックス

サンプル

今回のスクリプトは、プロジェクトプロパティに設定値を保存するようにしている為、冒頭ではそれを呼び出し、テキストボックスの値をそこに保存するようにしています。

function tomailset(){
  var ui = FormApp.getUi();
  var tomail = ScriptProperties.getProperty("mail");
  var re = ui.prompt("受注する人のメールアドレスを入力してください。\n現在設定されているメールアドレスは【" + tomail + "】です。", 
      ui.ButtonSet.OK_CANCEL);
  switch(re.getSelectedButton()){
    case ui.Button.OK:
      var str = re.getResponseText();
      ScriptProperties.setProperty('mail',str);
      ui.alert(str + "で設定されました。");
      break;
    case ui.Button.CANCEL:
      ui.alert("設定はキャンセルされました。");
      break;
    case ui.Button.CLOSE:
      break;
  }
}

ヒント

  • 今回のはinputboxであったが、単純な質問のダイアログを作成する場合には、ui.promptの部分をui.alertに変更する。
  • 基本的にこのスクリプトはBrowser.msgboxの互換と思って良い。
  • DocumentAppやFormAppでも使用することができるので、こちらがメッセージボックスの主体となります。もちろん、SpreadsheetAppでも使用できるので、今後、Browser.msgBoxは消えていくと思われます。

実行結果