이 페이지는 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 라이브러리입니다.