GoogleAppsScript와 Google 스프레드시트를 연계한 WEB 애플리케이션을 작성해 보았다【제2회】

12079 단어 스플릿 시트GoogleAppsScriptgas

스프레드시트에 나열된 데이터를 표 형식으로 HTML 출력하는 방법에 대해 씁니다.



안녕하세요. 시스템 엔지니어의 Diavolo입니다.
팀 내에서 이용하는 WEB 어플리케이션을 작성했으므로, 비망록으로서 작성 방법을 기사로 합니다. 주된 이용 목적으로 해서는, 과제에 대한 대응을 기록해 두고, 열람, 갱신할 수 있도록 하는 WEB 어플리케이션입니다. 완성까지를 여러 기사로 나누어 투고할 예정입니다.
제2회의 기사로 해서는, 스프레드시트의 데이터를 취득해 표시하는 곳까지를 써 갑니다. 스프레드시트를 데이터베이스 대신 사용합니다.

다음 스프레드시트를 만듭니다. 이번에 작성하는 GAS는 스프레드시트 ID를 이용하기 때문에 파일명은 무엇이든 상관없습니다.





스프레드시트 데이터는 수동으로 입력하세요. WEB+DB이면, 데이터베이스에 직접 Insert문을 투입해 데이터를 작성하는 이미지입니다. GAS에서 스프레드시트에 데이터를 추가, 변경, 삭제는 다음 번 이후에 기사를 쓰는군요! !

스프레드시트 데이터를 GAS에서 가져와서 표시합니다.



우선 코드 .gs를 편집합니다.



마지막으로 만든 코드 .gs에 function getData()를 추가합니다.

코드.gs
function doGet() {
  var tpl = HtmlService.createTemplateFromFile('index');
  return tpl.evaluate();
}
function getData() {
  // スプレッドシートの取得
  var sheet = SpreadsheetApp.openByUrl("スプレッドシートのURL")

  // データの取得
  var sheetName = 'シート1';
  var values = sheet.getSheetByName(sheetName).getDataRange().getValues();

  return values;
}

스프레드시트 URL은 방금 만든 스프레드시트를 열 때 URL 바에 표시된 URL을 복사하여 붙여넣으면 괜찮습니다.
(예) 에이치는 h로 읽어주세요.
에이치 ttps://docs.google.com/spreadsheets/d/hogehogefugafugawowwowowowowfugahogehow/edit#gid=0

다음은 index.html을 편집합니다.



요점은 코드 .gs에서 만든 함수를 호출하는 것입니다. 로 둘러싸고 호출합니다. 이번 GAS에서는, 취득한 데이터는 v변수 data에 보존하고 있으므로, 로 표시할 수 있습니다. data[0][0]은 스프레드시트의 A1 셀, data[0][1]은 A2 셀, data[5][2]는 C6 셀의 값을 나타냅니다! ! ! ! 스프레드시트를 2차원 배열로 대체하는 이미지입니다. 이미지 전해질까요?

index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <!-- 先程作成したコード.gsのfunction getData()をコールする -->
  <? var data = getData()?>

  <!-- getData()で取得してきたデータがdataに格納されていますので、これを出力する -->
  <?= data[0][0] ?>
  <?= data[0][1] ?>
  <?= data[0][2] ?><br>
  <?= data[1][0] ?>
  <?= data[1][1] ?>
  <?= data[1][2] ?><br>
  <?= data[2][0] ?>
  <?= data[2][1] ?>
  <?= data[2][2] ?><br>
  <?= data[3][0] ?>
  <?= data[3][1] ?>
  <?= data[3][2] ?><br>
  <?= data[4][0] ?>
  <?= data[4][1] ?>
  <?= data[4][2] ?><br>
  <?= data[5][0] ?>
  <?= data[5][1] ?>
  <?= data[5][2] ?><br>
  </body>
</html>

저장하고 배포합시다. 완성된 URL을 클릭하면 브라우저에 다음과 같은 표시가 됩니다.





네. 파치 파치 파치. 무사히 스프레드시트로부터 데이터를 취득해, 브라우저에 표시시킬 수 있었습니다~. 으~응, 조금 외형이 짜증나지 않기 때문에, 테이블에 표시시킵니다. index.html을 편집합니다. 코드 .gs는 변경할 필요가 없습니다.

index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <!-- 先程作成したコード.gsのfunction getData()をコールする -->
  <? var data = getData()?>

  <!-- getData()で取得してきたデータがdataに格納されていますので、これを出力する -->
  <table border=1>
    <tr>
      <th><?= data[0][0] ?></th>
      <th><?= data[0][1] ?></th>
      <th><?= data[0][2] ?></th>
    </tr>
    <tr>
      <th><?= data[1][0] ?></th>
      <th><?= data[1][1] ?></th>
      <th><?= data[1][2] ?></th>
    </tr>
    <tr>
      <th><?= data[2][0] ?></th>
      <th><?= data[2][1] ?></th>
      <th><?= data[2][2] ?></th>
    </tr>
    <tr>
      <th><?= data[3][0] ?></th>
      <th><?= data[3][1] ?></th>
      <th><?= data[3][2] ?></th>
    </tr>
    <tr>
      <th><?= data[4][0] ?></th>
      <th><?= data[4][1] ?></th>
      <th><?= data[4][2] ?></th>
    </tr>
    <tr>
      <th><?= data[5][0] ?></th>
      <th><?= data[5][1] ?></th>
      <th><?= data[5][2] ?></th>
    </tr>
  </table>
  </body>
</html>

저장하고 배포합시다. 완성된 URL을 클릭하면 브라우저에 다음과 같은 표시가 됩니다.





조금, 소스 코드가 늘어나 버렸기 때문에, for 루프로 구글 글루어 해 출력하도록(듯이) 코드를 수정했습니다.



참고이 소스 코드를 사용하려면 Chrome V8 런타임을 사용 중지해야합니다.



index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <!-- 先程作成したコード.gsのfunction getData()をコールする -->
  <? var data = getData()?>

  <!-- getData()で取得してきたデータがdataに格納されていますので、これを出力する -->
  <table border=1>
    <?
      for(var i=0; i < data.length; i++){
        output.append('<tr>');
        output.append('<th>' + data[i][0] + '</th>');
        output.append('<th>' + data[i][1] + '</th>');
        output.append('<th>' + data[i][2] + '</th>');
        output.append('</tr>');
      }
    ?>
  </table>
  </body>
</html>

참고로 Chrome V8 런타임을 사용하면 다음 오류가 발생합니다.

TypeError: output.append is not a function
이 오류를 피하는 소스 코드는 다음과 같습니다.

Chrome V8 런타임을 사용하도록 설정하면 여기 소스 코드가됩니다.



index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <!-- 先程作成したコード.gsのfunction getData()をコールする -->
  <? var data = getData()?>

  <!-- getData()で取得してきたデータがdataに格納されていますので、これを出力する -->
  <table border=1>
    <?
      for(var i=0; i < data.length; i++){
        output._=('<tr>');
        output._=('<th>' + data[i][0] + '</th>');
        output._=('<th>' + data[i][1] + '</th>');
        output._=('<th>' + data[i][2] + '</th>');
        output._=('</tr>');
      }
    ?>
  </table>
  </body>
</html>

조금 그렇게 (WEB 앱처럼)되어 왔습니까? 두 번째 기사는 이것으로 끝납니다. 다음 번 이후에는 WEB에서 스프레드 시트에 데이터 추가를 구현합니다.
편지 병합 + 파일을 첨부하여 메일 일제히 송신
GAS (Google Apps Script)로 자동 VLOOKUP 같은 것을 시도했습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage