管理画面に支払済フラグを1列追加した——スプレッドシートの14列目が変える運用

予約シートには13列あった。

予約ID、サービスID、サービス名、枠ID、日付、時刻、氏名、電話番号、メールアドレス、LINE UID、ステータス、備考、作成日時。整理されているように見えて、一つだけ足りない情報があった。お金を受け取ったかどうかだ。

支払案内を自動化した後、オーナーからこんな要望が来た。「誰が振り込んでくれたか、管理画面で分かるようにしたい」

理屈は単純だ。予約シートに14列目を足して、そこに「支払済」という文字列を書き込む。GASからその列を読んで管理画面に渡す。管理画面のボタンを押すとGASがその列を書き換える。

部品が3つあるだけだ。

まずGAS側。adminUpdatePaymentという関数を作った。

function adminUpdatePayment(bookingId, paid) {
  const sheet = ss.getSheetByName('予約');
  const rows  = sheet.getDataRange().getValues();
  for (let i = 1; i < rows.length; i++) {
    if (String(rows[i][0]) !== bookingId) continue;
    sheet.getRange(i + 1, 14).setValue(paid === 'true' ? '支払済' : '');
    return jsonResponse({success: true});
  }
  return jsonResponse({success: false, message: '予約が見つかりません'});
}

支払済のときは「支払済」、戻すときは空文字。シンプルに振り切った。

既存のadminGetBookingsにはpaid: String(rows[i][13] || '')を追加して、フロントに値を渡せるようにした。

次にEC2のFastAPIプロキシ。管理操作は認証が必要なアクションとして扱われているので、ADMIN_ACTIONSというセットにadmin_update_paymentを追加した。これがないと認証なしで誰でも支払状態を変更できてしまう。

最後に管理画面のHTML。予約一覧テーブルに「支払」列を加えた。

service_id='1'（無料相談）は「—」を表示してボタンを出さない。無料サービスに支払フラグは不要だ。それ以外のサービスは状態によって表示を変える。

function paidCell(bookingId, paid) {
  const isPaid = paid === '支払済';
  return isPaid
    ? `<span style="color:green;font-weight:700">✅ 支払済</span>
       <button onclick="togglePayment('${bookingId}',false)">戻す</button>`
    : `<span style="color:gray">⬜ 未払い</span>
       <button onclick="togglePayment('${bookingId}',true)">支払済にする</button>`;
}

「支払済にする」を押すと/api/admin_update_paymentを叩き、成功したら一覧を再取得する。画面のリフレッシュは不要で、テーブルだけが更新される。

デプロイして確認した。予約一覧に「支払」列が現れた。最初はすべて「⬜ 未払い」だ。

「支払済にする」ボタンを押すと「✅ 支払済」に変わり、「戻す」ボタンが現れる。誤操作しても戻せる。

14列目を1列追加しただけで、入金確認という日次作業が管理画面の中に収まった。Excelのメモや紙の一覧に頼る必要がなくなった。

次回は、LPにBefore/Afterセクションを追加した話を書く。

シンプルシステム株式会社代表　伊藤勝彦