【GAS】スプレッドシートから値を受け取って表示させる

2022/06/09

スプレッドシートを後から連携させて読み込んで表示

今回読み込ませるスプレッドシートにあらかじめ以下の値を入れておきます。

mojinumberboth
a1e1
b2f2
c3g3
d4h4

スプレッドシートの読み込み

スプレッドシートをGASに読み込むためには、スプレッドシートからIDを抜き出す必要があります。以下の×××××の部分に入るものがIDなのでコピーしておきましょう。

https://docs.google.com/spreadsheets/d/×××××/edit...

以下でスプレッドシートを読み込みます。

SpreadsheetApp.openById('×××××');

スプレッドシートのシート指定

次にスプレッドシートのシートを指定します。×の部分には今度はシート名を入れてください。

spreadSheet.getSheetByName('xxxxx');

セル指定

セルの値を取り出すには以下を使います。行と列を指定して取得します。(2,1)だとA2になります。

targetSheet.getRange(2,1);

複数のセルから配列で取得するには以下を使います。

行、列を指定した後、何行動くか、何列動くかを指定します。

targetSheet.getRange(2, 1, 4);
targetSheet.getRange(2, 2, 3, 2);

スプレッドシートの値を取り出す関数

これらを組み合わせ、以下のようにしました。

function getSpreadSheetData(){
  var spreadSheet = SpreadsheetApp.openById('×××××');
  var targetSheet = spreadSheet.getSheetByName('×××××');
  //getRange(row,column)A2を取得
  var range1 = targetSheet.getRange(2,1);
  console.log(range1.getValue());
  //getRange(row,column,numRows)A2:A5取得
  var range2 = targetSheet.getRange(2,1,4);
  console.log(range2.getValues());
  //getRange(row,column,numRows,numColumns)B2:C4を取得
  var range3 = targetSheet.getRange(2,2,3,2);
  console.log(range3.getValues());
  return range1.getValue();
}

前回のGASにこれを追記し、htmlは以下のように変更します。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div>
      <?= message1 ?><br>
    </div>
    <?
     var gmessage = getMessage();

     output.append('<p>' + gmessage +'</p>');

     var rangev = getSpreadSheetData();

     output.append('<p>' + rangev +'</p>')
    ?>
  </body>
</html>

これを実行すると、戻り値に指定したA2の値も表示されるようになります。

最後に

今回はスプレッドシートにある値を読み込んだり、表示させるGASを作りました。次はHTMLから送られた文字列をGASに一度取り込むようなものを作ろうと思います。