teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

5

他アカウントからアクセスすると権限エラーになっていたのを修正

2021/09/30 11:59

投稿

退会済みユーザー
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 sh.getDataRange().getValues()
39
+ return sheet.getDataRange().getValues()
38
40
  }
39
41
 
40
42
  function send(text){
41
43
  var user = Session.getActiveUser();
42
- SpreadsheetApp.getActiveSheet().appendRow([user,text]);
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()で非同期にコード.gsのgetData関数を呼び出
114
+ ・load 関数内、withSuccessHandlerを使って非同期にコード.gsのgetData関数を呼び出し、
114
- getData関数から取得したデータを、appendTableRows に渡し、tableのDOMを更新(行追加)
115
+ getData関数から取得したチャットデータを、appendTableRows に渡す。
116
+ ・appendTableRows 内で、tableのDOMを更新してテーブルの行を追加する。
115
117
  ```js
118
+ function load(){
116
- google.script.run
119
+ google.script.run
117
- .withSuccessHandler(appendTableRows).getData();
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

2021/09/30 11:59

投稿

退会済みユーザー
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

2021/09/25 13:37

投稿

退会済みユーザー
answer CHANGED
@@ -138,6 +138,6 @@
138
138
  このスクリプトではまだ「20行だけに固定」というのは示していませんが、基本的に上記スクリプトを拡張することでできます。御自分で考えてみて下さい。
139
139
  (この場合createFromHtmlTemplateFileを使うことになると思いますが)
140
140
 
141
- 上記は素案として作っただけで、まだまだブラッシュアップの余地はたくさんあります。
141
+ 上記は素案として作っただけで、まだまだブラッシュアップの余地はたくさんあります。
142
142
 
143
143
  20行固定表示以外にも、最初のチャットデータ表示をもっと早くする方法を考えたり、チャットデータの転送量を減らす方法を考えたり(上記スクリプトだとチャットデータを全部送っている)、Vueで作り直したりするのも面白いと思います。

2

2021/09/25 13:32

投稿

退会済みユーザー
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

2021/09/25 13:32

投稿

退会済みユーザー
answer CHANGED
@@ -137,4 +137,4 @@
137
137
  このスクリプトではまだ「20行だけに固定」というのは示していませんが、基本的に上記スクリプトを拡張することでできます。御自分で考えてみて下さい。
138
138
  (この場合createFromHtmlTemplateFileを使うことになると思いますが)
139
139
 
140
- 20行固定表示以外にも、最初のチャットデータ表示をもっと早くする方法を考えたり、Vueで作り直したりするのも面白いと思います。
140
+ 20行固定表示以外にも、最初のチャットデータ表示をもっと早くする方法を考えたり、チャットデータの転送量を減らす方法を考えたり(上記スクリプトだとチャットデータを全部送っている)、Vueで作り直したりするのも面白いと思います。