3_Django初期設定&views/urlsをざっくり理解し簡単なwebページを表示させる

Django
2021.02.14

ぱらげです。

前回の記事↓

2_Django環境構築(Mac + venv + VScode)
ぱらげです。Python による WEBアプリケーション開発フレームワークDjangoの環境構築をしてみました！OSはMacで行い、エディタはVScodeを使用することを想定しています。(ちなみにDjangoっ...
pala-ghe.com
2021.01.22

今回は環境構築の続きとして初期設定と、Djangoに慣れるためにまずは簡単なwebページを作成して表示させるところまで進めたいと思います。前回と同様に、プロジェクト全体を管理するフォルダを「config」、アプリケーションフォルダを「todo」という設定です。データベースはDjangoがもともとサポートしているSQLiteをそのまま使用していきます。

Bootstrap4のインストール

CSSフレームワークであるBootstrapを使用することで、簡単にレスポンシブ対応のページが作れたりといろいろ便利なので、あらかじめ以下のコマンドでインストールしておきます。
※実際には次回以降の記事で使用します。

pip install django-bootstrap4

setting.pyでの設定

「config/setting.py」フォルダでの設定をしていきます。

まずは上部に「import os」の一文を追加します。

from pathlib import Path
import os  # 追加

続いて下の方にある「LANGUAGE_CODE」「TIME_ZONE」を修正します。

# 言語・タイムゾーン設定など
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'

前回の記事でアプリケーションフォルダ「todo」を作成しました。
それをDjango内部で認識させるため、「config/setting.py」の「INSTALLED_APPS」にアプリケーション名「todo」と先ほどインストールした「bootstrap4」を記載します。

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

「config/setting.py」の１番下に静的ファイル(画像ファイルなど)に関する変数を追加します。
この設定をしておくとHTMLファイルへの画像挿入や、CSS, JavaScriptに関する作業が楽になります。

# 静的ファイルの呼び出し設定を１番下に追加
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 
PROJECT_NAME = os.path.basename(BASE_DIR)
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] 
STATIC_ROOT = '/var/www/{}/static'.format(PROJECT_NAME)
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

同じく中段付近にある「TEMPLATES」の２行目「DIRS」を変更します。
これによって後ほど作成する「templates」フォルダに格納したHTMLファイルがシステム上で認識されるようになります。

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

urls.pyでの設定

urls.pyはユーザーからきたアクセスURLに対して、どのページを表示するかを振り分ける通信司令係のような役割を果たします。URLConfまたはURLディスパッチャとも呼ばれます。
Djangoインストール時にはプロジェクト管理フォルダ(config)内にurls.pyが自動で作成されています。ただ今後複数のページやアプリケーションが増えてくると「config/urls.py」のみだとコードがわかりにくくなってしまうため、各アプリケーションフォルダの中にもそれぞれurls.pyを作成することをおすすめします。

プロジェクト管理フォルダ内urls.pyの編集

まず「config/urls.py」の中を編集しましょう。

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

from todo import views

urlpatterns = [
    # ①今回作成するアプリ「todo」にアクセスするURL
    path('todo/', include('todo.urls')),
    # ②何もURLを指定しない場合（todo/views.pyで、自動的に「todo/top_page.html」にアクセスするよう設定済み）
    path('', views.index, name='index'),
    # 管理サイトにログインするURL
    path('admin/', admin.site.urls),
]

# メディアファイル公開用のURL設定
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

①の場合、第一引数である「’todo/’」がユーザーからのアクセスURLと一致したら、第二引数である「include(‘todo.urls’)」=「todo/urls.py」を見てくださいという記述をしています。
②の場合、URLに何も指定がなければviews.pyのindex関数を見てくださいという記述をしています。ちなみにこのviews.pyは上部で「from todo import views」と宣言しているため、「todo/views.py」であると認識されます。

アプリケーションフォルダ内urls.pyの作成

続いて、「todo」フォルダ内にも「urls.py」を作成します。(もともとアプリケーション内にurls.pyはないので手動で作成します)

from django.urls import path
from . import views

app_name = 'todo'
urlpatterns = [
    path('top_page/', views.top_page, name='top_page'),
]

「app_name = ‘アプリケーション名’」を記載し、「urlpatterns」の中にアクセスURLパターンを記載していきます。この時、「どのようなURLでアクセスされたら、どのページに飛ばしたい」というような指定をすることができます。今回は「http://127.0.0.1:8000/todo/top_page/」にアクセスされた場合を指定しています。URLに何も指定しなかった場合「http://127.0.0.1:8000/」の指定については下のviewsファイルの方で指定します。(もし「http://127.0.0.1:8000/todo/」のアクセスが来た場合もどこかのページに飛ばしたければこのtodoフォルダのurls.pyにも「path(”, views.index, name=’index’),」などの文を追加します)

ちなみに、

from . import views

の「.(ドット)」はカレントパスを意味しています。

View部分の記述

「todo/views.py」を開き、下のように記述します。
Viewの記載方法は2種類あり、
・関数ベース
・クラスベース
と分けられます。一般に関数ベースのビューは理解しやすいが再利用しにくいのが難点で、クラスベースのビューはクラスを再利用することでコードを短くすることができる一方でコードの見通しが悪くなるという欠点があります。
今回はurlsのルーティングがviewsのどこに繋がっているかをわかりやすくするため、関数ベースで記載しています。

from django.shortcuts import render


def index(request):
    return render(request, 'todo/top_page.html')


def top_page(request):
    return render(request, 'todo/top_page.html', {})

HTML/CSS関連フォルダ・ファイルの作成

続いて、HTML/CSS に関するフォルダなどを準備しましょう。
「manage.py」と同じ階層に下のようにフォルダとファイルを作成していきます。

  • templates/　→【Template】HTMLファイルを格納するフォルダ
    • base.html　→templatesフォルダ直下に作成
    • todo/　→templatesフォルダ直下にアプリケーション名のフォルダを作成
      • top_page.html　→アプリケーション名フォルダ直下に作成
      • ※今後todoアプリ内でページを増やす際はこの階層にファイルを追加していきます。
  • static/　→画像、cssファイル、javascriptファイルを格納するフォルダ
    • css/　→staticフォルダ直下にcssフォルダを作成
    • js/　→staticフォルダ直下にjsフォルダを作成
    • images/　→staticフォルダ直下にimagesフォルダを作成
  • media/　→画像などファイルをアップロードする機能を有するフォルダ

作成が終わった後、以下のファイル構成になればOKです。作成する際はフォルダやファイルのスペルや階層などに気をつけましょう。

Template部分の記述

ベーステンプレートの作成

それではベーステンプレートを作成していきます。
ベーステンプレートとは、全ページに共通するコンテンツやデザインに関するテンプレートを言います。例えば、タイトルロゴやメニューなどを記載したヘッダー、フッターなどはベーステンプレートを使用するといいでしょう。もし修正や追加などがあった場合でも、ベーステンプレートを修正するだけで、全ページを修正することなく反映させることができるからです。

まずは簡単に「templates/base.html」に下のように記述します。

<!DOCTYPE html>
{% load static %}
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='slim' %}
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>{% block page-title %}{% endblock %}</title>

        {# --- css --- #}
        <link type='text/css' href="{% static 'css/style.css'%}">
        <link href="https://cccabinet.jpn.org/bootstrap4/css/style.css">
        
    </head>
    <body>
        <div>ベーステンプレートからの情報</div>
        <p>
            {% block content %}{% endblock %}
        </p>

    </body>

</html>

各ページの作成

先ほどベーステンプレートを作成したので、続いて「templates/todo/top_page.html」に各ページ独自のコンテンツを作成します。{% block 〜 %}と{% endblock %}の間にコンテンツを記述します。

{% extends 'base.html' %}
{% block page_title %}todoトップだよ{% endblock %}

{% block content %}
<div>todoのtop_page.htmlページからの情報</div>
{% endblock %}

ここで重要なポイントがあります。先頭と末尾に記述している{% %}があることで
ベーステンプレートに『「内側」のコンテンツ部分』を挿入できる仕組みになっています。
ですのでこのコードは間違っても消さないように気をつけましょう。

  • {% extends ‘base.html’ %}　→base.htmlからテンプレートを継承することを宣言
  • {% block page-title %}タイトル{% endblock %}　→ページタイトルを挿入
  • {% block content %}コンテンツ{% endblock %}　→コンテンツを挿入

以上でテンプレートの準備は終了です。

ページの確認

ここまで記述が終わったら、

python manage.py runserver

をコマンドしサーバーを起動します。

ベーステンプレートと各ページそれぞれの情報を取得していることがわかります。次回以降はcssや画像などを使用してさらにコンテンツを充実させていきます。

コメント