![[GAS小技]showModalDialog()でスプレッドシート内にモーダル入力フォームを作ってみよう](https://shoelab.jp/wp-content/uploads/2025/03/c6d591f1f5fe69e7c993a6c67054f740.webp)
こんにちは。イカPOです。 今回はGASを使ってスプレッドシート内にモーダルで表示されるHTMLベースの入力フォームを作る方法を紹介します。
モーダルフォームとは？初心者向けにわかりやすく解説
ポップアップのように表示される入力画面です。 GASでは SpreadsheetApp.getUi().showModalDialog() を使って実装可能です。
メリット： スプレッドシートの画面を保ったままデータ入力ができること。
GASでモーダルフォームを作るためのコード全文
コピペでとりあえず動かしたい方向け。 スプレッドシート → 拡張機能 → Apps Script を選択し、下記のコードを記述してください。
コード.gs
function showForm() {
const html = HtmlService.createHtmlOutputFromFile('form')
.setWidth(400)
.setHeight(300);
SpreadsheetApp.getUi().showModalDialog(html, '入力フォーム');
}
function submitForm(data) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sheet.appendRow([data.name, data.email, new Date()]);
}
form.html
エディタ内の「ファイルを追加」ボタンを押して form.html を作成。form.htmlがモーダルで表示されるフォームの元になります。
form.html（全文）
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h3>ユーザー情報</h3>
<form id="myForm">
名前: <input type="text" name="name"><br>
メール: <input type="email" name="email"><br><br>
<input type="button" value="送信" onclick="submitForm()">
</form>
<script>
function submitForm() {
const form = document.getElementById('myForm');
const data = {
name: form.name.value,
email: form.email.value
};
google.script.run
.withSuccessHandler(function() {
alert('送信完了！');
google.script.host.close();
})
.withFailureHandler(function(error) {
alert('送信に失敗しました。エラー内容: ' + error.message);
// 必要に応じて、エラーの詳細をログに出力するなどの処理を追加できます
})
.submitForm(data);
}
</script>
</body>
</html>
コード解説：GASとHTMLで作るモーダルフォームのしくみ
モーダルを表示する関数（showForm）
function showForm() {
const html = HtmlService.createHtmlOutputFromFile('form')
.setWidth(400)
.setHeight(300);
SpreadsheetApp.getUi().showModalDialog(html, '入力フォーム');
}
モーダルの画面設定
const html = HtmlService.createHtmlOutputFromFile('form')
.setWidth(400) // 横幅
.setHeight(300); // 縦幅
.createHtmlOutputFromFile('form')：HTMLファイル（form.html）を読み込んでいます。.setWidth()と.setHeight()：モーダルウィンドウのサイズを設定。
実際にモーダルを呼び出す処理
SpreadsheetApp.getUi().showModalDialog(html, '入力フォーム');
SpreadsheetApp.getUi()：スプレッドシートのUIを取得。.showModalDialog()：指定したHTMLをモーダルとして表示。'入力フォーム'：を変更することでモーダルのタイトルは変更可能。
データを処理する関数（submitForm）
function submitForm(data) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sheet.appendRow([data.name, data.email, new Date()]);
}
- form.html側からこの関数を呼び出しています。
- 受け取ったデータをスプレッドシートの最終行に追記します。
フォームからデータを送信する処理（form.html側）
<script>
function submitForm() {
const form = document.getElementById('myForm');
const data = {
name: form.name.value,
email: form.email.value
};
google.script.run
.withSuccessHandler(function() {
alert('送信完了！');
google.script.host.close();
})
.withFailureHandler(function(error) {
alert('送信に失敗しました。エラー内容: ' + error.message);
})
.submitForm(data);//コード.gs内のsubmitFormを呼び出す
}
</script>
google.script.runを使って、HTML側からGASの関数を実行しています。
実際にモーダルフォームを動かしてみよう
コード.gsとform.htmlの作成が終わったら、関数 showForm() を実行してみましょう。
スプレッドシート上にモーダルウィンドウが表示されます。あとは、フォームに入力して「送信」ボタンを押すだけ！ スプレッドシートにデータが追加されていれば成功です。
まとめ：GASでモーダル入力フォームを表示するポイント3つ
SpreadsheetApp.getUi().showModalDialog(html, 'モーダルウィンドウのタイトル');
- モーダルを表示する関数
const html = HtmlService.createHtmlOutputFromFile('form')
.setWidth(400)
.setHeight(300);
- モーダルサイズの設定
google.script.run
- HTML側からGASの関数を実行する仕組み
この3つを押さえれば、モーダル画面からスプレッドシートを操作することが可能になります。
ただし、毎回スクリプトエディタから実行ボタンを押して関数を実行するのは、手順が増えて面倒です。
この問題を解消するために、
次回は「スプレッドシート内にカスタムメニューを作成して、モーダルフォームをメニューから表示する方法」を紹介します！
この記事についてのご意見や間違いのご指摘は、ぜひX（旧Twitter）でお知らせください！
皆さまのフィードバックをお待ちしています。以下のアカウントまでお気軽にメッセージをお寄せください。
この記事には筆者の個人的な解釈も一部含まれています。一つの参考としてお読みいただきつつ、最終的にはご自身や担当の方としっかり相談の上で判断いただけますと幸いです。
皆様の声で情報をアップデートしていきます。よろしくお願いします。
