テンプレートの基礎

「Django アプリケーションの作成」で作成した簡単なアプリケーションを書き換えて、テンプレートを利用するようにします。

以前の例では、ビュー関数に文字列を直接埋め込んで HTML を返していました。しかし、これは実用的な Web サイトを構築するには現実的ではありません。

Django ではテンプレートという仕組みによって、HTML によるビューをロジックから分離することが可能です。

ここでは、簡単なテンプレートを用意してそれを利用したページを表示してみましょう。

テンプレートの動作は利用するテンプレートエンジンに依存します。ここでは、デフォルトのテンプレートエンジンである DjangoTemplates を利用します。

Django 1.11.11 をベースにしています。

テンプレートディレクトリ

テンプレートを保存するテンプレートディレクトリは、デフォルトでアプリケーションディレクトリ下の templates ディレクトリです。

正しく動作させるために、まだ設定していないなら myprj/settings.py 設定ファイル内の INSTALLED_APPS で次のように myapp1 を登録します。

...
INSTALLED_APPS = [
    'myapp1',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
...

アプリケーションはプロジェクトの settings.py 内の INSTALLED_APPS に登録します。 AppConfig クラスには name 属性があり、そこにアプリケーションパスが記述されています。詳しくは「Django アプリケーションの登録」をみてください。

テンプレートエンジンと設定については、デフォルトで myprj/settings.py 内で次のように設定されています。

...
TEMPLATES = [
  {
      'BACKEND': 'django.template.backends.django.DjangoTemplates',
      'DIRS': [],
      'APP_DIRS': True,
      'OPTIONS': {
          'context_processors': [
          ...
          ],
      },
  },
]
...

ここで APP_DIRS が True であるので、アプリケーションディレクトリ以下の templates ディレクトリを探すことになります。

要は、アプリケーションのパスが myapp1 ならば、テンプレートディレクトリは myapp1/templates になります。このディレクトリを作成します。

$ mkdir templates

さらに通常、templates ディレクトリ内にさらにアプリケーション名のディレクトリを作成して、そこにテンプレートを保存するようにします。

今回アプリケーション名は myapp1 にしていたので、アプリケーションのルートディレクトリからみて、templates/myapp1 というディレクトリをさらに作ります。

$ cd templates
$ mkdir myapp1

アプリケーションのルートディレクトリからのディレクトリツリーは次のようになります。

$ tree -I '__pycache__' .
.
├── admin.py
├── apps.py
├── __init__.py
├── models.py
├── templates 
│   └── myapp1 
│       └── index.html
├── tests.py
├── urls.py
└── views.py

これはテンプレートエンジンがテンプレートを探す際に、(同じプロジェクト内の) 他の Django アプリケーションで定義された同じ名前のテンプレートと混同するのを防ぐための手段です。

このようにすることで、テンプレートファイルのパスにアプリケーションの名前が入るので、他の Django アプリケーションと区別することができます。

最初のテンプレート

上で作成した templates/myapp1 ディレクトリ内に次の内容を index.html として作成します。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <title>index.html</title>
  <style>
  body {
    background-color: #B2EBF2;
    font-family: sans-serif;
  }
  </style>
</head>
<body>
  <h1>Hello, template!</h1>
</body>
</html>

次にこのテンプレートを使うビューを作成します。

ビューの作成

アプリケーション内の views.py を書き換えて次のようにします。

from django.http import HttpResponse
from django.template import loader

def index(request):
    template = loader.get_template('myapp1/index.html')
    return HttpResponse(template.render( None, request))

get_template 関数でテンプレートを読み込んでいます。

また、上記のコードと同じ内容をショートカット関数の render を使って書くと次のように書けます。

from django.shortcuts import render

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

動作確認

以上で準備は完了です。ブラウザを開き http://127.0.0.1:8000/myapp1/ を要求すると、次のように表示されるはずです。

Django templated page

さてそれでは次に、テンプレートにデータを渡して表示してみましょう。

テンプレートでパラメータを使う