1. 소개
Google Sheets 기반 앱 스크립트 Codelab의 다섯 번째 과정에 오신 것을 환영합니다. 이 Codelab에서는 Apps Script의 스프레드시트 서비스를 사용해 데이터 세트를 차트화하는 방법을 알아봅니다. 또한 Slides 서비스를 사용하여 Google Slides에서 차트를 새 프레젠테이션으로 내보내는 방법도 알아봅니다.
학습할 내용
- Apps Script를 사용하여 선 차트를 빌드하는 방법
- 새 Slides 프레젠테이션으로 차트를 내보내는 방법
- Sheets에서 사용자에게 대화상자를 표시하는 방법
시작하기 전에
Google Sheets 기초와 앱 스크립트 기초 과정의 다섯 번째 Codelab입니다. 이 Codelab을 시작하기 전에 이전 Codelab을 완료해야 합니다.
필요한 항목
- 이 재생목록의 이전 Codelab에서 살펴본 기본 Apps Script 주제에 대한 이해입니다.
- Apps Script 편집기에 관한 기본 지식
- Google Sheets에 관한 기본 지식
- 스프레드시트 A1 표기법 읽기 기능
- 자바스크립트 및
String클래스 관련 기본 지식
2. 설정
계속하려면 일부 데이터가 포함된 스프레드시트가 필요합니다. 이전과 마찬가지로 이 연습을 위해 복사할 수 있는 데이터 시트를 제공했습니다. 다음 단계를 따르세요.
- 이 링크를 클릭하여 데이터 시트를 복사한 다음 사본 만들기를 클릭합니다. 새 스프레드시트는 Google Drive 폴더에 추가되고 '날짜 및 USD 환율 사본'으로 표시됩니다.
- 스프레드시트 제목을 클릭하고 '날짜 및 USD 환율 사본'에서 '날짜 및 USD 환율'로 변경합니다. 시트는 다음과 같이 표시되며, 다양한 날짜의 미국 달러 환율에 대한 몇 가지 기본 정보를 포함합니다.
- 스크립트 에디터를 열려면 Extensions> Apps Script를 클릭합니다.
시간을 절약할 수 있도록 이 스프레드시트에 맞춤 메뉴를 설정하는 코드를 추가했습니다. 스프레드시트의 사본이 열리면 메뉴가 표시되었을 수 있습니다.
이 스프레드시트와 프로젝트를 사용하여 Codelab을 시작할 준비가 되었습니다. 다음 섹션으로 이동하여 그래프 및 시간 기반 트리거에 대해 알아보세요.
3. Apps Script를 사용하여 Sheets에서 차트 만들기
데이터 세트를 시각화하기 위해 특정 차트를 디자인한다고 가정해 보겠습니다. 실제로 Apps Script를 사용하여 Google Sheets에서 차트를 작성, 수정, 삽입할 수 있습니다. 차트가 스프레드시트에 포함된 경우 삽입된 차트라고 합니다.
차트는 하나 이상의 데이터 계열을 시각화하는 데 사용됩니다. 삽입된 차트의 경우 표시되는 데이터는 일반적으로 스프레드시트 내에서 가져옵니다. 일반적으로 스프레드시트의 데이터를 업데이트하면 Sheets에서도 차트가 자동으로 업데이트됩니다.
Apps Script를 사용하면 삽입된 차트를 처음부터 만들거나 기존 차트를 업데이트할 수 있습니다. 이 섹션에서는 Apps Script 및 Spreadsheet 서비스를 사용하여 Sheets에 삽입된 차트를 빌드하는 방법의 기본 사항을 설명합니다.
구현
데이터 스프레드시트 복사본의 '날짜 및 환율' 데이터 세트는 다양한 날짜에 대한 다양한 통화의 환율(1달러(USD))을 보여 줍니다. 이 데이터의 일부를 시각화하는 차트를 만드는 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);
}
- 스크립트 프로젝트를 저장합니다.
코드 검토
추가한 코드는 차트 및 날짜 및 환율 데이터 세트 메뉴 항목에서 호출한 함수를 구현하여 기본 선 차트를 만듭니다. 코드를 검토하도록 하겠습니다.
첫 번째 줄은 다음 세 가지 변수를 설정합니다.
sheet: 현재 활성 시트의 참조입니다.chartDataRange: 시각화하려는 데이터 범위입니다. 이 코드는 A1 표기법을 사용하여 범위가 날짜 및 USD 환율 데이터 세트라는 시트에서 셀 A2부터 F102까지 적용 범위를 지정합니다. 시트의 이름을 지정하면 범위 내에서 항상 데이터 위치가 포함되므로 다른 시트가 활성 상태여도 메뉴 항목이 작동하도록 합니다. 2행부터 열 헤더를 포함하고 있으며 가장 최근의 100일 행 (행)만 표시합니다.hAxisOptions: 코드에서 가로축의 모양을 구성하는 데 사용하는 설정 정보를 포함하는 기본 자바스크립트 객체입니다. 구체적으로 가로 축 텍스트 라벨을 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로 설정합니다.
그런 다음 linelineBuilder를 사용하여 차트를 빌드합니다. 코드의 이 부분은 차트 설정을 정의하는 일련의 메서드 호출 다음에 차트를 만들기 위한 build() 호출로 구성됩니다. 이전 Codelab에서 본 것처럼 코드는 메서드 체이닝을 사용하여 사람이 읽을 수 있는 코드를 유지합니다. 메서드 호출의 작업은 다음과 같습니다.
addRange(range): 차트에 표시되는 데이터 범위를 정의합니다.setPosition(anchorRowPos, anchorColPos, offsetX, offsetY): 시트에서 차트를 배치할 위치를 결정합니다. 여기에서 코드는 H5 셀의 왼쪽 상단 차트를 삽입합니다.setTitle(title): 차트 제목을 설정합니다.setNumHeaders(headers): 데이터 범위의 헤더로 취급할 행 또는 열 수를 결정합니다. 이 코드에서는 데이터 범위의 첫 번째 행을 헤더로 사용합니다. 즉, 해당 행의 텍스트가 차트의 개별 데이터 계열 라벨로 사용됩니다.setLegendPosition(position): 차트 범례를 차트의 오른쪽으로 이동합니다. 이 메서드는 Charts.Position 열거형을 매개변수로 사용합니다.setOption(option, value): 복잡한 차트 옵션을 설정합니다. 여기서 코드는hAxis옵션을hAxisOptions객체로 설정합니다. 이 메서드로 설정할 수 있는 몇 가지 옵션이 있습니다. 각 차트 유형의 옵션 및 가능한 값은 Charts API 차트 갤러리에 설명되어 있습니다. 예를 들어 선 차트에 설정할 수 있는 옵션은 선 차트 구성 옵션 아래에 설명되어 있습니다.setOption(option, value)메서드는 고급 주제이므로 Apps Script에서 차트를 만드는 데 익숙해질 때까지 사용하지 않는 것이 좋습니다.build(): 위의 설정을 사용하여EmbeddedChart객체를 만들고 반환합니다.
마지막으로 이 코드는 Sheet.insertChart(chart)를 호출하여 빌드된 차트를 활성 시트에 배치합니다.
결과
다음을 수행하여 포맷 함수가 작동하는 것을 확인할 수 있습니다.
- 스크립트 프로젝트를 아직 저장하지 않았다면 Apps Script 편집기에 저장하세요.
- 발표 데이터 세트 및 차트, 날짜 및 USD 환율 데이터 세트 메뉴 항목을 클릭합니다.
이제 스크립트가 데이터 오른쪽에 새 차트를 배치합니다.
축하합니다. Apps Script를 사용하여 삽입된 선 차트를 만들었습니다. 다음 섹션에서는 차트를 Google Slides로 내보내는 방법을 설명합니다.
4. Slides로 차트 내보내기
Apps Script의 장점 중 하나는 Google Workspace 애플리케이션에서 다른 Google Workspace 애플리케이션으로 데이터를 쉽게 이전할 수 있다는 것입니다. 이러한 애플리케이션에는 스프레드시트 서비스와 유사한 전용 Apps Script 서비스가 있습니다. 예를 들어 Gmail은 Gmail 서비스, Google Docs에는 문서 서비스가 있으며 Google 프레젠테이션에는 프레젠테이션 서비스가 있습니다. 이러한 기본 제공 서비스를 사용하면 한 애플리케이션에서 데이터를 추출하여 처리하고 다른 애플리케이션에 결과를 쓸 수 있습니다.
이 섹션에서는 삽입된 모든 차트를 새 Google Slides 프레젠테이션으로 내보내는 방법을 알아봅니다. 또한 Sheets에서 사용자 맞춤 메시지를 표시하는 두 가지 방법을 확인할 수 있습니다.
구현
여기서는 &Present = 데이터 세트 내보내기 메뉴 항목에서 호출한 함수를 구현합니다. 다음 단계를 따르세요.
- 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() 메서드를 사용하여 시트와 차트 목록을 가져옵니다. 자바스크립트 Array.concat() 메서드는 각 시트의 차트 목록을 charts에 추가하는 데 사용됩니다.
2: 내보낼 차트가 있는지 확인
코드는 내보낼 차트가 있는지 확인합니다. 빈 프레젠테이션이 되지 않도록 차트가 없다면 Spreadsheet.toast(message)를 사용하여 코드에서 토스트 메시지를 만듭니다. 이 대화상자는 스프레드시트의 오른쪽 하단에 팝업으로 표시되고 몇 초 동안 머무른 후 사라집니다.
내보낼 차트가 없으면 코드에서 토스트 메시지를 만들고 다른 작업을 하지 않고 종료합니다. 내보낼 차트가 있는 경우 코드는 다음 몇 줄로 계속 프레젠테이션을 만듭니다.
3: 프레젠테이션 만들기
새 프레젠테이션 파일의 이름을 보유하기 위해 presentationTitle 변수가 생성됩니다. 스프레드시트 이름으로 설정되며 끝부분에 'Presentation'가 연결됩니다. 그런 다음 코드에서 Slides 서비스 메서드 SlidesApp.create(name)를 호출하여 프레젠테이션을 만듭니다.
새 프레젠테이션은 하나의 빈 슬라이드로 생성됩니다. 이 코드를 프레젠테이션에서 사용하지 않기 때문에 코드에서 Presentation.getSlides() 및 Slide.remove()를 사용하여 코드를 삭제합니다.
4: 차트 내보내기
다음 섹션에서는 가져온 차트의 슬라이드 위치 및 픽셀 크기 (픽셀 단위)를 설정할 자바스크립트 객체의 position 및 size 코드를 정의합니다.
코드는 차트 목록의 모든 차트를 반복합니다. 각 차트의 경우 프레젠테이션 끝에 슬라이드를 추가하여 Presentation.appendSlide()로 newSlide를 만듭니다. Slide.insertSheetsChart(sourceChart, left, top, width, height) 메서드는 지정된 position 및 size를 사용하여 차트를 슬라이드로 가져오는 데 사용됩니다.
5: 프레젠테이션 위치 공유하기
마지막으로 코드는 새 프레젠테이션의 위치를 사용자에게 알려야 하며, 링크를 클릭하면 열리는 것이 좋습니다. 이를 위해 코드는 Apps Script'의 HTML 서비스를 사용하여 맞춤 모달 대화상자를 만듭니다. 모달 대화상자 (Apps Script에서는 맞춤 대화상자라고도 함)는 스프레드시트 인터페이스 위에 표시되는 창입니다. 맞춤 대화상자를 표시하면 사용자가 스프레드시트와 상호작용할 수 없게 됩니다.
맞춤 대화상자를 만들려면 코드에 콘텐츠를 정의하는 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 편집기에 저장하세요.
- 스프레드시트를 열고 데이터 세트 표시 & 차트;날짜 및 환율 환율 데이터 세트 메뉴 항목을 클릭하여 내보낼 차트를 만듭니다. 이는 활성 시트의 셀 H5에 고정된 상태로 표시됩니다.
- 데이터 세트 발표 및 Slides로 차트 내보내기 메뉴 항목을 클릭합니다. 스크립트를 재승인하라는 메시지가 표시될 수 있습니다.
- 스크립트에서 요청을 처리하고 맞춤 대화상자를 표시해야 합니다.
- 새 Slides 프레젠테이션을 열려면 날짜 및 USD 환율 프레젠테이션 링크를 클릭합니다.
원하는 경우 스프레드시트에 차트를 추가하고 메뉴 항목을 다시 선택하여 여러 슬라이드로 프레젠테이션을 만들 수도 있습니다.
이제 Sheets에서 만든 차트를 Slides 프레젠테이션으로 내보낼 수 있습니다. 코드를 작성하여 맞춤 대화상자를 만들 수도 있습니다.
이 Codelab의 마지막 연습을 완료했습니다. 다음 섹션으로 이동하여 학습한 내용을 검토해 보세요.
5. 결론
축하합니다. 이제 Google Sheets Codelab 재생목록을 통해 이 Codelab 및 Apps Script 기본 사항을 모두 완료했습니다. 이 재생목록에서 학습한 원칙을 사용해 Sheets 환경을 확장하고 Apps Script의 기능을 살펴볼 수 있습니다.
이 Codelab이 도움이 되었나요?
학습한 내용
- Apps Script로 삽입된 선 차트를 빌드하는 방법
- Sheets에서 사용자에게 토스트 메시지 및 맞춤 대화상자를 표시하는 방법
- 새 Slides 프레젠테이션으로 차트를 내보내는 방법
다음 단계
재생목록이 완료되었습니다. 하지만 여전히 Apps Script에 대해 더 알아볼 수 있습니다.
다음 리소스를 확인하세요.
- Apps Script 개발자 문서
- Apps Script 가이드
- Apps Script 참조 문서
- StackOverflow의 Apps Script 질문
- GitHub의 Apps Script 코드 샘플
스크립트 작성하기