スプレッドシートの表を毎分取得してHTMLに表示したい

GASを使用したWebアプリを作成し始めて1週間ほど経ったものです。
只今、リアルタイム更新のランキング表を作ろうとしています。

●したいこと

スプレッドシートの表をHTMLに表示させ、その部分のみ自動更新にしたいと思っています。
シート自体は分ごとにトリガーで点数を基に降順に書き換えられるようにしています。
doGet()にログインページを用意しているのでページ全体の更新は行いたくありません。
また、シート自体の埋め込みも試みましたが、見栄え的に無しの方向でいきたいです。

●困っていること

どうやらsetInterval()を使うことで自動更新できるということはわかりましたが、
うまくテーブルに取り込むことができません。
どのようにしたら閲覧者に更新をかけさせることなく、
シートの最新の状態をhtmlに反映できるでしょうか？

以下に現在のコード等を貼っておきます

ranking(スプレッドシート)

ランキング	チーム名	点数
1	user1	21
2	user2	12
3	user4	3
4	user3	2

ranking.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
6  </head>
7  <body>
8    <input type="hidden" name="page" value="ranking">
9    <table>
10      <?
11        var file = SpreadsheetApp.openById("スプレッドシートのID");
12        var sheet = file.getSheetByName('ranking');
13        const myData = sheet.getDataRange().getValues();
14        for(var i=0;i<myData.length;i++){
15          output._ = '<tr><td>' + myData[i][0] + '</td><td>' + myData[i][1] + '</td><td>'+myData[i][2] + '</td></tr>';
16        }
17      ?>
18      
19    </table>
20    
21  <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
22  </body>
23</html>

このような場での質問も初めてで稚拙な文章だと思いますが、
何かアドバイスをいただけたら嬉しいです。

退会済みユーザー

2022/03/04 13:34

質問者さん、無言ですが、回答したのでそれに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐ返事できるのでは？　役に立たなかったならどこがダメだったかを書くとより期待する回答に近いものが出てくるかも。とにかく無言は NG です。

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

回答1件

ベストアンサー

どうやらsetInterval()を使うことで自動更新できるということはわかりましたが、うまくテーブルに取り込むことができません。どのようにしたら閲覧者に更新をかけさせることなく、シートの最新の状態をhtmlに反映できるでしょうか？

例えばですが、「ranking(スプレッドシート)」を表示するのに必要な最新データを JSON 形式で返す API を Web サーバーに設けて、setInterval + jQuery ajax を用いて定期的にその API に要求を出し、返ってきたデータで「ranking(スプレッドシート)」部分の html 要素を書き換えるという手段はいかがですか？

【追記】

setInterval + jQuery ajax でクライアントが新しいデータを要求するのをサーバーが待機するのではなく、サーバー側でデータが更新されたら接続されているクライアントにデータをリアルタイムにプッシュするという技術もあります。

そのような技術を実装したフレームワークを探してみるのも良いかもしれません。例えば ASP.NET には SignalR というものがあります。

ASP.NET Core SignalR の概要
https://docs.microsoft.com/ja-jp/aspnet/core/signalr/introduction?view=aspnetcore-6.0

SignalR を利用すると、以下の記事の例のように、接続されているクライアントのブラウザ上に表示された株価情報のテーブルをリアルタイムに更新するといったことができます。

ASP.NET Core SignalR
http://surferonwww.info/BlogEngine/post/2021/12/29/aspnet-core-signalr.aspx

投稿2022/03/04 00:57

編集2022/03/04 01:17

退会済みユーザー

総合スコア0

hata_poppo

2022/03/11 15:30

ご回答いただきありがとうございましたフレームワークなりスプシ外のAPIを使わないとできなさそうということですよね？まだまだ勉強不足でおっしゃってる内容を全て理解することはできませんでしたが、貼っていただいたURLなどを参考にすこしずつ実現に向かって勉強させていただきます

退会済みユーザー

2022/03/12 01:15

回答に Web API と書いたのは例えばで、更新するために必要なデータを取得するのに別の手段が使えるなら Web API が必要という訳ではありません。現在のコードで「ranking(スプレッドシート)」のデータを取得して表示ができているようですので、今のコードのデータを取得する部分を切り出して、setInterval で定期的にデータを取得し、取得したデータで table を書き換えるというようなことでもできるかもしれません。

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