(Javascript) WEB ページで入力した情報をサーバーに保存する - Google Apps Script 準備編

解説

WEBページで入力した情報を保存するには、２つの方法があります。

ＰＣに保存する（オフライン）
サーバーに保存する（オンライン）

今回は、サーバーに保存するための手法、Google Apps Script を紹介します。

Google Apps Script (GAS)

これは、Google のサーバー上で動くプログラムです。サーバーでプログラムを動かすには、普通は自分でサーバーを用意したり、レンタルサーバーを借りたりしますが、手順が煩雑でお金もかかります。Google Apps Script (GAS) を使ってサーバーサイドプログラムを作ると、なんと無料です。

ただし、無料なので、処理速度や応答速度は遅く、１日あたりの API 操作回数にも制限があります。大規模サービスには向きません。

Google のサーバーサイドプログラムは、Google Spreadsheet のデータを読み書きすることができます。

Google Spreadsheet

これは、Google 表計算ソフトです。Excel みたいなものです。オンラインで動作し、書き込んだ内容は即座に Google アカウントに保存されます。Google サーバーは、GAS に書かれたプログラムの手順に従って、Spreadsheet の内容を読み書きすることができます。

（図）WEBページ　⇒　Google サーバー　⇒　Spreadsheet
　　　　　　　GET/POST　　　　　GASで読み書き

WEB ページで、Spreadsheet のデータにアクセスできるので、ユーザーから見ると、WEB ページにデータを保存しているように見えます。

Google アカウントと Spreadsheet の作成

Google Spreadsheet を用意するため、Google アカウントを作成します。アプリひとつに対して１アカウントあることが望ましいです。アカウント作成の方法は、Google で調べてください。
次に、Spreadsheet を新規作成します。

スクリプトを書く

ツール⇒スクリプトエディタ　を選択して、プログラミング画面に入りましょう。
f:id:rcie:20190503114506p:plain
「Web ページから要求を受け取ったら Spreadsheet を読み書きする」というプログラムを書くのが目標です。Javascript の文法で書けます。

WEB ページからの GET 要求に応答するには、doGet 関数が必要なので、元からある関数は削除して、次のコードを入れてみましょう。

doGet(e){
  var sheet = SpreadsheetApp.getActiveSheet(); // シートにアクセス
  return ContentService.createTextOutput("GET要求に応答してこの文字列を返す");
}

アクセス許可の設定

上のコードでは、シートにアクセスしただけで何もしていませんが、まずは、ためしに公開します。
公開⇒アプリケーションとして導入　を選択したら、次の画像の赤枠のところを選択して進みます。
f:id:rcie:20190503115801p:plain

初期状態だと、GASから Spreadsheet へのアクセスが禁止されているので、今ここで承認する必要があります。
画像に従って、赤枠のところをクリックしていけば大丈夫です。
f:id:rcie:20190503122913p:plain
f:id:rcie:20190503122539p:plain
f:id:rcie:20190503122640p:plain
f:id:rcie:20190503122732p:plain
f:id:rcie:20190503125625p:plain