【getUi】スプレッドシート等のUIをカスタマイズ!

GoogleAppsScript

【getUi()】メソッドは

Googleが提供するサービスのうち、

  • Google スプレッドシート
  • Google ドキュメント
  • Google スライド
  • Google フォーム

の4つのサービスで、かつ、Container bound Scriptでプログラムする場合のみに利用できるUiクラスのオブジェクトを取得することができるメソッド

です。

Uiオブジェクトを取得することで、上記のサービスでメニューをカスタマイズしたり、画面上に案内文などを表示するためのダイアログボックスを作成したりなどUI部分のカスタマイズをすることができるようになります。

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

 

クラス

【SpreadsheetAppクラス】【DocumentAppクラス】【SlidesAppクラス】【FormAppクラス】

上記の4つのクラスオブジェクトでgetUiメソッドを利用することができます。上記の4つに共通する点は、Container bound ScriptでGoogle Apps Scriptのプログラミングが行える、点にあります。

※Google サイトもContainer bound Scriptでプログラムを書くことができるGoogleのサービスですが、唯一Uiクラスには対応しておりません。

 

Container bound Scriptとは【補足】

Uiクラスを知るにあたって重要な論点ではないのですが、Container bound Scriptについて少しだけ触れておこうと思います。

Container bound Scriptとは、スプレッドシートやドキュメントなどメニューからスクリプトエディタを作成してプログラムすることができるスクリプトです。

例えばスプレッドシートであれば「ツール」「スクリプトエディタ」という手順で新規スクリプトファイルを作成することができます。

以下に公式ドキュメントのリンクを載せますのでご参考にしてみてください。

 

Container bound Scriptに対して、Standalone Scriptというスクリプトも存在します。こちらは、Google Drive上で直接作成することができるスクリプトです。

Google Driveで「新規」「その他」「Google Apps Script」をクリックすることでStandalon Scriptでの新規スクリプトファイルを作成することができます。(※右クリックで表示されるメニューからも作成可能)

 

記述方法

SpreadsheetAppなどの各サービスの親クラスに続いてgetUiメソッドを記述します。

getUi()でUiクラスを取得するだけではスプレッドシート等の上に何らかの変化を起こせるわけではなく、Uiクラスで用意されているshowModalDialogメソッドやcreateMenuメソッドを利用することでスプレッドシート等のUIに対する命令を出すことができます。

 

 

戻り値

【Ui】

Uiクラスのオブジェクトを取得できます。ここからさらにUiクラスで用意されたメソッドを利用することができます。

 

ここで、Uiクラスのオブジェクトでよく利用されるメソッドを3つご紹介いたします。

 

alertメソッド

alertメソッドはスプレッドシート等の上にダイアログボックスを表示させるためのメソッドです。

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

例えば、Macで表示されるダイアログボックスの例を挙げますと、重要な設定の変更の際にパスワードの入力を求められる下図のようなダイアログボックスが表示されます。

 

alertメソッドで表示させることができるダイアログボックスは、主にメッセージ通知の用途に使う簡易的なものになります。下図が出力例となります。

 

詳しくはalertの解説ページをご覧ください。

もっと機能やデザインに凝ったダイアログボックスを表示させたい場合にはこのあとご紹介するshowModalDialogメソッドを利用します。

 

showModalDialogメソッド

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

同じダイアログボックスを表示させるメソッドであるalertとの違いは、より細かくダイアログボックスのデザインや機能を設定できる点にあります。

HTMLファイルを利用してWebページを作るようにダイアログボックスをデザインしたり、GSファイルと連携したより複雑なプログラムも仕込んだりすることができます。

詳しくはshowModalDialogの解説ページをご覧ください。

 

createMenuメソッド

createMenuメソッドはスプレッドシート等の上部のメニュー一覧に、作成したプログラムを動かすことができる任意のメニューボタンを追加することができるメソッドです。

※実際のところ、メニューに追加する情報などを記述するために他にもいくつかメソッドを利用します。

 

提携業務などで繰り返し使うことの多いプログラムをメニューに追加することで、ワンボタンでプログラムを動かすことができ作業がとっても楽になります。ITに慣れていない方にも利用するプログラムを示しやすいという意味では活用する場面が多いメソッドになるのではないでしょうか。

createMenuを利用してメニューにプログラムの実行ボタンを追加した例を下図に示します。

 

詳しくはcreateMenuの解説ページをご覧ください。

※後日追加予定

 

使用例

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

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

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

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

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

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

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

 

関連メソッド

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

yoshi

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

シェアする

コメントを残す

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

コメントする