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

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

HTML 서비스를 사용하면 서버 측 Apps Script 기능과 상호작용할 수 있습니다. 특히 웹 앱을 빌드하거나 Google Docs, Sheets, Forms를 사용할 수 있습니다. 이를 사용하여 이메일 본문을 생성할 수도 있습니다.

HTML 파일 만들기

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

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

HTML 파일 내에서 대부분의 표준 HTML, CSS, 클라이언트 측을 작성할 수 있습니다. 있습니다. 이 페이지는 HTML5로 게재되지만 HTML5는 사용할 수 없습니다(자세한 내용은 아래 페이지 참조). 제한사항.

또한 파일에는 서버에서 처리되는 템플릿 스크립틀릿이 포함될 수 있습니다. 을 호출하기 전에 사용자에게 전송되기 전에(예: PHP와 유사) 템플릿 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에서 파일에 container-bound를 추가합니다. (Google Forms에서 맞춤 사용자 인터페이스는 양식을 여는 편집자만 볼 수 있습니다. 응답하기 위해 양식을 여는 사용자가 아니라 해당 문장을 수정해야 합니다.

웹 앱과 달리 문서의 사용자 인터페이스를 만드는 스크립트, 스프레드시트 또는 양식에 doGet() 함수가 특별히 필요하지 않습니다. 배포하지 않아도 됩니다 대신 컨테이너는 HTML 파일을 HtmlOutput 객체를 다음 항목의 showModalDialog()) 또는 showSidebar() 메서드 Ui 활성 문서, 양식 또는 스프레드시트입니다.

이 예에는 편의를 위한 몇 가지 추가 기능(onOpen())이 포함되어 있습니다. 함수는 쉽게 맞춤 메뉴를 만듭니다. 을 사용하면 인터페이스를 열 수 있고, HTML 파일의 버튼은 특별한 close() 메서드 google.script.host API를 사용하여 인터페이스에 추가되었습니다.

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() 함수를 실행하거나 스크립트 편집기에서 수동으로 또는 문서, 스프레드시트 또는 양식 편집기 창을 새로고침하면 스크립트 편집기). 그러면 몇 초 이내에 맞춤 메뉴가 표시됩니다. . 대화상자 > 열어서 인터페이스에 추가되었습니다.