GoogleAppsScript의 Drawing Class로 만들어 놀자!

소개

본 기사는 요전에 행해진 【온라인 대담】 Google Apps Script 활용 토크 #6 로 제가 등단한 내용을 Tech 기사로서 리라이트한 것이 됩니다.

등단 감상 포함의 것은 블로그에 나중에 올리므로 흥미가 있는 분은 그쪽도 봐 주세요.

문서 : htps : // / cs. 오, ぇ. 이 m/p레센타치 온/d/1오우 Lvrt응gゔぃ4ykftB쵸 zVS-r6F↓54LgCqYs코x3Y/에아t? 우 sp = 샤린 g

Dowing Class란?

Drawing Class는 2020/04/02에 릴리스된 스프레드시트 서비스 내의 클래스에서 도형에 관한 파라미터를 조작할 수 있는 것입니다.
이렇게하면 시트의 도형 크기를 변경하거나 위치를 변경할 수 있습니다.

구현되는 메소드

실제로 사용할 수 있는 메조트의 일부를 소개합니다.
보다 자세한 내용을 알고 싶은 분은 공식 문서 Class Drawing | Google Developers를 봐 주세요.

getContainerInfo()

도면이 저장된 컨테이너의 정보를 가져옵니다.
주로 위치를 얻는 데 사용됩니다. (사이즈는 후술하는 getWidth, getHeigeht 취할 수 있습니다)

function printDrawPosition() {
  const drawings =SpreadsheetApp.getActiveSheet().getDrawings();
  // 設置されている列番号
  Logger.log(drawings[0].getContainerInfo().getAnchorColumn())
  // 設置されている行番号
  Logger.log(drawings[0].getContainerInfo().getAnchorRow())
  // 設置されているセルの左上からどれだけx軸で離れているか(pixcel)
  Logger.log(drawings[0].getContainerInfo().getOffsetX())
  // 設置されているセルの左上からどれだyy軸で離れているか(pixcel)
  Logger.log(drawings[0].getContainerInfo().getOffsetY())
}

drawings.getHeight()

drawings.getWidth()

메조트 이름대로 높이와 가로 폭을 가져옵니다. 반환값은 Pixel 단위입니다.

const drawings =SpreadsheetApp.getActiveSheet().getDrawings();

  // 縦(pixels)
  Logger.log(drawings[0].getHeight())
  // 横(pixels)
  Logger.log(drawings[0].getWidth())

getZIndex()

Z축의 수치를 취합니다. Z축은 오브젝트끼리의 겹치는 순서로 젊은 숫자만큼 앞에 있게 됩니다.

setWidth()

setHeight()

높이와 너비를 변경할 수 있습니다. 단위는 pixel

// 横200px に変更する
drawings[0].setWidth(200)
// 縦200pxに変更する
drawings[0].setHeight(200)

setPosition()

도형의 위치를 ​​변경합니다.
지정 방법은 (행 번호, 열 번호, 가로 오프셋 값 (px), 세로 오프셋 값 (px))입니다.
전반 두 개의 인수로 지정된 셀의 왼쪽 위 점을 0으로 지정된 오프셋 값만큼 이동합니다.

// 4行目4列目に移動して横200lpx縦200ｐｘに移動する
drawings[0].setPosition(4, 4, 200, 200)

할 수 없는 일

이번 클래스에서는 다음을 할 수 없습니다. 향후 추가 출시를 기대하자.
- 도형 추가
- 도형 복제
- 도형 모양의 변형

활용 예

이번에 구현된 것으로 생각한 활용예가 됩니다.
아직도, 미숙한 상태의 클래스입니다만, 사용법에 따라서도 여러가지로 할 수 있는 것이 되어 있습니다.

1. 처리 중 조작 보호

도형을 화면 가득 넓히는 것에 의해 셀의 조작을 불가능하게 합니다.
무거운 처리를 쓸 때 셀이 조작됨으로써 에러로 떨어질 때 등에 사용할 수 있습니다

function coverCell() {
  const drawings =
          SpreadsheetApp.
          getActiveSheet()
          .getDrawings();

  // 高さと横幅変更[
  drawings[0].setWidth(1920)
  drawings[0].setHeight(1080)
  // 場所変更
  drawings[0].setPosition(1, 1, 0, 0)

  // … 処理後 …

  // 高さと横幅変更
  drawings[0].setWidth(1)
  drawings[0].setHeight(1)
  // 場所変更
  drawings[0].setPosition(1, 1, 0, 0)
}

덧붙여서 사이즈 변경시에 최소의 1px를 지정하면 클릭이 불가능한 상태가 됩니다.
0을 지정한 경우는 가로는 450px 세로는 325px로 자동 할 수 있게 설정됩니다.

2. 진행 바

이쪽도 무거운 처리의 경우를 위한 예입니다.
무거운 처리를 쓸 때 사용자화에서 화면이 바뀌지 않기 때문에 제대로 움직이고 있는지 모른다는 의견을 자주 받을 때가 있습니다만, 그럴 때 활용할 수 있는 예입니다.

두 개의 셰이프를 사용하여 처리에 맞게 진행률 막대를 움직이면서 처리 중에 어필할 수 있습니다.

TIPS로서 확대시에 애스펙트비가 바뀌는 경우는 선은 그다지 사용하지 않는 편이 좋을 것입니다.
확대시에 선은 종횡비에 맞추어 재묘사는 되지 않고 세로선 가로선의 폭이 변화해 버립니다.

function progressbar() {

  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  const width = 500
  const Height = 100
  const drawings = spreadsheet.getSheetByName('進捗バー').getDrawings()

  window = drawings[0]
  progress = drawings[1]
  // 初期化
  window.setHeight(Height)
  window.setWidth(width)
  window.setPosition(1, 1, 0, 0)

  progress.setHeight(100)
  progress.setWidth(1)  // \進捗ゼロ!/
  progress.setPosition(1, 1, 0, 0)

  for(var i = 1; i <= 100; i++){
    progress.setWidth((width/100) * i)
  }

3. 게임

게임은 가까운 시일 내에 다른 기사에서 하기 때문에 자주 기다려 주세요.

요약

새롭게 추가된 DrawingClass입니다만, 예로부터도 느끼는 대로 또 하나의 기능이 원하는 상태였습니다.

그래도 지금까지 조작할 수 없었던 도형 주위를 움직일 수 있다고 하는 것이므로, 만약 어떠한 방법을 하면 가르쳐 주실 수 있으면 다행입니다.


나도 계속 워치 해 나가려고 생각합니다.