はじめに
「WEBアプリケーションをプロトタイピングする際にデータベースを簡単に作りたい。」「バックエンドの処理をもっと簡単に作ってみたい。」などを考えたことはありませんか？
今回はこんな要望に応えるようなものをスプレッドシートとGASを用いてコピペ完結を目指して実現してみます。実装の構造は次のようなものです。
HTMLファイルの作成
テキストエディタでhtmlファイルを作成してください。
続いて次のコードをコピーして貼り付けを行います。簡単なPOSTとGETのFORMを備えたページになります。
<!DOCTYPE html>
<html lang="ja">
<body>
<h1>POST Request</h1>
<form method="POST" action="<DeployURL>">
<p>post_param1</p>
<input name="post_param1" type="text">
<p>post_param2</p>
<input name="post_param2" type="text">
<p>post_param3</p>
<input name="post_param3" type="text">
<p>post_param4</p>
<input name="post_param4" type="text">
<br>
<button type="submit">post</button>
</form>
<h1>GET Request</h1>
<form method="GET" action="<DeployURL>">
<p>get_param1</p>
<input name="get_param1" type="text">
<p>get_param2</p>
<input name="get_param2" type="text">
<p>get_param3</p>
<input name="get_param3" type="text">
<p>get_param4</p>
<input name="get_param4" type="text">
<br>
<button type="submit">get</button>
</form>
</body>
</html>スプレッドシートの準備
スプレッドシートの作成
GoogleDriveからスプレッドシートを作成してください。
１行目にはラベルを入れておきます。（今回の場合は「time_stamp」「post_param1」「post_param2」「post_param3」「post_param4」にしています。）
また、スプレッドシートの名前は適当なものにしてください。（私は「データベース」としました。）
追加でシート名も変えておくと良いです。
プログラムの準備
メニューの「ツール」から「スクリプトエディタ」をクリックしてスクリプトエディタを起動します。
プロジェクト名をクリックしてプロジェクト名を任意の名前に変更します。
続いて、デフォルトで入力されているコードを削除して、次のコードをコピー&ペーストします。
// 返り値の型を変換する
function obj2txtout(obj){
let output = ContentService.createTextOutput();
output.setMimeType(ContentService.MimeType.JSON);
output.setContent(JSON.stringify(obj));
return output;
}
// スプレッドシートにデータを格納する処理
function doPost(e){
// POSTされた日付を取得してくる
let Time_stamp = Utilities.formatDate(new Date(),"JST","yyyy/MM/dd hh:mm:ss");
// POSTされたデータをスプレッドシートに格納するための配列
let Append_Array = [Time_stamp,e.parameter.post_param1,e.parameter.post_param2,e.parameter.post_param3,e.parameter.post_param4];
// POSTされたことをログに出力する
Logger.log("POST_Requested");
// 連携しているスプレッドシートを取得する
let Sheet = SpreadsheetApp.getActiveSheet();
// スプレッドシートの最終行にPOSTされたデータを格納
Sheet.appendRow(Append_Array);
// "post_success!"をreturnで返す
return obj2txtout("post_success!");
}
// スプレッドシートのデータをパースしてwebサイトにレスポンスする処理
function doGet(e){
// POSTされたことをログに出力する
Logger.log("GET_Requested");
// スプレッドシート「データベース」からデータを取得する
let Sheet_Data = SpreadsheetApp.getActiveSheet().getDataRange().getValues();
// 検索文字の数をカウントするための変数を定義
let Counter = 0;
// returnで返すテキストを格納する変数の定義
let Response_txt = "param1=" + e.parameter.get_param1 + ":";
// get_param1に格納された文字を検索するためのループ
for(let i = 1 ; i < Sheet_Data.length ; i++){
// もしGETのクエリで与えられた文字と検索対象の文字が一致していたらカウントする
if(e.parameter.get_param1 == Sheet_Data[i][1]){
Counter++;
}
}
Response_txt += Counter + " / ";
Counter = 0;
Response_txt += "param2=" + e.parameter.get_param2 + ":";
// get_param2に格納された文字を検索するためのループ
for(let i = 1 ; i < Sheet_Data.length ; i++){
if(e.parameter.get_param2 == Sheet_Data[i][2]){
// もしGETのクエリで与えられた文字と検索対象の文字が一致していたらカウントする
Counter++;
}
}
Response_txt += Counter + " / ";
Counter = 0;
Response_txt += "param3=" + e.parameter.get_param3 + ":";
// get_param3に格納された文字を検索するためのループ
for(let i = 1 ; i < Sheet_Data.length ; i++){
if(e.parameter.get_param3 == Sheet_Data[i][3]){
// もしGETのクエリで与えられた文字と検索対象の文字が一致していたらカウントする
Counter++;
}
}
Response_txt += Counter + " / ";
Counter = 0;
Response_txt += "param4=" + e.parameter.get_param4 + ":";
// get_param4に格納された文字を検索するためのループ
for(let i = 1 ; i < Sheet_Data.length ; i++){
if(e.parameter.get_param4 == Sheet_Data[i][4]){
// もしGETのクエリで与えられた文字と検索対象の文字が一致していたらカウントする
Counter++;
}
}
Response_txt += Counter;
return obj2txtout(Response_txt);
}コードをデプロイする
スクリプトエディタの右上にある「デプロイ」をクリックしてください。
プルダウンで表示される中にある「新しいデプロイ」をクリックしてください。
表示されるモーダルから歯車マークをクリックします。
プルダウンのリストから「ウェブアプリ」をクリックしてください。
続いて表示されるものの中から「アクセスできるユーザー」の「自分のみ」をクリックします。
リストの中から「全員」をクリックして、このURLに対してアクセスできるユーザーを全員にします。
設定が完了した後に右下の「デプロイ」をクリックします。
プログラムの内容によってはアクセス承認が求められるので、承認を行います。
承認の設定についてはこちらの記事をご覧ください。
GASを実行しようとしてこんな画面が表示されたことありませんか？ 今回はこの対処法についてお伝えしたいと思います。 Googleアカウントでの認証 Googleアカウントを用いた認証を行う際にアカウントの選択を行います。 […]
表示されるウェブアプリのURLを「コピー」を押してコピーして完了を押します。
HTMLファイルとスプレッドシートの連携
先ほど作成したHTMLファイルの中の<DeployURL>を先ほどコピーしたURLに置き換えてください。
画像のような2つのフォームのサイトが表示されるかと思います。
連携のデモ
POST
POST Requestのフォームに画像のようなデータを入力して「post」ボタンをクリックしてください。
サイトが「”post_success!”」という表示に切り替わると、スプレッドシートにデータが蓄積されています。
データの確認
データベース用に作成したスプレッドシートを開くと、先ほどPOSTしたデータが追加されています。
GET
今回のGET Requestのプログラムではフォームに入力されたパラメータの値がどれだけ含まれているのかを表示するものを作りました。
画像のようなデータが格納されたスプレッドシートに対して次のような値でGET Requestを行います。
param1を「A」、param2を「B」、param3を「C」、param4を「D」にして「get」ボタンを押します。
画像のように、文字の数をカウントしてResponseしてくれます。
以上で説明は終了です。
終わりに
今回はスプレッドシートをデータベースとして用いる方法を紹介しました。
JavaScriptでレンダリングをしたタイミングでfetchする処理を書けば、動的なサイトを作ることも可能になります。
今後もこうした情報を発信していきますので、お気に入り登録などをお願いいします！！