この記事ではDjangoでtemplates(テンプレート)を使う手順を紹介します。
前回の記事で「ビューを使って画面に文字を表示させる」ところまでやったので、その続きです。
次は「表示する文字列をHTMLのテンプレートに埋め込む」作業を行います。
前回の記事はこちらです。
[kanren id=”66″ target=”_blank” rel=”noopener noreferrer”]
[list class=”ol-circle li-mainbdr main-bc-before”]
- templatesディレクトリを作成する
- templates以下にHTMLファイルを作成する
- templatesを読み込むようにプロジェクトの設定ファイル(settings.py)を編集する
- views.pyにビューとなるクラスを作成する
- ビュークラスを表示するようにurls.pyを編集する
[/list]
それでは順番にやっていきましょう。
前回、「web」というアプリケーションを作ったところまでやったので、そちらを確認していただけるとスムーズに理解できると思います。
テンプレート用のディレクトリを作成する
プロジェクトの直下に「templates」というディレクトリを作ってください。

「templates」の下にhomepage.html
ファイルを作ります。
ここまでで以下のような構造になります。
.
├── Pipfile
├── Pipfile.lock
├── db.sqlite3
├── helloworld
│ ├── __init__.py
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── manage.py
├── templates
│ └── homepage.html
└── web
├── __init__.py
├── admin.py
├── apps.py
├── migrations
│ └── __init__.py
├── models.py
├── tests.py
├── urls.py
└── views.py
テンプレートのtemplates/homepage.html
には以下のように書いてください。
<h1>This is hamepage.html!!</h1>
プロジェクトの設定ファイルにテンプレートの場所を定義する
プロジェクトの設定ファイルを開きます。
helloworld/settings.py
を編集しましょう。

settings.py
のTEMPLATERS
という変数にtemplatesのディレクトリの情報を追記してください。
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',
],
},
},
]
これでテンプレートの完成です。
views.pyにビューとなるクラスを作成する
次にアプリケーションディレクトリ(「web」)にあるviews.py
を編集します。
このviews.py
はアプリケーションのビューを定義するファイルです。

このweb/views.py
に以下のようなコードを書いてください。
from django.views.generic import TemplateView
class HomePageView(TemplateView):
template_name = 'homepage.html'
tamplate_name
にはテンプレートとなるhtmlを指定します。
urls.pyを編集してビューと紐付ける
前回の記事でも作業したように、URLとビューの紐付けを行います(前回の記事へのリンクは冒頭にあります)
まずはDjangoプロジェクトのurls.py
を編集し、ホームページにアクセスされたときにweb/urls.py
の設定に従うようにします。

helloworld/urls.pyを以下のように編集します。
from django.contrib import admin
from django.urls import path, include # 追記したもの
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('web.urls')), # 追記したもの
]
次に「web」アプリケーションのurls.py
を編集します。

from django.urls import path
from .views import HomePageView #views.pyを参照している
urlpatterns = [
path('', HomePageView.as_view(), name='home')
]
ここまでがクラスベースのビューを画面に表示させるまでの手順です。
python manage.py runserver
すると、画面に「This is hamepage.html!!」と表示されます。
新しいテンプレートを追加する
新しいテンプレートを追加するときも基本的には同じ手順でできます。
まずは、templates以下に新しいHTMLファイルを追加しましょう。
templates/sample.html
を作成します。
上のsample.html
は以下のように書きます。
<h2>This is sample page!</h2>
次に、web/views.py
に上のsample.htmlを表示するためのクラスを追加します。

from django.views.generic import TemplateView
class HomePageView(TemplateView):
template_name = 'homepage.html'
class SamplePageView(TemplateView):
template_name = 'sample.html'
次にweb/urls.py
を編集します。

from django.urls import path
from .views import HomePageView, SamplePageView #views.pyを参照している
urlpatterns = [
path('', HomePageView.as_view(), name='home'),
path('sample/', SamplePageView.as_view(), name='sample'), # 追記したもの
]
ここでもう一度サーバーを起動しましょう。
python manage.py runserver
http://127.0.0.1:8000/sample/
を開くと、以下のように「This is sample page!」と表示されます。
