ADVERTISEMENT

【Googleスプレッドシート】Apps ScriptのHtmlServiceでダイアログ表示!モーダルウィンドウの実装

Googleスプレッドシート
【Googleスプレッドシート】Apps ScriptのHtmlServiceでダイアログ表示!モーダルウィンドウの実装
🛡️ 超解決

Googleスプレッドシートを操作していると、ユーザーに入力を促すダイアログや、注意を促すモーダルウィンドウを表示したい場面があるでしょう。そんなときに役立つのが、Apps ScriptのHtmlServiceです。HtmlServiceを使えば、HTMLとJavaScriptで作ったカスタムUIをスプレッドシート上に表示できます。この記事では、ダイアログとモーダルウィンドウの実装方法を、サンプルコードを交えて詳しく解説します。

具体的には、基本的なダイアログ表示から、フォーム付きのモーダル、ダイアログからスプレッドシートにデータを渡す方法までを紹介します。この記事を読めば、スプレッドシートに組み込んだツールバーやボタンから、自在にポップアップを呼び出せるようになります。

【要点】Apps ScriptのHtmlServiceでダイアログを表示する方法

  • showModalDialog: モーダルウィンドウを表示し、ユーザーが閉じるまで操作をブロックします。
  • createHtmlOutputFromFile: HTMLファイルからUIを作成し、ダイアログに組み込みます。
  • google.script.run: ダイアログ内のJavaScriptからサーバー側の関数を呼び出してデータをやり取りします。

ADVERTISEMENT

HtmlServiceの概要とできること

Apps ScriptのHtmlServiceは、GoogleスプレッドシートやGoogleドキュメントなどのGoogle Workspaceアプリ内に、カスタムのHTMLインターフェースを表示するためのサービスです。これを使うと、標準のダイアログでは実現できない自由度の高いUI、例えば入力フォーム、ボタン、画像、スタイルシートを適用した見た目などを実装できます。

典型的な用途としては、以下のようなものがあります。

  • ユーザーに複数の項目を入力してもらうフォーム
  • 選択肢をリストから選ばせるセレクトボックス
  • 処理の進捗状況を表示するバー
  • 確認ダイアログ(OK/キャンセル)

HtmlServiceでダイアログを表示するには、主に二つのメソッドを使います。一つはshowModalDialogで、表示中はスプレッドシートの操作をブロックするモーダル形式です。もう一つはshowSidebarで、画面右側にサイドバーとして表示します。この記事ではモーダルダイアログに焦点を当てます。

前提条件として、Apps Scriptの基本的な操作(スクリプトエディタの開き方、プロジェクトの作成)を理解していることを想定します。まだの方は、ツールメニューからスクリプトエディタを開いて、新しいプロジェクトを作成してください。

ダイアログ表示の基本手順

それでは、実際にダイアログを表示する手順を説明します。ここでは、シンプルな「Hello, World!」メッセージを表示するモーダルを作ります。

HTMLファイルの作成

  1. スクリプトエディタでHTMLファイルを追加する
    スクリプトエディタのメニューから「ファイル」→「新規作成」→「HTMLファイル」を選択します。ファイル名を「index」にします。
  2. HTMLの内容を記述する
    以下のコードをindex.htmlに貼り付けます。
    <!DOCTYPE html>
    <html>
    <head>
    <base target="_top">
    <style>body{font-family:sans-serif;padding:20px;}</style>
    </head>
    <body>
    <h1>Hello, World!</h1>
    <p>これはHtmlServiceで表示したダイアログです。</p>
    <input type="button" value="閉じる" onclick="google.script.host.close()" />
    </body>
    </html>
  3. GASコードでダイアログを呼び出す
    スクリプトエディタのコード.gs(または新規作成)に以下の関数を追加します。
    function showHelloDialog() {
    var html = HtmlService.createHtmlOutputFromFile('index')
    .setWidth(400)
    .setHeight(300);
    SpreadsheetApp.getUi().showModalDialog(html, 'サンプルダイアログ');
    }
  4. 関数を実行する
    スクリプトエディタでshowHelloDialog関数を選んで実行します。初回は承認が必要です。承認後にスプレッドシートに戻ると、「サンプルダイアログ」というタイトルのモーダルが表示されます。

フォーム付きのモーダルを実装する

次に、ユーザーが入力した値をスプレッドシートに渡す、実用的な例を紹介します。ユーザー名を入力してボタンを押すと、そのデータがシートに記録されるモーダルを作ります。

HTMLファイル(form.html)

  1. 新しいHTMLファイルを作成する
    「form.html」という名前で作成します。
  2. コードを記述する
    以下のHTMLを記述します。
    <!DOCTYPE html>
    <html>
    <head>
    <base target="_top">
    <style>body{font-family:sans-serif;padding:20px;}</style>
    <script>
    function submitForm() {
    var name = document.getElementById('name').value;
    google.script.run
    .withSuccessHandler(function(result) {
    alert('保存しました: ' + result);
    google.script.host.close();
    })
    .saveName(name);
    }
    </script>
    </head>
    <body>
    <h2>ユーザー情報</h2>
    <label>名前: <input type="text" id="name" /></label>
    <br><br>
    <input type="button" value="送信" onclick="submitForm()" />
    <input type="button" value="キャンセル" onclick="google.script.host.close()" />
    </body>
    </html>

GASコード(サーバー側)

  1. 関数を追加する
    コード.gsに以下の関数を追加します。
    function showFormDialog() {
    var html = HtmlService.createHtmlOutputFromFile('form')
    .setWidth(400)
    .setHeight(250);
    SpreadsheetApp.getUi().showModalDialog(html, '入力フォーム');
    }

    function saveName(name) {
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    sheet.appendRow([name, new Date()]);
    return '名前: ' + name;
    }

  2. 実行する
    showFormDialogを実行すると、フォーム付きのモーダルが表示されます。名前を入力して「送信」をクリックすると、アクティブなシートの最終行に名前と日時が追加されます。

ADVERTISEMENT

ダイアログ表示時の注意点とよくあるトラブル

モーダルが表示されない場合

スクリプトエディタから関数を直接実行しても、スプレッドシート側にダイアログが表示されないことがあります。これは、スクリプトエディタ上で実行するとUI操作が許可されないためです。必ずスプレッドシートのメニューやボタンから、カスタム関数をトリガーするようにしてください。

例えば、カスタムメニューを作成してそこから呼び出す方法が確実です。以下のコードをコード.gsに追加します。

function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('カスタムメニュー')
.addItem('ダイアログを表示', 'showHelloDialog')
.addItem('フォームを表示', 'showFormDialog')
.addToUi();
}

このonOpen関数はスプレッドシートを開くたびに実行され、メニューが追加されます。メニューから項目を選ぶと、ダイアログが正しく表示されます。

google.script.runが動作しない

ダイアログ内のJavaScriptでgoogle.script.runを使ってサーバー関数を呼び出すとき、正しい関数名が指定されていないとエラーになります。また、関数がスプレッドシートのアクティブシートを想定している場合、スクリプトが適切な権限を持っているか確認してください。承認が必要な場合は、初回実行時にポップアップが表示されます。

さらに、withSuccessHandlerやwithFailureHandlerを設定することで、成功時・失敗時の処理を分けられます。フォームの例のように、成功時にダイアログを閉じることも可能です。

ダイアログのサイズが意図と異なる

setWidthやsetHeightで指定したサイズが、実際の表示とずれることがあります。これは、HTMLコンテンツ内の要素のサイズやマージンが影響するためです。あらかじめCSSでbodyのマージンを0に設定するなどして、予定通りのサイズになるよう調整しましょう。

ダイアログを閉じる方法

HTML内に閉じるボタンを設置するには、google.script.host.close()を呼び出します。また、モーダルダイアログは右上の×ボタンでも閉じられます。ユーザーが閉じたときの処理をフックしたい場合は、withCloseHandlerを使います。

showModalDialogとshowSidebarの比較

比較項目 showModalDialog showSidebar
表示形式 中央に浮かぶモーダルウィンドウ 画面右側のパネル
ブロック動作 閉じるまでスプレッドシート操作不可 スプレッドシート操作と同時に利用可能
適した用途 短時間の入力・確認作業 補助的なツール・情報表示
閉じる方法 ×ボタンまたはコードでclose ×ボタンまたはコードでclose

まとめ

この記事では、GoogleスプレッドシートのApps ScriptでHtmlServiceを使い、ダイアログやモーダルウィンドウを表示する方法を解説しました。createHtmlOutputFromFileでHTMLファイルを読み込み、showModalDialogでモーダル表示することで、カスタムUIを簡単に実装できます。また、google.script.runを使えば、ダイアログからスプレッドシートにデータを渡したり、シートのデータを取得して表示することも可能です。

次に試す応用例としては、選択範囲のデータをグラフで表示するダイアログや、外部APIから取得した情報をリスト表示するサイドバーなどが考えられます。ぜひ、自分の業務に合わせてカスタマイズしてみてください。


ADVERTISEMENT

この記事の監修者
✍️

超解決 第一編集部

疑問解決ポータル「超解決」の編集チーム。正確な検証と、現場視点での伝わりやすい解説を心がけています。

解決 関連記事でさらに詳しく

Googleスプレッドシートの人気記事ランキング