이 Codelab 정보
1. 소개
Google Sheets를 사용한 Apps Script 기본사항 Codelab 재생목록의 다섯 번째 파트에 오신 것을 환영합니다. 이 Codelab에서는 Apps Script의 스프레드시트 서비스를 사용하여 데이터 세트를 차트로 표시하는 방법을 알아봅니다. Slides 서비스를 사용하여 차트를 Google Slides의 새 프레젠테이션으로 내보내는 방법도 알아봅니다.
학습할 내용
- Apps Script로 선 차트를 빌드하는 방법
- 차트를 새 Slides 프레젠테이션으로 내보내는 방법
- Sheets에서 사용자에게 대화상자를 표시하는 방법
시작하기 전에
이 Codelab은 Google Sheets를 사용한 Apps Script 기본사항 재생목록의 다섯 번째 Codelab입니다. 이 Codelab을 시작하기 전에 이전 Codelab을 완료해야 합니다.
필요한 항목
- 이 재생목록의 이전 Codelab에서 살펴본 기본 Apps Script 주제를 이해해야 합니다.
- Apps Script 편집기에 대한 기본적인 지식
- Google Sheets에 관한 기본 지식
- Sheets A1 표기법을 읽을 수 있음
- JavaScript 및 해당
String클래스에 관한 기본 지식
2. 설정
계속하기 전에 데이터가 포함된 스프레드시트가 필요합니다. 이전과 마찬가지로 이러한 연습에 사용할 수 있는 데이터 시트가 제공됩니다. 다음 단계를 따릅니다.
- 이 링크를 클릭하여 데이터 시트를 복사한 다음 사본 만들기를 클릭합니다. 새 스프레드시트가 Google Drive 폴더에 배치되고 '날짜 및 USD 환율의 사본'이라는 이름이 지정됩니다.
- 스프레드시트 제목을 클릭하고 '날짜 및 USD 환율 사본'에서 '날짜 및 USD 환율'로 변경합니다. 다음과 같이 다양한 날짜의 미국 달러 환율에 관한 기본 정보가 포함된 시트가 표시됩니다.
- 스크립트 편집기를 열려면 확장 프로그램> Apps Script를 클릭합니다.
시간을 절약할 수 있도록 이 스프레드시트에 맞춤 메뉴를 설정하는 코드가 포함되어 있습니다. 스프레드시트 사본을 열 때 메뉴가 표시되었을 수 있습니다.
이 스프레드시트와 프로젝트를 사용하면 Codelab을 시작할 수 있습니다. 다음 섹션으로 이동하여 그래프와 시간 기반 트리거에 대해 알아보세요.
3. Apps Script를 사용하여 Sheets에서 차트 만들기
데이터 세트를 시각화하기 위해 특정 차트를 디자인한다고 가정해 보겠습니다. Apps Script를 사용하여 Google Sheets에 차트를 작성, 수정, 삽입할 수 있습니다. 차트가 스프레드시트 내에 포함된 경우 삽입된 차트라고 합니다.
차트는 하나 이상의 데이터 계열을 시각화하는 데 사용됩니다. 삽입된 차트의 경우 일반적으로 스프레드시트 내에서 가져온 데이터를 표시합니다. 일반적으로 스프레드시트의 데이터를 업데이트하면 Sheets에서 차트도 자동으로 업데이트됩니다.
Apps Script를 사용하여 맞춤설정된 삽입형 차트를 처음부터 만들거나 기존 차트를 업데이트할 수 있습니다. 이 섹션에서는 Apps Script와 Spreadsheet 서비스를 사용하여 Sheets에 삽입된 차트를 빌드하는 기본사항을 소개합니다.
구현
데이터 스프레드시트 사본에서 '날짜 및 환율' 데이터 세트는 다양한 날짜의 여러 통화 환율 (미국 달러 1달러 기준)을 보여줍니다. 이 데이터의 일부를 시각화하는 차트를 만드는 Apps Script 함수를 구현합니다.
다음 단계를 따릅니다.
- Apps Script 편집기에서 스크립트 프로젝트의
Code.gs스크립트 끝에onOpen()함수 다음에 다음 함수를 추가합니다.
/**
* Creates and inserts an embedded
* line chart into the active sheet.
*/
function createEmbeddedLineChart() {
var sheet = SpreadsheetApp.getActiveSheet();
var chartDataRange = sheet.getRange(
'Dates and USD Exchange Rates dataset!A2:F102');
var hAxisOptions = {
slantedText: true,
slantedTextAngle: 60,
gridlines: {
count: 12
}
};
var lineChartBuilder = sheet.newChart().asLineChart();
var chart = lineChartBuilder
.addRange(chartDataRange)
.setPosition(5, 8, 0, 0)
.setTitle('USD Exchange rates')
.setNumHeaders(1)
.setLegendPosition(Charts.Position.RIGHT)
.setOption('hAxis', hAxisOptions)
.setOption("useFirstColumnAsDomain", true)
.build();
sheet.insertChart(chart);
}
- 스크립트 프로젝트를 저장합니다.
코드 검토
추가한 코드는 차트 '날짜 및 USD 환율 데이터 세트' 메뉴 항목에서 호출되는 함수를 구현하여 기본 선 차트를 만듭니다. 코드를 검토해 보겠습니다.
첫 번째 줄은 다음 세 변수를 설정합니다.
sheet: 현재 활성 시트에 대한 참조입니다.chartDataRange: 시각화하려는 데이터 범위입니다. 이 코드는 A1 표기법을 사용하여 Dates and USD Exchange Rates dataset이라는 시트에서 A2~F102 셀을 포함하는 범위를 지정합니다. 시트 이름을 구체적으로 지정하면 범위가 항상 데이터 위치를 포함하므로 다른 시트가 활성화되어 있어도 메뉴 항목이 작동합니다. 2행부터 시작한다는 것은 열 헤더를 포함한다는 의미이며 가장 최근의 날짜 (행) 100개만 차트로 표시됩니다.hAxisOptions: 코드가 가로축의 모양을 구성하는 데 사용하는 일부 설정 정보가 포함된 기본 JavaScript 객체입니다. 특히 가로축 텍스트 라벨을 60도 기울기로 설정하고 세로 그리드 선 수를 12로 설정합니다.
다음 줄은 선 차트 빌더 객체를 만듭니다. Apps Script의 삽입된 차트는 빌더 디자인 패턴을 사용하여 구성됩니다. 이 설계 패턴에 대한 자세한 설명은 이 Codelab의 범위를 벗어나므로 지금은 Spreadsheet 서비스가 여러 EmbeddedChartBuilder 클래스를 제공한다고만 이해하세요. 차트를 만들려면 코드가 먼저 삽입된 차트 빌더 객체를 만들고, 메서드를 사용하여 차트 설정을 정의한 다음 build() 메서드를 호출하여 최종 EmbeddedChart 객체를 만듭니다. 모든 차트 구성은 빌더 클래스를 통해 관리되므로 코드가 EmbeddedChart 객체를 직접 수정하지 않습니다.
스프레드시트 서비스는 상위 EmbeddedChartBuilder 클래스와 이 클래스에서 상속되는 여러 하위 빌더 클래스 (예: EmbeddedLineChartBuilder)를 제공합니다. 하위 클래스를 사용하면 Apps Script에서 특정 차트 유형에만 적용되는 빌더 차트 구성 메서드를 제공할 수 있습니다. 예를 들어 EmbeddedPieChartBuilder 클래스는 원형 차트에만 적용되는 set3D() 메서드를 제공합니다.
코드에서 이 줄은 빌더 객체 변수 lineChartBuilder를 만듭니다.
var lineChartBuilder = sheet.newChart().asLineChart();
이 코드는 Sheet.newChart() 메서드를 호출하여 EmbeddedChartBuilder 객체를 만든 다음 EmbeddedChartBuilder.asLineChart()를 사용하여 빌더 유형을 EmbeddedLineChartBuilder로 설정합니다.
그런 다음 코드는 lineChartBuilder를 사용하여 차트를 빌드합니다. 이 코드 부분은 차트 설정을 정의하는 일련의 메서드 호출과 차트를 만드는 build() 호출로 구성됩니다. 이전 Codelab에서 본 것처럼 코드는 메서드 체이닝을 사용하여 코드를 사람이 읽을 수 있도록 유지합니다. 메서드 호출은 다음 작업을 실행합니다.
addRange(range): 차트에 표시되는 데이터 범위를 정의합니다.setPosition(anchorRowPos, anchorColPos, offsetX, offsetY): 시트에서 차트가 배치되는 위치를 결정합니다. 여기서 코드는 차트의 왼쪽 상단 모서리를 H5 셀에 삽입합니다.setTitle(title): 차트 제목을 설정합니다.setNumHeaders(headers): 데이터 범위에서 헤더로 처리해야 하는 행 또는 열의 수를 결정합니다. 여기서 코드는 데이터 범위의 첫 번째 행을 헤더로 사용합니다. 즉, 해당 행의 텍스트가 차트의 개별 데이터 계열의 라벨로 사용됩니다.setLegendPosition(position): 차트 범례를 차트 오른쪽으로 이동합니다. 이 메서드는 Charts.Position enum을 파라미터로 사용합니다.setOption(option, value): 복잡한 차트 옵션을 설정합니다. 여기서 코드는hAxis옵션을hAxisOptions객체로 설정합니다. 이 메서드를 사용하여 설정할 수 있는 옵션은 여러 가지가 있습니다. 각 차트 유형의 옵션과 가능한 값은 차트 API 차트 갤러리에 설명되어 있습니다. 예를 들어 선 차트에 설정할 수 있는 옵션은 선 차트 구성 옵션에 설명되어 있습니다.setOption(option, value)메서드는 고급 주제이므로 Apps Script에서 차트 만들기에 익숙해질 때까지는 사용하지 않는 것이 좋습니다.build(): 위의 설정을 사용하여EmbeddedChart객체를 만들고 반환합니다.
마지막으로 코드는 Sheet.insertChart(chart)를 호출하여 빌드된 차트를 활성 시트에 배치합니다.
결과
다음과 같이 서식 지정 함수가 작동하는 것을 확인할 수 있습니다.
- 아직 저장하지 않았다면 Apps Script 편집기에서 스크립트 프로젝트를 저장합니다.
- 데이터 세트 표시 > '날짜 및 USD 환율 데이터 세트' 차트 메뉴 항목을 클릭합니다.
이제 스크립트가 데이터 오른쪽에 새 차트를 배치합니다.
축하합니다. Apps Script로 삽입된 선 차트를 빌드했습니다. 다음 섹션에서는 차트를 Google Slides로 내보내는 방법을 알아봅니다.
4. 차트를 Slides로 내보내기
Apps Script의 가장 큰 장점 중 하나는 한 Google Workspace 애플리케이션에서 다른 애플리케이션으로 데이터를 쉽게 이동할 수 있다는 것입니다. 이러한 애플리케이션 대부분에는 스프레드시트 서비스와 유사한 전용 Apps Script 서비스가 있습니다. 예를 들어 Gmail에는 Gmail 서비스가 있고, Google Docs에는 문서 서비스가 있으며, Google Slides에는 Slides 서비스가 있습니다. 이러한 모든 내장 서비스를 사용하면 한 애플리케이션에서 데이터를 추출하고, 처리하고, 결과를 다른 애플리케이션에 쓸 수 있습니다.
이 섹션에서는 Google 스프레드시트의 모든 삽입된 차트를 새 Google 슬라이드 프레젠테이션으로 내보내는 방법을 알아봅니다. Sheets에서 사용자 맞춤 메시지를 표시하는 두 가지 방법도 확인할 수 있습니다.
구현
여기에서 데이터 세트 표시 > 차트를 슬라이드로 내보내기 메뉴 항목에서 호출되는 함수를 구현합니다. 다음 단계를 따릅니다.
- Apps Script 편집기에서 스크립트 프로젝트의
Code.gs스크립트 끝에createEmbeddedLineChart()함수 다음에 다음 함수를 추가합니다.
/**
* Create a Slides presentation and export
* all the embedded charts in this spreadsheet
* to it, one chart per slide.
*/
function exportChartsToSlides() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
// Fetch a list of all embedded charts in this
// spreadsheet.
var charts = [];
var sheets = ss.getSheets();
for (var i = 0; i < sheets.length; i++) {
charts = charts.concat(sheets[i].getCharts());
}
// If there aren't any charts, display a toast
// message and return without doing anything
// else.
if (charts.length == 0) {
ss.toast('No charts to export!');
return;
}
// Create a Slides presentation, removing the default
// title slide.
var presentationTitle =
ss.getName() + " Presentation";
var slides = SlidesApp.create(presentationTitle);
slides.getSlides()[0].remove();
// Add charts to the presentation, one chart per slide.
var position = {left: 40, top: 30};
var size = {height: 340, width: 430};
for (var i = 0; i < charts.length; i++) {
var newSlide = slides.appendSlide();
newSlide.insertSheetsChart(
charts[i],
position.left,
position.top,
size.width,
size.height);
}
// Create and display a dialog telling the user where to
// find the new presentation.
var slidesUrl = slides.getUrl();
var html = "<p>Find it in your home Drive folder:</p>"
+ "<p><a href=\"" + slidesUrl + "\" target=\"_blank\">"
+ presentationTitle + "</a></p>";
SpreadsheetApp.getUi().showModalDialog(
HtmlService.createHtmlOutput(html)
.setHeight(120)
.setWidth(350),
"Created a presentation!"
);
}
- 스크립트 프로젝트를 저장합니다.
코드 검토
이 코드는 예상보다 짧을 수 있습니다. 코드를 5개 섹션으로 나누어 코드가 하는 작업을 살펴보겠습니다.
1: 차트 가져오기
처음 몇 줄은 활성 스프레드시트를 검색하여 모든 삽입된 차트를 찾아 charts 배열에 수집합니다. 이러한 줄은 Spreadsheet.getSheets() 메서드와 Sheet.getCharts() 메서드를 사용하여 시트와 차트 목록을 가져옵니다. JavaScript Array.concat() 메서드는 각 시트의 차트 목록을 charts에 추가하는 데 사용됩니다.
2: 내보낼 차트가 있는지 확인하기
코드는 내보낼 차트가 있는지 확인합니다. 빈 프레젠테이션을 만들지 않으므로 차트가 없으면 코드가 Spreadsheet.toast(message)를 사용하여 토스트 메시지를 대신 만듭니다. 다음은 Sheets의 오른쪽 하단에 팝업으로 표시되어 몇 초 동안 유지되다가 사라지는 작은 '미리보기' 대화상자입니다.
내보낼 차트가 없으면 코드는 토스트 메시지를 만들고 다른 작업을 실행하지 않고 종료됩니다. 내보낼 차트가 있는 경우 코드는 다음 몇 줄에서 프레젠테이션을 계속 만듭니다.
3: 프레젠테이션 만들기
새 프레젠테이션의 파일 이름을 저장하기 위해 presentationTitle 변수가 생성됩니다. 스프레드시트의 이름으로 설정되며 끝에 ' Presentation'가 연결됩니다. 그런 다음 코드는 Slides 서비스 메서드 SlidesApp.create(name)를 호출하여 프레젠테이션을 만듭니다.
새 프레젠테이션은 빈 슬라이드 하나로 만들어집니다. 프레젠테이션에는 필요하지 않으므로 코드는 Presentation.getSlides() 및 Slide.remove()를 사용하여 이를 삭제합니다.
4: 차트 내보내기
다음 섹션에서 코드는 가져온 차트가 슬라이드에 배치되는 위치와 차트의 크기 (픽셀)를 설정하기 위해 JavaScript 객체의 position 및 size를 정의합니다.
코드는 차트 목록의 모든 차트를 반복합니다. 각 차트에 대해 Presentation.appendSlide()로 newSlide가 생성되어 슬라이드가 프레젠테이션 끝에 추가됩니다. Slide.insertSheetsChart(sourceChart, left, top, width, height) 메서드는 지정된 position 및 size를 사용하여 차트를 슬라이드로 가져오는 데 사용됩니다.
5: 프레젠테이션 위치 공유
마지막으로 코드는 새 프레젠테이션의 위치를 사용자에게 알려야 하며, 사용자가 클릭하여 열 수 있는 링크를 제공하는 것이 좋습니다. 이를 위해 코드는 Apps Script의 HTML 서비스를 사용하여 맞춤 모달 대화상자를 만듭니다. 모달 대화상자 (Apps Script에서는 맞춤 대화상자라고도 함)는 Sheets 인터페이스 위에 표시되는 창입니다. 맞춤 대화상자가 표시되면 사용자가 Sheets와 상호작용할 수 없습니다.
맞춤 대화상자를 만들려면 콘텐츠를 정의하는 HTML이 코드에 필요합니다. 이는 html 변수에 제공됩니다. 콘텐츠에는 짧은 단락과 하이퍼링크가 포함됩니다. 하이퍼링크는 Presentation.getUrl()에서 제공하는 프레젠테이션 URL에 연결된 presentationTitle 변수입니다. 하이퍼링크는 target="_blank" 속성도 사용하므로 프레젠테이션이 대화상자 내에서가 아닌 새 브라우저 탭에서 열립니다.
HTML은 HtmlService.createHtmlOutput(html) 메서드에 의해 HtmlOutput 객체로 파싱됩니다. HtmlOutput 객체를 사용하면 코드가 HtmlOutput.setHeight(height) 및 HtmlOutput.setWidth(width)를 사용하여 맞춤 대화상자의 크기를 설정할 수 있습니다.
htmlOutput가 생성되면 코드는 Ui.showModalDialog(htmlOutput, title) 메서드를 사용하여 지정된 제목으로 대화상자를 표시합니다.
결과
두 번째 메뉴 항목을 구현했으므로 이제 작동하는 것을 확인할 수 있습니다. exportChartsToSlides() 함수를 테스트하려면 다음 단계를 따르세요.
- 아직 저장하지 않았다면 Apps Script 편집기에서 스크립트 프로젝트를 저장합니다.
- 스프레드시트를 열고 데이터 세트 표시 > '날짜 및 USD 환율 데이터 세트' 차트 메뉴 항목을 클릭하여 내보낼 차트를 만듭니다. 활성 시트의 H5 셀에 고정되어 표시됩니다.
- 데이터 세트 표시 > 차트를 Slides로 내보내기 메뉴 항목을 클릭합니다. 스크립트를 다시 승인하라는 메시지가 표시될 수 있습니다.
- 스크립트가 요청을 처리하고 맞춤 대화상자를 표시합니다.
- 새 Slides 프레젠테이션을 열려면 날짜 및 USD 환율 프레젠테이션 링크를 클릭합니다.
원하는 경우 스프레드시트에 차트를 더 추가하고 메뉴 항목을 다시 선택하여 여러 슬라이드가 있는 프레젠테이션을 만들 수도 있습니다.
이제 Sheets에서 만든 차트를 Slides 프레젠테이션으로 내보낼 수 있습니다. 코드를 작성하여 맞춤 대화상자를 만들 수도 있습니다.
이 Codelab의 마지막 연습을 완료했습니다. 다음 섹션으로 이동하여 학습한 내용을 검토하세요.
5. 결론
축하합니다. 이 Codelab과 Google Sheets를 사용한 Apps Script의 기본사항 Codelab 재생목록을 모두 완료했습니다. 이 재생목록에서 배운 원칙을 사용하여 Sheets 환경을 확장하고 Apps Script의 기능을 살펴볼 수 있습니다.
이 Codelab이 도움이 되었나요?
학습한 내용
- Apps Script로 삽입된 선 차트를 빌드하는 방법
- Sheets에서 사용자에게 토스트 메시지와 맞춤 대화상자를 표시하는 방법
- 차트를 새 Slides 프레젠테이션으로 내보내는 방법
다음 단계
이 재생목록을 완료했습니다. 하지만 Apps Script에 대해 아직 더 알아볼 내용이 있습니다.
다음 리소스를 살펴봐 주시기 바랍니다.
- Apps Script 개발자 문서
- Apps Script 가이드
- Apps Script 참조 문서
- StackOverflow의 Apps Script 질문
- GitHub의 Apps Script 코드 샘플
즐겁게 스크립팅하세요!