スキルアップを始める

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

GAS(GoogleAppsScript)
メルマガ購読できます

簡単1ステップ!届いたメールの「フォローを確認」クリックでメルマガ登録!一緒にスキルアップを目指しましょう!

57人の購読者に加わりましょう

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

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]

値が変わりました!

html側には、テーブル内のテキスト情報はありませんが、スクリプト内の変数の値を引っ張ってきて表示できているのが確認できました。

便利ですね!

まとめ

まずは、doGet(e)関数を使ってindexファイルを作るところまで進めました。次回は、WEBフォームとスプレッドシートでのデータの送受信(同期?)を行っていきたいと思います。

会員登録するとご利用できます。
Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら