1. システムアーキテクチャ
全体構成図
ユーザー層
スマートフォン
タブレット
PC
フロントエンド層
Webアプリケーション
HTML/CSS/JavaScript
バックエンド層
Django
REST API
データ層
SQLite/PostgreSQL
設計原則
レイヤード・アーキテクチャ
- • プレゼンテーション層（フロントエンド）
- • ビジネスロジック層（バックエンド）
- • データアクセス層（データベース）
- • 各層の責務を明確に分離
モバイルファースト
- • レスポンシブWebデザイン
- • タッチ操作に最適化
- • 軽量で高速な動作
- • オフライン対応（PWA検討）
スケーラビリティ
- • 水平スケーリング可能な設計
- • キャッシュ戦略の実装
- • CDN活用でコンテンツ配信最適化
- • ロードバランサー対応
セキュリティ重視
- • HTTPS通信の強制
- • CSRF/XSS攻撃対策
- • 入力値検証・サニタイズ
- • 認証・認可の適切な実装
2. 技術スタック
フロントエンド
HTML5
セマンティックマークアップ
CSS3/Tailwind
レスポンシブスタイリング
JavaScript (ES6+)
インタラクティブ機能
QR Scanner API
QRコード読み取り
MediaDevices API
カメラアクセス
Geolocation API
位置情報取得
バックエンド
Python 3.9+
プログラミング言語
Django 4.2+
Webフレームワーク
Django REST Framework
API開発
Pillow
画像処理
Django CORS Headers
CORS対応
Django Environ
環境変数管理
データベース・デプロイメント
SQLite/PostgreSQL
データベース
Docker
コンテナ化
Gunicorn
WSGIサーバー
Nginx
リバースプロキシ
3. データベース設計
エンティティ関係図
Events（出し物）
id
PK
title (タイトル)
description (説明)
image (画像URL)
department (学部)
building (校舎)
floor (階数)
room_number (部屋番号)
category (カテゴリ)
is_active (有効フラグ)
created_at (作成日時)
updated_at (更新日時)
Stamps（スタンプ）
id
PK
event_id (出し物ID)
qr_code (QRコード)
name (スタンプ名)
description (説明)
points (ポイント)
is_active (有効フラグ)
created_at (作成日時)
UserStamps（獲得スタンプ）
id
PK
user_id (ユーザーID)
stamp_id (スタンプID)
acquired_at (獲得日時)
device_info (デバイス情報)
Categories（カテゴリ）
id
PK
name (カテゴリ名)
icon (アイコン)
color (色)
sort_order (表示順)
Announcements（お知らせ）
id
PK
title (タイトル)
content (内容)
priority (優先度)
is_published (公開フラグ)
published_at (公開日時)
expires_at (終了日時)
Settings（設定）
id
PK
key (キー)
value (値)
description (説明)
updated_at (更新日時)
サンプルSQL
-- Events テーブル作成例
CREATE TABLE events (
id SERIAL PRIMARY KEY,
title VARCHAR(200) NOT NULL,
description TEXT,
image VARCHAR(500),
department VARCHAR(100),
building VARCHAR(50),
floor INTEGER,
room_number VARCHAR(20),
category_id INTEGER REFERENCES categories(id),
is_active BOOLEAN DEFAULT TRUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- スタンプ獲得状況の取得
SELECT
u.user_id,
COUNT(us.id) as acquired_stamps,
(SELECT COUNT(*) FROM stamps WHERE is_active = TRUE) as total_stamps,
ROUND(COUNT(us.id) * 100.0 / (SELECT COUNT(*) FROM stamps WHERE is_active = TRUE), 2) as completion_rate
FROM user_stamps us
GROUP BY u.user_id;
4. API設計
RESTful API エンドポイント
Events API
GET
/api/events/
出し物一覧取得
GET
/api/events/{id}/
出し物詳細取得
POST
/api/events/
出し物作成（管理者）
PUT
/api/events/{id}/
出し物更新（管理者）
Stamps API
GET
/api/stamps/
スタンプ一覧取得
POST
/api/stamps/scan/
QRスキャン・スタンプ獲得
GET
/api/user-stamps/
ユーザーのスタンプ取得
GET
/api/progress/
進捗状況取得
Other APIs
GET
/api/categories/
カテゴリ一覧
GET
/api/announcements/
お知らせ一覧
GET
/api/search/
検索機能
GET
/api/health/
ヘルスチェック
レスポンス例
GET /api/events/
{
"count": 15,
"next": "http://api.example.com/events/?page=2",
"previous": null,
"results": [
{
"id": 1,
"title": "○○学部カフェ",
"description": "手作りコーヒーと軽食",
"image": "/media/events/cafe.jpg",
"department": "デザイン学部",
"building": "A棟",
"floor": 2,
"room_number": "205",
"category": {
"id": 1,
"name": "食べ物",
"icon": "fas fa-utensils"
},
"created_at": "2024-10-01T10:00:00Z"
}
]
}
POST /api/stamps/scan/
// Request
{
"qr_code": "VANTAN_STAMP_001",
"user_id": "device_12345"
}
// Response (Success)
{
"status": "success",
"message": "スタンプを獲得しました！",
"stamp": {
"id": 1,
"name": "カフェスタンプ",
"points": 10
},
"progress": {
"acquired": 5,
"total": 12,
"percentage": 41.67
}
}
5. セキュリティ対策
Webアプリケーション セキュリティ
HTTPS通信の強制
- • SSL証明書の導入
- • HTTP → HTTPS リダイレクト
- • HSTS（HTTP Strict Transport Security）
XSS・CSRF対策
- • CSRFトークンの実装
- • XSSフィルタリング
- • Content Security Policy (CSP)
- • 入力値のサニタイズ
入力値検証
- • Django Forms バリデーション
- • SQLインジェクション対策
- • ファイルアップロード制限
- • レート制限実装
データ保護・プライバシー
個人情報保護
- • 最小限の個人情報収集
- • データの暗号化保存
- • 匿名化されたユーザーID
- • GDPR準拠設計
アクセス制御
- • 管理者権限の適切な設定
- • APIアクセスの制限
- • セッション管理
- • ログ監視システム
データバックアップ
- • 定期的な自動バックアップ
- • 複数ロケーションでの保存
- • 復旧手順の文書化
- • バックアップの整合性検証
6. デプロイメント戦略
本番環境構成
ロードバランサー (Nginx)
App Server 1
Django + Gunicorn
App Server 2
Django + Gunicorn
PostgreSQL Database
環境構成
開発環境
- • ローカル開発
- • SQLiteデータベース
- • Django開発サーバー
- • デバッグモード有効
ステージング環境
- • 本番と同等の構成
- • PostgreSQLデータベース
- • Gunicorn + Nginx
- • テストデータでの検証
本番環境
- • スケーラブル構成
- • 冗長化されたDB
- • CDN配信
- • 監視・ログ収集
Docker設定例
# docker-compose.yml
version: '3.8'
services:
web:
build: .
ports:
- "8000:8000"
environment:
- DEBUG=False
- DATABASE_URL=postgresql://user:pass@db:5432/vantan_festival
depends_on:
- db
volumes:
- ./static:/app/static
- ./media:/app/media
db:
image: postgres:13
environment:
- POSTGRES_DB=vantan_festival
- POSTGRES_USER=user
- POSTGRES_PASSWORD=pass
volumes:
- postgres_data:/var/lib/postgresql/data
nginx:
image: nginx:alpine
ports:
- "80:80"
- "443:443"
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
- ./ssl:/etc/ssl
depends_on:
- web
volumes:
postgres_data: