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

HTML 서비스: 권장사항

HTML 서비스로 사용자 인터페이스를 만드는 것은 다른 유형의 웹 개발과 동일한 패턴과 관행을 따릅니다. 하지만 Apps Script 환경에만 해당하거나 강조할 가치가 있는 몇 가지 측면이 있습니다. 다음은 자체 HTML 서비스 UI를 개발할 때 유의해야 할 몇 가지 권장사항입니다.

HTML, CSS, JavaScript 분리

모든 HTML, CSS, JavaScript 코드를 하나의 파일에 보관하면 프로젝트를 읽고 개발하기 어려워질 수 있습니다. Apps Script에서는 클라이언트 측 코드를 .html 파일에 배치해야 하지만 CSS와 클라이언트 측 JavaScript를 별도의 파일로 분리한 후 맞춤 함수를 사용하여 기본 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의 반응성을 보장하기 위해 사용을 제한해야 합니다. 템플릿의 코드는 페이지가 로드될 때 한 번 실행되며 처리가 완료될 때까지 클라이언트로 콘텐츠가 전송되지 않습니다. 스크립트릿 코드에 장기 실행 작업이 있으면 UI가 느리게 표시될 수 있습니다.

다른 콘텐츠를 포함하거나 정적 값을 설정하는 등 빠르고 일회성인 작업에는 스크립트릿 태그를 사용하세요. 다른 모든 데이터는 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를 모두 지원하므로 전환하려면 일반적으로 URL에 추가 's'를 삽입하기만 하면 됩니다.

HTML5 문서 유형 선언 사용

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

<!DOCTYPE html>

이 문서 유형 선언은 최신 브라우저용으로 페이지를 디자인했으며 쿼크 모드를 사용하여 페이지를 렌더링해서는 안 된다고 브라우저에 알립니다. 최신 HTML5 요소나 JavaScript API를 활용할 계획이 없더라도 이렇게 하면 페이지가 올바르게 표시될 수 있습니다.

JavaScript를 마지막으로 로드

많은 웹 개발자는 반응성을 높이기 위해 페이지 하단에 JavaScript 코드를 로드하는 것이 좋습니다. 이는 HTML 서비스에서 더욱 중요합니다. <script> 태그를 페이지 끝으로 이동하면 JavaScript가 처리되기 전에 HTML 콘텐츠가 렌더링되므로 사용자에게 스피너나 기타 메시지를 표시할 수 있습니다.

jQuery 활용

jQuery는 웹 개발의 많은 일반적인 작업을 간소화하는 널리 사용되는 JavaScript 라이브러리입니다.