【showModalDialog】スプレッドシート等の上でダイアログボックスを表示させる

GoogleAppsScript

【showModalDialog】メソッドは

Google スプレッドシート等の画面上でダイアログボックスを表示させることができるメソッド

です。

公式リファレンスの該当ページはこちら

 

クラス

【Uiクラス】

Google スプレッドシート、Google ドキュメント、Google スライド、Google フォームのサービスでContainer bound Scriptでのスクリプトファイルでプログラミングをしている場合のみ、

SpreadsheetAppクラスなど各サービスの一番親となるクラスオブジェクトに対してgetUiメソッドを利用することでUiクラスを取得できます。

getUiメソッドのページでも詳しく解説しております。

 

ダイアログボックスとは?

ダイアログボックスとはデータの入力や確認を求めたり、何らかのメッセージを表示させるために作られるウインドウのことです。

 

例えば、Macで重要な設定の変更をする場合は下図のように「システム環境設定が変更を加えようとしています。」という表示が出てMacのパスワードの入力を求められますが、このウインドウがダイアログボックスです。

このダイアログボックスを表示させることで、利用者に対して「大事な変更を加えますよ」というメッセージを伝える、パスワードを入力させることができます。

 

このようなダイアログボックスをスプレッドシート等の上で表示させるためのメソッドがshowModalDialogです。

 

記述方法

showModalDialogを利用するためにまずgetUiでUiクラスのオブジェクトを取得します。getUiはSpreadsheetAppクラス等のオブジェクトに利用できるメソッドになりますので、SpreadsheetApp.getUi()といったような記述になります。

ダイアログボックスの表示に成功すると下図のようなダイアログボックスがスプレッドシート上に表示されます。

 

showModalDialogは2種類の引数を必要としていますのでそれらについても用意、準備しなければなりません。具体的に用意するものについての参考コードは利用例に記述するとして、ここではその引数の概要についてご説明いたします。

userInterface

引数userInterfaceには表示させたいダイアログボックスのデザインや機能などを構築するためのデータを記述します。データというのは具体的にはHTMLデータのことです。

userInterfaceで読み込まれたデータによって、下図の赤枠で囲った部分が構築されます。

 

userInterfaceに読み込ませるHTMLデータですが、ただHTMLデータを用意したら良いというものではなく、具体的には以下の処理が行われたオブジェクトを読み込ませる必要があります。

  • ダイアログボックスとして表示させたいHTMLデータを作成する(HTMLファイル)
  • HTMLデータをHtmlTemplateクラスのオブジェクトに変換する(createTemplateFormFileメソッドなど)
  • さらに、HtmlTemplateオブジェクトをHTMLを出力するためのHtmlOutputオブジェクトに変換する(evalueteメソッド)

 

スクリプトエディタではGoogle Apps Scriptの記述がメインのGSファイルだけでなく、Webページなどの構築に利用されるHTMLを書くためのHTMLファイルの作成が可能です。あらかじめ、ダイアログボックス用にHTMLファイルを作成して表示させたい内容をコーディングしておきます。

そして、そのHTMLファイルをcreateTemplateFromFileメソッドでHtmlTemplateクラスのオブジェクトに変換させ、さらに、HtmlTemplateクラスで用意されているevalueteメソッドを使ってダイアログボックスとして出力が可能なHtmlOutputクラスに変換することで、ようやくshowModalDialogメソッドでダイアログボックスとして呼び出すことができる引数userInterfaceが完成します。

 

※引数に直接HTMLコードを記述して出力させるcreateTemplateメソッドというものもありますが、プログラムで動的に出力内容を変化させる事情などがない限りは、上記のようにHTMLファイルを用意してそれをcreateTemplateFromFileメソッドで呼び出す方が記述も管理もラクです。そういった手段があるということだけ頭の片隅に置いておいてください。

 

title

引数titleにはダイアログボックスのタイトルとして表示させたい名前を記入します。入力する上でテキストの前後には ” “ を入力する必要があります。

titleに記入されたテキストは下図のように左上に表示されます。

 

戻り値

showModalDialogメソッドには戻り値はありません。

 

使用例

コピーボタン付きダイアログボックス出力

スプレッドシート上でコピーボタンがほしいと思ったことはありませんか?

図形を挿入して、挿入した図形にコピー機能を持ったスクリプトを充てることでコピーボタンは作れますが、スプレッドシートへの図形の挿入はコピー・アンド・ペーストができないなど意外とめんどくさい。

また、スプレッドシート上のデータ量などに応じて動的にコピーボタンを生成することも向いていない。

そこで、提案するのがコピーボタンを載せたダイアログボックスの出力機能。コピーする内容はプログラムで動的に変化させることができ、ダイアログボックスの出現条件もトリガー機能の条件設定で調整可能なので、図形データを使ったボタンよりも活用できる幅が広い。

GSファイルとHTMLファイルとを使ったダイアログボックスのコードを下部に記したので、ぜひ参考にしてみてください。

※このコードを記述するにあたって、某サイトのコードを参考にさせていただきましたが、どこのサイトを参考にしたのか忘れてしまったので参照元を記述しておりません。もし気づいた方がいらっしゃればご連絡いただけると幸いです。

 

関連メソッド

以下のメソッドも確認しておくと、よりshowModalDialogを活用することが可能です。(後日追加予定)

yoshi

JavaScript、Google Apps Scriptがメイン。Pythonもちょっとだけ。Google Apps Script開発、Pythonスクレイピングなどをする機会が多いです。ご依頼なども承っております。 記事内容についてのご意見・ご指摘などいただけますと幸いです。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


コメントする