Djangoで、webページをつくるといっても基本になるのはやはりhtmlです。
表示内容のベースとなる静的なhtmlページを用意して、そこにDjangoの仕組みを使っていろいろ手を加えてからユーザーに完成形のページを返すというやり方になります。
この静的なhtmlページをうまく利用する方法がtemplateを使うと実現できます。
templateを使うための準備
まず、準備として、Django用のプロジェクトを作成し、アプリを１つ追加しておきます。
準備の部分がよくわからないという方は、以下のページを参考にとりあえず作ってみてください。
次に、追加したアプリの中にtemplatesフォルダを作成します。
フォルダー構成は、以下のようになります。
.
├── app_name
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── templates # これ追加しました
│ ├── tests.py
│ └── views.py
├── manage.py
└── project_name
├── __init__.py
├── __pycache__
│ ├── __init__.cpython-36.pyc
│ └── settings.cpython-36.pyc
├── asgi.py
├── settings.py
├── urls.py
└── wsgi.pyさらに、いま作成したtemplatesフォルダの中にapp_nameフォルダを作成します。
フォルダ構成は、以下のようになります。
.
├── app_name
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── templates
│ │ └── app_name # これ追加しました
│ ├── tests.py
│ └── views.py
├── manage.py
└── project_name
├── __init__.py
├── __pycache__
│ ├── __init__.cpython-36.pyc
│ └── settings.cpython-36.pyc
├── asgi.py
├── settings.py
├── urls.py
└── wsgi.pyこのapp_nameフォルダの中に、htmlファイルを作成していきます。
今回は、index.htmlページを作成します。
ファイルの中身は、基本的には普通のhtmlの内容になります。
<!DOCTYPE html>↲
<html lang="ja">↲
<head>↲
<meta charset="UTF-8">↲
<title>{{ title }}</title>↲
</head>↲
<body>↲
{{ message }}↲
</body>↲
</html>↲普通のhtmlといいながら、一部 {{ }}で囲まれた見慣れないものが混ざっています。
この部分は、djangoから値を埋め込むための変数みたいなものです。
中の「title」とか「message」は、勝手につけた変数名に相当するものです。
views.pyの編集
次に、views.pyを編集して、いま作成したtemplateファイルを利用してページを表示していきます。
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, 'app_name/index.html', {'title': 'ページタイトル',
'message': 'テンプレート使いました。', })render関数は、ショートカット関数と呼ばれるものの一つです。
この関数を使うと、
- テンプレートを読み込む
- テンプレートに値を埋め込む
- 結果をHttpResponseオブジェクトで返す
という処理をまとめてやってくれます。
第２引数で、テンプレートファイルを指定しています。
第３引数で、テンプレートファイルに作成した２つの変数の値を設定しています。
開発用サーバを起動して、ページにアクセスしてみましょう。
タイトル、ページコンテンツに設定した値が反映されていますね。
こんな感じで、ベースとなるhtmlファイルを利用したページ作成が簡単にできるようになっています。
一応、ページソースを表示させてみると
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
テンプレート使いました。
</body>
</html>templateで作成したindex.htmlの変数に設定した値が埋め込まれていることがわかります。
次回も、templateを使う方法について見ていきたいと思います。
サイトの雛形となるページを使って、メニューによって中身のコンテンツを変える方法を紹介したいと思います
コメント