【GAS】フォーム（テキストボックス）のデータをスプレッドシートと同期するWEBアプリケーションを作成する-Part1

GAS(GoogleAppsScript)

2023.03.152023.03.16

フォーム（テキストボックス）の情報とスプレッドシートの情報を同期させるWEBアプリケーションを作成してみます。

doGet(e)関数
返り値
WEBアプリケーションを作る（doGet）
index.html側からスクリプトの情報にアクセスする
まとめ

doGet(e)関数

まずは、doGet(e)関数を作ります。doGet(e)関数は、Google Apps ScriptでWebアプリケーションを作成する際に必要な関数の一つです。HTTP GETリクエストを受け取り、レスポンスを返します。

doGet(e)関数は、引数として e を受け取ります。e には、HTTPリクエストに関する情報が含まれています。具体的には、以下のプロパティが含まれます。

parameter : URLパラメーターを含むオブジェクト
querystring : URLクエリ文字列を文字列として含むオブジェクト
contextPath : スクリプトのコンテキストパスを含む文字列
pathInfo : リクエストパスからコンテキストパスを除いた文字列
parameters : URLパラメーターとクエリ文字列を結合したオブジェクト
contentLength : リクエスト本文のバイト数
postData : POSTリクエストの場合に、リクエスト本文を含むオブジェクト

返り値

doGet(e)関数は、HTTPレスポンスを返します。レスポンスは、HTML、JSON、XML、テキストなど、任意の形式で出力することができます。

以下は、doGet(e)関数の使用例です。

function doGet(e) {
  var html = HtmlService.createHtmlOutput('<h1>Hello, World!</h1>');
  return html;
}

この例では、単純なHTMLページを返すことができます。

WEBアプリケーションを作る（doGet）

それでは、doGetを使ってスプレッドシートにアクセスする関数を作成してみます。

const ssId = "XXXXXXXXXXXXX";
const sheetName = "リスト";

function doGet(e) {
  const spreadsheet = SpreadsheetApp.openById(ssId);
  const sheet = spreadsheet.getSheetByName(sheetName);
  let area = sheet.getRange(1, 1, 2, 1).getValues();
  const createHTML = HtmlService.createTemplateFromFile('index').evaluate();
  return createHTML;
}

これで、ID=XXXXXXXのスプレッドシートのリストという名前のシート内のA1からA2までのデータにアクセスできるようになります。

index.html側からスクリプトの情報にアクセスする

次は、index.html側からスクリプトの情報にアクセスしてみます。まずは、index.htmlファイルを作り、簡単なテーブルを作成します。

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    .table1 {
      border-collapse: collapse;
      table-layout: fixed;
    }
    tr th {
      border: #aaa solid 1px;
      padding: 10px;
      background-color: #999;
      color: white;
    }
    tr td {
      border: #aaa solid 1px;
      padding: 10px;
    }
  </style>
</head>

<body>
  <table class="table1" id="table1">
    <tr>
      <th>
        見出し
      </th>
    </tr>
    <tr>
      <td contenteditable="true">
        テスト1
      </td>
    </tr>
  </table>
</body>
</html>

表（テーブル）ができました。※contenteditable=”true”は、編集可能なセルという設定です。

ただ、このままですと、直接index.htmlにテーブルを作っただけになりますので、こちらにスクリプトの情報を取得して表示させてみます。

const thText = "名前";
const tdText = "田中";

こちらをindex.html側で呼び出してみます。index.html側でスクリプトを呼び出す際には、下記のようなphpに似ているような呼び出し方をします。

<? ?>

thとtdの中身を入れ替えてみます。

  <table class="table1" id="table1">
    <tr>
      <th>
        <?=thText?>
      </th>
    </tr>
    <tr>
      <td contenteditable="true">
        <?=tdText?>
      </td>
    </tr>
  </table>
</body>
</html>

デプロイしてみます。

[rml_read_more]