【作って学ぶ】GASとスプレッドシートでデータベースとWEBアプリケーションを作成する

はじめに

今回はスプレッドシートを簡易的なデータベースとして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が用意していくれている公式リファレンスを参考にしました。とてもわかりやすいものになっています。

Google Developers

全編が英語である点や、オブジェクト指向の理解が浅い状態では、うまく利用することが難しいです。

本ブログでは、今後もGoogle Apps Scriptのリファレンスの解説や、学び方・ツール作成について発信していきます。

ご興味ある方はお気に入り登録などお願いします。

最新情報をチェックしよう!