Django

【Django】シフト管理アプリ作成1(HelloWorld編)

こんにちは、ユウヤです。

前回の記事では、pipenvを用いてDjangoの環境構築と初期設定を紹介しました。
今回は、その続きで、実際にシフト管理アプリを作っていこうと思います。

現在、絶賛開発中なので今回は、Hello Worldするまでにします。

前回の記事!?って、なった方はこちらです。↓
https://y-u-y-a-blog.com/django-change-dir-construction/

アプリケーションの作成

まずはプロジェクトの中にアプリケーションを作成します。
以下のコマンドを実行しましょう。

$ django-admin startapp shiftKanri

DjangoAppの直下に、shiftKanriというディレクトリができるので、中身を確認してみます。

djangoApp
├── config
│   ├── __init__.py
│   ├── settings
│   │   ├── __init__.py
│   │   ├── base.py
│   │   ├── development.py
│   │   ├── production.py
│   │   └── test.py
│   ├── urls.py
│   └── wsgi.py
# ここから下が生成したアプリケーション
└── shiftKanri
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    └── views.py

HTMLファイル作成(templates/shift/index.html)

それでは、shiftKanriディレクトリ直下にtemplatesディレクトリを作成します。
以下のコマンドを実行してください。

$ cd shiftKanri
$ mkdir templates

さらに、templatesディレクトリの中に、shiftKanriというディレクトリを作成します。
(理由はあとで説明します。)

$ mkdir templates/shiftKanri

このディレクトリが、HTMLファイルを置く場所になります。

$ touch templates/shiftKanri/index.html

生成したindex.htmlファイルを簡単に記述しておきます、以下を追加してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

では、今回色々変更した内容を設定ファイルであるconfig/setteings/base.pyに反映させます。
(この記事は、前回の記事の続きになっています、ディレクトリ構造はこちらを確認してください。)

編集箇所は、2箇所です。

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

startappコマンドで追加したアプリケーションの読み込みを行うためです。

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',
            ],
        },
    },
]

TEMPLATESの内容は?

ここにはDjangoがどのようにテンプレートを読み込むかが書かれている、
という認識で大丈夫です。

‘DIRS’: [os.path.join(BASE_DIR, ‘templates’)]
→templatesディレクトリ内を探すよう指示している

‘APP_DIRS’: True
→INSTALLED_APPSに記述してあるアプリケーションのそれぞれのtemplatesを探しにいく

なぜ、templatesディレクトリ内にアプリケーション名のディレクトリを記述するのか?

簡単にいうと、上で説明した設定ファイルの記述だけだと、Djangoが全てのアプリケーション内のtemplatesディレクトリ内を順に探してしまいます。

(なぜなら、templates/内を探せ、と言われてるから。)

これでは、効率が悪いので、指定するために、templatesディレクトリ内にアプリケーション名のディレクトリを作成しています。
こうすることで、Djangoは直接、templates/shiftKanri/というディレクトリを探しにいけます。

僕も、完全に理解したわけではないのですが、こんな感じの理解でやっています。
わからなければ、ふーん、でいいと思います!

少し、深掘りし過ぎたかもしれないので、ここで休憩してもいいです。

HelloWorldまで、もう一息です!

URLをアプリケーションごとに管理(urls.py)

続いて、パスの管理をプロジェクトごとに行うための記述をしていきます。

urls.pyはstartprojectコマンドを実行した際にプロジェクト内に生成されていたと思います。

これとは別にアプリケーション直下にもurls.pyを作成します。

読み込みの流れは、
リクエスト→config/urls.py→shiftKanri/urls.py
という感じです。

$ cd shiftKanri
$ touch urls.py

続いて、ファイルの編集をします。以下のように編集してください。

config/urls.py

from django.contrib import admin
from django.urls import path, include # 追加

urlpatterns = [
    # 第一引数で指定した文字列を第二引数で指定したファイルへ渡す
    path("", include("shiftKanri.urls")),
    path("shiftKanri/", include("shiftKanri.urls")),
    # 管理画面
    path("admin/", admin.site.urls),
]

shiftKanri/urls.py

from django.urls import path
from . import views

app_name = "shiftKanri"  # 名前空間(tempates/shiftKanri/index.html)
urlpatterns = [
    path("", views.index, name="index")
]

リクエスト時の処理を作成(views.py)

このファイルでは、実際にHTTPリクエストがきてから、どんな処理をするのか?を記述します。

今回でいうと、index.htmlを返す、という処理を記述します。

from django.shortcuts import render

def index(request):
    return render(request, "shiftKanri/index.html")

お疲れ様でした、これでコーディングは終了です。

あとは、以下のコマンドでサーバーを起動して、localhost:8000にHello Worldと表示されれば成功です!

$ pipenv run python manage.py runserver

CSSを適用する

プロジェクト直下にstaticディレクトリを作成します。

$ mkdir static

$ mkdir static/css

$ touch static/css/style.css

次にbase.pyにstaticディレクトリの場所を指定します。

# staticディレクトリの場所
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, '../static')
]

最後にHTMLを編集します。


{% load static %} <!-- 追加 -->

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{% static 'css/style.css' %}"> <!-- 追加 -->
    <title>シフト管理</title>
</head>

<body>
    <h1>トップページ</h1>
</body>

</html>

COMMENT

メールアドレスが公開されることはありません。