Blogger Glass (以下、BG)は Blogger で作ったブログの記事を表示するためのアプリだ。その目的は、Blogger の表示用テンプレートを変更することなく、独自の外観でブログ記事を見ることにある。Blogger の提供する(複雑きわまりない構造の)テンプレートに手を入れることなく、記事の見た目を変える。それが BG を作った動機だ。
記事の一覧から内容の表示を作り込み、ブログ閲覧用アプリとしては最小限の機能を備えるようになった。まだ追加したい機能もあるが、このあたりで最初の目的に立ち返り、独自の外観を与えることにしたい。つまり、スタイルを定義するということだ。
テンプレートのリファクタリング
現在、BG には、一覧表示、内容表示、設定という 3 つの画面が定義されている。それぞれ、listview.html、postview.html そして settingsview.html というテンプレートから作られている。まずは、このテンプレートたちをリファクタリングすることから始める。
GAE に組み込まれているのテンプレートシステムの Django では、基本となる共通のテンプレートを定義しておき、画面ごとに差分を定義するという方法を使うことができる。ちょうど、(クラスベースの)オブジェクト指向プログラミング言語における、継承による実装の共有のようなことができるのだ。
以下のように、共通となるテンプレートに {% block foo %} 〜 {% endblock %} で上書き可能なブロックを定義しておく。
(src/base.html より) [...snip...] <div id="contents"> {% block content %} <p>main content area</p> {% endblock %} </div> [...snip...]
個別のテンプレート側では上書きしたいブロックを定義すれば良い。共通テンプレートの内容から、そのブロックだけを置き換えたものが実際のテンプレートになる。
(src/listview.html より)
{% extends 'base.html' %}
[...snip...]
{% block content %}
<ol>
{% for entry in view.content %}
<li><a href="/post/?id={{ entry.get_post_id }}">{{ entry.title.text }}</a></li>
{% endfor %}
</ol>
{% endblock %}
画面(ビュー)の構造
続いて、画面の構造の見直し。以下がその概要だ。/html/body/section が、個別の画面により変化する領域で、他は(少なくとも構造は)共通になる。
html
+-- head
| +-- meta[charset]
| +-- title
| +-- link[stylesheet]
+-- body
+-- header
| +-- nav
| | #top-menu
| | +-- span.menu-item
| | +-- ...
| +-- h1
+-- section
| +-- #view-header
| +-- #contents
| +-- #view-footer
+-- footer
個別画面で変化する画面要素と内容の対応を以下に示す。一部、未実装の内容もふくまれている。
| 画面 | view-header | contents | view-footer |
|---|---|---|---|
| 一覧表示 | ページ番号 | 記事一覧 | ページ切り替えリンク |
| 内容表示 | 記事タイトル | 記事本文 | ラベル (未実装) 最終更新日時 (未実装) |
| 設定 | 「Settings」 | 設定項目 | 最終更新日時 (未実装) |
今日はここまで。実際の CSS の定義は次回に。
関連リンク
- 「Using Django with Appengine」邦訳 (WebOS Goodies)
- The Django template language: For template authors
- Blogger Glass (GAE アプリ)
0 件のコメント:
コメントを投稿