HTML サービスを使用すると、サーバーサイドの Apps Script 関数を操作できるウェブページを提供できます。これは、ウェブアプリの作成や、Google ドキュメント、スプレッドシート、フォームへのカスタム ユーザー インターフェースの追加に特に役立ちます。メールの本文を生成する際にも使用できます。
HTML ファイルを作成する
Apps Script プロジェクトに HTML ファイルを追加する手順は次のとおりです。
- Apps Script エディタを開きます。
- 画面左側で [ファイルを追加] > [HTML] の順にクリックします。
HTML ファイル内では、ほとんどの標準的な HTML、CSS、クライアント側 JavaScript を記述できます。制限で説明されているように、このページは HTML5 として提供されますが、HTML5 の高度な機能の一部は使用できません。
テンプレート化された HTML のセクションで説明したように、このファイルには、PHP のようにページがユーザーに送信される前にサーバーで処理されるテンプレート スクリプトレットを含めることもできます。
HTML をウェブアプリとして提供する
HTML サービスを使用してウェブアプリを作成するには、ページの配信方法をスクリプトに伝える doGet()
関数をコードに含める必要があります。次の例に示すように、関数は HtmlOutput
オブジェクトを返す必要があります。
Code.gs
function doGet() { return HtmlService.createHtmlOutputFromFile('Index'); }
Index.html
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> Hello, World! </body> </html>
この基本的なフレームワークを準備したら、スクリプトのバージョンを保存して、スクリプトをウェブアプリとしてデプロイします。
スクリプトをウェブアプリとしてデプロイした後、Google サイトに埋め込むこともできます。
HTML を Google ドキュメント、スプレッドシート、スライド、フォームのユーザー インターフェースとして提供
スクリプトがファイルにコンテナでバインドされている場合、HTML サービスでは Google ドキュメント、スプレッドシート、スライド、フォームにダイアログまたはサイドバーを表示できます。(Google フォームでは、カスタム ユーザー インターフェースは、フォームを開いて編集したユーザーにのみ表示されます。フォームを開いて開くユーザーには表示されません)。
ウェブアプリとは異なり、ドキュメント、スプレッドシート、フォームのユーザー インターフェースを作成するスクリプトは、特に doGet()
関数を必要としません。スクリプトのバージョンの保存もデプロイも必要ありません。代わりに、ユーザー インターフェースを開く関数は、HtmlOutput
オブジェクトとして HTML ファイルを、アクティブなドキュメント、フォーム、スプレッドシートの Ui
オブジェクトの showModalDialog())
メソッドまたは showSidebar()
メソッドに渡す必要があります。
たとえば、onOpen()
関数にはインターフェースを開くのが簡単なカスタム メニューを作成する機能があり、HTML ファイル内のボタンは google.script.host
API の特別な close()
メソッドを呼び出してインターフェースを閉じます。
Code.gs
// Use this code for Google Docs, Slides, Forms, or Sheets. function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .createMenu('Dialog') .addItem('Open', 'openDialog') .addToUi(); } function openDialog() { var html = HtmlService.createHtmlOutputFromFile('Index'); SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .showModalDialog(html, 'Dialog title'); }
Index.html
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> Hello, World! <input type="button" value="Close" onclick="google.script.host.close()" /> </body> </html>
このユーザー インターフェースを初めて表示する場合は、onOpen()
関数をスクリプト エディタで手動で実行するか、ドキュメント、スプレッドシート、フォーム エディタのウィンドウを再読み込みする必要があります(スクリプト エディタは閉じます)。その後は、ファイルを開くたびに数秒以内にカスタム メニューが表示されます。[Dialog] > [Open] を選択してインターフェースを表示します。