WagtailでWEBページを表示する 前編

テンプレートでWEBページ Wagtail布教活動その2

WagtailのWEBページは動的に生成されます。基本的なうごきは

1.ユーザーからURLにリクエストがある
2.URLに応じたクラスのメソッドが実行される
3.結果をHTMLファイルとして生成してレスポンスする

となります。

WEBページ生成のしくみ

HTMLファイルはテキストデータなので、<html>から始まり</html>で終わるまでの文字列をレスポンスするわけですが、これを純粋にPythonのソースコードだけでやるとものすごい大変です。

そこでHTMLはHTMLファイルとして別に作成しておき、そこへプログラムから動的に生成される値を組み込んで最終的に1つのページのHTMLファイルとしてレスポンスするという手法が使われます。

この元となるHTMLファイルをテンプレートと呼び、大概のWEBアプリフレームワークにはテンプレートからページを生成するテンプレートエンジンというしくみがあります。もちろんWagtail(正確にはDjango)にもです。

テンプレートを使うと、ページのデザインはHTMLで、値を生成するロジックはPythonで、と分業が出来るようになります。これはPythonを知らなくてもWagtailのページデザインができる、HTMLを知らなくてもWagtailのロジックは作れることを意味します。大規模なサイトであれば、それぞれの専業が別個に同時進行で作業をすすめていけるわけです。

Wagtailのテンプレートは、特に専用のフォーマットがあるわけではなく通常のHTMLファイルです。そこへプログラムが生成した値が埋め込まれます。

たとえばこのサイトのページは次のような構成になっています。

wagtail_home2.png

黄色のエリアはPythonスクリプトが動的に生成しています。それ以外はテンプレートから出力されています。

目次も動的に生成していますが、JavaScriptでやっているのでテンプレート側に含まれています。

テンプレートの使い方

それでは、前回作成したプロジェクトでテンプレートを使ってWEBページを表示してみます。実は前回表示したWagtailのデモページもテンプレートで表示されたものなのですが、今回は用意されたものではなく、自前のページを表示させます。

プロジェクトは次のようなフォルダ構成になっています。

wagtail_home1.png

テンプレートを確認する前に、各フォルダの意味合いですが、プロジェクトフォルダ直下にあるフォルダはアプリを表わします(.ideaはIDEの管理用なのでスルーしてください)。

アプリとはWagtailの上で動作している機能の単位と思ってください。プロジェクト名と同じ名前のフォルダ(mysite)はWagtailそのものを管理するための設定値や、プロジェクト全体で使用するファイル等を格納しています。

初期状態ではhomeアプリとsearchアプリがあることがわかります。これらはWagtailが自動作成したもので、homeアプリはホームページを表示するアプリ、searchアプリは検索機能を提供するアプリです。ここに必要に応じて自分でアプリを追加していくことができます。


さて、homeアプリを展開していくと、home / templates / home / の中にhome_page.htmlとwelcome_page.htmlが見つかります。これがテンプレートです。

このようにアプリ直下にtemplatesフォルダを作成し、その中にアプリ名のフォルダを作成して、そこへテンプレートファイルを配置します。少々面倒に感じますが、この構成は自作アプリでも守ってください。それとテンプレートは命名規則が厳格に定められているので、リネームはしないでください。

Wagtailの初期状態ではホームページとしてhomeアプリのhome_page.htmlが表示されるようになっています。

home_page.htmlを開いてみると、次のような内容でHTMLの体を成していないのがわかります(コメントは省略しています)。

{% extends "base.html" %}
{% load static %}

{% block body_class %}template-homepage{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/welcome_page.css' %}">
{% endblock extra_css %}

{% block content %}
{% include 'home/welcome_page.html' %}
{% endblock content %}

かろうじてlinkタグが確認できるくらいですね。

これは{% extends "base.html" %}に秘密があります。

{% %}はWagtail(Django)だけが解釈するタグで、これによりテンプレート上に様々なロジックを仕込むことができます。

{% extends %}タグで継承するテンプレートを指定しています。継承とはすなわち「大部分は継承元のbase.htmlと一緒なんだけど、違うところだけこっちに書いとくわ」ということです。

では、base.htmlはどうなっているのか見てみましょう。
ファイルは プロジェクト名(mysite) / templates / にあります。

wagtail_home3.png

開いてみると、今度は概ねHTMLの体裁であるのがわかります。

{% load static wagtailuserbar %}

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <title>
            {% block title %}
                {% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}
            {% endblock %}
            {% block title_suffix %}
                {% with self.get_site.site_name as site_name %}
                    {% if site_name %}- {{ site_name }}{% endif %}
                {% endwith %}
            {% endblock %}
        </title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        {# Global stylesheets #}
        <link rel="stylesheet" type="text/css" href="{% static 'css/mysite.css' %}">

        {% block extra_css %}
            {# Override this in templates to add extra stylesheets #}
        {% endblock %}
    </head>

    <body class="{% block body_class %}{% endblock %}">
        {% wagtailuserbar %}

        {% block content %}{% endblock %}

        {# Global javascript #}
        <script type="text/javascript" src="{% static 'js/mysite.js' %}"></script>

        {% block extra_js %}
            {# Override this in templates to add extra javascript #}
        {% endblock %}
    </body>
</html>

とりあえず、細かいところは置いておいて、いくつかある
{% block ~ %} {% endblock %}
というタグに注目してください。

このタグがhome_page.htmlにもあったのにお気づきでしょうか?

感のいい方はわかったと思いますが{% extends %}タグで継承を行うと
継承元の{% block ~ %} {% endblock %}
継承先の{% block ~ %} {% endblock %}
組み込まれた状態でテンプレートが作成されます。

継承元に穴埋め問題があり、継承先に答えだけ書いてあると言えばわかりやすいでしょうか。簡単に図にすると次のようになります。

wagtail_home6.png

いくつものページで流用する部分だけを定義したテンプレートを継承して各ページのテンプレートを作成することで、何度も同じコードを書かなくてよくなり、統一されたデザインのページになります。あとから変更したいところができた場合も継承元を書き換えれば、それを継承している全ページにも変更が適用されます。

blockの名前は継承元と継承先で同じであれば何でも構いません。ページのメインコンテンツを差し込む部分は{% block content %}とするのがわかりやすくていいでしょう。

理屈がわかったところで、home_page.htmlの{% block content %}タグの中に適当に文字を打ってみましょう。

~省略~
{% block content %}
    <h1>さいたまさいたま</h1>
{% include 'home/welcome_page.html' %}
{% endblock content %}

開発サーバーを起動してページを表示してみます。

アドレスは http://localhost:8000/ です。

wagtail_home4.png

入力した文字は表示されましたが、前回のデモページも一緒に出力されてしまいました。

これは{% include 'home/welcome_page.html' %}のしわざです。{% include %}タグでは指定したHTMLファイルをその部分に差し込むことができます。{% block %}は部分的にでしたが、{% include %}は丸ごとです。

もうデモページはいらないので{% include %}タグは消します。デモページ用のCSS読み込みもいらないので消します。最終的にhome_page.htmlはこうなりました。

{% extends "base.html" %}

{% block content %}
    <h1>さいたまさいたま</h1>
{% endblock content %}

ページを表示すると

wagtail_home5.png

テンプレートを使って自前のページを表示できました。しかし、このようにHTMLに直打ちしていたのでは、CMSの意味が全くないですね。

ここからWagtailが動的にページを生成するためのタグを追加していくわけですが、長くなってしまったので次回にします。

次回

WagtailでWEBページを表示する 後編

related pages
Wagtailのはじめかた
CMSもPythonにしよう! Wagtail布教活動その1

CMSはPHPの天下となって久しいですが、Python使いなら、全部Pythonで済ませたいですよね。そんなあなたにWagtailです。CMSもPythonにすれば、WEBサイト作成のためだけにわざわざPHPを習得する必要がなくなり、WEBサーバーにPHPをインストールしなくてよくなります。

Read More ...
WagtailでWEBページを追加する
ページの追加方法 Wagtail布教活動その4

WagtailでWEBページを追加するのは簡単です。ここからがCMSの本領発揮です。前回作成したホームページをベースに内容が異なるページを追加していきます。

Read More ...
WagtailでWEBページを表示する 後編
管理サイトでページ編集 Wagtail布教活動その3

Wagtailのページはmodels.pyへクラスのかたちで定義していきます。やり方は簡単で、クラスのフィールドとして必要な項目を定義して、どのようなデータを入れるのかをdjango.db.modelsモジュールのクラスで指定します。

Read More ...
この記事の
作成日

2020-01-25

更新日

2020-03-24

ページ内検索
目次
WEB MASTER
さいた
神エクセル撲滅協会理事(自称)
さいたま市民 埼玉こそ地上の楽園