【02_意見集約アプリ】意見集約アプリ〔解説編　Vol.1〕ユーザ情報をPOST処理して、起動時の状態を分岐せる

記事概要

この記事は、前の記事でご紹介した意見集約アプリの解説記事になります。今回は、ユーザ情報をPOST（サーバに送信）してアプリの立ち上げ状態を分岐させる方法をご説明します。

前回の記事はこちら

トップページはこちら

意見集約アプリのファイル構成

前の記事でご紹介したアプリは、テーブル形式フォーム「どこでも帳簿」（こちらの記事を参照）を少し修正したものです。

このアプリのプロジェクトには、以下の４つのファイルがあります。

初期画面．gs・・・最初に起動するスクリプト
OpenFoam.HTML・・・パスワード入力画面のテンプレートファイル
コード.gs・・・メインのスクリプトファイル
INDEX.html・・・メインのテンプレートファイル

黄色い部分があるのがこのアプリの特徴です。それぞれのファイルのコードは後述の記事を参照ください。

GoogleAppsScriptのプロジェクト画面では、以下の様に４つのファイルが見えているはずですが、順に内容を説明していきます。

アプリを起動する際にユーザ情報をPOST（サーバに送信）するスクリプトとテンプレート

まずは「初期画面.gs」のご説明から。

このスクリプトの役割は、起動時にパスワードを入力する以下の画面を表示させることです。

コードの鍵となる部分は、以下となります。

コードはスクリプトです

function doGet(e){

//初期画面であるOpenFoam.HTMLをWEB表示先として取得
var myOpenHTML = HtmlService.createTemplateFromFile(‘OpenForm’);
return myOpenHTML.evaluate().addMetaTag(“viewport”, “width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0”);

}

・

コードの中身は単純で、URLにアクセスすると発動するdoGET関数（）内で、単に「OpenForm」　という名前のテンプレートをWEBサイトとして表示させているだけです。

WEBサイトとしてテンプレートを表示させるコードの詳説は、この記事を参考にしてください

次にテンプレート「OPEN.html」についてご説明します。

このテンプレートで、あらかじめ知らせておいたパスワードをユーザーに入力してもらいます。この画面には〔送信する〕ボタンがあり、ボタンのクリックにより、受け手であるスクリプトにパスワードをPOST送信します。

コードの鍵となる部分は、以下となります。

コードはHTMLです

＜form method=”post” action=”★このプロジェクトのURL★”＞
・＜p＞
・・＜!—相手先では、e.parameter.＜name要素名＞で取り出せます—＞
・・＜label＞パスワード：＜input type=”text” name=”PW”＞＜/label＞
・＜/p＞
・＜p＞
・・＜input type=”submit” value=”送信する”＞
・＜/p＞
＜/form＞

・

上記の黄色い部分が処理のメインで、このコードによってテンプレート（クライアントPC側）からスクリプト（サーバ側）に情報を送信してメインのスクリプトを起動するのですが、こうした処理の事をPOST処理といいます。

クライアントPC側からサーバ側にデータを送信する方法としては、Google.script.runスクリプト内関数（変数）による方法（こちらの記事参照）がありますが、POST処理では、新しいウィンドウがオープンして画面遷移するのが特徴です。

POST処理の記述方法は込み入っているので、次の章で少し詳しく説明します。