サンプルを見る

目標

ランチャー(*1)を作る

*1 … ボタンがいっぱい並んでいて、押すとアプリが開くようなもの

これからレッスンが終わるたびに、終わったレッスンに飛べるボタンをランチャーに追加していけばあとで見返すのに便利だ

情報

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

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

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

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

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

    ├── 📂 src1
    │   ├── 📂 apps1
    │   │   └── 📂 practice_vol1o0              # アプリケーション名
    │   │       ├── 📂 templates
    │   │       │   └── 📂 practice_vol1o0
    │   │       │       ├── 📂 page_the_hello
    │   │       │       │   └── 📄 ver1o0.html
    │   │       │       └── 📂 page_to_be_added
    │   │       │           ├── 📄 ver1o0.html
    │   │       │           ├── 📄 ver2o0.html.txt
    │   │       │           └── 📄 ver3o0.html.txt
    │   │       └── 📂 views
    │   │           ├── 📂 page_the_hello
    │   │           │   └── 📂 ver1o0
    │   │           │       └── 📄 __init__.py
    │   │           └── 📂 page_to_be_added
    │   │               ├── 📂 ver2o0
    │   │               │   └── 📄 __init__.py
    │   │               └── 📂 ver3o0
    │   │                   └── 📄 __init__.py
    │   ├── 📂 data
    │   ├── 📂 project1                  # プロジェクト名
    │   │   ├── 📄 __init__.py
    │   │   ├── 📄 asgi.py
    │   │   ├── 📄 settings.py
    │   │   ├── 📄 urls_practice.py
    │   │   ├── 📄 urls.py
    │   │   └── 📄 wsgi.py
    │   ├── 📂 project2
    │   ├── 🐳 docker-compose-project2.yml
    │   ├── 🐳 docker-compose.yml
    │   ├── 🐳 Dockerfile
    │   ├── 📄 manage.py
    │   └── 📄 requirements.txt
    ├── 📂 src1_meta
    │   ├── 📂 data
    │   │   └── 📄 urls.csv
    │   └── 📂 scripts
    │       └── 📂 auto_generators
    │           └── 📄 urls.py
    └── 📄 .gitignore

手順

Step O5o1o0g1o0 Dockerコンテナの起動

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

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

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

Step O5o1o0g2o0 フォルダー作成 - apps1/launcher_vol1o0 フォルダー

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

    └── 📂 src1
        └── 📂 apps1
            └── 📂 launcher_vol1o0        # アプリケーション名

Step O5o1o0g3o0 アプリケーション作成

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

docker-compose run --rm web python manage.py startapp launcher_vol1o0 ./apps1/launcher_vol1o0
#                                                     --------------- -----------------------
#                                                     1               2
# 1. 任意のDjangoアプリケーション名
# 2. パス

Step O5o1o0g4o0 今回使わないファイルの削除

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

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

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

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

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

# BOF O5o1o0g5o0

from django.apps import AppConfig


class PortalConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    # 変更前
    #name = 'launcher_vol1o0'
    # 変更後
    name = 'apps1.launcher_vol1o0'
    #       ---------------------
    #       1
    # 1. `src1/apps1/launcher_vol1o0/apps.py`
    #          ---------------------

# EOF O5o1o0g5o0

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

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

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

INSTALLED_APPS = [
    # あなたが追加したアプリケーション


    # ...中略...


    # O5o1o0g6o0 ランチャー1.0巻
    'apps1.launcher_vol1o0',


    # ...中略...


]

これで、 src1/apps1/launcher_vol1o0 フォルダーは launcher_vol1o0 アプリケーションとして認識される。
例えば、 launcher_vol1o0 フォルダーの直下に置いた static フォルダーが Django の静的リソースの検索対象のパスになるといったメリットがある

Step O5o1o0g7o0 アイコンの設定 - favicon.ico ファイル

favicon.ico は、例えば以下のサイトで作れる。作ってきてほしい

📖 Favicon Generator. For real.

例えば、以下の場所に置いてほしい

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 launcher_vol1o0                # アプリケーション
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📂 static
👉      │       │   └── 🚀 favicon.ico   # アプリケーション毎にアイコンを作るのがめんどくさいので static の直下に置いた
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
            └── 📄 settings.py

favicon.ico を有効にするには HTML で設定する必要があるが、まだ作成しない。以下は例。あとで全体を再掲する

{% load static %} {% comment %} 👈あとで static "URL" を使うので load static します {% endcomment %}
<!DOCTYPE html>
<html>
    <head>
        <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
        <!--                                                ===================
                                                            1
            1. Example: `http://example.com/static/favicon.ico`
                                            ==================
        -->
        中略
        <title>Tic Tac Toe</title>
    </head>
    <body>
以下略

Step O5o1o0g8o0 画面作成 - launcher_vol1o0/finished_lesson/ver1o0.html ファイル

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

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 launcher_vol1o0                # アプリケーション
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📂 static
        │       │   └── 🚀 favicon.ico   # アプリケーション毎にアイコンを作るのがめんどくさいので static の直下に置いた
        │       ├── 📂 templates
        │       │   └── 📂 launcher_vol1o0        # アプリケーションと同名
        │       │       └── 📂 finished_lesson
👉      │       │           └── 📄 ver1o0.html
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
            └── 📄 settings.py

{% load static %} {# 👈あとで static "URL" を使うので load static します #}
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
        <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet" />
        <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />
        <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
        <!--                                                ===================
                                                            1
            1. Example: `http://example.com/static/favicon.ico`
                                            ==================
        -->
        <title>ランチャー</title>
    </head>
    <body>
        <div id="app">
            <v-app>
                <v-main>
                    <v-container>
                        <v-row class="my-2">
                            <h3>終わったレッスン</h3>
                        </v-row>
                        <v-row class="my-2">
                            <v-btn :href="vu_pathOfPageTheHello">こんにちわページ</v-btn>
                        </v-row>
                        <v-row class="my-2">
                            <v-btn :href="vu_pathOfPageToBeAdded1">１回追加されたページ</v-btn>
                        </v-row>
                        <v-row class="my-2">
                            <v-btn :href="vu_pathOfPageToBeAdded2">２回追加されたページ</v-btn>
                        </v-row>
                        {% block finished_lesson_footer %}
                        <!-- -->
                        {% endblock finished_lesson_footer %}
                    </v-container>
                </v-main>
            </v-app>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
        <script>
            let vue1 = new Vue({
                el: "#app",
                vuetify: new Vuetify(),
                data: {
                    // "vu_" は 「vue1.dataのメンバー」 の目印
                    // "dj_" は 「Djangoがレンダーに埋め込む変数」 の目印
                    vu_pathOfPageTheHello: `${location.protocol}//${location.host}{{ dj_path_of_page_the_hello }}`,
                    //                      --------------------  ---------------]-------------------------------
                    //                      1                     2               3
                    // 1. スキーム（HTTPプロトコル）
                    // 2. ホスト
                    // 3. パス
                    vu_pathOfPageToBeAdded1: `${location.protocol}//${location.host}{{ dj_path_of_page_to_be_added_1 }}`,
                    vu_pathOfPageToBeAdded2: `${location.protocol}//${location.host}{{ dj_path_of_page_to_be_added_2 }}`,
                    {% block vue1_data_footer %}
                    <!-- -->
                    {% endblock vue1_data_footer %}
                },
            });
        </script>
    </body>
</html>

Step O5o1o0g9o0 設定変更 - settings.py ファイル＜その２＞

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

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 launcher_vol1o0                # アプリケーション
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📂 static
        │       │   └── 🚀 favicon.ico   # アプリケーション毎にアイコンを作るのがめんどくさいので static の直下に置いた
        │       ├── 📂 templates
        │       │   └── 📂 launcher_vol1o0        # アプリケーションと同名
        │       │       └── 📂 finished_lesson
        │       │           └── 📄 ver1o0.html
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
👉          └── 📄 settings.py

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

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # * 変更前
        # 'DIRS': [],
        # * 変更後
        'DIRS': [
            # ...略...


            # O5o1o0g9o0 ランチャー1.0巻
            os.path.join(BASE_DIR, 'apps1/launcher_vol1o0/templates'),
            #                       -------------------------------
            #                       10
            # Example: /src1/apps1/launcher_vol1o0/templates/launcher_vol1o0/finished_lesson/ver1o0.html
            #                      ---------------          ----------------
            #                      11                       2
            #                -------------------------------
            #                10
            # 10. テンプレート ディレクトリーへのパス
            # 11. アプリケーション
            # 2. まるで `http://example.com/launcher_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 O5o1o0gA10o0 ビュー作成 - finished_lesson/ver1o0 フォルダー

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

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 launcher_vol1o0                # アプリケーション
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📂 static
        │       │   └── 🚀 favicon.ico      # アプリケーション毎にアイコンを作るのがめんどくさいので static の直下に置いた
        │       ├── 📂 templates
        │       │   └── 📂 launcher_vol1o0        # アプリケーションと同名
        │       │       └── 📂 finished_lesson
        │       │           └── 📄 ver1o0.html
        │       ├── 📂 views
        │       │   └── 📂 finished_lesson
        │       │       └── 📂 ver1o0
👉      │       │           └── 📄 __init__.py
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
            └── 📄 settings.py

# BOF O5o1o0gA10o0

from django.shortcuts import render


class Launcher():
    """O5o1o0gA10o0 練習1.0巻 ランチャー1.0版"""

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

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

        context = {
            "dj_path_of_page_the_hello": "/practice/vol1.0/page-the-hello/ver1.0/",
            "dj_path_of_page_to_be_added_1": "/practice/vol1.0/page-to-be-added-1/ver1.0/",
            "dj_path_of_page_to_be_added_2": "/practice/vol1.0/page-to-be-added-2/ver1.0/",
        }

        return render(request, template_path, context)

# EOF O5o1o0gA10o0

Step O5o1o0gA11o0

Merged to O5o1o0gA11o1o0

Step O5o1o0gA11o1o0 ルート編集 - urls.csv ファイル

👇 以下の既存ファイルの末尾に追記してほしい

    ├── 📂 src1
    │   ├── 📂 apps1
    │   │   └── 📂 launcher_vol1o0                # アプリケーション
    │   │       ├── 📂 migrations
    │   │       │   └── 📄 __init__.py
    │   │       ├── 📂 static
    │   │       │   └── 🚀 favicon.ico
    │   │       ├── 📂 templates
    │   │       │   └── 📂 launcher_vol1o0        # アプリケーションと同名
    │   │       │       └── 📂 finished_lesson
    │   │       │           └── 📄 ver1o0.html
    │   │       ├── 📂 views
    │   │       │   └── 📂 launcher
    │   │       │       └── 📂 ver1o0
    │   │       │           └── 📄 __init__.py
    │   │       ├── 📄 __init__.py
    │   │       ├── 📄 admin.py
    │   │       ├── 📄 apps.py
    │   │       └── 📄 tests.py
    │   └── 📂 project1
    │       └── 📄 settings.py
    └── 📂 src1_meta
        └── 📂 data
👉          └── 📄 urls.csv

...略... file,path,name,comment,module,class,alias,method
...略...


../src1/project1/urls_launcher_vol1o0_autogen.py,launcher/vol1.0/finished-lesson/ver1.0/,,"O5o1o0gA11o1o0 ランチャー1.0巻 終了したレッスン1.0版",apps1.launcher_vol1o0.views.finished_lesson.ver1o0,Launcher,LauncherView1o0g1o0,render

Step O5o1o0gA11o2o0 ルート編集 - コマンド打鍵