-
Google Apps Script에서 HTML 파일을 추가하는 기능AppsScript 2023. 12. 17. 16:51
Google Apps Script에서 HTML 파일을 추가하는 기능은 주로 사용자 인터페이스(UI)를 구축하고 스크립트와 상호작용하기 위해 사용됩니다. 이 기능은 Google Apps Script의 내장된 HTML 서비스를 통해 구현되며, Google Sheets, Google Docs, 또는 Google Forms와 같은 Google Workspace 애플리케이션에 사용자 정의 대화상자나 사이드바를 만들 때 주로 활용됩니다.
Google Apps Script HTML 파일 사용의 주요 쓰임새:
- 사용자 정의 대화상자 및 사이드바 생성: Google Sheets나 Google Docs에서 사용자에게 입력을 받거나 정보를 표시하기 위한 대화상자나 사이드바를 만들 수 있습니다. 예를 들어, 사용자가 특정 데이터를 입력하거나 스크립트의 기능을 제어할 수 있는 인터페이스를 제공할 수 있습니다.
- HTML 기반 UI 구축: HTML, CSS, JavaScript를 사용하여 복잡한 사용자 인터페이스를 만들 수 있습니다. 이를 통해 기본 Google Apps Script UI 구성 요소보다 더 풍부하고 상호작용이 가능한 UI를 구현할 수 있습니다.
- 웹 앱 개발: Google Apps Script를 사용하여 웹 애플리케이션을 개발하고 배포할 수 있습니다. 이 웹 앱은 Google 서비스와 상호작용하며 외부 사용자에게 서비스를 제공할 수 있습니다.
예시:
HTML 파일을 사용하여 Google Sheets의 사용자 정의 사이드바를 만드는 예시입니다:
// Code.gs 파일 function showSidebar() { var html = HtmlService.createHtmlOutputFromFile('Page') .setTitle('My Custom Sidebar') .setWidth(300); SpreadsheetApp.getUi() // Google Sheets UI에 접근 .showSidebar(html); } // Page.html 파일 <!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> <h1>Hello, World!</h1> <button onclick="google.script.run.someFunction()">Click me</button> </body> </html>이 코드는 Page.html에 정의된 HTML을 사용하여 Google Sheets에 사이드바를 표시합니다. HTML 파일은 사용자 인터페이스를 구성하고, Code.gs 파일의 스크립트 함수를 통해 Google Apps Script의 기능을 실행할 수 있습니다.
HTML 파일을 사용하면 스크립트와 상호작용하는 복잡하고 동적인 사용자 인터페이스를 구축할 수 있어, Google Apps Script의 활용 범위가 크게 확장됩니다.
프로젝트의 요구사항에 따라 간단한 입력 양식부터 복잡한 대화형 페이지까지 다양한 형태의 인터페이스를 구현할 수 있습니다.
인터페이스 구현 단계
- HTML 파일 생성: 프로젝트에 HTML 파일을 추가하여 인터페이스를 설계합니다. HTML 파일은 사용자에게 보여질 콘텐츠와 디자인을 포함합니다.
- 스크립트와의 연결: HTML 파일 내에서 Google Apps Script 함수를 호출할 수 있도록 JavaScript를 사용하여 스크립트와의 상호작용을 설정합니다.
- 사용자 인터페이스 표시: Google Apps Script의 HtmlService를 사용하여 애플리케이션 내에서 사이드바나 대화상자를 표시합니다.
예시 코드
// Code.gs function showCustomSidebar() { var html = HtmlService.createHtmlOutputFromFile('Sidebar') .setTitle('My Custom Sidebar'); SpreadsheetApp.getUi().showSidebar(html); } // Sidebar.html <!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> <h2>My Project Interface</h2> <!-- 여기에 인터페이스 요소 추가 --> <button onclick="google.script.run.processData()">Process Data</button> </body> </html>이 예시에서는 Sidebar.html 파일에 사용자 인터페이스가 정의되어 있으며, Code.gs 파일의 showCustomSidebar 함수를 통해 Google Sheets에 사이드바로 표시됩니다. 사용자는 이 사이드바에서 버튼을 클릭하여 스크립트의 processData 함수를 실행할 수 있습니다.