GASでGoogleスプレッドシートに書き込み

前回のGASでWEBアプリを作ろう②で条件分岐や繰り返しを使った動的なページ作成と、
スプレッドシートからの読み込みをやってみました。

今回はGASで作ったWEBページからスプレッドシートへの書き込みです。

固定フォーマットで入力させるならGoogleFormsの方が楽かもしれませんが、
GASで作ると入力フォームも動的に出来ますからね。

登録用の入力項目を作成

前回作った一覧画面の下部に入力フォームを追加しました。

formタグです。
methodをPOSTにしているのと、actionが公開しているGASのURLにしているくらいで、
特別な事は何もないformタグです。

リクエスト受付側（GAS）を作成

新しく「doPost」という名前の関数を定義しました。
これでPOSTリクエストを受け付けたWEBアプリがこの関数呼び出しまでしてくれます。

function doPost(req){
  var simei = req.parameter.simei;
  var kana = req.parameter.kana;
  var sei = req.parameter.sei;
  var tel = req.parameter.tel;
  var tan = req.parameter.tan;
  
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getActiveSheet();

  var latestRow = sheet.getRange("H1").getValue()+1;
  
  sheet.getRange(latestRow, 1).setFormulaR1C1("=R[-1]C[0]+1");
  sheet.getRange(latestRow, 2).setValue(simei);
  sheet.getRange(latestRow, 3).setValue(kana);
  sheet.getRange(latestRow, 4).setValue(sei);
  sheet.getRange(latestRow, 5).setValue(tel);
  sheet.getRange(latestRow, 6).setValue(tan);
}

function doPost(req){

var simei = req.parameter.simei;

var kana = req.parameter.kana;

var sei = req.parameter.sei;

var tel = req.parameter.tel;

var tan = req.parameter.tan;

var ss = SpreadsheetApp.getActiveSpreadsheet();

var sheet = ss.getActiveSheet();

var latestRow = sheet.getRange("H1").getValue()+1;

sheet.getRange(latestRow, 1).setFormulaR1C1("=R[-1]C[0]+1");

sheet.getRange(latestRow, 2).setValue(simei);

sheet.getRange(latestRow, 3).setValue(kana);

sheet.getRange(latestRow, 4).setValue(sei);

sheet.getRange(latestRow, 5).setValue(tel);

sheet.getRange(latestRow, 6).setValue(tan);

}

2～6行目でリクエストパラメータからページで入力された値を取り出し、14～18行目でスプレッドシートの空行に設定。

スプレッドシートのH1セルに現在登録されているデータ件数が入っているので、11行目で取得して+１することで未入力行として扱います。

13行目のsetFormuraR1C1は数式入力をR1C1形式（相対セル参照）で行う関数。
やっているのは「上のセルの値＋１」する数式入力ですね。

doPost関数の最後にdoGet関数を呼び出すコード「return doGet(req)」を追加して完了。

一覧画面の下部フォームに値を入力して[追加]ボタンを押すと、
doPost関数内でスプレッドシートにデータが書き込まれ、
doPostの最後で呼び出したdoGet関数が一覧画面を表示するプログラムになります。

動かしてみましょう

WEBアプリケーションを更新・公開して、URLにアクセスすると
登録フォーム付き一覧画面が表示されます。

氏名などを入力して[追加]ボタンを押すと…

追加した個人データも一覧に表示されました。
(※一覧表示時のデータ取得範囲を動的に修正しています)

GAS＋スプレッドシートでデータ管理ができるWEBアプリケーションサンプルを作ってきました。

標準でGASにスプレッドシート操作のAPIが含まれているので、
結構楽にデータ読み込み・書き込みが出来ますね。この辺りは良いですね。

ページ遷移があるWEBアプリを作ろうとすると、
どのページからもdoGet（またはdoPost）に集約されるのでリクエストパラメータか何かで遷移先ページを判別しないといけないのがちょっと気になるけど、これでそんなに大量のページはつくらないから大丈夫かな。

登録用の入力項目を作成

リクエスト受付側（GAS）を作成

動かしてみましょう

コメント