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

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

HTML サービスでのユーザーインターフェースの作成は、ほぼ同じパターンに沿って行いますウェブ開発と同様の手法ですただし、データアナリストが固有のもの、あるいはその他に価値のあるハイライト表示されます。ここでは、キャンペーンの作成時に留意すべきベストプラクティスを独自の HTML サービス UI を開発できます。

HTML、CSS、JavaScript を分離する

HTML、CSS、JavaScript のコードをすべて 1 つのファイルにまとめることで、プロジェクトをより効果的に読みづらく開発が困難です一方、Apps Script ではクライアントサイドのコードが必要ですが、を .html ファイルに配置する場合でも、CSS とクライアントサイドの JavaScript をさまざまなファイルに保存して、メインの HTML ページに含めるカスタム関数を使用します

以下の例では、カスタムサーバーサイド include() 関数を Stylesheet.html および JavaScript.html ファイルの内容をインポートするためのコード.gs ファイルこれを Page.html ファイルに追加します呼び出されたときに印刷スクリプトレットこの関数は、指定されたファイルの内容を現在のファイルにインポートします。お知らせインクルードされたファイルに <style> タグと <script> タグが含まれていることを確認します。 HTML スニペットであり、純粋な .css ファイルや .js ファイルではありません。

コード.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 を使用して配信されている場合サンドボックスモード。 HTTPS を使用して配信されていない JavaScript または CSS ファイルは、下にあります

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

一般的なライブラリのほとんどは HTTP と HTTPS の両方をサポートしているため、切り替えるのが一般的単に加算の「s」をを追加します。

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

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

<!DOCTYPE html>

このドキュメントタイプの宣言により、ページをデザインしたことをブラウザに伝えます。最新のブラウザを使用しており、ページのレンダリングに後方互換モード。計画がなくても最新の HTML5 要素や JavaScript API を活用する場合、ページが正しく表示されることを確認します

JavaScript を最後に読み込む

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

jQuery を活用する

jQuery は、一般的な JavaScript ライブラリであり、ウェブ開発における多くの一般的なタスクについて説明します。

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