本連載（全5回）では、スプレッドシートに登録されたマスタデータを活用して選択肢を動的に生成し、入力チェックからデータ蓄積、さらには画面遷移を挟まないスムーズな完了画面までを備えたWebフォームシステムの仕組みを詳しく解説します。
初回の本記事では、システム全体のアーキテクチャと、Webページをブラウザへ配信する基本設定について見ていきます。
連載目次：GASで作る高機能Webフォーム開発ガイド
スプレッドシート連携Webフォームの全体システム構成とデータフロー
独自Webフォームを構築するメリット
Googleフォームをはじめとする既製のフォームツールは手軽に導入できる一方、「選択肢をスプレッドシートの値とリアルタイムに同期させたい」「条件に応じて入力欄を動的に切り替えたい」「独自のデザインでブランドに馴染ませたい」といった高度な要望には対応しづらい側面があります。
GASとHTML Serviceを組み合わせて自前でフォームを構築すると、以下のような大きな利点が得られます。
| 項目 | 特徴とメリット |
|---|---|
| 追加コスト0円 | Googleアカウントの標準機能内で完結するため、サーバー代やSaaSの月額利用料が発生しません。 |
| 運用がシンプル | 選択肢の追加や変更をスプレッドシート上で行えるため、非エンジニアの担当者でも手軽に運用できます。 |
| 自由なUI・UX設計 | HTML・CSS・JavaScriptをそのまま記述できるため、自社サイトに調和したデザインや快適な入力体験を作れます。 |
スプレッドシート側の設計方針
本システムでは、スプレッドシート内に「マスタ設定」と「受付台帳」という2つのシートを分けて用意します。
- マスタ設定シート：ご相談カテゴリー、希望サービス、知ったきっかけなどの選択肢一覧を列ごとに管理します。ここを編集するだけでフォームのチェックボックスに即座に反映されます。
- 受付台帳シート：ユーザーから送信された回答内容が1行ずつ自動追記されるシートです。管理用のユニークIDや登録日時、ステータスなども自動記録します。
役割分担のポイント
設定用のマスタデータと、ユーザーが送信した回答データを物理的に別のシートに分けることで、誤操作によるデータ破損を防ぎ、管理しやすい構成を維持できます。
Webページを配信する doGet 関数の役割
GASでWebアプリケーションを公開する際、エントリーポイントとなるのが doGet(e) 関数です。ユーザーがフォームのURLにアクセスした瞬間にこの関数が呼び出されます。
const SPREADSHEET_ID = 'YOUR_SPREADSHEET_ID';
const SHEET_NAME = '受付台帳';
function doGet(e) {
// フォームページを表示
const t = HtmlService.createTemplateFromFile('index');
return t.evaluate()
.setTitle('ご相談・お申し込みフォーム')
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}コード内で呼び出されている各メソッドの役割は以下の通りです。
- HtmlService.createTemplateFromFile(‘index’)：プロジェクト内の「index.html」を読み込み、動的テンプレートとして扱えるように準備します。
- evaluate()：テンプレートを評価・展開し、ブラウザへ送出可能なHTML出力を生成します。
- setTitle(…)：ブラウザのタブや検索履歴に表示されるページタイトルを設定します。
- addMetaTag(‘viewport’, …)：スマートフォンでの閲覧時に画面幅を自動調整するためのメタタグを挿入します。これがないとスマホで極端に縮小されて表示されてしまうため、必須の指定です。
まとめと次回の内容
今回は、GASを活用したWebフォームの全体像と、Webページを正常に配信するための基礎設計を確認しました。
次回は、スプレッドシートの「マスタ設定」シートから各列の選択肢データを効率的に取得し、配列として安全に整えるバックエンド処理の仕組みを解説します。
