はじめに (対象読者・この記事でわかること)

この記事は、Google Apps ScriptでWebアプリケーションを開発中の方、HTMLフォームから送信されたデータをスクリプト内で活用したい方を対象としています。特に、Googleフォームのカスタマイズが難しい場合や、独自のデザインのフォームを作成したい方に役立つ内容です。

この記事を読むことで、HTML内のフォームに入力された値をGoogle Apps Scriptで取得し、変数として利用する方法がわかります。さらに、取得したデータをスプレッドシートに保存する実践的な手法も習得できます。これにより、Googleフォームでは実現できない柔軟な入力フォームとデータ処理を実装できるようになります。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - HTML/CSSの基本的な知識 - Google Apps Scriptの基本的な使い方 - Googleスプレッドシートの基本的な操作

HTMLフォームの値を取得する基本と背景

Google Apps ScriptでWebアプリケーションを開発する際、HTMLフォームからユーザーが入力したデータを取得することは非常に重要です。デフォルトのGoogleフォームではカスタマイズに限界があるため、独自のHTMLフォームを作成し、その値をスクリプトで処理する必要があります。

HTMLフォームからのデータ取得は、主にGETメソッドとPOSTメソッドの2つの方法で実現できます。GETメソッドはURLパラメータとしてデータが渡され、POSTメソッドはリクエストボディにデータが含まれます。Google Apps Scriptでは、e.parameterプロパティでGETメソッド、e.postData.contentsでPOSTメソッドから送信されたデータを取得できます。

特に、セキュリティを考慮したデータ処理や、大量のデータを扱う場合にはPOSTメソッドが推奨されます。次のセクションでは、具体的な実装手順をステップバイステップで解説します。

具体的な実装方法

ステップ1：HTMLフォームの作成

まずは、ユーザーが入力するためのHTMLフォームを作成します。Google Apps Scriptでは、HTMLファイルをプロジェクトに追加して使用します。

Html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
      }
      .form-group {
        margin-bottom: 15px;
      }
      label {
        display: block;
        margin-bottom: 5px;
      }
      input[type="text"], input[type="email"], textarea {
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
      }
      button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 15px;
        border: none;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>お問い合わせフォーム</h1>
    <form id="contactForm">
      <div class="form-group">
        <label for="name">お名前</label>
        <input type="text" id="name" name="name" required>
      </div>
      <div class="form-group">
        <label for="email">メールアドレス</label>
        <input type="email" id="email" name="email" required>
      </div>
      <div class="form-group">
        <label for="message">お問い合わせ内容</label>
        <textarea id="message" name="message" rows="5" required></textarea>
      </div>
      <button type="submit">送信</button>
    </form>

    <script>
      document.getElementById('contactForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const message = document.getElementById('message').value;

        google.script.run
          .withSuccessHandler(onSuccess)
          .processForm(name, email, message);
      });

      function onSuccess() {
        document.getElementById('contactForm').style.display = 'none';
        document.getElementById('thankYou').style.display = 'block';
      }
    </script>
  </body>
</html>

このHTMLファイルでは、お名前、メールアドレス、お問い合わせ内容の3つの入力フィールドを持つフォームを作成しています。CSSでスタイリングし、JavaScriptでフォーム送信時の処理を定義しています。

ステップ2：Google Apps Script側でのデータ処理

次に、HTMLフォームから送信されたデータを受け取り、処理するGoogle Apps Scriptのコードを作成します。コード.gsファイルに以下のコードを記述します。

Javascript

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('お問い合わせフォーム')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function processForm(name, email, message) {
  // スプレッドシートに保存
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('お問い合わせ');
  sheet.appendRow([new Date(), name, email, message]);

  // メール通知（任意）
  const recipient = 'your-email@example.com';
  const subject = '新しいお問い合わせがありました';
  const body = `
    お名前: ${name}
    メールアドレス: ${email}

    お問い合わせ内容:
    ${message}
  `;
  MailApp.sendEmail(recipient, subject, body);
}

このスクリプトでは、以下の処理を行っています：

  1. doGet関数でHTMLページを表示
  2. processForm関数でフォームから送信されたデータを受け取り、スプレッドシートに保存
  3. （任意）メールで通知を送信

ステップ3：Googleスプレッドシートの準備

データを保存するためのスプレッドシートを準備します。新しいスプレッドシートを作成し、最初のシートの名前を「お問い合わせ」に変更します。シートの1行目に以下の見出しを入力します：

| 日時 | お名前 | メールアドレス | お問い合わせ内容 |

ステップ4：Webアプリケーションとしてデプロイ

作成したアプリケーションをWebとしてデプロイします。

  1. スクリプトエディタの「デプロイ」>「新しいデプロイ」を選択
  2. 「ウェブアプリ」を選択
  3. 「次へ」をクリック
  4. 「アクセスできるユーザー」を「自分」または「Googleアカウントを持っているすべてのユーザー」に設定
  5. 「デプロイ」をクリック
  6. 実行権限を求められるので、必要な権限を許可

デプロイが完了すると、URLが表示されるので、そのURLにアクセスしてフォームが正しく動作することを確認します。

ハマった点やエラー解決

問題1：HTMLからスクリプト関数が呼び出せない

現象： HTMLフォームからGoogle Apps Scriptの関数を呼び出そうとしても、関数が実行されない。

原因： Google Apps Scriptのクライアントサイド関数を呼び出す際には、google.script.runを使用する必要があります。通常のJavaScript関数呼び出しとは異なるため、この記述を忘れがちです。

解決策： HTML内でスクリプト関数を呼び出す場合は、必ずgoogle.script.runを使用します。

Javascript

// 間違った例
processForm(name, email, message);

// 正しい例
google.script.run
  .withSuccessHandler(onSuccess)
  .processForm(name, email, message);

問題2：CSP（コンテンツセキュリティポリシーエラー）

現象： HTMLファイルを読み込む際に、コンテンツセキュリティポリシーに関するエラーが発生する。

原因： Google Apps Scriptはデフォルトで厳格なコンテンツセキュリティポリシー（CSP）を適用しており、外部からのスクリプト読み込みなどが制限されています。

解決策： HtmlServiceを使用してHTMLを生成する際に、setXFrameOptionsModeを設定して制限を緩和します。

Javascript

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('お問い合わせフォーム')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

問題3：スプレッドシートへの書き込み権限エラー

現象： スクリプトを実行しようとすると、「権限がありません」というエラーが発生する。

原因： スクリプトにスプレッドシートへの書き込み権限が付与されていないか、デプロイ時に適切な権限設定がされていない。

解決策： 1. スクリプトエディタの「実行」>「実行」を選択し、権限の承認を求められたら承認する 2. Webアプリとしてデプロイする際に、適切な権限（スプレッドシートの読み取り/書き込み、メールの送信など）が設定されていることを確認する

問題4：フォームデータの取得方法が間違っている

現象： フォームから送信されたデータが正しく取得できない。

原因： Google Apps Scriptでは、GETメソッドとPOSTメソッドでデータの取得方法が異なります。GETメソッドではe.parameter、POSTメソッドではe.postData.contentsを使用します。

解決策： フォームの送信方法に応じて、適切な方法でデータを取得します。

Javascript

// GETメソッドの場合
function doGet(e) {
  const name = e.parameter.name;
  const email = e.parameter.email;
  const message = e.parameter.message;
  // ...
}

// POSTメッドの場合
function doPost(e) {
  const data = JSON.parse(e.postData.contents);
  const name = data.name;
  const email = data.email;
  const message = data.message;
  // ...
}

まとめ

本記事では、HTMLフォームの値をGoogle Apps Scriptで取得し、スプレッドシートに保存する方法について解説しました。

この記事を通して、独自のデザインのフォームを作成し、送信データを効率的に収集・管理できるようになったことを願っています。今後は、さらに高度な機能（データの検証、条件分岐による処理の変更、外部APIとの連携など）についても記事にする予定です。

参考資料