Google Apps Scriptでダイアログを作るいくつかの方法と基礎知識

2019.11.172020.05.04

photo credit: Tony Webster Flash Flood Warning – Cell Phone Wireless Emergency Alert via photopin (license)

みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。

csvファイルをスプレッドシートに展開したいときってどうしてますか？

スプレッドシートでは、「ファイル」メニューのインポートからcsvファイルをアップロードして、展開することができるのですが

メニュー選んで…
アップロードタブ開いて…
ファイルをアップロードして…
インポートの設定してデータをインポート

みたいに、ちょっと手順がありまして、頻繁に行う作業だとすると、ちょっとだけ面倒です。

そこで、本シリーズでは、GASの独自ダイアログを作成する機能を使って、csvファイルアップローダーを作る方法をお伝えします。

csvアップロードの手順が減らせますし、他の処理を追加することもできます。

シリーズ初回の今回は、GASでダイアログの作るためのいくつかの方法とその概要についてをお送りしていきます。

では、行ってみましょう！

ダイアログとは
1. ダイアログを作れるサービス
GASでダイアログを作成するいくつかの方法
1. Browserクラスはスプレッドシート専用
2. Uiクラスのalertメソッドとpromptメソッド
HTMLサービスを使ってダイアログを作る
まとめ
連載目次：GASのダイアログでcsvファイルアップローダーを作ろう

ダイアログとは

ダイアログというのは、G Suiteのアプリケーションで作成して、作業画面で表示できるポップアップ画面のことです。

例えば、今回のシリーズで目標とするファイルアップローダーであれば、このような画面です。

ダイアログは一般的には「モーダル」という表示形式で、表示中は他の操作ができないようになっています。

ファイルアップロードが終わったり、「×」ボタンを押すと、ダイアログが閉じて、他の作業ができるようになります。

ダイアログを作れるサービス

GASでダイアログを作成できるのは、以下の４つのサービスです。

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

作成する場合は、上記サービスのコンテナバインドスクリプトで作る必要がありますよ。

GASでダイアログを作成するいくつかの方法

ちょっと詳しい方なら、「え？ダイアログなら、BrowserクラスのmsgBoxメソッド＆imputBoxメソッド、またはUiクラスのalertメソッド＆promptメソッド使えばいいじゃん」と思われると思います。

ですが、これらのメソッドにはいくつかの制約があります。

Browserクラスはスプレッドシート専用

なのですが、まずBlowerクラスは、「スプレッドシート専用」です。

ドキュメントやスライド、フォームでは使用できませんので、同じことをやるのであれば、他のサービスでも汎用的に使用できるUiクラスのメソッドを使うのが有効です。

Uiクラスのalertメソッドとpromptメソッド

例えば、メッセージを表示したい場合は、Uiクラスのalertメソッドを使って

function alert()
{
  var ui = SpreadsheetApp.getUi();
  var title = 'Hello, dialog';
  var prompt = 'ダイアログを確認したらボタンを押してください'
  ui.alert(title, prompt, ui.ButtonSet.YES_NO);
  SpreadsheetApp.getUi().prompt('何か入力してみて');
}

として、これを実行すれば、こんなメッセージダイアログを表示できます。

また、テキストを入力してもらいたい場合は

function prompt(){
  
  var ui = SpreadsheetApp.getUi();
  var title = 'Hello, dialog';
  var prompt = '何か入力してみてください'
  ui.prompt(title, prompt, ui.ButtonSet.OK_CANCEL);

}

とすれば、以下のような入力ダイアログを表示することができます。