次に、Service Workerとその他必要なファイルを作成します：
次に、VAPID鍵生成ユーティリティを作成します：
最後に、PIN一覧表示ページと.gitignore、READMEを作成します：
最後に、アイコン画像用のプレースホルダーSVGを作成します：
完璧です！行商アプリのPIN方式実装が完成しました。
PIN認証システム
行商側機能
顧客側機能
PWA対応
# 1. 依存関係インストール
npm install
# 2. VAPID鍵生成
npm run generate-vapid
# 3. .envファイル設定
cp .env.example .env
# 生成されたVAPID鍵を.envに貼り付け
# 4. Docker起動
docker-compose up -d
# 5. ブラウザでアクセス
# http://localhost:3000
作成済みファイル：
gyosho-app/
├── docker-compose.yml ✅ Docker構成
├── Dockerfile ✅ Dockerイメージ
├── package.json ✅ 依存関係
├── .env.example ✅ 環境変数テンプレート
├── .gitignore ✅ Git除外設定
├── README.md ✅ ドキュメント
└── src/
├── index.js ✅ メインサーバー
├── models/
│ └── index.js ✅ MongoDB スキーマ
├── routes/
│ ├── api.js ✅ API エンドポイント
│ ├── vendor.js ✅ 行商ルート
│ └── customer.js ✅ 顧客ルート
├── views/
│ ├── index.pug ✅ トップページ
│ ├── vendor/
│ │ ├── register.pug ✅ 行商登録
│ │ ├── home.pug ✅ 行商ホーム
│ │ └── pins.pug ✅ PIN一覧
│ └── customer/
│ ├── register.pug ✅ 顧客登録
│ └── home.pug ✅ 顧客ホーム
├── public/
│ ├── sw.js ✅ Service Worker
│ ├── manifest.json ✅ PWA Manifest
│ ├── css/
│ │ └── style.css ✅ スタイルシート
│ └── js/
│ ├── app.js ✅ 共通JS
│ ├── vendor-register.js ✅ 行商登録JS
│ ├── vendor-home.js ✅ 行商ホームJS
│ ├── customer-register.js ✅ 顧客登録JS
│ └── customer-home.js ✅ 顧客ホームJS
└── utils/
└── generateVapid.js ✅ VAPID鍵生成
以下の画像ファイルを src/public/ に配置してください：
icon-192.png (192x192px)icon-512.png (512x512px)badge.png (96x96px)簡単な作成方法：
# 魚の絵文字をPNGに変換するオンラインツール使用
# または、以下のコマンドで仮画像作成（ImageMagickが必要）
convert -size 192x192 xc:blue -pointsize 120 -draw "text 30,130 '🐟'" src/public/icon-192.png
convert -size 512x512 xc:blue -pointsize 320 -draw "text 80,350 '🐟'" src/public/icon-512.png
convert -size 96x96 xc:blue -pointsize 60 -draw "text 15,65 '🐟'" src/public/badge.png
HTTPS必須：プッシュ通知はHTTPS環境でのみ動作します。
# docker-compose.prod.yml 例
services:
app:
environment:
- NODE_ENV=production
nginx:
image: nginx:alpine
ports:
- "443:443"
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
- ./ssl:/etc/nginx/ssl
# GitHubリポジトリ作成後
git init
git add .
git commit -m "Initial commit: 行商アプリ PIN方式実装"
git branch -M main
git remote add origin <your-repo-url>
git push -u origin main
行商登録
http://localhost:3000 → 「行商の方」
→ 「山田鮮魚店」入力 → 登録
→ 20個のPIN表示される（例：1234, 5678...）
顧客登録
新しいブラウザ/シークレットモードで
http://localhost:3000 → 「お客様」
→ PIN「1234」入力 → 登録完了
通知送信（行商→顧客）
行商画面 → 「今日は行きます」ボタン
→ 顧客にプッシュ通知が届く
留守通知（顧客→行商）
顧客画面 → 「今日は留守です」ボタン
→ 行商にプッシュ通知が届く
ブラウザ通知許可を確認
HTTPS環境か確認
Service Worker登録確認
// ブラウザコンソールで確認
navigator.serviceWorker.getRegistrations()
# Dockerコンテナ確認
docker-compose ps
# MongoDBログ確認
docker-compose logs mongo
# 再起動
docker-compose restart mongo
# 鍵を再生成
npm run generate-vapid
# .envファイルを更新
# docker-compose再起動
docker-compose down
docker-compose up -d
通知履歴表示
定期巡回スケジュール
顧客情報編集
複数ルート対応
商品情報通知
予約機能
複数行商対応
決済機能
配達ルート最適化
質問や追加機能の実装が必要な場合は、お気軽にお申し付けください！
🎉 実装完了！お疲れ様でした！
これで高齢者向け行商アプリが完成しました。ぜひ実際に動かしてテストしてみてください！