HTML サービスを使用すると、サーバーサイドの Apps Script 関数とやり取りできるウェブページを提供できます。これは、Google ドキュメント、スプレッドシート、フォームでウェブアプリを作成したり、カスタム ユーザー インターフェースを追加したりする場合に特に便利です。メールの本文を生成するのにも使用できます。
HTML ファイルを作成する
Apps Script プロジェクトに HTML ファイルを追加する手順は次のとおりです。
- Apps Script エディタを開きます。
- 画面左側で [ファイルを追加] > [HTML] をクリックします。
HTML ファイルには、標準的な HTML、CSS、クライアントサイド JavaScript のほとんどを記述できます。ページは HTML5 として配信されますが、制限事項で説明されているように、HTML5 の一部の高度な機能は使用できません。
ファイルには、PHP と同様に、テンプレート化された HTML のセクションで説明したように、ページがユーザーに送信される前にサーバーで処理されるテンプレート スクリプトレットを含めることもできます。
ウェブアプリとして 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 サイトに埋め込むこともできます。
Google ドキュメント、スプレッドシート、スライド、フォームのユーザー インターフェースとして HTML を配信する
スクリプトがファイルにコンテナにバインドされている場合、HTML サービスは Google ドキュメント、スプレッドシート、スライド、フォームにダイアログやサイドバーを表示できます。(Google フォームでカスタム ユーザー インターフェースが表示されるのは、フォームを開いて変更を行った編集者だけに表示され、フォームを開いて回答したユーザーには表示されません)。
ウェブアプリとは異なり、ドキュメント、スプレッドシート、またはフォームのユーザー インターフェースを作成するスクリプトには doGet()
関数は必要ありません。スクリプトのバージョンを保存したり、デプロイしたりする必要はありません。代わりに、ユーザー インターフェースを開く関数は、HTML ファイルをアクティブなドキュメント、フォーム、またはスプレッドシートの Ui
オブジェクトの showModalDialog())
メソッドまたは showSidebar()
メソッドに、HTML ファイルを HtmlOutput
オブジェクトとして渡す必要があります。
これらの例には、利便性のための追加機能がいくつか含まれています。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()
関数を手動で実行するか、ドキュメント、スプレッドシート、フォーム エディタのウィンドウを再読み込みする必要があります(これによりスクリプト エディタが終了します)。その後は、ファイルを開くたびに数秒以内にカスタム メニューが表示されます。[ダイアログ] > [開く] を選択してインターフェースを表示します。