teratail
回答率
85.39%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップGoogle Apps Scriptに関する質問html内のgoogle.script.runで呼び出す関数に値を引き渡したい

編集履歴

回答編集履歴

12

　

2022/08/05 14:33

投稿

退会済みユーザー
test CHANGED
@@ -113,19 +113,13 @@
113
113
  単純に、GAS側の関数に引数を渡して呼び出せばいいだけと思いますが。
114
114
 
115
115
  ```index.html
116
- <!DOCTYPE html>
117
- <html>
118
116
  略
119
117
  <script>
120
118
  google.script.run.withSuccessHandler(function(dt) {
121
119
  略
122
120
  }).values1get(hikisuu); // 引数を付けてGASの関数を呼び出す
123
121
  }
124
- </script>
125
- </body>
126
122
 
127
-
128
- 　
129
123
  ```
130
124
 
131
125
  ```gs

11

　

2022/08/05 14:32

投稿

退会済みユーザー
test CHANGED
@@ -117,23 +117,20 @@
117
117
  <html>
118
118
  略
119
119
  <script>
120
- 　
121
- 　//webページの読み込み時に実行
122
- window.onload = function(){
123
- //エクセルDBからアサイン状況を表示
124
120
  google.script.run.withSuccessHandler(function(dt) {
125
-
126
121
  略
127
-
128
- }).values1get(hikisuu);
122
+ }).values1get(hikisuu); // 引数を付けてGASの関数を呼び出す
129
123
  }
130
124
  </script>
131
125
  </body>
126
+
127
+
128
+ 　
132
129
  ```
130
+
133
131
  ```gs
134
- function values1get(hikisuu) {
132
+ function values1get(hikisuu) { // 引数を受け取る
135
- //ログイン中のgmailアカウントを元に、IDファイルからデータベースのIDを取得
136
- 以下略
133
+ 略
137
134
  }
138
135
  ```
139
136
 

10

　

2022/08/05 14:30

投稿

退会済みユーザー
test CHANGED
@@ -136,5 +136,5 @@
136
136
  以下略
137
137
  }
138
138
  ```
139
- (なお、スプレッドシートのアクセス権によるエラーや構文エラーで動いてない可能性はありますがこちらでは関知できません）
140
139
 
140
+

9

　

2022/08/05 14:27

投稿

退会済みユーザー
test CHANGED
@@ -106,7 +106,7 @@
106
106
  上記を応用すれば質問者さんの思うような動作を行わせることができるのではないでしょうか。
107
107
 
108
108
  ---
109
- コメント内の後だし質問に対する回答
109
+ # コメント内の後だし質問に対する回答
110
110
 
111
111
  > htmlのscript内で実行するGASに値を渡す方法がわからない
112
112
 

8

追記

2022/08/05 14:24

投稿

退会済みユーザー
test CHANGED
@@ -104,3 +104,37 @@
104
104
 
105
105
 
106
106
  上記を応用すれば質問者さんの思うような動作を行わせることができるのではないでしょうか。
107
+
108
+ ---
109
+ コメント内の後だし質問に対する回答
110
+
111
+ > htmlのscript内で実行するGASに値を渡す方法がわからない
112
+
113
+ 単純に、GAS側の関数に引数を渡して呼び出せばいいだけと思いますが。
114
+
115
+ ```index.html
116
+ <!DOCTYPE html>
117
+ <html>
118
+ 略
119
+ <script>
120
+ 　
121
+ 　//webページの読み込み時に実行
122
+ window.onload = function(){
123
+ //エクセルDBからアサイン状況を表示
124
+ google.script.run.withSuccessHandler(function(dt) {
125
+
126
+ 略
127
+
128
+ }).values1get(hikisuu);
129
+ }
130
+ </script>
131
+ </body>
132
+ ```
133
+ ```gs
134
+ function values1get(hikisuu) {
135
+ //ログイン中のgmailアカウントを元に、IDファイルからデータベースのIDを取得
136
+ 以下略
137
+ }
138
+ ```
139
+ (なお、スプレッドシートのアクセス権によるエラーや構文エラーで動いてない可能性はありますがこちらでは関知できません）
140
+

7

　

2022/08/04 09:46

投稿

退会済みユーザー
test CHANGED
@@ -2,13 +2,13 @@
2
2
 
3
3
  ---
4
4
 
5
- 【要件】
5
+ 【要求】
6
6
  ・ユーザーがページにアクセスすると、自分のデータとともに、「ユーザA」、「ユーザB」、「ユーザC」「自分のページ」にジャンプする４つのボタンが表示される。
7
7
  ・各ボタンを押すと、その押したボタンに対応するユーザのデータを表示するページが開く（開いた先のページでも４つのボタンは同様に表示される）
8
8
 
9
9
  ---
10
10
  　
11
- 　
11
+ 【要件】
12
12
  上記の動作を行わせるために、**URLの特定のパラメータの有無で処理を分岐させる**というやり方が考えられます。
13
13
  具体的には、
14
14
  ① URL内に「user」パラメータが存在しない場合は、ログインしているユーザのデータを表示する。

6

　

2022/08/04 02:34

投稿

退会済みユーザー
test CHANGED
@@ -98,7 +98,7 @@
98
98
  ↓
99
99
  inde.html内の スクリプトレット <?= user => の部分が、code.gsから渡された値（**user_a@example.com**）に置換されます。
100
100
 
101
- ③ 「自分のページを開く」の URL には、user パラメータが存在しないため、「自分のページを開く」ボタンをクリックした場合は、ログイン中ユーザのデータが表示されているページが開きます。
101
+ ③ 「自分のページを開く」ボタンをクリックした場合は、ボタンのonclickに指定してある URL に、user パラメータが存在しないため、①と同様にログイン中ユーザのデータが表示されているページが開きます。
102
102
 
103
103
  ---
104
104
 

5

　

2022/08/03 15:43

投稿

退会済みユーザー
test CHANGED
@@ -94,7 +94,7 @@
94
94
  ② 「ユーザAのページにジャンプ」ボタンをクリックした場合
95
95
  「user=user_a@example.com」というパラメータを含むURLがブラウザで開かれます。
96
96
  ↓
97
- doGet 関数内で、user パラメータに設定されている値（user_a@example.com）が、HTMLテンプレートの user 変数として渡されます。
97
+ doGet 関数内で、user パラメータに設定されている値（user_a@example.com）が、HTMLテンプレートの user に渡されます。
98
98
  ↓
99
99
  inde.html内の スクリプトレット <?= user => の部分が、code.gsから渡された値（**user_a@example.com**）に置換されます。
100
100
 

4

　

2022/08/03 15:39

投稿

退会済みユーザー
test CHANGED
@@ -9,7 +9,7 @@
9
9
  ---
10
10
  　
11
11
  　
12
- 上記の動作を行わせるために、**URLのパラメータの有無で処理を分岐させる**というやり方が考えられます。
12
+ 上記の動作を行わせるために、**URLの特定のパラメータの有無で処理を分岐させる**というやり方が考えられます。
13
13
  具体的には、
14
14
  ① URL内に「user」パラメータが存在しない場合は、ログインしているユーザのデータを表示する。
15
15
  ② URL内に「user」パラメータにユーザID（メールアドレス）が設定されている場合は、その指定されたユーザIDのデータを表示する。

3

　

2022/08/03 15:38

投稿

退会済みユーザー
test CHANGED
@@ -11,7 +11,7 @@
11
11
  　
12
12
  上記の動作を行わせるために、**URLのパラメータの有無で処理を分岐させる**というやり方が考えられます。
13
13
  具体的には、
14
- ① URL内に「user」パラメータを指定していない場合は、ログインしているユーザのデータを表示する。
14
+ ① URL内に「user」パラメータが存在しない場合は、ログインしているユーザのデータを表示する。
15
15
  ② URL内に「user」パラメータにユーザID（メールアドレス）が設定されている場合は、その指定されたユーザIDのデータを表示する。
16
16
 
17
17
  ということです。

2

　

2022/08/03 15:36

投稿

退会済みユーザー
test CHANGED
@@ -98,6 +98,8 @@
98
98
  ↓
99
99
  inde.html内の スクリプトレット <?= user => の部分が、code.gsから渡された値（**user_a@example.com**）に置換されます。
100
100
 
101
+ ③ 「自分のページを開く」の URL には、user パラメータが存在しないため、「自分のページを開く」ボタンをクリックした場合は、ログイン中ユーザのデータが表示されているページが開きます。
102
+
101
103
  ---
102
104
 
103
105
 

1

修正

2022/08/03 15:34

投稿

退会済みユーザー
test CHANGED
@@ -1,27 +1,104 @@
1
- index.htmlの引用符とタグ閉じが不完全、また全角スペースが含まれている
2
- これらが原因で javascript の方にエラーが発生している可能性があります。
1
+ たとえば、下記のような単純なWebアプリを考えてみます。
3
2
 
3
+ ---
4
+
5
+ 【要件】
6
+ ・ユーザーがページにアクセスすると、自分のデータとともに、「ユーザA」、「ユーザB」、「ユーザC」「自分のページ」にジャンプする４つのボタンが表示される。
7
+ ・各ボタンを押すと、その押したボタンに対応するユーザのデータを表示するページが開く（開いた先のページでも４つのボタンは同様に表示される）
8
+
9
+ ---
10
+ 　
11
+ 　
12
+ 上記の動作を行わせるために、**URLのパラメータの有無で処理を分岐させる**というやり方が考えられます。
13
+ 具体的には、
14
+ ① URL内に「user」パラメータを指定していない場合は、ログインしているユーザのデータを表示する。
15
+ ② URL内に「user」パラメータにユーザID（メールアドレス）が設定されている場合は、その指定されたユーザIDのデータを表示する。
16
+
4
- 下記のように直した場合どうでしょうか。
17
+ ということです。
18
+ 例）
19
+ + https://script.google.com/～/exec というURLの場合：
20
+ 　　→　user パラメータが存在しないので、ログインしているユーザのデータを表示
21
+
22
+ + https://script.google.com/～/exec?user=abc123@example.com というURLの場合：
23
+ 　　→　user パラメータに指定されている「abc123@example.com」のデータを表示
24
+
25
+ なお簡便のため、この例における「ユーザのデータを表示」する処理とは、単純に「ユーザIDの文字列を表示するだけ」とします。
5
- （全角スペースを削除、「業務名をDB（スプレッドシート）から取得)」の左にシングルクォーテーション追加
26
+ 実際には、質問文記載のように、ユーザIDをもとにデータベース（スプレッドシート）からそれぞれのデータを引っ張ってきて加工・表示する処理になります。
27
+
28
+ ---
29
+
30
+ それでは、上記のような動作をさせるために、さらに具体的にどのようなコードを書けばよいか？というのがここでの例題です。
31
+
32
+ 回答例は下記になります。
33
+
6
- 最後の2行を追加）
34
+ code.gs
35
+ ```js
36
+ function doGet(e) {
37
+ // user パラメータを取得。
38
+ let user = e.parameter.user;
39
+
40
+ if (user == null) {
41
+ // user パラメータが存在しない場合は、ログイン中のユーザIDを設定。
42
+ user = Session.getActiveUser().getEmail();
43
+ }
44
+ let htmlOutput = HtmlService.createTemplateFromFile('index');
45
+ htmlOutput.user = user;
46
+ return htmlOutput.evaluate();
47
+ }
48
+
49
+ function getAppUrl() {
50
+ return ScriptApp.getService().getUrl();
51
+ }
52
+ ```
7
53
  index.html
8
54
  ```html
9
- 略
55
+ <!DOCTYPE html>
10
- <script>
56
+ <html>
57
+ <head>
58
+ <base target="_top">
59
+ </head>
60
+
61
+ <body>
62
+ 表示中のデータ：
63
+ <br/>
64
+ ユーザー： <?= user ?>
65
+ <br/>
11
66
 
12
- //webページの読み込み時に実行
13
- window.onload = function(){
14
- //エクセルDBからアサイン状況を表示
15
- google.script.run.withSuccessHandler(function(dt) {
16
- for(var i = 0; i<dt.length - 1; i++) {
17
- var date = new Date(dt[i][0]);
18
- var dateText = `${date.getMonth() + 1}月${date.getDate()}日`;
19
- $('#業務1').append(`<input type="button"
67
+ <input type="button" value="ユーザＡのページを開く"
20
- id="${dt[i][3]}"
21
- value="${dateText + '_' + '業務名をDB（スプレッドシート）から取得)'}"
22
- onclick="window.open('<?= getAppUrl();?>?p=assign&d=${date}&f=${dt[i][1]}&n=${dt[i][2]}','_blank','width=280,height=400')">`);
68
+ onclick="window.open('<?= getAppUrl();?>?user=user_a@example.com')"/>
23
- }
24
- }).values1get();
69
+ <br/>
70
+ <input type="button" value="ユーザＢのページを開く"
71
+ onclick="window.open('<?= getAppUrl();?>?user=user_b@example.com')"/>
25
- }
72
+ <br/>
73
+ <input type="button" value="ユーザＣのページを開く"
74
+ onclick="window.open('<?= getAppUrl();?>?user=user_c@example.com')"/>
75
+ <br/>
76
+ <input type="button" value="自分のページを開く"
77
+ onclick="window.open('<?= getAppUrl();?>')"/>
78
+ <br/>
26
- </script>
79
+ </body>
80
+ </html>
27
81
  ```
82
+
83
+ --
84
+ コードをご覧になればお分かりかと思いますが、流れは下記のようになります。
85
+
86
+ ① 「user」パラメータのないデプロイ URL をブラウザで開いた場合：
87
+ doGet 関数内で、user パラメータがないので if (e.parameter.user == null) が正となり
88
+ 変数userに、ログイン中のユーザーのユーザID（メールアドレス）が設定されます。
89
+ そして、この 変数 user の値 がHTMLテンプレート内の user に渡されます。
90
+ ↓
91
+ inde.html内の スクリプトレット <?= user => の部分が、code.gsから渡された値（**ログイン中のユーザのユーザID**」）に置換されます。
92
+
93
+
94
+ ② 「ユーザAのページにジャンプ」ボタンをクリックした場合
95
+ 「user=user_a@example.com」というパラメータを含むURLがブラウザで開かれます。
96
+ ↓
97
+ doGet 関数内で、user パラメータに設定されている値（user_a@example.com）が、HTMLテンプレートの user 変数として渡されます。
98
+ ↓
99
+ inde.html内の スクリプトレット <?= user => の部分が、code.gsから渡された値（**user_a@example.com**）に置換されます。
100
+
101
+ ---
102
+
103
+
104
+ 上記を応用すれば質問者さんの思うような動作を行わせることができるのではないでしょうか。