HTMLヘルパー

□未翻訳

□翻訳中

■翻訳完了（細田謙二）

■レビュー（Omi Chiba）

HTMLヘルパー

次のようなビューのコードを考えます：

Consider the following code in a view:

{{=DIV('this', 'is', 'a', 'test', _id='123', _class='myclass')}}

これは次のようにレンダリングされます：

it is rendered as:

<div id="123" class="myclass">thisisatest</div>

DIVはヘルパークラスです。つまり、HTMLをプラグラム的に構築するために使われるものです。これは、HTMLの<div>タグに対応します。

DIV is a helper class, i.e., something that can be used to build HTML programmatically. It corresponds to the HTML <div> tag.

位置引数は開始タグと終了タグの間に含まれるオブジェクトとして解釈されます。アンダースコアで始まる名前付き引数は、HTMLタグの(アンダースコアなしの)属性として解釈されます。いくつかのヘルパーは、アンダースコアで始まらない名前付き数をもち、それらの引数はタグ固有のものです。

Positional arguments are interpreted as objects contained between the open and close tags. Named arguments that start with an underscore are interpreted as HTML tag attributes (without the underscore). Some helpers also have named arguments that do not start with underscore; these arguments are tag-specific.

以下のヘルパーのセットは：

The following set of helpers:

A, B, BEAUTIFY, BODY, BR, CENTER, CODE, DIV, EM, EMBED, FIELDSET, FORM, H1, H2, H3, H4, H5, H6, HEAD,HR, HTML, I, IFRAME, IMG, INPUT, LABEL, LEGEND, LI, LINK, OL, UL, MARKMIN, MENU, META, OBJECT, ON,OPTION, P, PRE, SCRIPT, OPTGROUP, SELECT, SPAN, STYLE, TABLE, TAG, TD, TEXTAREA, TH, THEAD,TBODY, TFOOT, TITLE, TR, TT, URL, XHTML, XML, xmlescape, embed64

XMLへとシリアライズできる複雑な表現を構築するのに使用することができます。たとえば：

can be used to build complex expressions that can then be serialized to XML⁴⁹ ⁵⁰. For example:

これは次のようにレンダリングされます：

is rendered:

<div class="myclass"><b><i>hello <world></i></b></div>

web2pyのヘルパーの仕組みは、文字列の連結なしにHTMLを生成するシステム以上のものです。これは、サーバーサイドのドキュメントオブジェクトモデル(DOM)表現を提供します。

The helpers mechanism in web2py is more than a system to generate HTML without concatenating strings. It provides a server-side representation of the Document Object Model (DOM).

コンポーネントのオブジェクトはその位置を介して参照でき、ヘルパーはそれらコンポーネントに対してリストのように機能します。

Components' objects can be referenced via their position, and helpers act as lists with respect to their components:

>>> a = DIV(SPAN('a', 'b'), 'c')

>>> print a

>>> del a[1]

>>> a.append(B('x'))

>>> a[0][0] = 'y'

>>> print a

ヘルパーの属性は名前で参照することができ、ヘルパーはそれら属性に対して辞書のように機能します：

Attributes of helpers can be referenced by name, and helpers act as dictionaries with respect to their attributes:

>>> a = DIV(SPAN('a', 'b'), 'c')

>>> a['_class'] = 's'

>>> a[0]['_class'] = 't'

>>> print a

XML

XMLはエスケープされるべきでないテキストを封入するために使用するオブジェクトです。テキストは有効なXMLが含まれる場合もあれば、そうでない場合もあります。たとえば、JavaScriptを含むことができます。

XML is an object used to encapsulate text that should not be escaped. The text may or may not contain valid XML. For example, it could contain JavaScript.

次の例のテキストはエスケープされますが：

The text in this example is escaped:

>>> print DIV("<b>hello</b>")

<b>hello</b>

次のようにXMLを使用してエスケープを防ぐことができます：

by using XML you can prevent escaping:

>>> print DIV(XML("<b>hello</b>"))

<b>hello</b>

時々、変数に格納されたHTMLをレンダリングしたい場合があります。しかし、HTMLはスクリプトなどの安全でないタグが含まれている可能性があります：

Sometimes you want to render HTML stored in a variable, but the HTML may contain unsafe tags such as scripts:

>>> print XML('<script>alert("unsafe!")</script>')

このようなエスケープされてない実行可能な入力(たとえば、ブログのコメント本文への入力)は、安全ではありません。これを利用して、そのページの他の訪問者に対してクロスサイトスクリプティング(XSS)攻撃を生み出すことができるからです。

Un-escaped executable input such as this (for example, entered in the body of a comment in a blog) is unsafe, because it can be used to generate Cross Site Scripting (XSS) attacks against other visitors to the page.

web2pyのXMLヘルパーはインジェクションを防ぐためにテキストをサニタイズすることができ、明示的に許可してないものでない限りすべてのタグをエスケープします。これはその例です:

The web2py XML helper can sanitize our text to prevent injections and escape all tags except those that you explicitly allow. Here is an example:

>>> print XML('<script>alert("unsafe!")</script>', sanitize=True)

XMLのコンストラクタは、デフォルトでは、いくつかのタグの中身とそれらのいくつかの属性が安全であると想定します。このデフォルトは、permitted_tagsとallowd_attributesというオプション引数で上書きすることができます。以下に示すのは、XMLヘルパーのオプション引数のデフォルトの値です。

The XML constructors, by default, consider the content of some tags and some of their attributes safe. You can override the defaults using the optional permitted_tags andallowed_attributes arguments. Here are the default values of the optional arguments of theXML helper.

XML(text, sanitize=False,

permitted_tags=['a', 'b', 'blockquote', 'br/', 'i', 'li',

'ol', 'ul', 'p', 'cite', 'code', 'pre', 'img/'],

allowed_attributes={'a':['href', 'title'],

'img':['src', 'alt'], 'blockquote':['type']})

組み込みヘルパー

Built-in Helpers

このヘルパーは、リンクを構築するために使用されます。

This helper is used to build links.

>>> print A('<click>', XML('<b>me</b>'),

_href='http://www.web2py.com')

このヘルパーは、cidという特殊な引数を取ります。これは次のように動作します：

This helper takes a special argument called cid. It works as follows:

<div id="myid"></div>

そして、このリンクをクリックすると、そのdivに中身がロードされるようになります。これには、レイアウトのヘッドに{{include 'web2py_ajax.html'}}が必要です。

and a click on the link causes the content to be loaded in the div. This requires {{include 'web2py_ajax.html'}} in the layout head.

cidの詳細については第13章でコンポーネントの文脈において説明します。

We discuss applications of cid in more detail in Chapter 13, in the context of components.

このヘルパーは、その中身を太字にします。

This helper makes its contents bold.

>>> print B('<hello>', XML('<i>world</i>'), _class='test', _id=0)

<b id="0" class="test"><hello><i>world</i></b>

BODY

このヘルパーは、ページのbodyを作成します。

This helper makes the body of a page.

>>> print BODY('<hello>', XML('<b>world</b>'), _bgcolor='red')

<body bgcolor="red"><hello><b>world</b></body>

CENTER

このヘルパーは、その中身を中央に配置します。

This helper centers its content.

>>> print CENTER('<hello>', XML('<b>world</b>'),

>>> _class='test', _id=0)

<center id="0" class="test"><hello><b>world</b></center>

CODE

このヘルパーは、Python、C、C++、HTML、そして、web2pyのコードに対して構文のハイライトを実現します。これは、コードの列挙に関してPREよりも望ましい選択肢です。CODEはまた、web2pyのAPIドキュメントへのリンクを作成する機能があります。

This helper performs syntax highlighting for Python, C, C++, HTML and web2py code, and is preferable to PRE for code listings. CODE also has the ability to create links to the web2py API documentation.

ここでは、Pythonコードのセクションをハイライトする例を示します：

Here is an example of highlighting sections of Python code.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

>>> print CODE('print "hello"', language='python').xml()

<table><tr valign="top"><td style="width:40px; text-align: right;"><pre style="

font-size: 11px;

font-family: Bitstream Vera Sans Mono,monospace;

background-color: transparent;

margin: 0;

padding: 5px;

border: none;

background-color: #E0E0E0;

color: #A0A0A0;

">1.</pre></td><td><pre style="

font-size: 11px;

font-family: Bitstream Vera Sans Mono,monospace;

background-color: transparent;

margin: 0;

padding: 5px;

border: none;

overflow: auto;

"><span style="color:#185369; font-weight: bold">print </span>

<span style="color: #FF9966">"hello"</span></pre></td></tr>

</table>

HTMLに対して同様の例を示します。

Here is a similar example for HTML

>>> print CODE(

>>> '<html><body>{{=request.env.remote_add}}</body></html>',

>>> language='html')

<table>...<code>...

<html><body>{{=request.env.remote_add}}</body></html>

...</code>...</table>

以下に示すのはCODEヘルパーのデフォルトの引数です：

These are the default arguments for the CODE helper:

CODE("print 'hello world'", language='python', link=None, counter=1, styles={})

language 引数でサポートされている値は、 "python"、"html_plain"、"c"、"cpp"、"web2py"、"html"です。"html"言語では、{{と}}のタグは"web2py"のコードとして解釈されます。一方、"html_plain"ではそのように解釈されません。

Supported values for the language argument are "python", "html_plain", "c", "cpp", "web2py", and "html". The "html" language interprets {{ and }} tags as "web2py" code, while "html_plain" doesn't.

link の値が指定される場合、たとえば、"/examples/global/vars/"とされている場合、コード内のweb2pyのAPIレファレンスがそのリンクURLのドキュメントへリンクされます。たとえば、"request"は"/examples/global/vars/request"へリンクされます。上記の例では、リンクURLは、"global.py"コントローラの"var"アクションによって処理されます。"global.py"は、web2pyの"examples"アプリケーションの一部として配布されています。

If a link value is specified, for example "/examples/global/vars/", web2py API references in the code are linked to documentation at the link URL. For example "request" would be linked to "/examples/global/vars/request". In the above example, the link URL is handled by the "var" action in the "global.py" controller that is distributed as part of the web2py "examples" application.

counter引数は行番号のために使用されます。これは3種類の値のいずれかを取ります。Noneにすると行番号は表示されません。数字にすると、始まりの番号を指定します。counterが文字列の場合は、プロンプトとして解釈され、行番号は表示されません。カウンタが文字列に設定されている場合、それは、プロンプトとして解釈され、行番号があります。

The counter argument is used for line numbering. It can be set to any of three different values. It can be None for no line numbers, a numerical value specifying the start number, or a string. If the counter is set to a string, it is interpreted as a prompt, and there are no line numbers.

DIV

XML以外のすべてのヘルパーはDIVから派生し、その基本メソッドを継承しています。

All helpers apart from XML are derived from DIV and inherit its basic methods.

>>> print DIV('<hello>', XML('<b>world</b>'), _class='test', _id=0)

<div id="0" class="test"><hello><b>world</b></div>

中身を強調します。

Emphasizes its content.

>>> print EM('<hello>', XML('<b>world</b>'), _class='test', _id=0)

<em id="0" class="test"><hello><b>world</b></em>

FIELDSET

入力フィールドをラベルと共に作成するために使用されます。

This is used to create an input field together with its label.

>>> print FIELDSET('Height:', INPUT(_name='height'), _class='test')

<fieldset class="test">Height:<input name="height" /></fieldset>

FORM

これは最も重要なヘルパーの1つです。単純なフォームでは、単に<form>...</form>タグを作り出すだけですが、ヘルパーはオブジェクトで、かつ、その中身に関する情報を持っているので、フォームの投稿処理を行うことができます(たとえば、フィールドの検証など)。詳細は第7章で説明します。

This is one of the most important helpers. In its simple form, it just makes a <form>...</form>tag, but because helpers are objects and have knowledge of what they contain, they can process submitted forms (for example, perform validation of the fields). This will be discussed in detail in Chapter 7.

>>> print FORM(INPUT(_type='submit'), _action=", _method='post')

"enctype"はデフォルトでは"multipart/form-data"です。

The "enctype" is "multipart/form-data" by default.

FORMとSQLFORMのコンストラクタは、hiddenという特別な引数を取ることができます。辞書がhiddenとして渡される場合、その項目は"hidden"INPUTフィールドへと変換されます。たとえば次のようになります:

The constructor of a FORM, and of SQLFORM, can also take a special argument called hidden. When a dictionary is passed as hidden, its items are translated into "hidden" INPUT fields. For example:

>>> print FORM(hidden=dict(a='b'))

H1, H2, H3, H4, H5, H6

これらのヘルパーは、段落の見出しと小見出しに利用します：

These helpers are for paragraph headings and subheadings:

>>> print H1('<hello>', XML('<b>world</b>'), _class='test', _id=0)

<h1 id="0" class="test"><hello><b>world</b></h1>

HEAD

HTMLページのHEADをタグ付けに利用します。

For tagging the HEAD of an HTML page.

>>> print HEAD(TITLE('<hello>', XML('<b>world</b>')))

<head><title><hello><b>world</b></title></head>

HTML

このヘルパーは少し異なります。<html>タグの作成に加えて、doctype文字列をそのタグの前に付与します。

This helper is a little different. In addition to making the <html> tags, it prepends the tag with a doctype string .

>>> print HTML(BODY('<hello>', XML('<b>world</b>')))

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html><body><hello><b>world</b></body></html>

HTMLヘルパーは、いくつかの追加のオプション引数を取り、次のようなデフォルト値を持ちます：

The HTML helper also takes some additional optional arguments that have the following default:

HTML(..., lang='en', doctype='transitional')

doctypeは 'strict'、'transitional'、'frameset'、'html5'、または、完全なdoctype文字列にすることができます。

where doctype can be 'strict', 'transitional', 'frameset', 'html5', or a full doctype string.

XHTML

XHTMLはHTMLに似ていますが、代わりにXHTMLのdoctypeを作成します。

XHTML is similar to HTML but it creates an XHTML doctype instead.

XHTML(..., lang='en', doctype='transitional', xmlns='http://www.w3.org/1999/xhtml')

doctypeは、'strict'、'transitional'、'frameset'、または、完全なdoctype文字列にすることができます。

where doctype can be 'strict', 'transitional', 'frameset', or a full doctype string.

INPUT

<input.../>タグを作成します。inputタグは、他のタグを含まないので、>ではなく、/>で閉じられます。inputタグは、オプション属性_typeを持ち、"text" (デフォルト)や、"submit"、"checkbox",、"radio" に設定できます。

Creates an <input.../> tag. An input tag may not contain other tags, and is closed by />instead of >. The input tag has an optional attribute _type that can be set to "text" (the default), "submit", "checkbox", or "radio".

>>> print INPUT(_name='test', _value='a')

これはまた、"value"という"_value"とは異なる特別なオプション引数を取ります。後者は、inputフィールドに対してデフォルト値を設定します。一方、前者は現在の値を設定します。"text"タイプの入力の場合、前者は後者を上書きします：

It also takes an optional special argument called "value", distinct from "_value". The latter sets the default value for the input field; the former sets its current value. For an input of type "text", the former overrides the latter:

>>> print INPUT(_name='test', _value='a', value='b')

ラジオボタンの場合、INPUTは選択的に"checked"属性を設定します：

For radio buttons INPUT selectively sets the "checked" attribute:

>>> for v in ['a', 'b', 'c']:

>>> print INPUT(_type='radio', _name='test', _value=v, value='b'), v

<input value="a" type="radio" name="test" /> a

<input value="b" type="radio" checked="checked" name="test" /> b

<input value="c" type="radio" name="test" /> c

チェックボックスに対しても同様です：

and similarly for checkboxes:

>>> print INPUT(_type='checkbox', _name='test', _value='a', value=True)

>>> print INPUT(_type='checkbox', _name='test', _value='a', value=False)

IFRAME

このヘルパーは、現在のページに別のWebページを取り込みます。他のページのURLは"_src"属性で指定されます。

This helper includes another web page in the current page. The url of the other page is specified via the "_src" attribute.

>>> print IFRAME(_src='http://www.web2py.com')

IMG

HTMLに画像を埋め込むために使用されます：

It can be used to embed images into HTML:

>>> IMG(_src='http://example.com/image.png',_alt='test')

次に示すのは、AとIMGとURLのヘルパーを組み合わせて、リンク付きの静的画像を取り込んだものです：

Here is a combination of A, IMG, and URL helpers for including a static image with a link:

>>> A(IMG(_src=URL('static','logo.png'), _alt="My Logo"),

_href=URL('default','index'))

</a>

LABEL

INPUTフィールドのためのLABELタグを作成するために使用されます。

It is used to create a LABEL tag for an INPUT field.

>>> print LABEL('<hello>', XML('<b>world</b>'), _class='test', _id=0)

<label id="0" class="test"><hello><b>world</b></label>

リスト項目を作成します。ULまはたOLタグの中に含めるべきです。

It makes a list item and should be contained in a UL or OL tag.

>>> print LI('<hello>', XML('<b>world</b>'), _class='test', _id=0)

<li id="0" class="test"><hello><b>world</b></li>

LEGEND

フォームの中のフィールドに対する凡例タグを作成するために使用されます。

It is used to create a legend tag for a field in a form.

>>> print LEGEND('Name', _for='myfield')

カスタム・ヘルパー

Custom Helpers

TAG

独自のXMLタグを生成したい場合があるかもしれません。web2pyは、普遍的なタグ生成機としてTAGを提供しています。

Sometimes you need to generate custom XML tags. web2py provides TAG, a universal tag generator.

これは、次のようなXMLを生成します

generates the following XML

<name c="d">ab</name>

引数"a"、"b"、"d"は自動的にエスケープされます。この挙動を抑えるにはXMLヘルパーを用いてください。TAGを用いて、APIに提供されていないHTML/XMLタグを生成することができます。TAGはネストさせることができ、str()によってシリアライズすることができます。同等の構文は次の通りです：

Arguments "a" and "b" and "d" are automatically escaped; use the XML helper to suppress this behavior. Using TAG you can generate HTML/XML tags not already provided by the API. TAGs can be nested, and are serialized with str(). An equivalent syntax is:

なお、TAGはオブジェクトであり、TAG.nameまはたTAG['name']は、一時的なヘルパークラスを返す関数であることです。

Notice that TAG is an object, and TAG.name or TAG['name'] is a function that returns a temporary helper class.

MENUヘルパーは、(第4章で説明されいる)response.menuの形式のリストのリストを受け取り、メニューを表現する順不同リストを用いてツリー型の構造を生成します。たとえば次のようになります:

The MENU helper takes a list of lists of the form of response.menu (as described in Chapter 4) and generates a tree-like structure using unordered lists representing the menu. For example:

>>> print MENU([['One', False, 'link1'], ['Two', False, 'link2']])

</ul>

各メニュー項目はネスとされるサブメニューを第4引数に持つことができます(また再帰的に同様です)：

Each menu item can have a fourth argument that is a nested submenu (and so on recursively):

>>> print MENU([['One', False, 'link1', [['Two', False, 'link2']]]])

</ul>

</li>

</ul>

MENUヘルパーは次のオプション引数を取ります：

The MENU helper takes the following optional arguments:

_class: 外側のUL要素のクラスを設定します。デフォルトは"web2py-menu web2py-menu-vertical"です。
- defaults to "web2py-menu web2py-menu-vertical" and sets the class of the outer UL elements.
ul_class: 内側のUL要素のクラスを設定します。デフォルトは "web2py-menu-vertical"です。
- defaults to "web2py-menu-vertical" and sets the class of the inner UL elements.
li_class: 内側のLI要素のクラスを設定します。デフォルトは"web2py-menu-expand"です。
- defaults to "web2py-menu-expand" and sets the class of the inner LI elements.

雛形となるアプリケーションの"base.css"は、次のメニューの基本タイプを理解します： "web2py-menu web2py-menu-vertical"と"web2py-menu web2py-menu-horizontal"。

The "base.css" of the scaffolding application understands the following basic types of menus: "web2py-menu web2py-menu-vertical" and "web2py-menu web2py-menu-horizontal".

Page updated

Google Sites

Report abuse