ボタンが押されたらスプレッドシートの取得範囲を変更したい

前提

Google Mapに以下のスプレッドシートの最終行から取得した位置情報を表示し、ボタンを押すと一つ前の位置情報を取得(表示が新宿の時にボタンを押すと東京を表示)し、Google Mapを更新できるようにしています。

地名	緯度	経度
横浜	35.465786	139.622313
東京	35.681567	139.767082
新宿	35.689816	139.700582

やりたい事

ボタンが押されたら、現在表示されている位置情報よりも一つ前の位置情報を取得するという事を何度も行う事で、位置情報を更新したいです(新宿が表示されているなら東京に切り替え、東京を表示されるなら横浜を表示)、

該当のソースコード

一番最初に表示される位置はgetData、一度ボタンを押し、一つだけ前の位置情報はnewdataより取得が出来ていますが、今はボタンが押されるとnewDataを繰り返すので東京までしか出力できません
(dogetに関してはテンプレ通りなので省略)

コード.gs

function getData(){//一番最後の位置情報を表示
 var sheet = SpreadsheetApp.getActiveSheet();
 return sheet.getRange(sheet.getLastRow(), 1, 1, 3).getValues()[0];
  


function newData(){ //一度ボタンが押されたら一つ前の位置情報を表示
    var sheet = SpreadsheetApp.getActiveSheet();//範囲を取得
    return sheet.getRange(sheet.getLastRow()-1, 1, 1, 3).getValues()[0];//最終行に-1をした範囲を取得
  
}

index.html

<!DOCTYPE HTML>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>テスト</title>

</head>

<body>

<h1>Google Map</h1>

<p>ここにGPSで取得した情報を表示します。</p>
 <input type="button" value="前の記録時間を表示する" onclick="oldtime();"/>　
 
 <input type="button" value="データ更新" onclick="initMap();"/>　

<div id="sample"  style="width:900px; height:500px;  margin: 10px auto;" ></div>　<!--マップを表示させるdiv-->

<script>
function initMap() {
　//Javascript側からGAS(gs)を呼び出す
  google.script.run.withSuccessHandler(e => { const [ame, lat, lng] = e;
    var latlng = new google.maps.LatLng(lat, lng);
    var map = new google.maps.Map(document.getElementById('sample'), {zoom: 14, center: latlng});
    var marker = new google.maps.Marker({position: latlng, map: map});
  }).getData();//getData関数を呼び出して、成功すればコールバック内の処理が行われる
}

function oldtime(){
 google.script.run.withSuccessHandler(e => { const [ame, lat, lng] = e;
    var latlng = new google.maps.LatLng(lat, lng);
    var map = new google.maps.Map(document.getElementById('sample'), {zoom: 14, center: latlng});
    var marker = new google.maps.Marker({position: latlng, map: map});
  }).newData();//getData関数を呼び出して、成功すればコールバック内の処理が行われる
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=自分のAPI&callback=initMap"></script>  <!-- 取得したAPIを利用する-->

<?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?> 　<!-- 記述した箇所('js1')のHTMLファイルを読み込む -->
<p>過去のGPS表記一覧</p>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

次のような修正はいかがでしょうか。この修正では現在の行をPropertiesServiceを使って保存しています。いろいろな方法があると思いますので、これをそれらの一つとしてお考え下さい。

修正したスクリプト

この場合、Google Apps Script側のスクリプト(コード.gs)を下記のように修正してみてください。

javascript
1function getData(){
2  var prop = PropertiesService.getScriptProperties();
3  var sheet = SpreadsheetApp.getActiveSheet();
4  var lastRow = sheet.getLastRow();
5  prop.setProperty("currentRow", lastRow);
6  return sheet.getRange(lastRow, 1, 1, 3).getValues()[0];
7}
8
9function newData(){
10  var sheet = SpreadsheetApp.getActiveSheet();
11  var prop = PropertiesService.getScriptProperties();
12  var currentRow = prop.getProperty("currentRow");
13  var r = Number(currentRow) - 1;
14  currentRow = currentRow ? (r > 1 ? r :  2) : sheet.getLastRow();
15  prop.setProperty("currentRow", currentRow);
16  return sheet.getRange(currentRow, 1, 1, 3).getValues()[0];
17}

上記のスクリプトでは、1行目にヘッダの行があることを想定していますが、無い場合は、currentRow = currentRow ? (r || 1) : sheet.getLastRow();で問題ないかと思われます。

参考

Class PropertiesService

投稿2019/12/20 07:16

kisojin

総合スコア899

退会済みユーザー

2019/12/22 05:48

回答及びコードありがとうございます。 PropertiesServiceについて初めて知ったので勉強にもなりました。一つだけお聞きしたいのですが currentRow = currentRow ? (r > 1 ? r : 2) : sheet.getLastRow(); この三項演算子で (r > 1 ? r : 2)の判定後の currentRow = currentRow ? () : sheet.getLastRow(); ではどのように判定を行っているのでしょうか？

kisojin

2019/12/25 23:33

ご返事ありがとうございます。無事解決できたとのことで安心しました。 "どのように"の意味をあまり理解できていないかもしれませんが、currentRow = currentRow ? (r > 1 ? r : 2) : sheet.getLastRow();は、下記のようなスクリプトを三項演算子で表記しています。 if (currentRow) { if (r > 1) { currentRow = r; } else { currentRow = 2; } } else { currentRow = sheet.getLastRow(); }

退会済みユーザー

2019/12/28 04:28

ありがとうございます。処理の流れが理解出来ました。

行動規範の内容に同意します