ブラウザーで以下のエラー表示
TemplateDoesNotExist at /
テンプレートはアプリケーション下なので探索範囲にある、アプリケーションのrender関数でもテンプレートのパスは間違っていない・・・。ほとんどの場合、settings.pyへのアプリケーションの登録漏れ。
サーバーコンソールに以下のエラー表示
name *** is not defined
引数のパスなどが文字列になっていないとこのエラーが出る。
|
1 2 3 4 5 6 7 |
render(request, app/index.html) ↓ render(request, 'app/index.html') path(app/, include(app.urls) ↓ path(app/, include('app.urls') |
テンプレートの継承では、個別ページが共有するテンプレートを継承元の親テンプレートとした。一方、HTMLの一部を部品化して任意のページに埋め込むにはincludeタグを使う。
たとえば検索フォームを作成して、これを複数のページで使い回したいとする。例として以下のようなダミーのHTMLを準備する。
|
1 2 3 |
div> <p>検索用のフォーム</p> </div> |
テンプレートの継承で使った以下のテンプレートを考える。includeタグで挿入するHTMLのパスを指定している。パスの指定の仕方は他のタグと同じ相対パス。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{% extends 'inheritance/authenticated.html' %} {% block title %}ようこそ{% endblock %} {% block content %} <h1>ユーザーホームページ</h1> <p>ログイン済みユーザー用の内容</p> {% include 'inheritance/search.html' %} {% endblock %} |
このページを呼び出すと、以下のようにincludeタグの部分に検索フォームのHTMLが埋め込まれる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ようこそ</title> </head> <body> <p>ユーザー用メニュー</p> <ul> <li>ユーザーホーム</li> <li>ログアウト</li> </ul> <p>ユーザーホームページ</p> <p>ログイン済みユーザー用の内容</p> <div> <p>検索用のフォーム</p> </div> </body> </html> |
表示は以下の通りで、検索フォームの部分が表示されている。
ユーザー用メニュー
ユーザーホームページ
ログイン済みユーザー用の内容
検索用のフォーム
個別ページで共通するHTMLの枠組みがある場合、それらを親テンプレートとして一つにまとめて、個別ページは親テンプレートを継承するようにできる。たとえばHTML全体の枠組みやサイトに共通するデザインなどをまとめるケース。テンプレートの継承の要点は以下のとおり。
blockタグ→子テンプレートで具体内容を埋め込むブロックextends→継承元の親テンプレートを指定blockタグ→親テンプレートのblockタグの部分に埋め込む内容blockタグには識別名を書き、親・子でブロックを対応させる子テンプレートを呼び出したとき、親テンプレートのblockタグの部分に子テンプレートのblockタグの内容が埋め込まれたHTMLとなる。
なお継承ではないが、includeタグによって別に準備したHTMLの一部分を取り込むことができる。
まず、子テンプレートで単に親テンプレートをextendsで読み込むだけの例を確認する。
子テンプレートが継承する元の親テンプレート(layout.html)を以下のように準備する。要点は以下のとおり。
title要素、header要素、body要素にblockタグのブロックを書いている
title要素のblockには'Placeholder'という文字列を書いているheader要素のblockにはp要素とリストを書いているbody要素のblockには何も書いていない|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>{% block title %}Placeholeder{% endblock %}</title> </head> <body> <header> {% block header %} <p>Default Header Menu</p> <ul> <li>Login</li> <li>Signup</li> </ul> {% endblock %} </header> {% block content %} {% endblock %} </body> </html> |
子テンプレート(index.html)ではextendsタグによって親テンプレートを継承する。この場合のタグの引数は、view関数で呼ぶrender文の第2引数と同じで、テンプレートディレクトリーからの相対パス。
|
1 |
{% extends 'inheritance/layout.html' %} |
子テンプレートはこの1行だけなので、単にこのテンプレートの内容が親テンプレートの内容で埋められる。
ただし親テンプレートのblockタグに対する子テンプレートのblockがないので、以下のように解釈される。
blockに内容が定義されていれば、その内容が展開されるblockがタグだけで内容がなければ、何も引き継がれない。子テンプレートが引き継いだ親テンプレートの内容が解釈された結果、最終的なindex.htmlは以下のようになる。
title要素には'Placeholder'の文字が充てられるheader要素には、親で記述されたp要素とリストが埋められる{% block content %}のブロックには内容がないので、子要素にも何も引き継がれない|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Placeholeder</title> </head> <body> <header> <p>Default Header Menu</p> <ul> <li>Login</li> <li>Signup</li> </ul> </header> </body> </html> |
この結果、ブラウザーの表示は以下のようになる（ブラウザーのタブには'Placeholder'の文字が表示される。
Default Header Menu
次に、子テンプレートindex.htmlで親テンプレートの各blockの具体の内容を実装する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{% extends 'inheritance/layout.html' %} {% block title %}タイトル{% endblock %} {% block header %} <p>メニュー</p> <ul> <li>ログイン</li> <li>サインアップ</li> </ul> {% endblock %} {% block content %} <p>サイト内容</p> <ul> <li>サイト紹介</li> <li>内容一覧</li> </ul> {% endblock %} |
この結果、親テンプレートのblock部分に子テンプレートの対応するblockの内容が埋め込まれる。親テンプレートのblockに書かれた内容がある場合は、子テンプレートの内容で置き換えられる。
HTMLソースを確認すると、子テンプレートの内容が反映されていることがわかる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> </head> <body> <header> <p>メニュー</p> <ul> <li>ログイン</li> <li>サインアップ</li> </ul> </header> <p>サイト内容</p> <ul> <li>サイト紹介</li> <li>内容一覧</li> </ul> </body> </html> |
ブラウザーでの表示結果は以下のとおり（ブラウザーのタブには’タイトル'と表示される）。
サイト内容
これまでは親～子の継承だったが、さらに親～子～孫の継承を見てみる。
たとえばページの種類が、認証済みユーザー用と非認証のゲスト用の2通りに区分され、それぞれでメニューの内容を変えたいとする。このような場合は、以下のようにテンプレートを分けて継承させる。
まず、認証済みユーザー用のメニューを共通化し、これをユーザーホーム(index)で継承する例。先の例ではindex.htmlがlayout.htmlを継承したが、ここでは以下のように構成を変更する。
layout.html←index.htmllayout.html←authenticated.html←index.htmlサイト共通の基本的な枠組みはlayout.htmlで記述し、ユーザー認証中のHTML部分はauthenticated.htmlで、認証中の具体のページ内容をindex.htmlで実装している。
親テンプレートlayout.htmlはそのままとし、新たにauthenticated.htmlを以下の内容で準備する。ここでは{% block header %}のみを実装し、認証済みユーザー用のヘッダーメニューを表示させる。
|
1 2 3 4 5 6 7 8 9 |
{% extends 'inheritance/layout.html' %} {% block header %} <p>ユーザー用メニュー</p> <ul> <li>ユーザーホーム</li> <li>ログアウト</li> </ul> {% endblock %} |
index.htmlはauthenticated.htmlを継承し、孫テンプレートとなる。未実装の{% block title %}と{% block content %}を実装して「ログイン済みユーザー用の内容」とだけ表示させている。
|
1 2 3 4 5 6 7 8 9 |
{% extends 'inheritance/authenticated.html' %} {% block title %}ようこそ{% endblock %} {% block content %} <h1>ユーザーホームページ</h1> <p>ログイン済みユーザー用の内容</p> {% endblock %} |
index.htmlを呼び出すと、index.htmlでcontentとtitleが、authenticated.htmlでheaderが実装され、以下のように表示される。
ユーザー用メニュー
ユーザーホームページ
ログイン済みユーザー用の内容
次に非認証時のページとして、以下のような構成を追加する。
layout.html←unauthenticated.html←login.html全体共通の基本的な枠組みlayout.htmlは同じで、非認証時のHTML部分をuauthenticated.htmlにまとめ、非認証時の具体ページの例としてlogin.htmlを追加。
unauthenticated.htmlはauthenticated.htmlと同じように{% block header %}のみを実装し、ゲスト用のメニューを記述。
|
1 2 3 4 5 6 7 8 9 |
{% extends 'inheritance/layout.html' %} {% block header %} <p>ゲスト用メニュー</p> <ul> <li>ログイン</li> <li>サインアップ</li> </ul> {% endblock %} |
ログインページでは非認証時のunauthenticated.htmlを継承し、具体のタイトルと内容を記述。
|
1 2 3 4 5 6 7 8 9 |
{% extends 'inheritance/unauthenticated.html' %} {% block title %}ログイン{% endblock %} {% block content %} <h1>ログインページ</h1> <p>ユーザーログイン用の内容</p> {% endblock %} |
表示結果は以下のようになる。
ゲスト用メニュー
ログインページ
ユーザーログイン用の内容
blockタグの識別子が同じ名前で複数存在することはできない。たとえばtitle要素とページのh1要素が同じ内容なので以下のように2度使いしようとするとエラーになる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>{% block title %}Placeholeder{% endblock %}</title> </head> <body> {% comment %} <h1>{% block title %}Title Here{% endblock %}</h1> 同じブロック名のブロックは重複して書けない TemplateSyntaxError at /inheritance 'block' tag with name 'title' appears more than once {% endcomment %} </body> </html> |
基本はPythonのif ... elif ... elseと同じで、終了タグ{% endif %}で終える。
|
1 2 3 4 5 6 7 |
{% if .... %} .... {% elif %} .... {% else %} .... {% endif %} |
テンプレートの実例は以下の通り。
|
1 2 3 4 5 6 7 8 9 10 |
<p> {{ var }} is {% if var > 0 %} Poisive. {% elif var < 0 %} Negative. {% else %} Zero. {% endif %} </p> |
以下はPythonのif文との違いで、外すとTemplateSyntaxErrorになる。
()は使えない
{% if (he == gentle or she == tender) and they == love_each_other %} はエラーifのネストにする{% if d % 2 == 2 %}はエラー{% if d|divisable:2 %}はokif a == b/if a != bと同じ。
割愛。
DjangoのDTLにおけるフィルターの一般形式は以下のようになっている。
変数|フィルター:引数|フィルター:引数|・・・
フィルターは変数展開{{ .... }}でもタグ{% .... %}でも使えるが、それぞれで'|'や':'の前後にスペースを入れた時の挙動が異なるので整理する。
結論すると、DTLでフィルターを使う場合は'|'と':'の前後にはスペースを入れないと決めておくのが紛れがなくてよい。
'|'の前後のスペースは許されるが、':'の前後にスペースを入れるとTemplateSyntaxErrorになる。
{{ var|add:2 }} |
Ok |
{{ var |add:2 }} |
Ok |
{{ var| add:2 }} |
Ok |
{{ var|add :2 }} |
Error |
{{ var|add: 2 }} |
Error |
'|'の前後も':'の前後もスペースを入れるとTemplateSyntaxErrorになる。
{% if var|divisibleby:2 %} |
Ok |
{% if var |divisibleby:2 %} |
Error |
{% if var| divisibleby:2 %} |
Error |
{% if var|divisibleby :2 %} |
Error |
{% if var|divisibleby: 2 %} |
Error |
Djangoのテンプレート言語(DTL: Django Template Language)について整理する。
一行コメント{#...#}と複数行コメント{% comment %}...{% endcomment %}がある。
変数の内容を展開するには{{ 変数 }}と記述する。
変数の内容は、数値・文字列のほか、コレクションの要素や一般のオブジェクトの属性やメソッドの結果も展開可能。
DTLのタグは{% タグ %}と記述する。
主なタグには以下のようなものがある。
特殊機能
comment：複数行コメントcsrf_token：CSRF (Cross Site Request Forgeries)対策用制御
URL指定
forタグで始め、endforタグで終える。forタグの書き方はPythonのfor文と同じ。
|
1 2 3 |
{% for in .... %} .... {% endfor %} |
コレクションに対する操作の殆どはPythonと同じ。
リストの内容を順次取り出す例。
|
1 2 3 4 5 |
def for_tag(request): context = { 'medals': ['Gold', 'Silver', 'Bronze'], } return render(request, 'dtldemo/for_tag.html', context) |
|
1 2 3 4 5 6 |
<p>メダル</p> <ol> {% for medal in medals %} <li>{{ medal }} medal</li> {% endfor %} </ol> |
メダル
|
1 2 3 4 5 |
def for_tag(request): context = { 'dices': [[1, 3], [3, 3], [4, 2]], } return render(request, 'dtldemo/for_tag.html', context) |
|
1 2 3 4 5 6 |
<p> サイコロ： {% for dice1, dice2 in dices %} ({{ dice1 }}, {{ dice2 }}) {% endfor %} </p> |
辞書のキーと値を取り出す例。Pythonと同じで.itemsを付ける。
|
1 2 3 4 5 |
def for_tag(request): context = { 'capitals': {'Japan': 'Tokyo', 'France': 'Paris', 'US': 'WDC'} } return render(request, 'dtldemo/for_tag.html', context) |
|
1 2 3 4 5 6 |
<p>首都</p> <ul> {% for key, value in capitals.items %} <li>Country: {{ key }} - Capital: {{ value }}</li> {% endfor %} </ul> |
首都
for ... inの後には関数やリテラルは書けず、rangeやzip、enumerateはエラーになる。ただしリテラルは書けないが、view関数内で変数に代入しておけば実行可能。以下はrangeの例。
|
1 2 3 4 |
context = { 'var_range': range(5), } return render(request, 'dtldemo/for_tag.html', context) |
|
1 2 3 |
{% for i in var_range %} <p>{{ i }}</p> {% endfor %} |
zipやenumerateについても、view関数側で変数に代入しておけば使える。なおenumerateについては、forloop変数にカウンターが用意されている。
{% empty %}タグは{% for %}～{% endfor %}の間に入れる。forで使う変数が空の場合にループを実行せず、empty以下が実行されてループを終わる。
|
1 2 3 4 5 |
{% for .... in var $} ループ処理 {% empty %} 空の場合の処理 {% endfor %} |
変数の内容が以下の場合にemptyブロックが実行される。
None[]()''forタグにreversedを付すと、cの内容が逆順でeに取り出される。
|
1 2 3 |
{% for e in c reversed %} .... {% endfor %} |
forloop変数によって、ループ中でカウンター値やループの先頭・末尾データなどを得ることができる。
forloop.counter |
ループカウンター値(初期値：1) |
forloop.counter0 |
ループカウンター値(初期値：0) |
forloop.revcounter |
逆順カウンター値(終了値：1) |
forloop.revcounter0 |
逆順カウンター値(終了置：0) |
forloop.first |
最初のループならTrue |
forloop.last |
最後のループならTrue |
forloop.parentloop |
多重ループの外側の値 |
以下はrevcounter0の例。
|
1 2 3 4 5 |
def for_tag(request): context = { 'countdown': ['three', 'two', 'one', 'zero!'], } return render(request, 'dtldemo/for_tag.html', context) |
|
1 2 3 4 5 6 |
<p>countdown</p> <ul> {% for c in countdown %} <li>{{ forloop.revcounter0 }}-{{ c }}</li> {% endfor %} </ul> |
countdown
forloop.first、forloop.lastは最初や末尾のループだけ別の処理をさせたいときに便利。
|
1 2 3 4 5 |
def for_tag(request): context = { 'firstlast': [1, 2, 3, 4], } return render(request, 'dtldemo/for_tag.html', context) |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<p>first and last</p> <p> {% for i in firstlast %} {% if forloop.first %} <{{ i }}, {% elif forloop.last %} {{ i }}> {% else %} {{ i }}, {% endif %} {% endfor %} </p> |
first and last
<1, 2, 3, 4>
この例では、最初の要素の前に'<'を出力し、最後の要素の後ろにカンマを付けずに'>'を出力する。
foroop.parentloopは言わば「親ループの～」という意味で、この後にcounterやfirstなどを付けて親ループの値を参照する。たとえば、
forloop.parentloop.counter：親ループの現在のカウンター値forloop.parentloop.first：親ループが現在最初のループ中ならTrueたとえば以下の例では、二重ループを回しながら、一番最初の行の先頭要素の前と一番最後の行の末尾要素の後に別の文字を出力させている。
|
1 2 3 4 5 |
def for_tag(request): context = { 'digits': [1, 2, 3], } return render(request, 'dtldemo/for_tag.html', context) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<p>parentloop</p> <code> {% for i in digits %} {% for j in digits %} {% if forloop.parentloop.first and forloop.first %} < {% endif %} {{ i }}-{{ j }} {% if forloop.parentloop.last and forloop.last %} > {% endif %} {% endfor %} <br> {% endfor %} </code> |
parentloop
< 1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3 >
一行コメントは{#...#}。コメント内で改行はできない。
|
1 |
{# コメント文 #} |
複数行コメントは{% comment %} ... {% endcomment %}。
|
1 2 3 4 5 |
{% comment %} コメント文 ・・・・・ コメント文 {% endcomment %} |
コメント自体の注釈を書くこともできる。
|
1 2 3 4 5 |
{% comment "コメントの注釈" %} コメント文 ・・・・・ コメント文 {% endcomment %} |
Djangoのテンプレート内での変数展開は{{ 変数 }}と記述。
[]ではなくドット(.)で添字やキーを指定.)で指定単純変数の展開の例を以下に示す。まずview関数。
|
1 2 3 4 5 6 7 8 9 |
from django.shortcuts import render def variable(request): context = { 'var_float': 3.1415, 'var_string': 'ABCDいろはに', } return render(request, 'dtldemo/variable.html', context) |
テンプレートの変数展開部分。
|
1 2 3 4 5 |
<p>単純変数</p> <ul> <li>実数値：{{ var_float }}</li> <li>文字列：{{ var_string }}</li> </ul> |
ブラウザーの表示。
単純変数
コレクションを参照する変数を展開すると、変数をprint文でコンソール出力した時の形式で展開される。
|
1 2 3 4 5 6 7 8 9 10 |
from django.shortcuts import render def variable(request): context = { 'var_list': ['one', 2, [3, 'three']], 'var_tuple': ('one', 2, (3, 'three')), 'var_dict': {'one': 1, 'two': 2, 'three': 3}, } return render(request, 'dtldemo/variable.html', context) |
テンプレートの変数展開部分。
|
1 2 3 4 5 6 |
<p>コレクション</p> <ul> <li>リスト：{{ var_list }}</li> <li>タプル：{{ var_tuple }}</li> <li>辞 書：{{ var_dict }}</li> </ul> |
ブラウザーの表示。
コレクション
コレクションの要素を展開する場合、Pythonの[]と違ってドット(.)に続けて添字の数値やキーの文字列をそのまま書く。
|
1 |
{{ 変数.添字 }} または {{ 変数.キー }} |
多次元の場合には、次数に対応して連ねていく。
|
1 |
{{ 変数.1次元目.2次元目 }} |
コレクション全体と同じ例で要素を表示したいときのテンプレートの例。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<p>コレクションの要素</p> <ul> <li> リストの要素：{{ var_list.0 }}, {{ var_list.1 }}, {{ var_list.2.0 }}, {{ var_list.2.1 }} </li> <li> タプルの要素：{{ var_tuple.0 }}, {{ var_tuple.1 }}, {{ var_tuple.2.0 }}, {{ var_tuple.2.1 }} </li> <li> 辞書の要素 ：{{ var_dict.one }}, {{ var_dict.two }}, {{ var_dict.three }} </li> </ul> |
ブラウザーの表示。
コレクションの要素
クラスのインスタンスを参照する変数も展開できる。以下はviews.pyで単純なクラスを定義して、そのインスタンスをテンプレートに渡している。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
from django.shortcuts import render class BinaryOperation: def __init__(self, a, b): self.a = a self.b = b def add(self): return self.a + self.b def variable(request): var_obj = BinaryOperation(2, 3) context = { 'var_obj': var_obj, } return render(request, 'dtldemo/variable.html', context) |
テンプレートでのオブジェクトの展開は、以下の3種類となる。
.)で繋いで得られる.)で繋ぐと、メソッドの実行結果が得られる|
1 2 3 4 5 6 |
<p>オブジェクト</p> <ul> <li>オブジェクト全体：{{ var_obj }}</li> <li>オブジェクトの属性：{{ var_obj.a }}, {{ var_obj.b }}</li> <li>オブジェクトのメソッド：{{ var_obj.add }}</li> </ul> |
ブラウザーでの表示。
オブジェクト
基本形
フィルターはテンプレート中の変数を加工するもので、Djangoによる組み込みフィルターが多数用意されている。フィルターの基本形は以下のとおり。
{{ 変数|フィルター }}
わかりやすい例としては、変数の文字列の文字数を返すlengthがある。以下のテンプレートでは、var_stringに格納されている文字列とその文字数を表示している。
|
1 |
文字列{{ var_string }}の文字数は{{ var_string|length }}です |
変数の内容が'abcd'の場合、表示は以下のようになる。
|
1 |
文字列abcdeの文字数は5です |
フィルターには引数を持つものもある。引数はリテラルとする必要がある。
{{ 変数|フィルター:引数 }}
以下の例はaddフィルターで、元の変数の内容に引数の内容を加える。
|
1 2 |
<p>{{ var_two|add:3 }}</p> <p>{{ var_string|add:'XYZ'}}</p> |
var_two=2、var_string='abcde'の場合、表示は以下のようになる。
|
1 2 |
5 abcdeXYZ |
フィルターのチェーンによって、複数のフィルターを作用させることができる。
{{ 変数|フィルター[:引数]|フィルター[:引数] ... }}
以下の例では変数の文字列に文字列定数を連結した上で文字数を得ている。
|
1 |
{{ var_string|add:'efg'|length }} |
var_string='abcde'の場合、結果は’8'となる。
'|'や':'の前後にスペースを入れても問題ないが、タグ({% ... %})でフィルターを使う場合にはエラーとなる場合がある。
紛らわしいので、「フィルターを使うときは間のスペースなし」と決めておく方がよい。
HTMLや埋め込まれたデータを含むテンプレートを使ったアプリケーションの基本。流れは以下の通り。
ここでは以下のことを整理している。
関連記事
プロジェクトディレクトリーをtemplatebasicsとし、settings.pyなどを含むサブディレクトリーをconfigとする。
|
1 2 |
$ mkdir templatebasics && cd templatebasics $ django-admin startproject config . |
初期設定とサーバー起動で動作確認しておく。
テンプレートを表示させるアプリケーションtemplatedemoを作成する。
|
1 |
$ python3 manage.py startapp templatedemo |
そしてアプリケーションをsettings.pyのINSTALLED_APPSに追加登録する。
|
1 2 3 4 5 6 7 8 9 |
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'templatedemo', ] |
テンプレートの配置場所はsettings.pyのTEMPLATESで設定する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [], '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', ], }, }, ] |
DIRSは任意の場所・ディレクトリー名のパスを設定する。またAPP_DIRをTrueに設定すると、各アプリケーションディレクトリー下のtemplatesディレクトリーが探索される。
複数のテンプレートディレクトリーは一括して同列に扱われ、各ディレクトリーのサブディレクトリーも再帰的に探索される。
デフォルトの設定では、各アプリケーションディレクトリー下のtemplatesディレクトリーのみが対象となっている。
ここでは、以下の場所にテンプレートディレクトリーを置いて設定していく。
index.htmlとしているtemplatesとする|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
templatebasics/ ├── config │ ├── __init__.py │ ├── asgi.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── manage.py ├── templatedemo │ ├── __init__.py │ ├── admin.py │ ├── apps.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── [templates] <- APP_DIRS=Trueで探索される │ │ └── [templatedemo] │ │ └── [index.html] │ ├── tests.py │ └── views.py └── [templates] <- DIRSで設定：名前は任意 └── [index.html] |
作成したアプリケーションディレクトリーtemplatedemoの下にtemplatesディレクトリーを作成し、その下に更にサブディレクトリーtemplatedemoを作成する。
作成したサブディレクトリー下にindex.htmlファイルを作成して以下を記述。
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>アプリケーション下</title> </head> <body> <h1>アプリケーション下</h1> </body> </html> |
TEMPLATESのDIRSにプロジェクト直下のtemplatesディレクトリーを探索するよう追加。
|
1 2 3 4 5 6 7 8 |
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': ['templates'], 'APP_DIRS': True, ........ }, ] |
os.pathを使う方法もありその場合はimport osが必要になるが、上記の記述でも同じ効果。
プロジェクトディレクトリー直下にtemplatesディレクトリーを作成する。サブディレクトリーは作成しない。
|
1 |
$ mkdir templates |
作成したtemplatesディレクトリー下にindex.htmlファイルを作成して以下を記述。
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>プロジェクト直下</title> </head> <body> <h1>プロジェクト直下</h1> </body> </html> |
アプリケーションディレクトリーtemplatedemoのviews.pyを編集して、view関数を定義する。
view関数でレンダリングするテンプレートを指定するため、プロジェクト直下とアプリケーションディレクトリー下2か所のテンプレートに対応する関数を記述している。要点は以下のとおり。
def 関数名(request):で定義render関数
TEMPLATESで設定したすべてのテンプレートディレクトリー下が一括して扱われる|
1 2 3 4 5 6 7 |
rom django.shortcuts import render def index_project(request): return render(request, 'index.html') def index_application(request): return render(request, 'templatedemo/index.html') |
複数テンプレートディレクトリーが一括して扱われ、テンプレートの指定がテンプレートディレクトリーからの相対パスとなるため、サブディレクトリーを設定した意義が確認できる。
これらのview関数をURLから呼び出すためurls.pyに記述を追加する。
|
1 2 3 4 5 6 7 8 9 |
from django.contrib import admin from django.urls import path from templatedemo import template_application, template_project urlpatterns = [ path('admin/', admin.site.urls), path('application', template_application) path('project', template_project) ] |
ここで開発用Webサーバーを起動して、ブラウザーで以下の入力に対応したページが表示されるのが確認できる。
localhost:8000/projectlocalhost:8000/applicationテンプレートにはHTMLのほかに、view関数から受け取った変数を埋め込んだり、繰り返しや条件分岐による出力の変更といった制御をさせることができる。そのための言語をDTL (Django Template Language)と言う。
{{ 変数 }}：変数の内容を展開してHTMLに埋め込む{% 文 %}：for～endforによるループやif～elif～endifによる条件分岐で出力を制御するたとえばtemplatedemoアプリケーションのviews.pyで、index_application関数を以下のように変更する。
|
1 2 3 |
def index_application(request): text = 'アプリケーション下' return render(request, 'templatedemo/index.html', {'title': text}) |
ここでは、変数textを定義して、これを'text'をキーとする辞書の値としてrender関数の第3引数に渡している。
次に、templatedemoアプリケーション下のindex.htmlテンプレートを以下のように変更する。
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>{{ title }}</title> </head> <body> <h1>{{ title }}</h1> </body> </html> |
表示結果は、ブラウザーの上部またはタブと見出しに同じ「アプリケーション下」が表示される。
このように、ビュー側で処理した結果を変数としてテンプレートに渡し、HTMLとして表示させることができる。
先のindex_application関数を以下のように変更する。
|
1 2 3 4 5 6 7 |
def index_application(request): context = { 'title': '浦島太郎', 'scenes': ['亀を助ける', '玉手箱をもらう', '竜宮城に行く', '浜へ帰る', '玉手箱を開けて年寄りになる'], } return render(request, 'templatedemo/index.html', context) |
ここでは第3引数をcontextとし、この変数に2つの要素を持つ辞書を入れている。1つ目の要素はタイトル、2つ目の要素は物語のシーンを収めた配列としている。
これを受け取るindex.htmlを以下のように変更する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>{{ title }}</title> </head> <body> <h1>{{ title }}</h1> <p>物語のシーン</p> <ol> {% for scene in scenes %} <li>{{ scene }}</li> {% endfor %} </ol> </body> </html> |
scenesで渡された配列の要素を、DTLのfor～endforでループしながら取り出し、li要素として並べている。この結果、出力されたHTMLでは5つのシーンがリストとして表示される。
同じテンプレートを使って、タイトルとシーンを桃太郎やかぐや姫などと変化させることができる。