細かな機能の追加はまだ残っているが、Blgger Glass にとっての主機能となる 2 つの実装が完了した。すなわち、(a) 記事の一覧表示、(b) 個々の記事の内容表示、の 2 つだ。
細部の作り込みに移る前に全体の構造を見直しておきたい。つまり、今回のお題は、リファクタリングだ。
ウェブアプリの 2 層構造
「Python で書いたフィルタを GAE に載せる #3」の「ウェブアプリのテンプレート」では、GAE でテンプレートシステムとして使う Django の(HTML 以外の)記述は、あくまでも HTML 中に配置するオブジェクトを出力するための補助、なのだと書いた。そして、この「配置するオブジェクト」を定義することが、プレゼンテーション層とバックエンド層を分離することになる、と。これは言い換えると、ウェブアプリを 2 つの層からなる多層構造として作る、ということになる。
(「テンプレートシステム入門 (2) 基礎編」より)
何らかの表示を伴うアプリケーションは、大きく「ビジネス層」と「プレゼンテーション層」の 2 つに分けることができます。
- ビジネス層
- 何 (What) を表示するか? を司る層であり、メインプログラムが担当します。
- プレゼンテーション層
- どう (How) 表示するか? を司る層であり、テンプレートシステムが担当します。
仕組みとしては、ビジネス層であるメインプログラムがデータを用意し、それをプレゼンテーション層であるテンプレートシステムに渡すことでデータが表示されます
この記事では、わたしがバックエンド層と呼んだものをビジネス層と名付けており、その役割は「何(What)を表示するか？ を司る層」としている。一方、「プレゼンテーション層」は「どう(How)表示するか？ を司る層」だ。ビジネス層という名前は気に入らないが、それぞれに与えられた役割は明確でわかりやすい。
以上を踏まえ、Blgger Glass のプレゼンテーション層のデザインを考え直してみよう。
Blogger Glass のデザイン(意匠と設計): プレゼンテーション層
すでに書いたように、Blgger Glass の論理的な画面構成は右のようになる。「論理的な」と書いたのは、スタイルの定義は後回しにしているからだ。たとえば、App Header が Page Header や Contents の上部に表示されるかどうかは、スタイルの定義次第になる。つまり、この図は Blogger Glass で「何を(What)」表示するかの抽象的な構造だと言える。
一般に、個々の画面に結びついた機能によって表示される内容は変化するが、中には変化しないものもある。たとえば、アプリの名称は一覧表示画面であれ、内容表示画面でれ、あるいはユーザ設定画面であれ変化することはない。このような情報をアプリ情報と呼ぶ。一方、機能ごとに変化する内容をページ情報と呼び、その中でもメインとなる内容を特に主コンテンツと呼ぶことにする。
以下に、Blogger Glass が持つ 2 つの画面における各情報の具体的内容を示す。
| ページの種類 | アプリ情報 | ページ情報 | 主コンテンツ |
|---|---|---|---|
| 一覧表示 | アプリ名 アプリの URL |
ページ番号 ページ切り替え |
記事一覧 |
| 内容表示 | アプリ名 アプリの URL |
記事の作成日時 記事タイトル ラベル |
記事内容 |
これを元に、実際のテンプレートごとに表示するオブジェクト(のプロパティ)を決める。
| template | AppInfo | PageInfo | (actual content) |
|---|---|---|---|
| listview.html | title (text) home_url (text) |
page (number) total_pages (number) content (list of Entry object) pager (list of Page object) |
entry.title (text) entry.feedlink(text) |
| postview.html | title (text) home_url (text) |
title (text) content (text) |
(text) |
この表は、たとえば listview.html には AppInfo クラスがあり、そのインスタンすは title と home_url というプロパティ(どちらも値はテキスト)を持っている、というように見る。また、listview.html の PageInfo インスタンスでは、content と pager というプロパティは他オブジェクトのリストを参照している。
細かいことだが、ページ(page)という言葉は「ウェブページ」からの連想で付けたもので、ウェブアプリのプレゼンテーション要素としては適切とは言えない。むしろ、ビュー(view)と呼ぶべきかも。
関連リンク
- テンプレートシステム入門 (1) 歴史編 (Rubyist Magazine)
- テンプレートシステム入門 (2) 基礎編 (同上)
- Blogger Glass (GAE アプリ)
0 件のコメント:
コメントを投稿