이 페이지는 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 섹션의 설명에 따라 페이지가 사용자에게 전송되기 전에 서버에서 처리되는 템플릿 스크립트릿이 파일에 포함될 수 있습니다.

웹 앱으로 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을 선택하여 인터페이스를 확인합니다.