GASで最も簡単なHTMLサービスによるダイアログを作成する方法

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

Google Apps Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズです。

前回の記事はこちらです。

Google Apps Scriptでダイアログを作るいくつかの方法と基礎知識
GASの独自ダイアログを作成する機能を使って、csvファイルアップローダーを作る方法をシリーズでお伝えします。今回は、GASでダイアログの作るためのいくつかの方法とその概要についてをお送りしていきます。

GASでダイアログを作成するための基礎知識についてお伝えしました。

いよいよダイアログを作成していきますよ。

今回は、GASで最も簡単なHTMLサービスによるダイアログを作成する方法をお伝えします。

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

スポンサーリンク

プロジェクトを準備する

では、まずプロジェクトを作成していきます。

前回お伝えした通り、ダイアログを作成するにはコンテナバインドスクリプトである必要があります。

今回は、アップロードしたcsvファイルはスプレッドシートに展開したいので、スプレッドシートのコンテナバインドスクリプトを作成していきます。

スプレッドシートの「ツール」メニューから「スクリプトエディタ」ですね。

スプレッドシートからスクリプトエディタを開く

すると、スクリプトエディタが開きますので、プロジェクト名をクリックして「FileUploader」などと編集しておきます。

GASのプロジェクト名をFileUploderに変更する

HTMLファイルを作成する

今回作成するファイルアップローダーのダイアログはHTMLファイルを使用して作成していきますので、プロジェクトの新しいHTMLファイルを作成します。

スクリプトエディタの「ファイル」メニューから「New」→「HTMLファイル」とたどります。

GASでHTMLファイルを作成する

すると、「Create File」というダイアログが開きますので、ファイル名を「dialog」などとして「OK」です。

GASで作成するHTMLファイルの名前を決める

これで、以下のように「dialog.html」というHTMLファイルがプロジェクトに追加されます。

GASのプロジェクトに追加したHTMLファイル

HTMLファイルを作成した場合、ご覧の通り、ある程度のコードが作成されてますね。

ダイアログを表示する

では、続いて「コード.gs」のほうにスクリプトを作成して、この「dialog.html」をダイアログとして表示してみましょう。

以下の関数showDialogを作成して実行します。

function showDialog(){
  var html = HtmlService.createHtmlOutputFromFile('dialog');
  SpreadsheetApp.getUi().showModalDialog(html, "CSVアップロード");
}

いくつか認証に関するウィンドウが開くと思うので、認証を進めてください。

実行後、ブラウザでスプレッドシートのタブに切り替えると、以下のようにダイアログが表示されているはずです。

GASのHTMLサービスによる最も簡単なダイアログ

HtmlOutputオブジェクトを作成する

まず、2行目は「HtmlOutputオブジェクト」というHTMLを表示するためのオブジェクトを生成するところです。

HTMLファイルを引数にして、HtmlServiceのcreateHtmlOutputFromFileメソッドを使用します。

HtmlService.createHtmlOutputFromFile(ファイル名)

このあたりは、以下の記事もご参考ください。

GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説
GASユーザーのためのHTML・CSSによるWebページ制作入門を伝えしています。今回は、GASでWebページを表示するdoGet関数のスクリプトとその仕組について丁寧に解説をしていきますよ!

HtmlOutputオブジェクトをダイアログとして表示する

これにより生成したHtmlOutputオブジェクトを、スプレッドシートのUiオブジェクトに「ダイアログとして表示してくださいな」と渡すことで、ダイアログを表示することができます。

まず、スプレッドシートのUiオブジェクトはのgetUiメソッドで取得できます。

SpreadsheetApp.getUi()

そして、UiオブジェクトにHtmlOutputオブジェクトを渡してダイアログとして表示してもらうメソッドがshowModalDialogメソッドです。

Uiオブジェクト.showModalDialog(HtmlOutputオブエジェクト, タイトル)

実は、この一連の命令は、サイドバーを作成するときのそれととても似ています。

ぜひ、合わせてマスターすると良いと思います。

Google Apps Scriptで最も簡単なサイドバーを作成する方法
Google Apps Scriptでサイドバーを作る方法についてシリーズでお伝えしております。今回は、新規のプロジェクトの作成から最も簡単なサイドバーをドキュメントに表示するところまでを紹介します。

まとめ

以上、GASで最も簡単なHTMLサービスによるダイアログを作成する方法をお伝えしました。

文中でもお伝えしましたが、サイドバーの作り方とかなり類似していますので、合わせて覚えていくと良いと思います。

次回は、ダイアログの部品を作っていきます。

GASのダイアログで作成するファイルアップローダーの部品を配置する方法
Google Apps Scriptでダイアログを使ったcsvファイルアップローダーを作成する方法をお伝えするシリーズです。今回は、GASのダイアログで作成するファイルアップローダーの部品を配置する方法です。

どうぞお楽しみに!

連載目次:GASのダイアログでcsvファイルアップローダーを作ろう

Google Apps Scriptでダイアログを作成する方法はいくつかありますが、HTMLサービスとUiサービスを組み合わせると自由で多機能なダイアログが作れます。このシリーズではそんなダイアログの作り方を易しく紹介していきます。
  1. Google Apps Scriptでダイアログを作るいくつかの方法と基礎知識
  2. GASで最も簡単なHTMLサービスによるダイアログを作成する方法
  3. GASのダイアログで作成するファイルアップローダーの部品を配置する方法
  4. GASのダイアログでボタンをクリックしてアラート表示を動作させる方法
  5. GASのダイアログのボタンクリックでサーバー側の関数を呼び出すgoogle.script.run
  6. GASのダイアログのデータをフォーム要素を渡すことでまとめてサーバー側に渡す方法
  7. GASのダイアログでアップロードしたファイルをBlobオブジェクトとしてサーバー側に渡す方法
  8. Google Apps ScriptでCSVファイルのデータをスプレッドシートに展開する方法
  9. GASのダイアログをファイルをアップロードが成功したら閉じる方法
  10. GASのダイアログでファイルアップロードが失敗したらアラートを表示する方法
タイトルとURLをコピーしました