-
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 함수를 실행할 수 있습니다.
'AppsScript' 카테고리의 다른 글
Google Sheet Apps Script Triger (0) 2024.01.16 Google Sheet에서 셀에 반복 단어 추출하는 방법 (6) 2024.01.03 Google Apps 스크립트를 사용하여 Google 스프레드시트에서 Twitter 봇을 만드는 방법 (1) 2024.01.02 구글시트 시트1 데이터를 시트2에 미러링처럼 나오게 하는 방법 (2) 2023.12.19 페이스북 액세스 토큰, 페이지 ID 가져오는 방법 (0) 2023.12.16 Apps Script 행 높이 지정 메소드 오류 해결 방법 (0) 2023.12.13 아이폰-구글 캘린더-구글 시트 자동화(시간 순서에 맞도록 재배열) (0) 2023.12.08 구글 캘린더-구글 시트 자동화(오류'가져온 일정을 다시 가져올 때') (2) 2023.12.08