前回までのプログラミング学習コラムに続き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デザインを簡単にするためのツール紹介しようと思います。最後まで読んでいただき、ありがとうございました。次回はいよいよ最終回ですので、ご期待ください。