HTML サービス: ベストプラクティス

HTML サービスを使用したユーザーインターフェースの構築は、標準のウェブ開発と似ています。ただし、Apps Script 環境に固有の側面もあります。このガイドでは、レスポンシブで安全な HTML サービス UI を開発するためのベストプラクティスについて説明します。

HTML、CSS、JavaScript を分離する

すべての HTML、CSS、JavaScript を 1 つのファイルにまとめると、プロジェクトの保守が難しくなる可能性があります。Apps Script ではクライアントサイドコードを .html ファイルに配置する必要がありますが、CSS とクライアントサイド JavaScript は個別のファイルに分離し、カスタム関数を使用してメインの HTML ページに含める必要があります。

次の例では、Code.gs でサーバーサイドの include 関数を使用して、Stylesheet.html と JavaScript.html を Page.html にインポートします。印刷スクリプレットで呼び出されると、この関数はファイルの内容を直接挿入します。これらは単体の .css ファイルや .js ファイルではなく HTML スニペットであるため、<style> タグと <script> タグを含める必要があります。

コード.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

Page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('JavaScript'); ?>
  </body>
</html>

Stylesheet.html

<style>
p {
  color: green;
}
</style>

JavaScript.html

<script>
window.addEventListener('load', function() {
  console.log('Page is loaded');
});
</script>

テンプレートではなく、非同期でデータを読み込む

テンプレート化された HTML を使用すると、インターフェースをすばやく構築できますが、UI のレスポンシブ性を確保するため、使用は制限する必要があります。テンプレート内のコードは、ページが読み込まれるときに 1 回実行され、処理が完了するまでコンテンツはクライアントに送信されません。スクリプトレットコードに長時間実行されるタスクがあると、UI の表示が遅くなることがあります。

スクリプトレットタグは、他のコンテンツの追加や静的値の設定など、1 回限りの簡単なタスクに使用します。他のすべてのデータは google.script.run 呼び出しを使用して読み込む必要があります。この非同期方式でのコーディングはより困難ですが、UI の読み込みが速くなり、スピナーなどの読み込みメッセージをユーザーに表示できるようになります。

しない - テンプレートに読み込む

<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
  <? for (var i = 0; i < things.length; i++) { ?>
    <li><?= things[i] ?></li>
  <? } ?>
</ul>

Do - 非同期で読み込む

<p>List of things:</p>
<ul id="things">
    <li>Loading...</li>
</ul>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getLotsOfThings();
});

function showThings(things) {
  var list = $('#things');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i] + '</li>');
  }
}
</script>

HTTPS を使用してリソースを読み込む

IFRAME サンドボックスモードでは、すべての JavaScript ファイルと CSS ファイルを HTTPS で配信する必要があります。これらのファイルを安全でない方法で配信すると、次のようなエラーが発生します。

混合コンテンツ: 'https://...' のページは HTTPS で読み込まれましたが、安全でないスクリプト 'http://...' をリクエストしました。このリクエストはブロックされました。コンテンツは HTTPS で配信する必要があります。

一般的なライブラリのほとんどは HTTP と HTTPS の両方をサポートしているため、通常は URL に「s」を追加するだけで切り替えられます。

HTML5 ドキュメントタイプ宣言を使用する

新しい IFRAME サンドボックスモードを使用してページが配信される場合は、HTML ファイルの先頭に次のコードスニペットを含めてください。

<!DOCTYPE html>

このドキュメントタイプ宣言は、ページが最新のブラウザ向けに設計されており、後方互換モードを使用してページをレンダリングすべきではないことをブラウザに伝えます。最新の HTML5 要素や JavaScript API を利用する予定がない場合でも、この設定を行うことで、ページが正しく表示されるようになります。

JavaScript を最後に読み込む

多くのウェブデベロッパーは、応答性を高めるために JavaScript コードをページの下部に読み込むことを推奨しています。これは HTML サービスではさらに重要です。<script> タグをページの末尾に移動すると、JavaScript が処理される前に HTML コンテンツがレンダリングされるため、スピナーなどのメッセージをユーザーに表示できます。

jQuery を活用する

jQuery は、ウェブ開発における多くの一般的なタスクを簡素化する人気の JavaScript ライブラリです。

HTML サービス: ベスト プラクティス コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。