🎮 はじめに

前回の記事では、スマブラ対戦データ分析プロジェクト全体の流れを紹介しました。
今回は、ローカル環境に対戦結果入力用の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