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 ライブラリであり、 ウェブ開発における多くの一般的なタスクについて説明します。