Googleスプレッドシート上に独自のモーダルウィンドウを出す方法（Google Apps Script）

2021/05/29

以前、スプレッドシート上にサイドバーを表示させる方法について書きました。

Google Apps Script（GAS）を使って、スプレッドシート上にサイドバーを出す方法です。サイドバーはスプレッドシートの右側に現れるダイアログで、グラフの書式設定とかでよく使われるものです。GASでこのサイドバーを出す方法について書き留めます。今回は下図のサイドバーが現れるところまでです。まずはサイドバーのデザインをHTMLで作るスプレッドシートからスクリプトエディタを立ち上げた上でHTMLファイルを作成します。「ファイル」−「新規作成」−「HTMLファイル」を選択します。HTMLファイル名を聞いてくるので任意のファイル...

入力フォームをサイドバーで表現しても良いのですが、横幅が200px固定という縛りがあるのでもう少し面積がほしいと思ったり、Excelマクロのフォームのような感じで表現したい場合は今回紹介するモーダルウィンドウがおすすめです。

1 実行例
2 フォームデザイン
3 GAS側の処理

実行例

こちらが実行例です。このウィンドウはタイトルバー（同じ白なので見にくいですが位置的にはWindowsフォームと同じ上部）をドラッグすると自由に動きます。今回はこれを作っていきます。

実行例を動画にしてみました。音声が出るので注意ください。

フォームデザイン

まず、フォームのデザインはHTMLで書く必要あります。ここはExcelマクロの方がGUIデザイナーがある分有利ですね。当然HTMLの知識は必要ですし見た目を良くしたいのであればCSSの知識が必要になります。

スクリプトエディタの左サイドメニューの「ファイル」の横にある「＋」をクリックします。プルダウンメニューの中から「HTML」を選択します。

以下のようにファイル名を聞いてくるので任意のHTMLファイル名を入力します。拡張子は不要です。今回はindexと名付けました。

入力すると以下の通り拡張子付きでファイル名がセットされ、エディタにはHTMLの基本構文がデフォルトで表示されます。

今回のHTMLは単純なフォームのみとします。ボタンを押すとgoogle.script.host.close();が作動しウィンドウが閉じます。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body {font-family: 'メイリオ';}
      p {margin:0px; font-family: 'メイリオ';}
      .btn {border: 1px solid #666; background: #eee; height:40px; width:150px; font-family: 'メイリオ';}
    </style>
  </head>
  <body style="padding:0px;">
    <div style="margin-top:10px;">
    <p>モーダルウィンドウのテストです。</p>
    </div>
    <div style="margin-top:10px;text-align; center;">
      <button class="btn" onclick="google.script.host.close()">閉じる</button>
    </div>
  </body>
</html>

GAS側の処理

GAS側のソースコードは以下の通りです。モーダルウィンドウのサイズとタイトルを指定して表示するだけのコードになります。

function showDialog() {
  　var output = HtmlService.createTemplateFromFile('index');
  　var ss = SpreadsheetApp.getActiveSpreadsheet();
  　var html = output.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
             .setWidth(500)
             .setHeight(300)
             .setTitle('モーダルウィンドウテスト');
  　ss.show(html);    //メッセージボックスとしてを表示する
}

showDialog関数を実行することで実行例で示したモーダルウィンドウが現れます。