前回までのプログラミング学習コラムに続き9回目の勉強内容です。

こんにちは、ぴかしです。前回は、Kay Frameworkのモデルを利用し、Twitterクライアントに機能を追加しました。今回はテンプレートの継承について解説し、クライアントのデザインを変更してみます！開発環境はMac OS 10.8、GAE SDK 1.8.3、Kay Framework2.0です。

 テンプレートの継承

Kay Frameworkでは、Jinja2 というテンプレートエンジンが利用されています。ここでは、Jinja2におけるテンプレートの継承を見ていきます。

Webアプリケーションを作成する際、レイアウトはどのページにも共通していると思います。そこで、それらのページのベースとなるレイアウトを作っておき、各ページでそれを利用しよう！というのがテンプレートの継承です。これを利用することで、同じ要素を何回も書かずにすみ、各ページのコンテンツなどの部分だけをオーバーライドすればよいことになります。

では、ベースとなるテンプレートtemplates/base.htmlを作成しましょう。ページごとに変更したい部分は、{% block hoge %}{% endblock %}と記述します。例えば、タイトルはページによって変更したいので、base.htmlに以下のように記述しておきます。

<title> {% block title %}{% endblock %}</title>

base.htmlを継承するには、まず1行目に以下を記入します。

{% extends "client/base.html" %}

そして、以下のようにblockの内部に記述することで、タイトルをオーバーライドすることができます。とても簡単です。

{% block title %}Title!!{% endblock %}

外部ファイルとしてJSやCSSを読み込む場合は、ファイルを置く場所に注意が必要です。例えばstyle.cssを読み込む場合、以下の階層に置いて下さい。

twitter-client
├── kay
│ └── media
│ └── style.css
└── client

そして、以下のようにテンプレートから読み込むことができます。

<link rel="stylesheet" href="{{ internal_media_url }}/style.css" type="text/css">

テンプレートの継承を利用するとすっきりと書くことができるので、ぜひ利用して下さい！

私はこのようにTwitterに近いデザインにしてみました。ちなみにCSSはほとんど自分で書いおらず、Twitter BootstrapというCSSフレームワークを利用しています。

次回はこのような、Webデザインを簡単にするためのツール紹介しようと思います。最後まで読んでいただき、ありがとうございました。次回はいよいよ最終回ですので、ご期待ください。