ページレイアウト

□未翻訳

□翻訳中

■翻訳完了（細田謙二）

■レビュー（Omi Chiba）

ページレイアウト

ビューは、ツリー風の構造において他のビューを拡張、または、取り込むことができます。

Views can extend and include other views in a tree-like structure.

たとえば、"layout.html"を拡張し、"body.html"を取り込んだ"index.html"というビューを考えることができます。同時に、"layout.html"は、"header.html"や"footer.html"を取り込むこともあります。

For example we can think of a view "index.html" extends "layout.html" and includes "body.html". At the same time "layout.html" may include "header.html" and "footer.html".

ツリーのルートは、レイアウトビューと呼ばれます。他のTHMLテンプレートファイルと同様に、web2pyの管理インタフェースを用いてそれを編集することができます。ファイル名"layout.html"は単なる慣例です。

The root of the tree is what we call a layout view. Just like any other HTML template file, you can edit it using the web2py administrative interface. The file name "layout.html" is just a convention.

ここでは、"layout.html"ビューを拡張し、"page.html"ビューを取り込んだ最小のページを示します：

Here is a minimalist page that extends the "layout.html" view and includes the "page.html" view:

1.

2.

3.

{{extend 'layout.html'}}

<h1>Hello World</h1>

{{include 'page.html'}}

この拡張したレイアウトファイルは、たとえば次のように、{{include}}指示文を必ず含まなければなりません：

The extended layout file must contain an {{include}} directive, something like:

1.

2.

3.

4.

5.

<html><head><title>Page Title</title></head>

<body>

{{include}}

</body>

</head>

ビューが呼び出されると、拡張した(レイアウト)ビューが呼び出され、呼び出したビューはレイアウト内部の{{include}}指示文を置換します。この処理は再帰的に、すべてのextendとinclude指示文が処理されるまで、行われます。そして、結果のテンプレートは、Pythonコードに変換されます。

When the view is called, the extended (layout) view is loaded, and the calling view replaces the{{include}} directive inside the layout. Processing continues recursively until all extend and include directives have been processed. The resulting template is then translated into Python code.

extendとincludeはテンプレート固有の指示文で、Pythonのコマンドではありません。

extend and include are special template directives, not Python commands.

レ イアウトは、ページの共通特徴(ヘッダー、フッター、メニュー)を包含するために使用されます。それらは、義務的なものではないですが、アプリケーション を書きやすく保守しやすくします。とりわけ、コントローラで設定することのできる次のような変数を活用するレイアウトを書くことを推奨します。これらのよく知られた変数を用いることは、レイアウトを交換可能にするのに役立ちます：

Layouts are used to encapsulate page commonality (headers, footers, menus), and though they are not mandatory, they will make your application easier to write and maintain. In particular, we suggest writing layouts that take advantage of the following variables that can be set in the controller. Using these well known variables will help make your layouts interchangeable:

1.

2.

3.

4.

5.

6.

7.

8.

response.title

response.subtitle

response.meta.author

response.meta.keywords

response.meta.description

response.flash

response.menu

response.files

menuとfilesを除いて、これらのすべての文字列と意味は明白なものです。

Except for menu and files these are all strings and their meaning should be obvious.

response.menuのメニューは、3-タプル、または、4-タプルからなるリストです。その3つの要素は、リンクの名前、リンクがアクティブ(現在のリンク)かどうかを示すブール値、リンク先のページのURLです。たとえば次のようになります:

response.menu menu is a list of 3-tuples or 4-tuples. The three elements are: the link name, a boolean representing whether the link is active (is the current link), and the URL of the linked page. For example:

1.

2.

response.menu = [('Google', False, 'http://www.google.com',[]),

('Index', True, URL('index'), [])]

第4のタプル要素は、オプション的なサブメニューです。

the fourth tuple element is an optional sub-menu.

response.filesは、あなたのページで必要となるCSSとJSファイルのリストです。

response.files is a list of CSS and JS files that are needed by your page.

ここではまた、次のものをHTMLのヘッドで使用することを推奨しています：

We also recommend that you use:

1.

{{include 'web2py_ajax.html'}}

これによって、特殊効果やAjaxのための、jQueryライブラリといくつかの後方互換なJavaScript関数の定義が組み込まれるからで す。"web2py_ajax.html"はresponse.metaタグやjQeuryのベース、jQueryのカレンダーをビューの中に組み込み、すべての要求されたCSSとJSのresponse.filesを組み込みます。

in the HTML head, since this will include the jQuery libraries and define some backward-compatible JavaScript functions for special effects and Ajax. "web2py_ajax.html" includes theresponse.meta tags in the view, jQuery base, the jQuery calendar and includes all required CSS and JS response.files.

デフォルトのページのレイアウト

Default Page Layout

ここで示すのは、web2pyの雛形アプリケーションwelcomeに付属する最小の"views/layout.html"です。また、新規のアプリケーションはどれも、同様のデフォルトレイアウトを持っています：

Here is a minimal "views/layout.html" that ships with the web2py scaffolding applicationwelcome, and any new application will have a similar default layout:

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

35.

36.

37.

38.

39.

40.

41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.

53.

54.

55.

56.

57.

58.

59.

60.

61.

62.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{{=T.accepted_language or 'en'}}">

<head>

<title>{{=response.title or request.application}}</title>

<link rel="shortcut icon"

href="{{=URL(request.application,'static','favicon.ico')}}"

type="image/vnd.microsoft.icon">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

{{###### require CSS and JS files for this page (read info in base.css) }}

{{response.files.append(URL(request.application,'static/css','base.css'))}}

{{response.files.append(URL(request.application,'static/js','superfish.js'))}}

{{###### include web2py specific js code (jquery, calendar, form stuff) }}

{{include 'web2py_ajax.html'}}

</head>

<body>

<div class="flash">{{=response.flash or ''}}</div>

<div class="ez-mr wrapper" id="layout">

{{###### Layout 3 from http://www.ez-css.org/layouts }}

<div class="ez-wr">

<div class="ez-box" id="header">

{{try:}}{{=auth.navbar(action=URL(request.application,'default','user'))}}{{except:pass}}

<h1>

<a href="">{{=response.title or 'response.title'}}</a>

</h1>

<h2>

{{=response.subtitle or 'response.subtitle'}}

</h2>

</div>

<div class="ez-box" id="statusbar">

{{###### superfish menu }}

{{=MENU(response.menu,_class='sf-menu')}}

<script>

jQuery(document).ready(function(){

jQuery('ul.sf-menu').superfish({delay:400});});

</script>

</div>

<div class="ez-wr">

<div class="ez-fl ez-negmx">

<div class="ez-box" id="left_sidebar">{{###### unused space}}</div>

</div>

<div class="ez-fl ez-negmr">

<div class="ez-box" id="content">{{include}}</div>

</div>

<div class="ez-last ez-oh">

<div class="ez-box" id="right_sidebar">{{###### unused space}}</div>

</div>

</div>

<div class="ez-box" id="footer">

{{=T('Copyright')}} © 2010 -

{{=T('Powered by')}} <a href="http://www.web2py.com">web2py</a>

</div>

</div>

</div>

</body>

</html>

このデフォルトのレイアウトにはちょっとした特徴があり、非常に使いやすく、カスタマイズしやすいようになっています：

There are a few features of this default layout that make it very easy to use and customize:

  • {{#...}}はHTMLページには現れない特別なコメントです。

  • {{#...}} are special comments that will not appear in the HTML of the page.

  • モデルで設定することのできるresponse.titleとresponse.subtitleを表示します。設定されていない場合は、アプリケーションの名前がタイトルとして採用されます。

  • It displays both response.title and response.subtitle which can be set in a model. If they are not set, it adopts the application name as title

  • web2py_ajax.htmlファイルをヘッダーに組み込みます。

  • It includes the web2py_ajax.html file in the header

  • "base.css"と"superfish.js"という2つのファイルを明示的に要求します。前者は、そのページに対する完全なCSSを含み、とてもよくドキュメント化されていて、カスタマイズ可能です。後者は、デフォルトのカスケードするメニューのためのJSが書かれています。

  • It requires two files explicitly: "base.css" and "superfish.js". The former contains the complete CSS for the page and it is very well documented and customizable. The latter contains the JS for the default cascading menu.

  • {{=auth.navbar(...)}}は、現在のユーザーへの歓迎文を表示するとともに、login、logout、register、change passwordなどのauth関数へのリンクを、文脈に応じて設けます。authが定義されていないときのために、{{try:}}...{{except:pass}}の中に置かれています。

  • The {{=auth.navbar(...)}} displays a welcome to the current user and links to auth functions like login, logout, register, change password, etc. depending on context. It is placed in a {{try:}}...{{except:pass}} in case auth is undefined.

  • {{=MENU(response.menu)は、メニュー構造を<ul>...</ul>として表示します。

  • The {{=MENU(response.menu) displays the menu structure as <ul>...</ul>.

  • スーパーフィッシュ・カスケード・メニューをアクティブにする明示的なスクリプトがあります。不要な場合は削除することができます。

  • There is an explicit script to activate the superfish cascading menu and it can be removed if not necessary.

  • {{include}}は、ページがレンダリングされるときに、拡張するビューの内容に置き換えらます。

  • {{include}} is replaced by the content of the extending view when the page is rendered.

  • デ フォルトでは、3列のページレイアウトを用いています。そして、次のDIVのIDを使用していま す："header"、"left_sidebar"、"content"、"right_sidebar"、"footer" です。ただし、用意された"base.css"では、サイドバーの横幅が0に設定されています。

  • By default it uses a three column page layout and the uses the following DIV ids: "header", "left_sidebar", "content", and "right_sidebar", "footer" although the provided "base.css" sets the widths of the sidebars to zero.

  • レイアウトのCSSの命名のために、参照で定義されているez.cssの慣例規則を使用しています。特に、レイアウト番号3を使用しています。最小化したez.cssは"base.css"に含まれています。

    • It uses the ez.css convention for layout CSS naming defined in ref 51. In particular it uses Layout number 3. The minimized ez.css is included in "base.css".

デフォルトレイアウトのカスタマイズ

Customizing the Default Layout

編集なしにデフォルトレイアウトをカスタマイズするのはとても簡単です。"static/css/base.css"ファイルが、よくドキュメント化されているからです。

Customizing the default layout without editing is very easy because the "static/css/base.css" file is very well documented.

特に、以下に示すサブセクションで構成されています：

In particular it is organized in the following sub-sections:

  • ez.css

  • 共通タグをリセットする

  • reset common tags

  • デフォルトのフォントを選択する

  • choose default fonts

  • リンクのスタイルを選択する

  • choose link style

  • テーブルの行に基本線を追加する

  • add bottom line to table rows

  • 太字で、場合によっては中央に配置して、ラベルづけする

  • labels bold and occasionally centered

  • すべての入力フィールドを同じサイズにする

  • make all input fields the same size

  • h1-h6とテキストの間に適切な距離間隔を追加する

  • add proper separation between h1-h6 and text

  • 常に最初の行をインデントし、段落の下にスペースを追加する

  • always indent the first line and add space below paragraphs

  • 箇条書きと段落番号のスタイルとインデント

  • bullets and numbers style and indent

  • フォームとテーブルのパディング

  • form and table padding

  • コー​​ドブロック

  • code blocks

  • 引用符で囲まれたテキストへの左右のパディング

  • left and right padding to quoted text

  • ページレイアウトの配置、幅、パディング(スペースのためにこれを変更してください)

  • page layout alignment, width and padding (change this for spaces)

  • 列の幅(left_sidebarとright_sidebarを使用するにはこれを変更してください)

  • column widths (change this to use left_sidebar and right_sidebar)

  • 背景画像と色(色のためにこれを変更してください)

  • background images and colors (change this for colors)

  • メニュースタイル(superfish.js用)

  • menu style (for superfish.js)

  • web2py固有のもの(.flash、.error)

  • web2py specific (.flash, .error)

left_sidebar、content、right_sidebarの横幅を変更するには、単純に"base.css"の一部を編集します：

To change the left_sidebar, content, right_sidebar widths, simply edit part of "base.css":

1.

2.

3.

4.

/*********** column widths ***********/

#left_sidebar { width: 0px; }

#content { width: 840px; }

#right_sidebar { width: 0px; }

色や背景画像を変更するには、単純に以下の部分を編集します：

To change colors and background images, simply edit the following part:

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

/*********** backrgound images and colors ***********/

body { background: url('/book/static/book_images_png/background.png') repeat-x #3A3A3A; }

a { color: #349C01; }

.auth_navbar {

top: 0px;

float: right;

padding: 3px 10px 3px 10px;

font-size: 0.9em;

}

code { color: green; background: black; }

input:focus, textarea:focus { background: #ccffcc; }

#layout { background: white; }

#header, #footer { color: white; background: url('/book/static/book_images_png/header.png') repeat #111111;}

#header h1 { color: #349C01; }

#header h2 { color: white; font-style: italic; font-size: 14px;}

#statusbar { background: #333333; border-bottom: 5px #349C01 solid; }

#statusbar a { color: white; }

#footer { border-top: 5px #349C01 solid; }

メニューは色に依存しない方法で構築されますが、それも変更することができます。

The menu is built in a color-neutral way but you can change that too.

もちろん、"layout.html"や"base.css"ファイルを自分のものに完全に置き換えることもできます。

Of course you can also completely replace the "layout.html" and "base.css" files with your own.