トップ Google Apps Scriptに関する質問 jsとgasによるdoPostとfetch間によるhtmlファイルの受け渡しについて

編集履歴

回答編集履歴

2023/01/29 10:13

投稿

スコア0

test CHANGED Viewed

@@ -27,7 +27,7 @@
   const index = HtmlService.createTemplateFromFile('index');
   // テンプレートファイルに値を渡す。
-   index.value1 = 'おはよう';
+  index.value1 = 'おはよう';
   // ページを構築して返す。
   return index.evaluate();

2023/01/29 10:13

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -180,7 +180,7 @@
 このとき、「[**formdata イベント**](https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/formdata_event)」が発生し、index.html の<script>タグ内に記述した「イベントハンドラー」が実行されます。
 「イベントハンドラー」というのは、「イベントを処理するための関数」という意味で、具体的には下記の 「(e) => { 」以降の部分です。
-この関数の中で、フォームに送信するデータ(item_dict）をセットしています。
+この関数の中で、送信するデータ(item_dict）をセットしています。
 複数のオブジェクトを送るため、`JSON.stringfy` でJSON文字列に変換しています。
 ```js
     // フォーム送信時に発生する 'formdata' イベントを処理する関数（イベントハンドラー）を実装

2023/01/29 00:06

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -28,10 +28,13 @@
   // テンプレートファイルに値を渡す。
    index.value1 = 'おはよう';
-   index.value2 = 'おやすみ';
   // ページを構築して返す。
   return index.evaluate();
+}
+function getMessage() {
+  return 'おやすみ';
 }
 ```
@@ -44,12 +47,13 @@
   </head>
   <body>
     <h1><?= value1 ?></h1>
-    <h1><?= value2 ?></h1>
+    <h1><?= getMessage() ?></h1>
 </body>
 </html>
 ```
-このようにすることで、HTML の `<?=  ?>` で囲まれた部分の変数に任意の値を渡して表示できます。
+こうすることで、HTML の `<?=  ?>` で囲まれた部分に、任意の値を渡したり、GAS側で用意した関数の計算結果を表示したりできます。
+（※ただし、`<?=  ?>`部分の置き換えはページを読み込んで構築する時だけ行われますので、たとえばページ表示後、動的に`<?=  ?>`部分を変更するということはできません）
 ---
 createTemplateFromFile 関数の基本：

2023/01/28 11:39

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -53,7 +53,7 @@
 ---
 createTemplateFromFile 関数の基本：
-+ `<?=  ?>` が使われているHTML（テンプレートファイル）の `<?=  ?>` の部分を渡された値に置き換えて、ページを構築します。
++ `<?=  ?>` が使われているHTML（テンプレートファイル）の `<?=  ?>` の部分を、GAS 側の変数や関数の計算結果、または渡された値に置き換えて、ページを構築します。
 + ページを返すときに、evaluate() 関数を使う必要があります。
 ---

2023/01/27 23:45

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -86,7 +86,7 @@
 /*  フォーム送信時に呼ばれる */
 function doPost(e) {
   // フォームから受け取ったデータ（JSONフォーマットの文字列）を取出す。
-  const item_dict_json = e.parameters.item_dict;
+  const item_dict_json = e.parameter.item_dict;
   // JSONフォ－マットの文字列を、オブジェクトに戻す。
   const item_dict = JSON.parse(item_dict_json);
@@ -196,14 +196,14 @@
 /*  フォーム送信時に呼ばれる */
 function doPost(e) {
   // フォームから受け取ったデータ（JSONフォーマットの文字列）を取り出す。
-  const item_dict_json = e.parameters.item_dict;
+  const item_dict_json = e.parameter.item_dict;
   // JSONフォーマットの文字列を、オブジェクトに戻す。
   const item_dict = JSON.parse(item_dict_json);
   以下略
 ```
 doPost関数の引数 「e」には、先ほどのイベントハンドラー内でセットしたフォームデータが含まれています。
-これを取り出すには `e.parameters.変数名` というようにします。
+これを取り出すには `e.parameter.変数名` というようにします。
 取り出されるのは、JSON.stgringify によって JSON 文字列に変換されたデータなので、これをオブジェクトにもどすために JSON.parse しています。

2023/01/27 17:50

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -126,7 +126,7 @@
       address: '東京都新宿区○ ○',
     };
-    // フォーム送信時に呼ばれる 'formdata' イベントを処理する関数（イベントハンドラー）を実装
+    // フォーム送信時に発生する 'formdata' イベントを処理する関数（イベントハンドラー）を実装
     document.getElementById('form').addEventListener('formdata', (e) => {
       // フォームデ－タを格納するオブジェクト（FormDataオブジェクト）への参照を取得
       const fd = e.formData;
@@ -179,7 +179,7 @@
 この関数の中で、フォームに送信するデータ(item_dict）をセットしています。
 複数のオブジェクトを送るため、`JSON.stringfy` でJSON文字列に変換しています。
 ```js
-    // フォーム送信時に呼ばれる 'formdata' イベントを処理する関数（イベントハンドラー）を実装
+    // フォーム送信時に発生する 'formdata' イベントを処理する関数（イベントハンドラー）を実装
     document.getElementById('form').addEventListener('formdata', (e) => {
       // フォームデ－タを格納するオブジェクト（FormDataオブジェクト）への参照を取得
       const fd = e.formData;
@@ -190,7 +190,7 @@
 ```
 ↓
 ↓
-（３）フォームを送信すると、今度は GAS 側の doPost 関数が実行されます。
+（３）フォームを送信すると、(form 要素の action 属性に指定した URL に基づき) GAS 側の doPost 関数が実行されます。
 ```js
 /*  フォーム送信時に呼ばれる */

2023/01/27 16:06

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -172,7 +172,7 @@
 （こうすることで、フォームデータを GAS のデプロイURLで受け取れる）
 ↓
 ↓
-（２）「送信」ボタンを押すと、フォームデータが送信されます。
+（２）「送信」ボタンを押すと、フォームデータが form 要素の action 属性に指定した URL に対して送信されます。
 このとき、「[**formdata イベント**](https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/formdata_event)」が発生し、index.html の<script>タグ内に記述した「イベントハンドラー」が実行されます。
 「イベントハンドラー」というのは、「イベントを処理するための関数」という意味で、具体的には下記の 「(e) => { 」以降の部分です。
@@ -181,7 +181,7 @@
 ```js
     // フォーム送信時に呼ばれる 'formdata' イベントを処理する関数（イベントハンドラー）を実装
     document.getElementById('form').addEventListener('formdata', (e) => {
-      // フォームデータを格納するオブジェクトを取得
+      // フォームデ－タを格納するオブジェクト（FormDataオブジェクト）への参照を取得
       const fd = e.formData;
       // フォーム送信先（コード.gs の doPost 関数）に送信するデータをセット

2023/01/27 15:45

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -85,10 +85,10 @@
 /*  フォーム送信時に呼ばれる */
 function doPost(e) {
-  // フォームから受け取ったデータ（JSONフォーマットの文字列）を取り出す。
+  // フォームから受け取ったデータ（JSONフォーマットの文字列）を取出す。
   const item_dict_json = e.parameters.item_dict;
-  // JSONフォーマットの文字列を、オブジェクトに戻す。
+  // JSONフォ－マットの文字列を、オブジェクトに戻す。
   const item_dict = JSON.parse(item_dict_json);
   // テンプレートファイルを読み込む
@@ -123,15 +123,15 @@
     // 送信用のデータ。
     let item_dict = {
       date: '2023/01/01',
-      address: '東京都新宿区○○',
+      address: '東京都新宿区○ ○',
     };
     // フォーム送信時に呼ばれる 'formdata' イベントを処理する関数（イベントハンドラー）を実装
     document.getElementById('form').addEventListener('formdata', (e) => {
-      // フォームデータを格納するオブジェクト（FormDataオブジェクト）への参照を取得
+      // フォームデ－タを格納するオブジェクト（FormDataオブジェクト）への参照を取得
       const fd = e.formData;
-      // フォーム送信先（result.html）に送信するデータをセット
+      // フォーム送信先（result.html）に送信するデータをセット.
       fd.set('item_dict',  JSON.stringify(item_dict));
     });
   </script>

2023/01/27 15:44

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -128,7 +128,7 @@
     // フォーム送信時に呼ばれる 'formdata' イベントを処理する関数（イベントハンドラー）を実装
     document.getElementById('form').addEventListener('formdata', (e) => {
-      // フォームデータを格納するオブジェクトを取得
+      // フォームデータを格納するオブジェクト（FormDataオブジェクト）への参照を取得
       const fd = e.formData;
       // フォーム送信先（result.html）に送信するデータをセット

2023/01/27 15:39

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -168,7 +168,8 @@
 （１）GASでデプロイして発行したURLをブラウザに入力すると、コード.gs の doGet関数が呼ばれ、index.html が返されます。
 このとき、index.html内の form要素の `<?= url ?>` の部分を、GAS Web アプリのデプロイURL に置き換えています。
-なぜこのようにするかといえば、フォーム送信時に、**form 要素の action 属性に指定した URL** に対してフォームデータが POST されるように設定するためです。
+なぜこのようにするかといえば、フォーム送信時に、**form 要素の action 属性に指定した URL** に対してフォームデータが POST されるためです。
+（こうすることで、フォームデータを GAS のデプロイURLで受け取れる）
 ↓
 ↓
 （２）「送信」ボタンを押すと、フォームデータが送信されます。

2023/01/27 15:34

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -7,7 +7,7 @@
 ---
-下記のコードは基本的な動作を理解していただく目的のために簡略化しています。（簡略といっても省略しているわけではなく、コピペしてデプロイすれば動作します）。実際には動作を理解した上で、質問者さんのアプリに適用してください。
+下記のコードは基本的な動作を理解していただく目的のために簡略化しています。（簡略といっても省略しているわけではなく、コピペしてデプロイすれば動作します）。実際には動作を理解した上で、質問者さんのアプリに適用してください。また、コード中のコメントが冗長になっていますが説明のためですので、御承知おきください。
 ---
@@ -18,16 +18,19 @@
 [**createTemplateFromFile**](https://developers.google.com/apps-script/reference/html/html-service#createtemplatefromfilefilename) を使います。
-以下は動作するサンプルコードです。ためしに新しいファイルに記述してWebアプリとしてデプロイすると動作がわかりやすいかと思います。
+・以下は動作するサンプルコードです。ためしに新しいファイルに記述してWebアプリとしてデプロイすると動作がわかりやすいかと思います。
 ＜コード.gs＞
 ```js
 function doGet() {
+  // テンプレートファイルを読み込む
   const index = HtmlService.createTemplateFromFile('index');
   // テンプレートファイルに値を渡す。
    index.value1 = 'おはよう';
    index.value2 = 'おやすみ';
-  // ページを返す。
+  // ページを構築して返す。
   return index.evaluate();
 }
 ```
@@ -71,9 +74,12 @@
 ```js
 /* 初期ページ表示時に呼ばれる */
 function doGet(e) {
+  // テンプレートファイルを読み込む
   var index = HtmlService.createTemplateFromFile("index");
   // WebアプリのURLを index.html に渡す。
   index.url = ScriptApp.getService().getUrl();
+  // ページを構築して返す
   return index.evaluate();
 }
@@ -84,14 +90,15 @@
   // JSONフォーマットの文字列を、オブジェクトに戻す。
   const item_dict = JSON.parse(item_dict_json);
+  // テンプレートファイルを読み込む
   const result = HtmlService.createTemplateFromFile("result");
   // フォームから受け取ったデータを result.html に渡す。
   result.date     = item_dict.date;
   result.address  = item_dict.address;
-  // ページを返す
+  // ページを構築して返す
   return result.evaluate();
 }
 ```

2023/01/27 15:28

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -165,8 +165,8 @@
 ↓
 ↓
 （２）「送信」ボタンを押すと、フォームデータが送信されます。
-このとき、「[**formdata イベント**](https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/formdata_event)」が発生し、index.html の<script>タグ内に記述した「イベントハンドラ」が実行されます。
+このとき、「[**formdata イベント**](https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/formdata_event)」が発生し、index.html の<script>タグ内に記述した「イベントハンドラー」が実行されます。
-「イベントハンドラ」というのは、「イベントを処理するための関数」という意味で、具体的には下記の 「(e) => { 」以降の部分です。
+「イベントハンドラー」というのは、「イベントを処理するための関数」という意味で、具体的には下記の 「(e) => { 」以降の部分です。
 この関数の中で、フォームに送信するデータ(item_dict）をセットしています。
 複数のオブジェクトを送るため、`JSON.stringfy` でJSON文字列に変換しています。
@@ -194,7 +194,7 @@
   const item_dict = JSON.parse(item_dict_json);
   以下略
 ```
-doPost関数の引数 「e」には、先ほどのイベントハンドラ内でセットしたフォームデータが含まれています。
+doPost関数の引数 「e」には、先ほどのイベントハンドラー内でセットしたフォームデータが含まれています。
 これを取り出すには `e.parameters.変数名` というようにします。
 取り出されるのは、JSON.stgringify によって JSON 文字列に変換されたデータなので、これをオブジェクトにもどすために JSON.parse しています。

2023/01/27 15:25

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -165,7 +165,7 @@
 ↓
 ↓
 （２）「送信」ボタンを押すと、フォームデータが送信されます。
-このとき、formdata イベントが発生し、index.html の<script>タグ内にある「formdataイベントハンドラ」が実行されます。
+このとき、「[**formdata イベント**](https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/formdata_event)」が発生し、index.html の<script>タグ内に記述した「イベントハンドラ」が実行されます。
 「イベントハンドラ」というのは、「イベントを処理するための関数」という意味で、具体的には下記の 「(e) => { 」以降の部分です。
 この関数の中で、フォームに送信するデータ(item_dict）をセットしています。
@@ -176,7 +176,7 @@
       // フォームデータを格納するオブジェクトを取得
       const fd = e.formData;
-      // フォーム送信先（result.html）に送信するデータをセット
+      // フォーム送信先（コード.gs の doPost 関数）に送信するデータをセット
       fd.set('item_dict',  JSON.stringify(item_dict));
     });
 ```

2023/01/27 15:22

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -159,9 +159,9 @@
 ---
 流れとしては以下のようになります。
 （１）GASでデプロイして発行したURLをブラウザに入力すると、コード.gs の doGet関数が呼ばれ、index.html が返されます。
-このとき、index.html内の form要素の `<?= url ?>` の部分を、doGet関数の中で渡されたデプロイURLに置き換えています。
+このとき、index.html内の form要素の `<?= url ?>` の部分を、GAS Web アプリのデプロイURL に置き換えています。
-なぜこのようにするかといえば、フォーム送信時には、**form 要素の action 属性に指定した URL** に対してフォームデータが POST されるからです。
+なぜこのようにするかといえば、フォーム送信時に、**form 要素の action 属性に指定した URL** に対してフォームデータが POST されるように設定するためです。
 ↓
 ↓
 （２）「送信」ボタンを押すと、フォームデータが送信されます。

2023/01/27 15:20

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -51,7 +51,7 @@
 ---
 createTemplateFromFile 関数の基本：
 + `<?=  ?>` が使われているHTML（テンプレートファイル）の `<?=  ?>` の部分を渡された値に置き換えて、ページを構築します。
-+ ページを返すときに、evaluate() 関数を使います。
++ ページを返すときに、evaluate() 関数を使う必要があります。
 ---
@@ -60,7 +60,8 @@
 ではフォームの submit（＝送信時）に任意のデータ（今回でいえば領収書内に記載する金額やユーザー情報等のデータ）を渡すにはどうすればよいでしょうか。
-これには複数のやり方がありますが、[**formdata イベント**](https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/formdata_event)を利用してみるのはいかがでしょうか。[※質問文記載のアプリの動作を考察すると、ユーザーに文字を手入力させる要素がなく、特に入力内容のチェックも不要であるようなので、その前提でこの方法を採用します]
+これには複数のやり方がありますが、[**formdata イベント**](https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/formdata_event)を利用してみるのはいかがでしょうか。
+(注：質問文記載のアプリの動作を考察すると、ユーザーに文字を手入力させる要素がなく、特に入力内容のチェックも不要であるようなので、その前提でこの方法を採用しています。仮に入力値をチェック（バリデーション）する必要があるような場合は、別の方法になります）
 具体的には、formdata イベントのイベントハンドラー内に「送信したいデータをフォームデータに追加する処理」を記述する、ということです。

コードタグ修正　HTML→html

2023/01/27 15:18

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -33,7 +33,7 @@
 ```
 ＜index.html＞
-```HTML
+```html
 <!DOCTYPE html>
 <html>
   <head>
@@ -96,7 +96,7 @@
 ```
 ＜index.html＞
-```HTML
+```html
 <!DOCTYPE html>
 <html>
@@ -133,7 +133,7 @@
 ```
 ＜result.html＞
-```HTML
+```html
 <!DOCTYPE html>
 <!-- 返却用html -->
 <html>