サンプルを見る

📖 この記事のゴール

目標

Webサイトのページを追加したい

詳細

以下のようなURLで表示させる

http://example.com/practice/vol1.0/hello/ver1.0/
------]----------]---------------------------------------
1      2          3

1. スキーム（HTTPプロトコル）
2. ホストの例
3. パス

情報

この記事は Lesson 1. から順に全部やってこないとソースが足りず実行できないので注意されたい

What is	This is
Lesson 1.	📖 DjangoとDockerでゲーム対局サーバーを作ろう！

この記事のアーキテクチャ:

What is	This is
OS	Windows10
Container	Docker
Editor	Visual Studio Code （以下 VSCode と表記）

ディレクトリ構成を抜粋すると以下のようになっている

    ├── 📂 src1
    │   ├── 📂 data
    │   ├── 📂 project1
    │   │   ├── 📄 __init__.py
    │   │   ├── 📄 asgi.py
    │   │   ├── 📄 settings_secrets.py
    │   │   ├── 📄 settings.py
    │   │   ├── 📄 urls.py
    │   │   └── 📄 wsgi.py
    │   ├── 📂 project2
    │   ├── 🐳 docker-compose-project2.yml
    │   ├── 🐳 docker-compose.yml
    │   ├── 🐳 Dockerfile
    │   ├── 📄 manage.py
    │   └── 📄 requirements.txt
    └── 📄 .gitignore

手順

Step [O3o1o0g1o0] Dockerコンテナの起動

👇 （していなければ） Docker コンテナを起動しておいてほしい

# docker-compose.yml ファイルを置いてあるディレクトリーへ移動してほしい
cd src1

# Docker コンテナ起動
docker-compose up

Step [O3o1o0g2o0] フォルダー作成 - apps1/practice_vol1o0 フォルダー

👇 以下のフォルダーを新規作成してほしい

    └── 📂 src1
        └── 📂 apps1                # 複数のアプリケーションを入れるフォルダー
            └── 📂 practice_vol1o0      # アプリケーション フォルダー

apps1 - 末尾の 1 は文字列検索しやすいように付けているだけで特別な意味はない
practice_vol1o0 - 末尾の _vol1o0 はレッスンの都合で付けている 1.0巻 という意味だが無くてもいい

Step [O3o1o0g3o0] アプリケーション作成

👇 以下のコマンドを打鍵してほしい

docker-compose run --rm web python manage.py startapp practice_vol1o0 ./apps1/practice_vol1o0 --settings=project1.settings
#                                                     --------------- -----------------------            -----------------
#                                                     1               2                                  3
# 1. 任意のDjangoアプリケーション名
# 2. アプリケーション フォルダーへのパス
# 3. `src1/projectN/settings.py` 設定ファイルに従う
#          -----------------

👇 以下のようなディレクトリー、ファイルが自動生成される

    └── 📂 src1
        └── 📂 apps1
            └── 📂 practice_vol1o0              # アプリケーション名
👉              ├── 📂 migrations
👉              │   └── 📄 __init__.py
👉              ├── 📄 __init__.py
👉              ├── 📄 admin.py
👉              ├── 📄 apps.py
👉              ├── 📄 models.py
👉              ├── 📄 tests.py
👉              └── 📄 views.py

Step [O3o1o0g4o0] 今回使わないファイルの削除

👇 以下のファイルを削除してほしい

    └── 📂 src1
        └── 📂 apps1
            └── 📂 practice_vol1o0              # アプリケーション名
                ├── 📂 migrations
                │   └── 📄 __init__.py
                ├── 📄 __init__.py
                ├── 📄 admin.py
                ├── 📄 apps.py
👉              ├── 📄 models.py
                ├── 📄 tests.py
👉              └── 📄 views.py

Step [O3o1o0g5o0] アプリケーション設定変更 - apps.py

👇 以下のファイルを編集してほしい

    └── 📂 src1
        └── 📂 apps1
            └── 📂 practice_vol1o0              # アプリケーション名
                ├── 📂 migrations
                │   └── 📄 __init__.py
                ├── 📄 __init__.py
                ├── 📄 admin.py
👉              ├── 📄 apps.py
                └── 📄 tests.py

# BOF [O3o1o0g5o0]

from django.apps import AppConfig


class PracticeConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    # * 変更前
    #name = 'practice_v1'
    # * [O3o1o0g5o0] 変更後
    name = 'apps1.practice_vol1o0'
    #       ---------------------
    #       1
    # 1. `src1/apps1/practice_vol1o0/apps.py`
    #          ---------------------

# EOF [O3o1o0g5o0]

Step [O3o1o0g6o0] アプリケーション登録 - settings.py ファイル＜その２＞

👇 以下の既存のファイルを編集してほしい

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 practice_vol1o0              # アプリケーション名
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
👉          └── 📄 settings.py

INSTALLED_APPS = [
    # Djangoの標準アプリケーション
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # vvvv 追加 ここから
    # あなたが追加したアプリケーション
    # [O3o1o0g6o0] 練習1.0巻
    'apps1.practice_vol1o0',
    # ^^^^ 追加 ここまで
]

これで、 src1/apps1/practice_vol1o0 フォルダーは practice_vol1o0 アプリケーションとして認識される。
そのメリットは　今後のレッスンで触れる

Step [O3o1o0g7o0] 画面作成 - hello/ver1o0.html ファイル

👇 以下のファイルを新規作成してほしい

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 practice_vol1o0              # アプリケーション
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📂 templates
        │       │   └── 📂 practice_vol1o0      # アプリケーションと同名
        │       │       └── 📂 hello
👉      │       │           └── 📄 ver1o0.html
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
            └── 📄 settings.py

templateの下のpractice_vol1o0 - あなたの Django の支配下のすべてのアプリケーションのテンプレート素材は、まるで実行時メモリの中で、あなたの Django の支配下のすべてのアプリケーションからアクセスできる１つの静的フォルダーに再配置されているかのように扱えると考えてほしい。あとは自分の頭で考えてほしい

<!-- BOF [O3o1o0g7o0] -->
<html>
    <head>
        <title>ページ１</title>
    </head>
    <body>
        こんにちわ、世界！
    </body>
</html>
<!-- EOF [O3o1o0g7o0] -->

Step [O3o1o0g8o0] 設定変更 - settings.py ファイル

👇 以下の既存ファイルを編集してほしい

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 practice_vol1o0              # アプリケーション
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📂 templates
        │       │   └── 📂 practice_vol1o0      # アプリケーションと同名
        │       │       └── 📂 hello
        │       │           └── 📄 ver1o0.html
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
👉          └── 📄 settings.py

👇 変更するのは TEMPLATES[0]["DIRS"] 変数

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # * [O3o1o0g8o0] 変更前
        # 'DIRS': [],
        # * 変更後
        'DIRS': [
            # [O3o1o0g8o0] 練習1.0巻
            os.path.join(BASE_DIR, 'apps1/practice_vol1o0/templates'),
            #                       -------------------------------
            #                       10
            # Example: /src1/apps1/practice_vol1o0/templates/practice_vol1o0/hello/ver1o0.html
            #                      ---------------          ----------------
            #                      11                       2
            #                -------------------------------
            #                10
            # 10. テンプレート ディレクトリーへのパス
            # 11. アプリケーション
            # 2. まるで `http://example.com/practice_vol1o0` という素材フォルダーがあるかのように扱われる
            #                             ----------------
        ],
        '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',
            ],
        },
    },
]

Step [O3o1o0g9o0] ビュー作成 - hello/ver1o0 フォルダー

👇 以下のファイルを新規作成してほしい

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 practice_vol1o0                  # アプリケーション
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📂 templates
        │       │   └── 📂 practice_vol1o0
        │       │       └── 📂 hello
        │       │           └── 📄 ver1o0.html
        │       ├── 📂 views
        │       │   └── 📂 hello
        │       │       └── 📂 ver1o0
👉      │       │           └── 📄 __init__.py
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
            └── 📄 settings.py

# BOF [O3o1o0g9o0]

from django.shortcuts import render


class HelloView():
    """[O3o1o0g9o0] こんにちわページ"""

    @staticmethod
    def render(request):
        """描画"""

        template_path = 'practice_vol1o0/hello/ver1o0.html'
        #                ---------------------------------
        #                1
        # 1. `src1/apps1/practice_vol1o0/templates/practice_vol1o0/hello/ver1o0.html` を取得
        #                                          ---------------------------------

        context = {}
        return render(request, template_path, context)

        # テンプレートを使わず、HTMLをハードコーディングすることもできる
        # return HttpResponse("""Hello, world.<br/>
        #                    <a href="http://example.com/">ホーム</a>""")

        # 以下のような書き方もある
        # from django.http import HttpResponse
        # from django.template import loader
        # template = loader.get_template('this/is/a/local/path/example.html')
        # context = {}
        # HttpResponse(template.render(context, request))

# EOF [O3o1o0g9o0]

Step [O3o1o0gA10o0] サブルート作成 - urls_practice.py

👇 以下のファイルを新規作成してほしい

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 practice_vol1o0                  # アプリケーション
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📂 templates
        │       │   └── 📂 practice_vol1o0
        │       │       └── 📂 hello
        │       │           └── 📄 ver1o0.html
        │       ├── 📂 views
        │       │   └── 📂 hello
        │       │       └── 📂 ver1o0
        │       │           └── 📄 __init__.py
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
            ├── 📄 settings.py
👉          ├── 📄 urls_practice.py          # 新規作成
❌          └── 📄 urls.py                   # これではない

# BOF [O3o1o0gA10o0]

from django.urls import path

# [O3o1o0gA10o0] 練習1.0巻 こんにちわページ1.0版
from apps1.practice_vol1o0.views.hello.ver1o0 import HelloView
#          ---------------             ------        ---------
#          11                          12            2
#    ----------------------------------------
#    10
# 10, 12. ディレクトリー
# 11. アプリケーション
# 2. `12.` に含まれる __init__.py ファイルにさらに含まれるクラス


urlpatterns = [

    # [O3o1o0gA10o0] 練習1.0巻 こんにちわページ1.0版
    path('practice/vol1.0/hello/ver1.0/',
         # ----------------------------
         # 1
         HelloView.render, name='hello'),
    #    ----------------        -----
    #    2                       3
    # 1. 例えば `http://example.com/practice/vol1.0/hello/ver1.0/` のようなURLのパスの部分
    #                              -----------------------------
    # 2. HelloView クラスの render 静的メソッド
    # 3. HTMLテンプレートの中で {% url 'hello' %} のような形でURLを取得するのに使える
]

# EOF [O3o1o0gA10o0]

Step [O3o1o0gA11o0] 総合ルート編集 - urls.py

👇 以下の既存ファイルを編集してほしい

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 practice_vol1o0                  # アプリケーション
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📂 templates
        │       │   └── 📂 practice_vol1o0
        │       │       └── 📂 hello
        │       │           └── 📄 ver1o0.html
        │       ├── 📂 views
        │       │   └── 📂 hello
        │       │       └── 📂 ver1o0
        │       │           └── 📄 __init__.py
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
            ├── 📄 settings.py
❌          ├── 📄 urls_practice.py          # これではない
👉          └── 📄 urls.py                   # こっち

# ...略...


from django.urls import include, path # include を追加

# [O3o1o0gA11o0] 総合ルート編集
from .settings import PROJECT_NAME
#    ]--------        ------------
#    12               3
# 1. 同じディレクトリー
# 2. `src1/projectN/settings.py`
#                   --------
# 3. 変数


# ...略...


urlpatterns = [


    # ...中略...


    # [O3o1o0gA11o0] 練習
    path('', include(f'{PROJECT_NAME}.urls_practice')),
    #    --            ----------------------------
    #    1             2
    # 1. 例えば `http://example.com/` のような URLの直下
    # 2. `src1/projectN/urls_practice.py` の urlpatterns を `1.` にぶら下げる
    #          ----------------------
]

Step [O3o1o0gA12o0] Webページにアクセスする

📖 http://localhost:8000/practice/vol1.0/hello/ver1.0/

次の記事

📖 [o3o2o_1o0] URL設定を自動化しよう！

参考にした記事

👇 より一般的なバージョン番号の付け方は、 セマンティックバージョニング が参考になる

📖 Semantic Versioning