回答編集履歴
5
他アカウントからアクセスすると権限エラーになっていたのを修正
answer
CHANGED
|
@@ -23,9 +23,12 @@
|
|
|
23
23
|
ではページ更新を使わず、データを更新するにはどうするかですが、テーブルのDOMを更新するやり方があります。
|
|
24
24
|
|
|
25
25
|
|
|
26
|
-
下記が全体プログラムになります。
|
|
26
|
+
下記が全体プログラムになります。デプロイ時は、「アクセスできるユーザー」を「全員」に設定してください。
|
|
27
27
|
code.gs
|
|
28
28
|
```js
|
|
29
|
+
// getActive()を使うと権限エラーとなるため、openById又はopenByUrlを使うこと。
|
|
30
|
+
var sheet = SpreadsheetApp.openById("～～").getSheetByName("シート1");
|
|
31
|
+
|
|
29
32
|
function doGet(){
|
|
30
33
|
var html = HtmlService.createHtmlOutputFromFile("index");
|
|
31
34
|
return html;
|
|
@@ -33,13 +36,12 @@
|
|
|
33
36
|
|
|
34
37
|
|
|
35
38
|
function getData(){
|
|
36
|
-
var sh = SpreadsheetApp.getActiveSheet();
|
|
37
|
-
return
|
|
39
|
+
return sheet.getDataRange().getValues()
|
|
38
40
|
}
|
|
39
41
|
|
|
40
42
|
function send(text){
|
|
41
43
|
var user = Session.getActiveUser();
|
|
42
|
-
|
|
44
|
+
sheet.appendRow([user,text]);
|
|
43
45
|
}
|
|
44
46
|
```
|
|
45
47
|
|
|
@@ -87,7 +89,6 @@
|
|
|
87
89
|
var table = document.getElementById("chat-table");
|
|
88
90
|
|
|
89
91
|
for(var i = lastrow; i < values.length; i++){
|
|
90
|
-
var record = i + 1;
|
|
91
92
|
var row = table.insertRow(-1);
|
|
92
93
|
row.insertCell(0).innerHTML = '<td><font bgcolor=blue color="#000000">'+values[i][0]+'</td>';
|
|
93
94
|
row.insertCell(1).innerHTML = '<td><font bgcolor=blue color="#000000">'+values[i][1]+'</td>';
|
|
@@ -110,11 +111,14 @@
|
|
|
110
111
|
|
|
111
112
|
チャットデータの更新は、下記のようにして行っています。
|
|
112
113
|
|
|
113
|
-
・load
|
|
114
|
+
・load 関数内で、withSuccessHandlerを使って非同期にコード.gsのgetData関数を呼び出し、
|
|
114
|
-
|
|
115
|
+
getData関数から取得したチャットデータを、appendTableRows に渡す。
|
|
116
|
+
・appendTableRows 内で、tableのDOMを更新してテーブルの行を追加する。
|
|
115
117
|
```js
|
|
118
|
+
function load(){
|
|
116
|
-
|
|
119
|
+
google.script.run
|
|
117
|
-
|
|
120
|
+
.withSuccessHandler(appendTableRows).getData();
|
|
121
|
+
}
|
|
118
122
|
```
|
|
119
123
|
|
|
120
124
|
```js
|
|
@@ -124,7 +128,6 @@
|
|
|
124
128
|
var table = document.getElementById("chat-table");
|
|
125
129
|
|
|
126
130
|
for(var i = lastrow; i < values.length; i++){
|
|
127
|
-
var record = i + 1;
|
|
128
131
|
var row = table.insertRow(-1);
|
|
129
132
|
row.insertCell(0).innerHTML = '<td><font bgcolor=blue color="#000000">'+values[i][0]+'</td>';
|
|
130
133
|
row.insertCell(1).innerHTML = '<td><font bgcolor=blue color="#000000">'+values[i][1]+'</td>';
|
4
answer
CHANGED
|
@@ -107,12 +107,15 @@
|
|
|
107
107
|
</html>
|
|
108
108
|
```
|
|
109
109
|
---
|
|
110
|
-
まず、このスクリプトでは、createTemplateFromFileではなく、createHtmlOutputFromFile を使用しています。
|
|
111
110
|
|
|
112
111
|
チャットデータの更新は、下記のようにして行っています。
|
|
113
112
|
|
|
114
113
|
・load()で非同期にコード.gsのgetData関数を呼び出す
|
|
115
114
|
・getData関数から取得したデータを、appendTableRows に渡し、tableのDOMを更新（行追加）
|
|
115
|
+
```js
|
|
116
|
+
google.script.run
|
|
117
|
+
.withSuccessHandler(appendTableRows).getData();
|
|
118
|
+
```
|
|
116
119
|
|
|
117
120
|
```js
|
|
118
121
|
function appendTableRows(values){
|
3
answer
CHANGED
|
@@ -138,6 +138,6 @@
|
|
|
138
138
|
このスクリプトではまだ「20行だけに固定」というのは示していませんが、基本的に上記スクリプトを拡張することでできます。御自分で考えてみて下さい。
|
|
139
139
|
（この場合createFromHtmlTemplateFileを使うことになると思いますが）
|
|
140
140
|
|
|
141
|
-
上記は素案として作っただけで、まだま
|
|
141
|
+
上記は素案として作っただけで、まだまだブラッシュアップの余地はたくさんあります。
|
|
142
142
|
|
|
143
143
|
20行固定表示以外にも、最初のチャットデータ表示をもっと早くする方法を考えたり、チャットデータの転送量を減らす方法を考えたり（上記スクリプトだとチャットデータを全部送っている）、Vueで作り直したりするのも面白いと思います。
|
2
answer
CHANGED
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
---
|
|
18
18
|
以上より、**ページ更新（F5キーと同じ動作）を行わず、ページを開いたまま**チャットデータを更新しようとするような場合、更新データそのものをスクリプトレットを含んだテンプレートにしてしまうと、少々難易度が高くなる気がします。
|
|
19
19
|
（方法として、内部フレームにチャットデータを閉じ込めてフレーム部分を部分更新するとかでしょうか・・・）
|
|
20
|
+
（※なお、今回の目的のためにcreateFromHtmlTemplateFileが全く使えないというわけではありません。ページの静的な組み立て（初期データの表示）にも使える余地はあります）
|
|
20
21
|
|
|
21
22
|
---
|
|
22
23
|
ではページ更新を使わず、データを更新するにはどうするかですが、テーブルのDOMを更新するやり方があります。
|
|
@@ -137,4 +138,6 @@
|
|
|
137
138
|
このスクリプトではまだ「20行だけに固定」というのは示していませんが、基本的に上記スクリプトを拡張することでできます。御自分で考えてみて下さい。
|
|
138
139
|
（この場合createFromHtmlTemplateFileを使うことになると思いますが）
|
|
139
140
|
|
|
141
|
+
上記は素案として作っただけで、まだまあだブラッシュアップの余地はたくさんあります。
|
|
142
|
+
|
|
140
143
|
20行固定表示以外にも、最初のチャットデータ表示をもっと早くする方法を考えたり、チャットデータの転送量を減らす方法を考えたり（上記スクリプトだとチャットデータを全部送っている）、Vueで作り直したりするのも面白いと思います。
|
1
answer
CHANGED
|
@@ -137,4 +137,4 @@
|
|
|
137
137
|
このスクリプトではまだ「20行だけに固定」というのは示していませんが、基本的に上記スクリプトを拡張することでできます。御自分で考えてみて下さい。
|
|
138
138
|
（この場合createFromHtmlTemplateFileを使うことになると思いますが）
|
|
139
139
|
|
|
140
|
-
20行固定表示以外にも、最初のチャットデータ表示をもっと早くする方法を考えたり、Vueで作り直したりするのも面白いと思います。
|
|
140
|
+
20行固定表示以外にも、最初のチャットデータ表示をもっと早くする方法を考えたり、チャットデータの転送量を減らす方法を考えたり（上記スクリプトだとチャットデータを全部送っている）、Vueで作り直したりするのも面白いと思います。
|