このページは Cloud Translation API によって翻訳されました。

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 ファイルにインポートしています。印刷スクリプトレッドを使用して呼び出されると、この関数は指定されたファイルの内容を現在のファイルにインポートします。含まれているファイルには <style> タグと <script> タグが含まれています。これは、純粋な .css ファイルや .js ファイルではなく、HTML スニペットであるためです。

コード.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 サンドボックスモードを使用して配信されている場合、HTTPS を使用して配信されていない JavaScript ファイルや CSS ファイルを含めると、次のようなエラーが発生します。

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