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

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

HTML ファイルを作成する

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

  1. Apps Script エディタを開きます。
  2. 左側にある [ファイルを追加] をクリックします。 >HTML。

HTML ファイル内には、標準的な HTML、CSS、クライアントサイドのコードのほとんどを 使用できます。ページは HTML5 として配信されますが、 HTML5 は使用できません（ 制限事項。

ファイルには、サーバーで処理されるテンプレート スクリプレットを含めることもできます。 （PHP と同様に）ページ全体がユーザーに送信される前に テンプレート HTML のセクション

HTML をウェブアプリとして配信する

HTML サービスでウェブアプリを作成するには、コードに doGet() を含める必要があります 関数を渡します。この関数は、 以下に示すように、HtmlOutput オブジェクト。 説明します。

コード.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 オブジェクトを オブジェクトの showModalDialog()) または showSidebar() メソッド アクティブなドキュメント、フォーム、またはオプションの Ui オブジェクト 表示されます。

この例には、利便性を高めるための追加機能がいくつか含まれています。onOpen() 関数によってカスタム メニューが作成され、 インターフェースを開くボタンです。HTML ファイル内のボタンを押すと、特別な 次のメソッドの close() メソッド: google.script.host API を使用して 行うことができます。

コード.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() 関数を実行するか、 スクリプト エディタで手動で または、ドキュメント、スプレッドシート、フォームのエディタのウィンドウを再読み込みすると、 スクリプト エディタ）。その後、数秒以内にカスタム メニューが表示されます。 。[ダイアログ] >開くと、 行うことができます。