ノーコードアプリみたいなものをコードありで作るなら？【QAC25 Day14】

Day14 ノーコードアプリみたいなものをコードありで作るなら？

ここでのノーコードアプリは，あのキントーンさんみたいな感じの業務的なものを指していて，Scratchとかではありません．

今回の想定…

今回はアプリケーションの想定として，問い合わせフォームを想定しています．

問い合わせを行うユーザー側と，それの返信とかの管理を行う管理者側の2つの画面がある…そんなものを作っていきます．

という訳で

これ，普通の問い合わせフォームですよね．

誰かがこのフォームを送信すると…

おっメールが来ましたね😃

返信のURLとやらをクリックすると

更に返信を入れると…

…という訳で，以下のようにデータベース（スプレッドシート）に蓄積され，問い合わせ管理が出来ますね

つまり何が言いたいの？

Googleフォームとスプレッドシート，そしてもう1つを組み合わせることでノーコードアプリみたいなものが開発できるのさ！

で，その組み合わせるものがApps Scriptというプログラミング言語です．

はい，コードを使うことでノーコードアプリみたいなのが作れます．

特に何が言いたいかというと，Googleフォームに加えて一貫した管理ID，そして「フォームの事前入力URL」を使うことでかなり面白いシステムが出来上がります．

まずは

Googleフォームで適当にフォームを作りましょう．

右上の三点よりApps Scriptを押します．

次のコードが一応テンプレートになるのでよかったら使ってください．

/**
 * データベースとなるスプレッドシートのID  
 * (スプレッドシートURLの/spreadsheets/d/[ここ]/)
 * @type {string}
 */
const LIST_SPREADSHEET_ID = "";

/**
 * データベースとなるシートの名前
 * @type {string}
 */
const LIST_SHEET_NAME = "main";

/**
 * メールの送信先 (問い合わせが来たよって通知先)
 * @type {string}
 */
const MAIL_TO = "[e-mail]";

/**
 * メールの送信元 (すなわち自分のGoogleアカウント)
 * @type {string}
 */
const MAIL_FROM = "[e-mail]";

const CheckAuth = () => {
  console.info("正常に権限が設定されており、使用できます。")
  return;
}

/** フォームに入力された値をパースして使いやすくするクラス */
class ContactFormItem {
  constructor(values, author) {
    this.id = Utilities.getUuid();
    this.author = author;
	  this.anyValue = this.getValue(values["anyValue"])
  }

  /**
   * フォームの入力値が`undefined`でも`string`として出すようにするもの
   * @param value {any} 値
   * @return {string} 値がundefinedで無ければその値、undefinedなら空文字
   */
  getValue(value) {
    return value ? value : "";
  }

  /**
   * フォームの値を取得するジェネレーター
   * 通常は`this.getValues()`でリストを取得する。
   */
  *_getValues() {
    /// この順番通りスプレッドシートに書き込まれる。
    yield this.id
    yield this.author
    yield this.anyValue
  }

  /**
   * フォームの値をリストとして取得するメソッド
   * @return {string[]}
   */
  getValues() {
    return [...this._getValues()]
  }
}

/**
 * スプレッドシートのIDからスプレッドシートデータを取得する関数
 * @param spreadSheetKey {string} スプレッドシートのID
 * @return Spreadsheet {SpreadsheetApp.Spreadsheet}
 */
const getSpreadSheet = (spreadSheetKey) => {
  var spreadsheet = SpreadsheetApp.openById(spreadSheetKey);
  return spreadsheet;
}

const onSubmit = (e) => {
  /// フォームから回答を取得する
  const form = FormApp.getActiveForm();
  const allResponses = form.getResponses();
  const latestResponse = allResponses[allResponses.length - 1];
  const response = latestResponse.getItemResponses();
  const author = latestResponse.getRespondentEmail();

  /// 最新の回答を取得
  let answers = {};
  for (var i = 0; i < response.length; i++) {
    var question = response[i].getItem().getTitle();
    var answer = response[i].getResponse();
    answers[question] = answer;
  }
  console.info(JSON.stringify(answers));

  const values = new ContactFormItem(answers, author);

  /// テーブルに書き込む
  const dbSpreadsheet = getSpreadSheet(LIST_SPREADSHEET_ID);
  const dbSheet = dbSpreadsheet.getSheetByName(LIST_SHEET_NAME);
  const insertRow = dbSheet.getLastRow() + 1;

  const insertValues = values.getValues()

  dbSheet.getRange(insertRow, 1, 1, insertValues.length).setValues([insertValues]);

  /// メールを送信する
  const mailBody = formatMailBody(values);
  GmailApp.sendEmail(MAIL_TO, "新規問い合わせが来ました", mailBody, {from: MAIL_FROM})
};

保存してトリガーを設定して権限チェックを行って…

まぁこのコードが完璧かというと多分完璧じゃないし…私の理想としては，せっかくonSubmitがイベントハンドラなんだからそのイベントを使って…

という訳で

これもアイデアの一つですが，GoogleフォームとAppsScript，スプレッドシートを使ってノーコード風アプリでも作ってみてはいかがですか？