はじめに
今回はスプレッドシートを簡易的なデータベースとしてwebアプリを作成してみます。
また、こちらの記事にて今回用いる技術の使い方を説明していますので、ぜひご一読ください。
はじめに Google Apps Script にはGETリクエストやPOSTリクエストのリクエスト先を実装する機能があります。 ページとしてはあまり効果を示しませんが、スプレッドシートを簡易データベースとして利用する際や、Java[…]
基本的な構成としてはこちらの画像のようになります。
HTMLからGASを経由してスプレッドシートとデータのやりとりをします。
HTMLファイルの作成
テキストエディタにてHTMLファイルを作成してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>GAS Form</title>
<style>
body{ width: 100vw; height: 100vh; display: flex; flex-direction: row; }
#left{ background-color: #ffeeee; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: start; }
#right{ background-color: #eeeeff; width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: start; }
</style>
<script>
function OnPost(){
const URL = "GASのデプロイURL";
let SendDATA = {
"column_1" : document.getElementById("column_1").value,
"column_2" : document.getElementById("column_2").value,
"column_3" : document.getElementById("column_3").value,
"column_4" : document.getElementById("column_4").value
};
let postparam = {
"method" : "POST",
"mode" : "no-cors",
"Content-Type" : "application/x-www-form-urlencoded",
"body" : JSON.stringify(SendDATA)
};
fetch(URL, postparam);
}
function OnGet(){
const URL = "GASのデプロイURL";
fetch(URL)
.then(response => {
return response.json();
})
.then(data => {
render_text = data.message;
document.getElementById("get_value").innerHTML = render_text;
})
.catch(error => {
document.getElementById("get_value").innerHTML = error;
});
}
</script>
</head>
<body>
<div id="left">
<h1>POST Form</h1>
<p>1列目</p>
<input type="text" id="column_1">
<p>2列目</p>
<input type="text" id="column_2">
<p>3列目</p>
<input type="text" id="column_3">
<p>4列目</p>
<input type="text" id="column_4">
<button style="margin-top: 20px;" onclick="OnPost();">送信</button>
</div>
<div id="right">
<h1>GET Form</h1>
<button style="margin-top: 20px;" onclick="OnGet();">取得</button>
<p>スプレッドシートの最終行は</p>
<p id="get_value"></p>
<p>です。</p>
</div>
</body>
</html>コードをコピーしたら保存をしてください。
スプレッドシートの準備
ご自身のGoogle Driveにアクセスをして新規作成からスプレッドシートを作成します。
「新規」か「右クリック」でメニューを出し、「Googleスプレッドシート」をクリックしてください。
スプレッドシートを作成したらスクリプトエディタを起動します。
今回はスプレッドシートをデータベースとして使うため、1行目は見出しをつけておきましょう。
また、スプレッドシートの名前も任意の名前に変更してください。
続いて、上部のメニューから「ツール＞スクリプトエディタ」をクリックしてください。
スクリプトの作成
コードの作成
function obj2txtout(obj){
let output = ContentService.createTextOutput();
output.setMimeType(ContentService.MimeType.JSON);
output.setContent(JSON.stringify(obj));
return output;
}
function doPost(e){
let Sheet = SpreadsheetApp.getActiveSheet();
let JsonDATA = JSON.parse(e.postData.getDataAsString());
Sheet.appendRow([JsonDATA.column_1,JsonDATA.column_2,JsonDATA.column_3,JsonDATA.column_4]);
return obj2txtout({ message: "success!", });
}
function doGet(){
let Sheet = SpreadsheetApp.getActiveSheet();
let Data = Sheet.getDataRange().getValues();
let DataIndex = Data.length-1;
let ReturnTxt = "1列目：" + Data[DataIndex][0] + " 2列目：" + Data[DataIndex][1] + " 3列目：" + Data[DataIndex][2] + " 4列目：" + Data[DataIndex][3];
return obj2txtout({ message: ReturnTxt, });
}上記のコードをコピペしてプロジェクトを保存してください。
プロジェクトのデプロイ
スクリプトエディタの右上にある「デプロイ」をクリックし、プルダウンの中から「新しいデプロイ」をクリックしてください。
続いて表示の上部中段にある「歯車」をクリックしてプルダウンから「ウェブアプリ」をクリックしてください。
デプロイの設定が表示されますので、その中から「アクセスできるユーザー」を「全員」に変更してください。
変更が完了したら「デプロイ」をクリックしてください。
初めてデプロイをする場合は、承認を求められますので、こちらの記事を参考にして承認を行ってください。
承認はどこで求められる？ Google Apps Script をスクリプトエディタでコーディングし、実行する際に求められます。 Google Apps Script のみで完結する処理では承認は求められませんが、スプレッドシートや[…]
続いて、「デプロイID」と「ウェブアプリのURL」が表示されますので「ウェブアプリのURL」を「コピー」ボタンを押してコピーしてください。
HTMLの修正
先ほどコピーしたURLをHTMLに組み込みます。
HTMLのプログラムの 13行目 と 31行目 にURLを貼り付けます。
const URL = "GASのデプロイURL";上記の “GASのデプロイURL” の “”内をURLに置き換えてください。
デモ
HTMLからスプレッドシートへのPOST
HTMLファイルをWEBブラウザで開くと、上画像のサイトが開きます。
左側の POST Form に適当なデータを入力して、「送信」ボタンをクリックしてください。
スプレッドシートの確認
先度送信されたデータをスプレッドシートにて確認します。
データベースとして作成したスプレッドシートを開くと、先ほどHTMLから送信したデータが蓄積されています。
スプレッドシートからHTMLへのGET
再度HTMLを開いてください。
開いたサイトの右側の 「取得」ボタン をクリックしてください。
クリックすると、スプレッドシートの最終入力行のデータが表示されます。
以上で終了となります。
終わりに
Googleが用意していくれている公式リファレンスを参考にしました。とてもわかりやすいものになっています。
Develop high-quality, cloud-based solutions with ease.…
全編が英語である点や、オブジェクト指向の理解が浅い状態では、うまく利用することが難しいです。
本ブログでは、今後もGoogle Apps Scriptのリファレンスの解説や、学び方・ツール作成について発信していきます。
ご興味ある方はお気に入り登録などお願いします。