queu-e-ticket

店舗やイベント等における整理券を電子化しWeb上で運用するための順番待ち受付システムのユーザーUIおよび管理・案内用UIです

---

✅ 概要

機能・表示項目

• 名前を入力して発券
• 受付番号を表示
• 現在の呼び出し番号
• 現在の待ち人数
• 呼び出し番号を更新するボタン
• Googleスプレッドシートに待ち情報を記録

---

🖥️ 使用技術

バックエンド

• Googleスプレッドシート
• Google Apps Script

フロントエンド

• HTML/CSS/JavaScript

---

📁 構成

user.html

ユーザー向けの発券用UIページ

admin.html

店頭表示・呼び出しを行う管理用UIページ

スプレッドシート + Apps Script

データベースと書き込み/読み込みの設定

---

📦 使用方法

1. https://docs.google.com/spreadsheets/d/1fftErKNuTJ-71pk4Dt7zR1CeGUvktZTl5CK2KsAi5HQ/template/preview にアクセスしてテンプレートからデータベース用のGoogleスプレッドシートを作成する

2. スプレッドシートの 拡張機能 → Apps Script を開いて code.gs のコードがあらかじめ含まれていることを確認する

3. デプロイ → 新しいデプロイ から下記の設定でデプロイする

   • 種類の選択：ウェブアプリ
   • 次のユーザーとして実行：自分
   • アクセスできるユーザー：全員

4. デプロイ完了後に表示されるURLをコピーして user.html admin.html の scriptUrl の値に貼り付ける

5. 任意のサーバーやFirebase等のホスティングツールを使用し、まず user.html をデプロイする

6. admin.html の userPageUrl の値に user.html のURLを入力する

7. admin.html をデプロイする