ロードマップ4: Djangoで作る競馬予想AIモデル分析ソフト part1

はじめに
本プログラムの前提
フォルダ構成
Djangoの事前準備
モデル分析ソフトの開発
- メインページの作成
- メインページ確認
まとめ
ソース公開しました！
次回記事
- モデルインポート機能：フォームの作成＋モデルの作成

はじめに

私は競馬予想プログラムソフトの制作過程を動画で投稿している者です。

ここでは、モデル分析用のWEBアプリの開発手順を話していきます。

現在作成している競馬予想プログラムソフトの概要は以下を参照ください。

本プログラムの前提

本プログラムでは以下の前提を置いています。

Windows 10
Python3.10.5
Django ver5.0.4
競馬予想プログラムで作成したモデルを分析する目的で使います。
Bookersで公開中のモデル分析管理クラスと連携してモデル分析を行います。

とりわけ、最後の2つに関しては有料記事でソースを公開しているため、まったく同じ環境で競馬予想プログラムの作成とモデルの分析を行いたい場合は以下のBookers記事一覧から記事を購入ください。

また、競馬予想プログラムの制作過程については大まかな概要は以下の再生リストから参照ください。

詳細な解説は以下の記事一覧を参照ください。

競馬予想プログラム

「競馬予想プログラム」の記事一覧です。

フォルダ構成

Bookersで公開中の記事と同じフォーマットでフォルダ構成を記述します。Bookers記事を購入して頂いた方々は、既存のフォルダ構成に付け足してフォルダを作成ください。

<any-dir>
  ┣ <app_keiba> ※ 今後の手順で自動生成されますので、まだ作成しないでください。
  ┗ <src>
       ┣ ※ Bookers記事記載のフォルダ構成
       ...

Djangoの事前準備

プロジェクトの作成

コマンドプロンプトを起動して、上記フォルダ構成の<any-dir>までカレントディレクトリを移動したら、以下のコードを実行してください。

django-admin startproject app_keiba

今回の競馬予想AIモデル分析ソフトのプロジェクトをapp_keibaとします。

上記コマンドを実行すると<any-dir>の直下に<app_keiba>フォルダが作成されていると思います。

この<app_keiba>フォルダの配下が以下のような構成になっていることを確認ください。

<any-dir>
  ┣ <app_keiba>
  ┃      ┣ <app_keiba>
  ┃      ┃      ┣ __init__.py
  ┃      ┃      ┣ settings.py
  ┃      ┃      ┣ urls.py
  ┃      ┃      ┣ asgi.py
  ┃      ┃      ┗ wsgi.py
  ┃      ┗ manage.py
  ┗ <src>

この段階でコマンドプロンプトから以下のコマンドを実行してください。

cd app_keiba
python manage.py runserver

実行したら、http://localhost:8000/ へアクセスしてみてください。以下の画像が表示されていれば、プロジェクトの作成完了です。

アプリケーションの作成

次にアプリケーションを作成していきます。Djangoはどうやらプロジェクトの中に複数個のアプリケーションを作成することができるみたいなので、今回はまずモデル分析用のアプリケーションを作成します。

コマンドプロンプトでカレントディレクトリが<app_keiba>になっていることを確認して以下のコマンドを実行してください。

python manage.py startapp model_analyzer

上記を実行して以下のようなフォルダ構成になっていればOKです。

<any-dir>
  ┣ <app_keiba>
  ┃      ┣ <app_keiba>
  ┃      ┃      ┣ __init__.py
  ┃      ┃      ┣ settings.py
  ┃      ┃      ┣ urls.py
  ┃      ┃      ┣ asgi.py
  ┃      ┃      ┗ wsgi.py
  ┃      ┣ <app_keiba>
  ┃      ┃      ┣ <migrations>
  ┃      ┃      ┃      ┗ __init__.py
  ┃      ┃      ┣ __init__.py
  ┃      ┃      ┣ admin.py
  ┃      ┃      ┣ apps.py
  ┃      ┃      ┣ models.py
  ┃      ┃      ┣ test.py
  ┃      ┃      ┗ views.py
  ┃      ┗ manage.py
  ┗ <src>

settings.pyの編集

<app_keiba>/<app_keiba>フォルダ内にあるsettings.pyファイルを開いてください。

33行目～40行目を以下のように変更ください。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'model_analyzer' # 追加
]

106行目～108行目あたりを以下のように変更してください。

LANGUAGE_CODE = 'ja' # もともとは、en-us

TIME_ZONE = 'Asia/Tokyo' # もともとは、UTC

再度以下のコマンドでサーバを起動して、http://localhost:8000/へアクセスすると表記が日本語になっていると思います。

python manage.py runserver

モデル分析ソフトの開発

Djangoの初期セットアップが完了したので、モデル分析ソフトの開発に入ります。

以下に本ソフトでやりたいことリストを挙げています。

何から始めるかですが、まずは簡単なページを作るところから始めましょう。

メインページの作成

これから「http://localhost:8000/」, 「http://localhost:8000/model-analyze」, 「http://localhost:8000/model-manage」にアクセスしたときに表示される画面を作っていきます。

どの画面を表示させるかなどを取りまとめているのが<model_analyzer>/views.pyファイルになります。

views.pyファイルを以下のように編集してください。

from django.shortcuts import render
from django.views import View

# Create your views here.


class TopPageView(View):
    def get(self, request):
        nav_params = {
            "model_analyze": True,
            "model_manage": True
        }
        return render(request, 'top_page.html', nav_params)


class ModelAnalyzeView(View):
    def get(self, request):
        nav_params = {
            "model_analyze": False,
            "model_manage": True
        }
        return render(request, 'model_analyze.html', nav_params)


class ModelManageView(View):
    def get(self, request):
        nav_params = {
            "model_analyze": True,
            "model_manage": False
        }
        return render(request, 'model_manage.html', nav_params)

一旦意味分からないと思いますが、コピペして貰って大丈夫です。

簡単に説明すると、views.py内で定義した三つのクラスTopPageView, ModelAnalyzeView, ModelManageViewがWEBアプリ上で表示されるページをコントロールします。

各クラス内にあるgetメソッドは、GETでリクエストが来た際に実行される関数になっており、各々nav_paramsというパラメータを持たせて「*.html」で指定しているhtmlを表示させるようになっています。

ということなので、これから実際に画面を表示させるのに必要な３つのHTMLファイルを作成します。

templateファイル設置用フォルダの作成

以下のフォルダ構成になるようにしてください。<templates>と<static>フォルダを作成しています。

<any-dir>
  ┣ <app_keiba>
  ┃      ┣ <app_keiba>
  ┃      ┃      ┣ __init__.py
  ┃      ┃      ┣ settings.py
  ┃      ┃      ┣ urls.py
  ┃      ┃      ┣ asgi.py
  ┃      ┃      ┗ wsgi.py
  ┃      ┣ <app_keiba>
  ┃      ┃      ┣ <migrations>
  ┃      ┃      ┃      ┗ __init__.py
  ┃      ┃      ┣ __init__.py
  ┃      ┃      ┣ admin.py
  ┃      ┃      ┣ apps.py
  ┃      ┃      ┣ models.py
  ┃      ┃      ┣ test.py
  ┃      ┃      ┗ views.py
  ┃      ┣ <static> ※ 新規作成
  ┃      ┃      ┣ <css> ※ 空フォルダです
  ┃      ┃      ┣ <images>
  ┃      ┃      ┃      ┗ favicon.png
  ┃      ┃      ┗ <js> ※ 空フォルダです
  ┃      ┣ <templates> ※ 新規作成
  ┃      ┃      ┣ base_layout.html
  ┃      ┃      ┣ top_page.html
  ┃      ┃      ┣ model_analyze.html
  ┃      ┃      ┗ model_manage.html
  ┃      ┗ manage.py
  ┗ <src>

また、<templates>フォルダ内のHTMLは以下の内容をコピペしといてください。

base_layout.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="/static/images/favicon.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>競馬予想ソフト</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"></script>
    <header>
        <nav class="navbar navbar-expand bg-body-secondary" data-bs-theme="dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="./index.html">um-AI</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
                    aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="./index.html">Home</a>
                        </li>
                        <li class="nav-item">
                            {% if model_analyze %}
                            <a class="nav-link active" href="./model-analyze">モデル分析</a>
                            {% else %}
                            <a class="nav-link disabled" href="./model-analyze" tabindex="-1"
                                aria-disabled="true">モデル分析</a>
                            {% endif %}
                        </li>
                        <li class="nav-item">
                            {% if model_manage %}
                            <a class="nav-link active" href="./model-manage">モデル管理</a>
                            {% else %}
                            <a class="nav-link disabled" href="./model-manage" tabindex="-1"
                                aria-disabled="true">モデル管理</a>
                            {% endif %}
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    {% block content %}
    <!-- ここに個別のhtmlが入る -->
    {% endblock %}
</body>

</html>

top_page.html

{% extends "base_layout.html" %}
{% block content %}

{% endblock %}

model_analyze.html

{% extends "base_layout.html" %}
{% block content %}

{% endblock %}

model_manage.html

{% extends "base_layout.html" %}
{% block content %}

{% endblock %}

必要ない方は飛ばしていただいて大丈夫ですが、ページタブにアイコンが欲しい方は以下の画像をダウンロードして<app_keiba>/<static>/<images>フォルダ内にfavicon.pngというファイル名で保存してください。フリー素材なので著作権は問題ありません。

settings.pyの編集

templatesフォルダとstaticフォルダの位置を教えるために<app_keiba>/settings.pyを以下のように編集してください。

54行目あたりです。

# 54行目あたり
import os # 追加
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),  # 追加
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

また、121行目あたりにも以下を追加してください。


STATIC_URL = 'static/'
# 以下3行を追加
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

URLの登録

それでは最後にDjangoプロジェクト側にこれまでに作成したクラスとHTMLファイルを連携してアクセスできるように、HTMLファイルとURLの紐づけを行います。

以下の２ファイルを編集してください。

<app_keiba>/urls.py

# app_keiba/urls.py
from django.contrib import admin
from django.urls import path, include # inculudeを追加

urlpatterns = [
    path('admin/', admin.site.urls),
    path("", include("model_analyzer.urls")) # 追加
]

<model_analyzer>/urls.pyとなるように、urls.pyファイルを作成してください。

# 新規作成: model_analyzer/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.TopPageView.as_view(), name='index'),
    path('index.html', views.TopPageView.as_view(), name='index'),
    path('model-analyze', views.ModelAnalyzeView.as_view(), name='model-analyze'),
    path('model-manage', views.ModelManageView.as_view(), name='model-manage'),
]