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

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

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

HTML 파일 만들기

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

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

HTML 파일 내에서 대부분의 표준 HTML, CSS, 클라이언트 측 자바스크립트를 작성할 수 있습니다. 페이지는 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 사이트에 삽입할 수도 있습니다.

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

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

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

이러한 예에는 편의를 위해 몇 가지 추가 기능이 포함되어 있습니다. 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() 함수를 실행하거나 Docs, Sheets, Forms 편집기의 창을 새로고침하여 스크립트 편집기가 닫혀야 합니다. 그 후에는 파일을 열 때마다 몇 초 내에 맞춤 메뉴가 표시됩니다. Dialog > Open(대화상자 > 열기)을 선택하여 인터페이스를 확인합니다.