GASにおける関数へのオブジェクトの渡し方を教えてください

実現したいこと

GASを利用して文字列をスプレッドシートに書き込む

前提

GASでwebアプリケーションを作っています。
その過程で、webページで入力されたテキストを指定のスプレッドシートに書き込む処理を実現しようとしています。
そのために、js.htmlにシートに値を書き込むような関数を作ろうとしたのですが、そもそもjs.htmlの関数にシートオブジェクトがうまく渡せていないため、そこで止まっています。
理想はobject型が渡されることですが、現状string型がわたされています。

/ファイル構成
・code.js
・index.html
・js.html

発生している問題・エラーメッセージ

index.htmlのボタンが押されたとき、シートオブジェクトssをjs.htmlのtest()に渡したいが、string型として渡されてしまう。

該当のソースコード(部分省略)

code.js
1//グローバル変数
2const ss = SpreadsheetApp.openById("シートID").getSheetByName("シート名");

index.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8" />
5  <base target="_top">
6  <!--read css-->
7  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
8</head>
9<body>
10<!-- この時点ではログに表示される型はobject-->
11  <? console.log(typeof(ss));?>
12  <button onclick="test('<?=ss?>')">confirm</button>
13  <!--read JavaScript-->
14  <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
15</body>
16</html>

js.html
1<script>
2  function test(sheet) {
3//ここで表示されるのはstring
4      alert(typeof(sheet));
5  }
6
7</script>

試したこと

・調査しましたが、状況に合う見本が見つかりませんでした。

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

回答1件

ベストアンサー

GASはサーバー上のアプリケーション
js.htmlはクライアント側のwebブラウザ上で動作するアプリケーションであるため、
gasのスプレッドシートオブジェクトを、js.htmlに渡すことは無理です。

webブラウザ上のhtmlページに入力されたデータをgasでスプレッドシートに書き込むには、js.htmlでデータをホストに送信する必要があります。

その時、そのためにgasではクライアント側の関数として
google.script.runという関数を用意しています。
ただし、google.script.runも実際はクライアントとサーバー間で通信が発生するので、オブジェクトを渡すことはできません。
数値型または文字列型の引数を持つ関数をgas側で用意しておくと、クライアント側からその関数を実行できるようなイメージです。

詳しくは、google.script.runでググってみて下さい。
なお、google.script.runは、数値型または文字列型の引数しか渡せないと書きましたが、オブジェクト型もjsonstringに変換して文字列でサーバーに送信し、サーバー(gas)側でjsonParseすれば、jsonstringをオブジェクトに戻すことが出来ます。

以下chatGPTで作成した、JSON.stringifyとJSON.parseを使用した簡単なサンプルです

html
1<!DOCTYPE html>
2<html>
3<head>
4  <base target="_top">
5</head>
6<body>
7  <button onclick="sendData()">Send Data to Google Apps Script</button>
8
9  <script>
10    function sendData() {
11      // サンプルオブジェクト
12      var sampleObject = {
13        key1: 'value1',
14        key2: 'value2'
15      };
16
17      // オブジェクトをJSON文字列に変換
18      var jsonString = JSON.stringify(sampleObject);
19
20      // Google Apps Scriptの関数を呼び出し
21      google.script.run.withSuccessHandler(onSuccess).processData(jsonString);
22    }
23
24    function onSuccess(response) {
25      // Google Apps Scriptからの応答を処理
26      console.log('Response from Google Apps Script:', response);
27    }
28  </script>
29</body>
30</html>

javascript:gas側
1function processData(jsonString) {
2  // JSON文字列をオブジェクトにパース
3  var dataObject = JSON.parse(jsonString);
4
5  // パースしたオブジェクトの処理（ここではログに出力）
6  Logger.log('Received data from the browser:', dataObject);
7
8  // 応答を返す（任意の応答を返すことができます）
9  return 'Data processed successfully!';
10}