【GAS】htmlでの入力をgoogleスプレッドシートに流すスクリプト

htmlでの入力をgoogle スプレッドシートに流そう、と思い立ってあれこれと方法を調べてみました
スプレッドシートを使う利点としては、
・自分でデータベースを用意せずにデータを保存できること
・誰でも閲覧できるように設定できる、なおかつ閲覧のみにも設定できる
・csv形式で書き出すこともできるので、再活用が容易、今回の場合は将来的に使えそうなデータになるかも？
などが挙げられるかと思います

実際にじゃあどうやるのか？と思って調べてみたら簡単なコードも載ってるページがありました

■ 参考 : javascript – 単純なHTMLフォームを介してGoogleスプレッドシートに基本データを追加する

htmlに以下のようなフォームを用意する

Google Apps Scriptとして以下のものを用意する

function doGet(e){
var vals=;
vals.push(new Date());
for(var i in e.parameter){
vals.push(e.parameter[i]);
}
SpreadsheetApp.openById("スプレッドシートのID").appendRow(vals);
return ContentService.createTextOutput("added");
}

これでhtmlフォームに「name」「Email」を書いてsubscribeボタンを押すと
それがスプレッドシートに追加されます
パラメーターの個数分だけはfor文が回るのですべてスプレッドシートに追加されます

■ 作業手順
1. スプレッドシートをgoogleアカウントで作成する (スプレッドシートのURLを覚えておく)
2. 上のメニューバーからツール→スクリプトエディタ → 上記のスクリプトをコピペする
3. スクリプトに実行権限を与える(permission)
4. 表示されたスクリプトのURLをコピペして、上記のhtmlに貼り付ける

という感じ

3の実行権限のところは以下のページに画像付きで説明がある
■ 参考 : Google Apps Scriptの初回実行に必要となる承認手順

3の実行権限のところは以下のページに画像付きで説明がある
■ 参考 : Google Apps Scriptで簡単にWebアプリケーションを公開する方法

もし事前にパラメーターの名前がすべてわかっているなら、
スクリプトを以下のように置き換えてもOKです

function doGet(e){
var vals=;
vals.push(new Date());

vals.push(e.parameter.newletter_name);
vals.push(e.parameter.newletter_email);

SpreadsheetApp.openById("スプレッドシートのID").appendRow(vals);
return ContentService.createTextOutput("added");
}

最初の new Date() はスクリプトが実行された時刻が入ります

またスプレッドシートを使ってなにかしたくなったとき用のメモ

■ 参考 : フォーム – フォームを使用してGoogleスプレッドシートの既存のデータを更新する

■ 参考 : JavaScriptを使用してHTMLフォームからGoogleスプレッドシートにデータを送信する方法

■ 参考 : GAS ビギナーが GAS を使いこなすために知るべきこと 10 選
2019年6月段階では1つのスクリプトは6分以内に終了しないといけないって制限があるけど
自分のはとても軽いから問題なさそう

■ 参考 : HTMLのフォームからGASにPOSTする
↑この人がやってることはすごくわかる・・・
スプレッドシートになにかを追加したあとに表示されるページから、すぐに投票のwebページに戻りたいのにどうしたらいいかわからない
自分は投票時に表示されるページを新しいタブorウィンドウで表示させることで対応した

■ 参考 : GASでURLを踏んでスクリプトを動作させたときにパラメータを渡す方法

■ 参考 : 3 分で作る無料の翻訳 API with Google Apps Script
Google Apps Scriptをサーバーとして使ってる
なにか情報を要求したら、それに対する応答が返ってくる
ここでは、翻訳機として使ってる
まだまだ汎用性がありそう

配列にpush()でなにか値を追加したときの挙動が気になったので調べてみた

■ 参考 : GASの配列の扱い方について（定義、要素の追加、削除）