HTML サービス: HTML の作成と配信

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

HTML サービスを使用すると、サーバー側の Apps Script 関数を操作できるウェブページを提供できます。これは、ウェブアプリの構築や、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 ドキュメント、スプレッドシート、スライド、フォームのユーザー インターフェースとして提供する

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

ウェブアプリとは異なり、ドキュメント、スプレッドシート、フォームのユーザー インターフェースを作成するスクリプトでは、特に doGet() 関数は必要ありません。スクリプトのバージョンの保存やデプロイの必要はありません。代わりに、ユーザー インターフェースを開く関数は、HTML ファイルを HtmlOutput オブジェクトとして、有効なドキュメント、フォーム、スプレッドシートの 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] を選択すると、インターフェースが表示されます。