順番待ちシステム

一般的な飲食店や病院などで使える順番待ち管理システムです。 データはブラウザのlocalStorageに保存されます。

機能

• 顧客向け画面 (index.html): 待ち状況を表示
• スタッフ向け管理画面 (staff.html): 受付・ステータス管理

ファイル構成

queue-system/ ├── index.html # 顧客向け表示画面 ├── staff.html # スタッフ向け管理画面 ├── css/ │ ├── customer.css # 顧客画面のスタイル │ └── staff.css # スタッフ画面のスタイル ├── js/ │ ├── app.js # 共通データ管理ロジック │ ├── customer.js # 顧客画面のスクリプト │ └── staff.js # スタッフ画面のスクリプト └── README.md # このファイル

使い方

1. セットアップ

ファイルをWebサーバーにアップロードするか、ローカルで開いてください。

ローカルで開く場合:

• index.html をブラウザで開く（顧客向け画面）
• staff.html をブラウザで開く（スタッフ向け管理画面）

2. スタッフ操作

1. staff.html を開く
2. 「新規受付」ボタンで顧客番号を追加
3. 各顧客の「案内開始」「完了」ボタンでステータスを更新
4. 「完了をクリア」で完了した顧客を一括削除

3. 顧客向け表示

• index.html を大画面（モニター・タブレット等）で表示
• 15秒ごとに自動更新されます
• 待機中、案内中、完了の件数が表示されます

ステータス

• 待機中: 受付済みで案内待ち
• 案内中: 現在案内中
• 完了: 案内完了

技術仕様

• データ保存: localStorage（ブラウザローカル）
• フロントエンド: HTML5, CSS3, JavaScript (ES6+)
• ライブラリ: jQuery 3.6.0
• アイコン: Google Material Icons

注意事項

⚠️ 重要な注意点:

データの保存場所: このシステムはブラウザのlocalStorageにデータを保存します。

• ブラウザのキャッシュをクリアするとデータが消えます
• 異なるブラウザ/デバイス間でデータは共有されません
• プライベートブラウジング（シークレットモード）では永続化されません

サポート

問題が発生した場合:

1. ブラウザのコンソールでエラーを確認
2. ブラウザのキャッシュをクリアして再読み込み
3. 別のブラウザで試してみる

---

開発者向け情報

データ構造（localStorage）:

{
  "queue": [
    {
      "number": 1,
      "timestamp": "2026-02-12T10:00:00.000Z",
      "status": "待機中"
    }
  ]
}

データをリセットする場合、ブラウザのコンソールで:

localStorage.removeItem("queueData");