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

HTML 서비스: HTML 만들기 및 게재

HTML 서비스를 사용하면 서버 측 Apps Script 함수와 상호작용할 수 있는 웹페이지를 게재할 수 있습니다. 웹 앱을 빌드하거나 Google Docs, Sheets, Forms에 맞춤 사용자 인터페이스를 추가하는 데 특히 유용합니다. 이메일 본문을 생성하는 데도 사용할 수 있습니다.

HTML 파일 만들기

Apps Script 프로젝트에 HTML 파일을 추가하려면 다음 단계를 따르세요.

Apps Script 편집기를 엽니다.
왼쪽에서 파일 추가 > HTML을 클릭합니다.

HTML 파일 내에서 대부분의 표준 HTML, CSS, 클라이언트 측 JavaScript를 작성할 수 있습니다. 페이지는 HTML5로 게재되지만 제한사항에 설명된 대로 HTML5의 일부 고급 기능은 사용할 수 없습니다.

파일에는 템플릿 HTML 섹션에 설명된 대로 PHP와 마찬가지로 페이지가 사용자에게 전송되기 전에 서버에서 처리되는 템플릿 스크립트릿도 포함될 수 있습니다.

HTML을 웹 앱으로 제공

HTML 서비스로 웹 앱을 만들려면 코드에 스크립트에 페이지를 게재하는 방법을 알려주는 doGet() 함수가 포함되어야 합니다. 이 예와 같이 함수는 HtmlOutput 객체를 반환해야 합니다.

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

기본 프레임워크가 마련되면 스크립트 버전을 저장한 다음 스크립트를 웹 앱으로 배포하기만 하면 됩니다.

스크립트가 웹 앱으로 배포된 후 Google 사이트에 삽입할 수도 있습니다.

HTML을 Google Docs, Sheets, Slides 또는 Forms 사용자 인터페이스로 제공

스크립트가 파일에 컨테이너 결합된 경우 HTML 서비스는 Google Docs, Sheets, Slides 또는 Forms에 대화상자 또는 사이드바를 표시할 수 있습니다. Google Forms에서는 맞춤 사용자 인터페이스가 양식을 수정하기 위해 여는 편집자에게만 표시되며 응답하기 위해 양식을 여는 사용자에게는 표시되지 않습니다.

웹 앱과 달리 문서, 스프레드시트 또는 양식의 사용자 인터페이스를 만드는 스크립트에는 doGet() 함수가 특별히 필요하지 않으며, 스크립트 버전을 저장하거나 배포할 필요도 없습니다. 대신 사용자 인터페이스를 여는 함수는 HTML 파일을 Ui 객체의 showModalDialog()) 또는 showSidebar() 메서드에 HtmlOutput 객체로 전달해야 합니다. 이 메서드는 활성 문서, 양식 또는 스프레드시트의 메서드입니다.

이 예시에는 편의를 위해 몇 가지 추가 기능이 포함되어 있습니다. onOpen() 함수는 인터페이스를 쉽게 열 수 있는 맞춤 메뉴를 만들고 HTML 파일의 버튼은 google.script.host API의 특수 close() 메서드를 호출하여 인터페이스를 닫습니다.

Code.gs

// Use this code for Google Docs, Slides, Forms, or Sheets.
function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Dialog')
      .addItem('Open', 'openDialog')
      .addToUi();
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Dialog title');
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
    <input type="button" value="Close"
        onclick="google.script.host.close()" />
  </body>
</html>

이 사용자 인터페이스를 처음 표시할 때는 onOpen() 함수를 스크립트 편집기에서 수동으로 실행하거나 문서, 스프레드시트, 설문지 편집기 창을 다시 로드 (스크립트 편집기가 닫힘)해야 합니다. 그런 다음 파일을 열 때마다 맞춤 메뉴가 몇 초 이내에 표시됩니다. 대화상자 > 열기를 선택하여 인터페이스를 확인합니다.