Googleスプレッドシート上に独自のモーダルウィンドウを出す方法（Google Apps Script）
以前、スプレッドシート上にサイドバーを表示させる方法について書きました。
入力フォームをサイドバーで表現しても良いのですが、横幅が200px固定という縛りがあるのでもう少し面積がほしいと思ったり、Excelマクロのフォームのような感じで表現したい場合は今回紹介するモーダルウィンドウがおすすめです。
実行例
こちらが実行例です。このウィンドウはタイトルバー（同じ白なので見にくいですが位置的には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関数を実行することで実行例で示したモーダルウィンドウが現れます。
スポンサーリンク