🎮 はじめに
前回の記事では、スマブラ対戦データ分析プロジェクト全体の流れを紹介しました。
今回は、ローカル環境に対戦結果入力用のDjangoアプリを作成し、データ収集の基盤を整えます！
この記事では、プロジェクト作成 → モデル設計 → 画面作成まで、手順を解説していきます。
詳しいコードの内容はGithubに公開しておりますので、興味がある方はこちらをご覧ください。
🛠 使用技術
- Django（Webフレームワーク）
- Docker（開発環境構築）
- SQLite（開発用DB）
- bash（コマンド自動化）
📦 プロジェクトの準備
まずはDjangoプロジェクトを作成します。
今回はDockerを使った開発環境を構築しました。
Dockerfile（抜粋）
FROM python:3.8-slim
RUN apt-get update && apt-get install -y \
tk \
&& rm -rf /var/lib/apt/lists/*
WORKDIR /code
COPY requirements.txt .
RUN pip install --upgrade pip && \
pip install -r requirements.txt
COPY . .
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]
docker-compose.yml（抜粋）
version: '3.8'
services:
web:
build: .
container_name: smash_app_export(ここは任意の名前)
command: python manage.py runserver 0.0.0.0:8000
volumes:
- .:/code
ports:
- "8000:8000"
env_file:
- .env
プロジェクト作成コマンド
django-admin startproject smash_project .
python manage.py startapp matches
これで、ブラウザで http://localhost:8000 にアクセスすればDjango初期画面が見えるはずです！
🏗 モデル設計
次に試合データを保存するため、Djangoのモデル（データ構造）を設計します。
以下の情報を保存しています。
- match_id(ユニークid)
- 対戦時間
- 自分の使用キャラクター
- 相手の使用キャラクター
- 勝敗
- 戦闘力
- 対戦ステージ
📄 models.py（一部抜粋）
from django.db import models
class Match(models.Model):
match_id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
match_time = models.DateTimeField(default=timezone.now, verbose_name="対戦時間")
my_character_id = models.IntegerField(choices=CHARACTER_CHOICES, verbose_name="自分のキャラ")
opponent_character_id = models.IntegerField(choices=CHARACTER_CHOICES, verbose_name="相手のキャラ")
win_or_loss = models.CharField(max_length=10, verbose_name="勝敗")
fighting_strength = models.IntegerField(verbose_name="戦闘力")
stage = models.CharField(max_length=100, verbose_name="対戦ステージ")
🛠 モデルをDBに反映
マイグレーションコマンドを使って、データベースにテーブルを作成します。
python manage.py makemigrations
python manage.py migrate
これで、SQLiteに matchテーブルが作成されました！
🛠 画面作成
次にDjangoアプリのWeb画面を作っていきます。
Githubの「smash_bros_app_project/matches/templates/」フォルダに注目してください。
templatesフォルダの中に、Web画面に表示するhtmlが入っています。
Djangoでは、base.htmlという共通のテンプレートファイルを元に画面を作成していきます。
実際の画面が以下になります！
対戦結果の入力画面
対戦結果一覧
対戦結果の編集画面
対戦結果の削除画面
ちなみになのですが、自分は速くてかっこいいからという理由だけで、ソニックをよく使っています。（笑）
🚀 次回
簡単ではありますが、対戦結果入力用のDjangoアプリの説明については以上になります。
次回は、BeautifulSoupを使った気象データのスクレイピングについて紹介していきます！
https://qiita.com/shota1212/items/1eec2380f6e04ea59be4