Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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> タグを含める必要があります。

Code.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>

非同期で読み込む

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