三人寄れば文殊の知恵

Two heads are better than one, the more the merrier.

Django チュートリアル[テンプレート]

こんにちは。Catchball21　技術部の森本です。

本日はTemplate(テンプレート)についてご説明します。
DjangoによるWebアプリ開発のチュートリアルは今回で最後になります。

Template(テンプレート)

まずは前回最後のパートで作成したindex.htmlについて復習しましょう。

index.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>SimpleBoard</title>
  </head>
  <body>
    <form action="/" method="post">

    {% csrf_token %}
    {{ form }}
    <input type="submit" value="登録">
    </form>

    {% for entry in entries %}

    <p>{{ entry.entry }}</p>

    {% endfor %}

  </body>
</html>

基本的にはhtmlそのものですが、{{ entry.entry }}や{% for entry in entries %}等、いくつか見慣れない構文がみられますね。

Djangoのテンプレートでは変数やタグを使用することができます。
上記では{{ entry.entry }}が変数、{% for entry in entries %}、 {% csrf_token %}がタグにあたります。

テンプレート中で変数は{{ spam }}と記載します。
コンテキストでspam: 1として渡した場合、テンプレート中の{{ spam }}は1に置き換えられます。

タグはテンプレート内で何らかの処理を行いたいときに使用します。
テンプレート中でタグは{% egg %}と記載されます。
例えば、テンプレート中で分岐処理を行いときは、{% if ... %}タグ、ループ処理を行いたい時は{% for ... %}タグ等が標準で用意されています。
もしくは、タグは自分で定義することもできます。

前回作成したindex viewでテンプレートに渡されたコンテキストを確認しましょう。

index.html 
1
2
3
4
5
6
7
8
9
10
11
12

    entries = Board.objects.all()
    form = BoardForm()
    return render_to_response(
        'index.html',
        context_instance=RequestContext(
            request,
            {
                'form': form,
                'entries': entries
            }
        )
    )

上記ではコンテキストとして、form変数にはBoardFormオブジェクト、entries変数にはBoardモデルのquerysetが渡されています。
Formオブジェクトをテンプレートに渡した場合、テンプレート中でHTMLのフォームとして展開します。
querysetはイテレータブルなオブジェクトなので、index.htmlでは{% for ... %}タグを使用して、格納されているオブジェクトを取り出しています。

最後にBootStrapで少しレイアウトを整えたindex.htmlを記載します。

index.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>SimpleBoard</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="//code.jquery.com/jquery.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  </head>
  <body>

    <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <a class="navbar-brand" href="#">SimpleBoard</a>
      </div>
    </nav>

    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <form class="form-horizontal" role="form" action="/" method="post">

          {% csrf_token %}


          <div class="form-group">
            <div class="col-lg-10">

              {{ form.entry }}

            </div>
          </div>
          <div class="form-group">
            <div class="col-lg-offset-2 col-lg-10">
              <button type="submit" class="btn btn-default">登録</button>
            </div>
          </div>
        </form>


        {% for entry in entries %}
          <div class="panel panel-default">
            <div class="panel-body">
              {{ entry.entry }}
            </div>
          </div>
        {% endfor %}

      </div>
      <div class="col-md-4"></div>
    </div>
  </body>
</html>

python manage.py runserverで開発サーバを起動して、http://127.0.0.1:8000にアクセスすると下記のような画面が表示されると思います。
this is a SimpleBoard

最後に

いささか駆け足でDjangoによるWebアプリ開発について解説してまいりましたが、いかがでしたか。
DjangoによるWebアプリ開発の利便性を、多少なりとも感じて頂ければ幸いです。

今回使用したサンプルの完全版は、以下で参照することができます。
shnmorimoto / django_sample_simple_board — Bitbucket

また時間の都合上、今回のチュートリアルで解説できなかったTopicsの一部を以下に記載します。
参考になりそうな、参照先も記しますので、お時間あるときにご覧になってみてください。