HTML サービス: HTML の作成と提供

HTML サービスを使用すると、 サーバーサイドの Apps Script 関数とやり取りできるウェブページを提供できます。ウェブアプリの作成や、Google ドキュメント、Google スプレッドシート、フォームへのカスタム ユーザー インターフェースの追加に特に便利です。メールの本文を生成するために使用することもできます。

HTML ファイルを作成する

Apps Script プロジェクトに HTML ファイルを追加する手順は次のとおりです。

  1. Apps Script エディタを開きます。
  2. 左側で [ファイルを追加] > [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 ドキュメント、スプレッドシート、Google スライド、フォームのユーザー インターフェースとして提供する

スクリプトがファイルにコンテナ バインドされている場合、HTML サービスは Google ドキュメント、スプレッドシート、スライド、またはフォームにダイアログまたはサイドバーを表示できます。Google フォームでは、カスタム ユーザー インターフェースは、フォームを開いて変更する編集者にのみ表示され、フォームを開いて回答するユーザーには表示されません。

ウェブアプリとは異なり、ドキュメント、スプレッドシート、フォームのユーザー インターフェースを作成するスクリプトには、特に doGet 関数は必要ありません。また、スクリプトのバージョンを保存したり、デプロイしたりする必要もありません。代わりに、ユーザーインターフェースを開く関数は、アクティブなドキュメント、フォーム、スプレッドシートの Uiオブジェクトの showModalDialogまたはshowSidebarメソッドに、HTML ファイルを HtmlOutputオブジェクトとして渡す必要があります。

これらの例には、便宜上、いくつかの追加機能が含まれています。onOpen 関数は、インターフェースを開くのに役立つカスタム メニューを作成します。また、HTML ファイルのボタンは google.script.host.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 関数を スクリプト エディタで手動で実行するか 、ドキュメント、スプレッドシート、フォームの エディタのウィンドウを再読み込みする必要があります（ スクリプト エディタが閉じます）。その後、ファイルを開くたびに、数秒以内にカスタム メニューが表示されます。インターフェースを表示するには、[ダイアログ > 開く] を選択します。