このページは 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 ファイルにインポートします。この関数は、印刷スクリプトレットを使用して呼び出すと、指定されたファイルコンテンツを現在のファイルにインポートします。含まれるファイルは HTML スニペットであり、純粋な .css ファイルや .js ファイルではないため、<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 サンドボックスモードでページが配信されている場合、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 サービス: ベスト プラクティス