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

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

HTML 파일 만들기

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

  1. Apps Script 편집기를 엽니다.
  2. 왼쪽에서 파일 추가 > 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() 함수가 특별히 필요하지 않으며 스크립트 버전을 저장하거나 배포할 필요가 없습니다. 대신 사용자 인터페이스를 여는 함수는 활성 문서, 양식 또는 스프레드시트의 Ui 객체의 showModalDialog()) 또는 showSidebar() 메서드에 HTML 파일을 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() 함수를 스크립트 편집기에서 수동으로 실행하거나 Docs, Sheets 또는 Forms 편집기 창을 새로고침해야 합니다 (스크립트 편집기가 닫힘). 그런 다음 파일을 열 때마다 몇 초 이내에 맞춤 메뉴가 표시됩니다. Dialog > Open을 선택하여 인터페이스를 확인합니다.