【GAS】WebアプリやAPIも作れちゃう！HtmlServiceについて、できることをまとめてみた。　～その③ スプレッドシートのUI ～

HtmlServiceまとめシリーズ

今まではWebアプリケーションを作っていく話でしたが、ここでは少し毛色を変えて、スプレッドシートにちょっとしたUIをつけるためにHtmlServiceを使う方法をご紹介します。

HtmlServiceまとめシリーズ

お手軽なサイドバーUI
モーダルダイアログUI
まとめ

お手軽なサイドバーUI

以下のように、HtmlServiceを使ってスプレッドシートにサイドバーをつけることができます。

プログラムはこちらになります。


sidebar.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  </head>
  <body>
    <label for="send-id">送信ID</label>
    <br>
    <select id="send-id" name="send-id" style="margin-bottom: 10px;" onchange="setMailProp(this.value)">
      <?
        var ids = getIds();
        for(var i = 0, l = ids.length; i < l; i++) {
          output.append('<option value="' + ids[i] + '">' + ids[i] + '</option>');
        }
      ?>
    </select>
    <br>
    <label for="mail-to">送信先（カンマ区切りで複数送信）</label><br>
    <input id="mail-to" value="" style="margin-bottom: 10px;"/><br>
    
    <label for="mail-subject">件名</label><br>
    <input id="mail-subject" value="" style="margin-bottom: 10px;"/><br>
    
    <label for="mail-body">メール本文</label><br>
    <textarea id="mail-body"></textarea><br>

    <button class="action" onclick="sendMail()">メール送信！</button><br>
    <div id="send-status"></div>
    <script>
      $(function() {
        setMailProp(1);
      });
      
      function setMailProp(id) {
        google.script.run.withSuccessHandler(function(data) {
          $("#mail-to").val(data.to);
          $("#mail-subject").val(data.subject);
          $("#mail-body").html(data.body);
        }).getMailProp(id);　  // GAS側のgetMailProp関数を呼び出し
      }
      
      function sendMail() {
        $("#send-status").html('メールを送信しています');
        
        var id      = $("#send-id").val();
        var mail_to = $("#mail-to").val();
        var subject = $("#mail-subject").val();
        var body    = $("#mail-body").html();
        
        google.script.run
        .withFailureHandler(function(err) {
          $("#send-status").html(err);
        })
        .withSuccessHandler(function(res) {
          $("#send-status").html('メールを送信しました！');
        })
        .sendMail(id, mail_to, subject, body);  // GAS側のsendMail関数を呼び出し
      }
    </script>
  </body>
</html>


コード.gs

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('UI表示')
    .addItem('サイドバーを表示', 'showSidebar')
    .addToUi();
}

function showSidebar() {
  var sidebar = HtmlService
               .createTemplateFromFile('sidebar.html')
               .evaluate()
               .setSandboxMode(HtmlService.SandboxMode.IFRAME)
               .setTitle('メール送信')
  SpreadsheetApp.getUi().showSidebar(sidebar);
}

function getIds() {
  var values = getData();
  var ids = [];
  for(var i = 1, l = values.length; i < l; i++) {
    ids.push(values[i][0]);
  }
  return ids;
}

function getMailProp(id) {
  var prop = {};

  var values   = getData();
  prop.to = values[id][1];
  prop.subject = values[id][2];
  prop.body    = values[id][3];
  
  return prop;
}

function sendMail(id, mail_to, subject, body) {
  GmailApp.sendEmail(mail_to, subject, body);
  
  updateSendDate(parseInt(id));
} 

function getData() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getActiveSheet();
  var value = sheet.getDataRange().getValues();
  return value;
}

function updateSendDate(id) {
  // 送信日付の更新
  var values = getData();
  values[id][4] = Utilities.formatDate(new Date(), "Asia/Tokyo", "yyyy/MM/dd HH:mm:ss");
  
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getActiveSheet();
  sheet.getDataRange().setValues(values);
}

毎回決まった時刻に決まったメールを送信するといった業務とかで使えそうなアプリを作ってみました。ちょっとだけ本文変えたいとかいう時のためにテキストエリアをつけています。

もちろん、このサイドバーからセルの内容を変えたりといったこともできるので、ユーザーにちょっとした操作をさせるといったときに便利なUIです。

また、サイドバーのCSSについてですが、「sidebar.html」に以下のようなlinkタグを挿入しています。

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">

これは、Googleが提供しているCSSのパッケージで、これを使うといい感じにGoogleデザインになります。

公式のヘルプはこちらです。

CSS package for Editor Add-ons | Google Workspace Add-ons | Google for Developers

モーダルダイアログUI

HtmlServiceで以下のようなモーダルダイアログを作ることもできます。

プログラムは以下のようになります。


modal.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <p>Hello, モーダルダイアログ!</p>
  </body>
</html>


コード.gs

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('UI表示')
    .addItem('サイドバーを表示', 'showSidebar')
    .addItem('モーダルダイアログを表示', 'showModal')
    .addToUi();
}

function showModal() {
  var html = HtmlService
               .createHtmlOutputFromFile('modal')
               .setSandboxMode(HtmlService.SandboxMode.IFRAME)
               .setWidth(250)
               .setHeight(300);
  var title = 'Modal dialog';
  
  SpreadsheetApp.getUi().showModalDialog(html, title);  
}

HTML5のFile APIと組み合わせれば、ドラッグ&ドロップでローカルファイルを取り扱ったりできます。

単純にメッセージを表示させるだけでもいいですし、使い勝手はとてもいいです。