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

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

HTML サービスを使用したユーザーインターフェースの作成は、他の種類のウェブ開発と多くの同じパターンと手法に従います。ただし、Apps Script 環境固有の点や、強調する価値がある点がいくつかあります。ここでは、独自の HTML サービス UI を開発する際に留意すべきベストプラクティスについて説明します。

これらのベストプラクティスを示すために、Simple Tasks という HTML サービスを使用するサンプルウェブアプリを作成しました。完全なソースコードと設定手順については、GitHub リポジトリをご覧ください。

HTML、CSS、JavaScript を分離する

HTML、CSS、JavaScript のコードをすべて 1 つのファイルにまとめていると、プロジェクトの読みやすさや開発が難しくなることがあります。Apps Script では、クライアントサイドのコードを .html ファイル内に配置する必要がありますが、CSS とクライアントサイド JavaScript を別々のファイルに分け、カスタム関数を使用してメインの HTML ページに含めることもできます。

次の例では、サーバー側のカスタム include() 関数を Code.gs ファイルで定義し、Stylesheet.html と JavaScript.html のコンテンツを Page.html ファイルにインポートするようにしています。この関数は、印刷スクリプトレットを使用して呼び出されると、指定されたファイルコンテンツを現在のファイルにインポートします。含まれるファイルは HTML スニペットであり、純粋な .css または .js ファイルではないため、<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>

Simple Tasks サンプルアプリケーションでは、HTML サービスページの Page.html はこの方法でデータを読み込み、他のソースコードをページに含めるためのテンプレートのみを使用します。

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

ページが新しい IFRAME サンドボックスモードを使用して配信されている場合、HTTPS で配信されていない JavaScript または CSS ファイルを使用すると、次のようなエラーが発生します。

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

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

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

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

<!DOCTYPE html>

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

JavaScript を最後に読み込む

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

jQuery を活用する

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

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