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

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

HTML ファイルを作成する

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

  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() 関数は特に必要なく、スクリプトのバージョンを保存したりデプロイしたりする必要はありません。代わりに、ユーザー インターフェースを開く関数は、アクティブなドキュメント、フォーム、スプレッドシートの 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() 関数を実行するか、ドキュメント、スプレッドシート、フォームのエディタのウィンドウを再読み込みする必要があります（これにより、スクリプト エディタが閉じます）。その後は、ファイルを開くたびに数秒以内にカスタム メニューが表示されます。[ダイアログ] > [開く] を選択してインターフェースを表示します。