이 페이지는 Cloud Translation API를 통해 번역되었습니다.

HTML 서비스: 권장사항

HTML 서비스를 사용하여 사용자 인터페이스를 만들 때는 다른 유형의 웹 개발과 많은 동일한 패턴과 방식을 따릅니다. 하지만 Apps Script 환경에 고유하거나 달리 강조 표시할 가치가 있는 측면도 있습니다. 아래에서는 자체 HTML 서비스 UI를 개발할 때 유의해야 할 몇 가지 권장사항을 설명합니다.

이러한 권장사항을 설명하기 위해 간단한 작업이라는 HTML 서비스를 사용하여 샘플 웹 앱을 만들었습니다. 전체 소스 코드 및 설정 안내는 GitHub 저장소에서 확인할 수 있습니다.

별도의 HTML, CSS 및 자바스크립트

모든 HTML, CSS, 자바스크립트 코드를 한 파일에 유지하면 프로젝트를 읽고 개발하기가 어려워질 수 있습니다. Apps Script에서는 클라이언트 측 코드를 .html 파일에 배치해야 하지만 CSS와 클라이언트 측 자바스크립트를 여러 파일로 분리한 다음 맞춤 기능을 사용하여 기본 HTML 페이지에 포함할 수 있습니다.

아래 예에서는 Code.gs 파일에 서버 측 맞춤 include() 함수를 정의하여 Stylesheet.html 및 JavaScript.html 파일 콘텐츠를 Page.html 파일로 가져옵니다. 스크립트 인쇄를 사용하여 호출하면 이 함수는 지정된 파일 콘텐츠를 현재 파일로 가져옵니다. 포함된 파일에는 순수 .css 또는 .js 파일이 아니고 HTML 스니펫이므로 포함된 파일에 <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의 응답성을 보장하기 위해 사용을 제한해야 합니다. 템플릿의 코드는 페이지가 로드될 때 한 번 실행되며 처리가 완료될 때까지 클라이언트에 콘텐츠가 전송되지 않습니다. Scriptlet 코드에 장기 실행 작업이 있으면 UI가 느리게 표시될 수 있습니다.

다른 콘텐츠를 포함하거나 정적 값을 설정하는 것과 같은 빠른 일회성 작업에 Scriptlet 태그를 사용합니다. 다른 모든 데이터는 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에 's'를 삽입하기만 하면 전환할 수 있습니다.

HTML5 문서 유형 선언 사용

페이지가 최신 IFRAME 샌드박스 모드를 사용하여 제공되는 경우 HTML 파일 상단에 다음 코드 스니펫을 포함해야 합니다.

<!DOCTYPE html>

이 문서 유형 구현은 개발자가 최신 브라우저용으로 페이지를 디자인했으며 쿼크 모드를 사용하여 페이지를 렌더링하면 안 된다는 것을 브라우저에 알립니다. 최신 HTML5 요소 또는 JavaScript API를 활용하지 않더라도 이 방법을 사용하면 페이지를 올바르게 표시할 수 있습니다.

마지막으로 JavaScript 로드

많은 웹 개발자는 페이지 하단에 자바스크립트 코드를 로드하여 응답성을 높이도록 권장합니다. 이는 HTML 서비스에서 훨씬 더 중요합니다. <script> 태그를 페이지 끝으로 이동하면 자바스크립트가 처리되기 전에 HTML 콘텐츠가 렌더링되어 사용자에게 스피너 또는 다른 메시지를 표시할 수 있습니다.

jQuery 활용

jQuery는 웹 개발의 여러 일반적인 작업을 간소화하는 널리 사용되는 자바스크립트 라이브러리입니다.