Commit 147abc82 by Carsten Brandt

Merge pull request #6854 from softark/docs-guide-ja-helper-html

docs/guide-ja/helper-html.md - added [ci skip]
parents 3aed7b50 abda4a73
......@@ -193,6 +193,6 @@ RESTful ウェブサービス
* [概要](helper-overview.md)
* [ArrayHelper](helper-array.md)
* **翻訳未着手** [Html](helper-html.md)
* **翻訳未着手** [Url](helper-url.md)
* [Html](helper-html.md)
* [Url](helper-url.md)
Html ヘルパ
===========
全てのウェブアプリケーションは大量の HTML マークアップを生成します。
マークアップが静的な場合は、[PHP と HTML を一つのファイルに混ぜる](http://php.net/manual/ja/language.basic-syntax.phpmode.php) ことによって効率よく生成することが可能ですが、マークアップを動的にするとなると、何らかの助けが無ければ、処理がトリッキーになってきます。
Yii はそのような手助けを Html ヘルパの形式で提供します。
これは、よく使われる HTML タグとそのオプションやコンテントを処理するための一連のスタティックメソッドを提供するものです。
> Note|注意: あなたのマークアップがおおむね静的なものである場合は、HTML を直接に使用する方が良いです。
> 何でもかんでも Html ヘルパの呼び出しでラップする必要はありません。
## 基礎 <a name="basics"></a>
動的な HTML を文字列の連結によって構築していると、あっという間に乱雑なコードになります。
そのため、Yii はタグのオプションを操作し、それらのオプションに基づいてタグを構築する一連のメソッドを提供します。
### タグを生成する <a name="generating-tags"></a>
タグを生成するコードは次のようなものです。
```php
<?= Html::tag('p', Html::encode($user->name), ['class' => 'username']) ?>
```
最初の引数はタグの名前です。
二番目の引数は、開始タグと終了タグの間に囲まれることになるコンテントです。
`Html::encode` を使っていることに注目してください。
これは、必要な場合には HTML を使うことが出来るように、コンテントが自動的にはエンコードされないからです。
三番目の引数は HTML のオプション、言い換えると、タグの属性です。
この配列で、キーは `class``href``target` などの属性の名前であり、値は属性の値です。
上記のコードは次の HTML を生成します。
```html
<p class="username">samdark</p>
```
開始タグまたは終了タグだけが必要な場合は、`Html::beginTag()` または `Html::endTag()` のメソッドを使うことが出来ます。
オプションは多くの Html ヘルパのメソッドとさまざまなウィジェットで使用されます。
その全ての場合において、いくつか追加の処理がなされることを知っておいてください。
- 値が null である場合は、対応する属性はレンダリングされません。
- 値が真偽値である属性は、[真偽値属性 (boolean attributes)](http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes) として扱われます。
- 属性の値は [[yii\helpers\Html::encode()|Html::encode()]] を使って HTML エンコードされます。
- "data" 属性は配列を受け取ることが出来ます。
その場合、配列が「展開」されてデータ属性のリストがレンダリングされます。
例えば、`'data' => ['id' => 1, 'name' => 'yii']``data-id="1" data-name="yii"` となります。
- "data" 属性は JSON を受け取ることが出来ます。これは配列と同じように処理されます。
すなわち、`'data' => ['params' => ['id' => 1, 'name' => 'yii'], 'status' => 'ok']``data-params='{"id":1,"name":"yii"}' data-status="ok"` となります。
### CSS のクラスとスタイルを形成する <a name="forming-css"></a>
HTML タグのオプションを構築する場合、たいていは、デフォルトの値から始めて必要な修正をする、という方法をとります。
CSS クラスを追加または削除するために、次のコードを使用することが出来ます。
```php
$options = ['class' => 'btn btn-default'];
if ($type === 'success') {
Html::removeCssClass($options, 'btn-default');
Html::addCssClass($options, 'btn-success');
}
echo Html::tag('div', 'Pwede na', $options);
// $type が 'success' の場合、次のようにレンダリングされる
// <div class="btn btn-success">Pwede na</div>
```
同じことを `style` 属性のスタイルについて行うためには、次のようにします。
```php
$options = ['style' => ['width' => '100px', 'height' => '100px']];
// style="width: 100px; height: 200px; position: absolute;" となる
Html::addCssStyle($options, 'height: 200px; positon: absolute;');
// style="position: absolute;" となる
Html::removeCssStyle($options, ['width', 'height']);
```
[[yii\helpers\Html::addCssStyle()|addCssStyle()]] を使うときには、CSS プロパティの名前と値に対応する「キー-値」ペアの配列か、または、`width: 100px; height: 200px;` のような文字列を指定することが出来ます。
この二つの形式は、[[yii\helpers\Html::cssStyleFromArray()|cssStyleFromArray()]] と [[yii\helpers\Html::cssStyleToArray()|cssStyleToArray()]] を使って、双方向に変換することが出来ます。
[[yii\helpers\Html::removeCssStyle()|removeCssStyle()]] メソッドは、削除すべきプロパティの配列を受け取ります。
プロパティが一つだけである場合は、文字列で指定することも出来ます。
### コンテントをエンコードおよびデコードする <a name="encoding-and-decoding-content"></a>
コンテントが適切かつ安全に HTML として表示されるためには、コンテント内の特殊文字がエンコードされなければなりません。
特殊文字のエンコードとデコードは、PHP では [htmlspecialchars](http://www.php.net/manual/ja/function.htmlspecialchars.php)[htmlspecialchars_decode](http://www.php.net/manual/ja/function.htmlspecialchars-decode.php) によって行われます。
これらのメソッドを直接使用する場合の問題は、文字エンコーディングと追加のフラグを毎回指定しなければならないことです。
フラグは毎回同じものであり、文字エンコーディングはセキュリティ問題を防止するためにアプリケーションのそれと一致すべきものですから、Yii は二つのコンパクトかつ使いやすいメソッドを用意しました。
```php
$userName = Html::encode($user->name);
echo $userName;
$decodedUserName = Html::decode($userName);
```
## フォーム <a name="forms"></a>
フォームのマークアップを扱う仕事は、極めて面倒くさく、エラーを生じがちなものです。
このため、フォームのマークアップの仕事を助けるための一群のメソッドがあります。
> Note|注意: モデルを扱っており、バリデーションが必要である場合は、[[yii\widgets\ActiveForm|ActiveForm]] を使うことを検討してください。
### フォームを作成する <a name="creating-forms"></a>
フォームを開始するためには、次のように [[yii\helpers\Html::beginForm()|beginForm()]] メソッドを使うことが出来ます。
```php
<?= Html::beginForm(['order/update', 'id' => $id], 'post', ['enctype' => 'multipart/form-data']) ?>
```
最初の引数は、フォームが送信されることになる URL です。
これは [[yii\helpers\Url::to()|Url::to()]] によって受け入れられる Yii のルートおよびパラメータの形式で指定することが出来ます。
第二の引数は使われるメソッドです。`post` がデフォルトです。
第三の引数はフォームタグのオプションの配列です。
上記の場合では、POST リクエストにおけるフォームデータのエンコーディング方法を `multipart/form-data` に変更しています。
これはファイルをアップロードするために必要とされます。
フォームタグを閉じるのは簡単です。
```php
<?= Html::endForm() ?>
```
### ボタン <a name="buttons"></a>
ボタンを生成するためには、次のコードを使うことが出来ます。
```php
<?= Html::button('押してね !', ['class' => 'teaser']) ?>
<?= Html::submitButton('送信', ['class' => 'submit']) ?>
<?= Html::resetButton('リセット', ['class' => 'reset']) ?>
```
最初の引数は、三つのメソッドのどれでも、ボタンのタイトルであり、第二の引数はオプションです。
タイトルはエンコードされませんので、エンドユーザからデータを取得する場合は [[yii\helpers\Html::encode()|Html::encode()]] を使ってエンコードしてください。
### インプットフィールド <a name="input-fields"></a>
インプットのメソッドには二つのグループがあります。
一つは `active` から始まるものでアクティブインプットと呼ばれます。もう一方は `active` から始まらないものです。
アクティブインプットは、データを指定されたモデルと属性から取得しますが、通常のインプットでは、データは直接に指定されます。
最も汎用的なメソッドは以下のものです。
```php
タイプ、インプットの名前、値、オプション
<?= Html::input('text', 'username', $user->name, ['class' => $username]) ?>
タイプ、モデル、モデルの属性名、オプション
<?= Html::activeInput('text', $user, 'name', ['class' => $username]) ?>
```
インプットのタイプが前もって判っている場合は、ショートカットメソッドを使う方が便利です。
- [[yii\helpers\Html::buttonInput()]]
- [[yii\helpers\Html::submitInput()]]
- [[yii\helpers\Html::resetInput()]]
- [[yii\helpers\Html::textInput()]], [[yii\helpers\Html::activeTextInput()]]
- [[yii\helpers\Html::hiddenInput()]], [[yii\helpers\Html::activeHiddenInput()]]
- [[yii\helpers\Html::passwordInput()]] / [[yii\helpers\Html::activePasswordInput()]]
- [[yii\helpers\Html::fileInput()]], [[yii\helpers\Html::activeFileInput()]]
- [[yii\helpers\Html::textarea()]], [[yii\helpers\Html::activeTextarea()]]
ラジオとチェックボックスは、メソッドのシグニチャの面で少し異なっています。
```php
<?= Html::radio('agree', true, ['label' => '同意します']);
<?= Html::activeRadio($model, 'agree', ['class' => 'agreement'])
<?= Html::checkbox('agree', true, ['label' => '同意します']);
<?= Html::activeCheckbox($model, 'agree', ['class' => 'agreement'])
```
ドロップダウンリストとリストボックスは、次のようにしてレンダリングすることが出来ます。
```php
<?= Html::dropDownList('list', $currentUserId, ArrayHelper::map($userModels, 'id', 'name')) ?>
<?= Html::activeDropDownList($users, 'id', ArrayHelper::map($userModels, 'id', 'name')) ?>
<?= Html::listBox('list', $currentUserId, ArrayHelper::map($userModels, 'id', 'name')) ?>
<?= Html::activeListBox($users, 'id', ArrayHelper::map($userModels, 'id', 'name')) ?>
```
最初の引数はインプットの名前、第二の引数は現在選択されている値です。
そして第三の引数は「キー-値」のペアであり、配列のキーはリストの値、配列の値はリストのラベルです。
複数の選択肢を選択できるようにしたい場合は、チェックボックスリストが最適です。
```php
<?= Html::checkboxList('roles', [16, 42], ArrayHelper::map($roleModels, 'id', 'name')) ?>
<?= Html::activeCheckboxList($user, 'role', ArrayHelper::map($roleModels, 'id', 'name')) ?>
```
そうでない場合は、ラジオリストを使います。
```php
<?= Html::radioList('roles', [16, 42], ArrayHelper::map($roleModels, 'id', 'name')) ?>
<?= Html::activeRadioList($user, 'role', ArrayHelper::map($roleModels, 'id', 'name')) ?>
```
### ラベルとエラー <a name="labels-and-errors"></a>
インプットと同じように、ラベルを生成するメソッドが二つあります。
モデルからデータを取るアクティブなラベルと、データを直接受け入れるアクティブでないラベルです。
```php
<?= Html::label('ユーザ名', 'username', ['class' => 'label username']) ?>
<?= Html::activeLabel($user, 'username', ['class' => 'label username'])
```
一つまたは複数のモデルから取得したエラーを要約として表示するためには、次のコードを使うことが出来ます。
```php
<?= Html::errorSummary($posts, ['class' => 'errors']) ?>
```
個別のエラーを表示するためには、次のようにします。
```php
<?= Html::error($post, 'title', ['class' => 'error']) ?>
```
### インプットの名前と値 <a name="input-names-and-values"></a>
モデルに基づいてインプットフィールドの名前、ID、値を取得するメソッドがあります。
これらは主として内部的に使用されるものですが、場合によっては重宝します。
```php
// Post[title]
echo Html::getInputName($post, 'title');
// post-title
echo Html::getInputId($post, 'title');
// '私の最初の投稿'
echo Html::getAttributeValue($post, 'title');
// $post->authors[0]
echo Html::getAttributeValue($post, '[0]authors[0]');
```
上記において、最初の引数はモデルであり、第二の引数は属性を示す式です。
これは最も単純な形式においては属性名ですが、配列の添字を前 および/または 後に付けた属性名とすることも出来ます。
配列の添字は主として表形式データ入力のために使用されます。
- `[0]content` は、表形式データ入力で使われます。表形式入力の最初のモデルの "content" 属性を表します。
- `dates[0]` は、"dates" 属性の最初の配列要素を表します。
- `[0]dates[0]` は、表形式入力の最初のモデルの "dates" 属性の最初の配列要素を表します。
前後の添字なしに属性名を取得するためには、次のコードを使うことが出来ます。
```php
// dates
echo Html::getAttributeName('dates[0]');
```
## スタイルとスクリプト <a name="styles-and-scripts"></a>
埋め込みのスタイルとスクリプトをラップするタグを生成するメソッドが二つあります。
```php
<?= Html::style('.danger { color: #f00; }') ?>
これは次の HTML を生成します。
<style>.danger { color: #f00; }</style>
<?= Html::script('alert("こんにちは!");', ['defer' => true]);
これは次の HTML を生成します
<script defer>alert("こんにちは!");</script>
```
CSS ファイルの外部スタイルをリンクしたい場合は、次のようにします。
```php
<?= Html::cssFile('@web/css/ie5.css', ['condition' => 'IE 5']) ?>
これは次の HTML を生成します。
<!--[if IE 5]>
<link href="http://example.com/css/ie5.css" />
<![endif]-->
```
最初の引数は URL であり、第二の引数はオプションの配列です。
通常のオプションに加えて、次のものを指定することが出来ます。
- `condition` - 指定された条件を使って `<link` を条件付きコメントで囲みます。
条件付きコメントなんて、使う必要が無くなっちゃえば良いのにね ;)
- `noscript` - `true` に設定すると `<link``<noscript>` タグで囲むことができます。
この場合、JavaScript がブラウザでサポートされていないか、ユーザが JavaScript を無効にしたときだけ、CSS がインクルードされます。
JavaScript ファイルをリンクするためには、次のようにします。
```php
<?= Html::jsFile('@web/js/main.js') ?>
```
CSS と同じように、最初の引数はインクルードされるファイルへのリンクを指定するものです。
オプションを第二の引数として渡すことが出来ます。
オプションに置いて、`cssFile` のオプションと同じように、`condition` を指定することが出来ます。
## ハイパーリンク <a name="hyperlinks"></a>
ハイパーリンクを手軽に生成できるメソッドがあります。
```php
<?= Html::a('プロファイル', ['user/view', 'id' => $id], ['class' => 'profile-link']) ?>
```
最初の引数はタイトルです。
これはエンコードされませんので、エンドユーザから取得したデータを使う場合は、`Html::encode()` でエンコードする必要があります。
第二の引数が、`<a` タグの `href` に入ることになるものです。
どのような値が受け入れられるかについて、詳細は [Url::to()](helper-url.md) を参照してください。
第三の引数は、タグのプロパティの配列です。
`mailto` リンクを生成する必要があるときは、次のコードを使うことが出来ます。
```php
<?= Html::mailto('連絡先', 'admin@example.com') ?>
```
## 画像 <a name="images"></a>
イメージタグを生成するためには次のようにします。
```php
<?= Html::img('@web/images/logo.png', ['alt' => '私のロゴ']) ?>
これは次の HTML を生成します。
<img src="http://example.com/images/logo.png" alt="私のロゴ" />
```
最初の引数は、[エイリアス](concept-aliases.md) 以外にも、ルートとパラメータ、または URL を受け入れることが出来ます。
[Url::to()](helper-url.md) と同様です。
## リスト <a name="lists"></a>
順序なしリストは、次のようにして生成することが出来ます。
```php
<?= Html::ul($posts, ['item' => function($item, $index) {
return Html::tag(
'li',
$this->render('post', ['item' => $item]),
['class' => 'post']
);
}]) ?>
```
順序付きリストを生成するためには、代りに `Html:ol()` を使ってください。
Url ヘルパ
==========
Url ヘルパは URL を管理するための一連のスタティックメソッドを提供します。
## よく使う URL を取得する <a name="getting-common-urls"></a>
よく使う URL を取得するために使うことが出来るメソッドが二つあります。
すなわち、ホーム URL と、現在のリクエストのベース URL を取得するメソッドです。
ホーム URL を取得するためには、次のようにします。
```php
$relativeHomeUrl = Url::home();
$absoluteHomeUrl = Url::home(true);
$httpsAbsoluteHomeUrl = Url::home('https');
```
パラメータが渡されない場合は、相対 URL が生成されます。
`true` を渡すと、現在のスキーマの絶対 URL を取得することが出来ます。
または、スキームを明示的に指定して (`http`, `https`) 絶対 URL を取得することも出来ます。
現在のリクエストのベース URL を取得するためには、次のようにします。
```php
$relativeBaseUrl = Url::base();
$absoluteBaseUrl = Url::base(true);
$httpsAbsoluteBaseUrl = Url::base('https');
```
このメソッドの唯一のパラメータは、`Url::home()` の場合と全く同じ動作をします。
## URL を生成する <a name="creating-urls"></a>
与えられたルートへの URL を生成するためには、`Url::toRoute()` メソッドを使います。
このメソッドは、[[\yii\web\UrlManager]] を使って URL を生成します。
```php
$url = Url::toRoute(['product/view', 'id' => 42]);
```
ルートは、文字列として指定することが出来ます (例えば、`site/index`)。
または、生成される URL に追加のクエリパラメータを指定したい場合は、配列を使うことも出来ます。
配列の形式は、以下のようにしなければなりません。
```php
// /index.php?r=site/index&param1=value1&param2=value2 を生成
['site/index', 'param1' => 'value1', 'param2' => 'value2']
```
アンカーの付いた URL を生成したい場合は、`#` パラメータを持つ配列を使うことが出来ます。例えば、
```php
// /index.php?r=site/index&param1=value1#name を生成
['site/index', 'param1' => 'value1', '#' => 'name']
```
ルートは、絶対ルートか相対ルートかのどちらかです。
絶対ルートは先頭にスラッシュを持ち (例えば `/site/index`)、相対ルートは持ちません (例えば `site/index` または `index`)。
相対ルートは次の規則に従って絶対ルートに変換されます。
- ルートが空文字列である場合は、現在の [[yii\web\Controller::route|ルート]] が使用されます。
- ルートがスラッシュを全く含まない場合は (例えば `index`)、カレントコントローラのアクション ID であると見なされて、カレントコントローラの [[\yii\web\Controller::uniqueId|uniqueId]] が前置されます。
- ルートが先頭にスラッシュを含まない場合は (例えば `site/index`)、カレントモジュールに対する相対ルートと見なされて、カレントモジュールの [[\yii\base\Module::uniqueId|uniqueId]] が前置されます。
バージョン 2.0.2 以降では、[エイリアス](concept-aliases.md) の形式でルートを指定することが出来ます。
その場合は、エイリアスが最初に実際のルートに変換され、そのルートが上記の規則に従って絶対ルートに変換されます。
以下に、このメソッドの使用例をいくつか挙げます。
```php
// /index.php?r=site/index
echo Url::toRoute('site/index');
// /index.php?r=site/index&src=ref1#name
echo Url::toRoute(['site/index', 'src' => 'ref1', '#' => 'name']);
// /index.php?r=post/edit&id=100 エイリアス "@postEdit" は "post/edit" と定義されていると仮定
echo Url::toRoute(['@postEdit', 'id' => 100]);
// http://www.example.com/index.php?r=site/index
echo Url::toRoute('site/index', true);
// https://www.example.com/index.php?r=site/index
echo Url::toRoute('site/index', 'https');
```
もうひとつ、[[toRoute()]] と非常によく似た `Url::to()` というメソッドがあります。
唯一の違いは、このメソッドはルートを配列として指定することを要求する、という点です。
文字列が与えられた場合は、URL として扱われます。
最初の引数は、次のいずれかを取り得ます。
- 配列: URL を生成するために [[toRoute()]] が呼び出されます。例えば、`['site/index']``['post/index', 'page' => 2]`
ルートの指定方法の詳細については [[toRoute()]] を参照してください。
on how to specify a route.
- `@` で始まる文字列: これはエイリアスとして扱われ、エイリアスに対応する文字列が返されます。
- 空文字列: 現在リクエストされている URL が返されます。
- 通常の文字列: その通りのものとして扱われます。
`$scheme` (文字列または `true`) が指定された場合は、ホスト情報 ([[\yii\web\UrlManager::hostInfo]] から取得されます) を伴う絶対 URL が返されます。
`$url` が既に絶対 URL であった場合には、そのスキームが指定されたものに置き換えられます。
下記にいくつかの用例を挙げます。
```php
// /index.php?r=site/index
echo Url::to(['site/index']);
// /index.php?r=site/index&src=ref1#name
echo Url::to(['site/index', 'src' => 'ref1', '#' => 'name']);
// /index.php?r=post/edit&id=100 エイリアス "@postEdit" が "post/edit" と定義されていると仮定
echo Url::to(['@postEdit', 'id' => 100]);
// 現在リクエストされている URL
echo Url::to();
// /images/logo.gif
echo Url::to('@web/images/logo.gif');
// images/logo.gif
echo Url::to('images/logo.gif');
// http://www.example.com/images/logo.gif
echo Url::to('@web/images/logo.gif', true);
// https://www.example.com/images/logo.gif
echo Url::to('@web/images/logo.gif', 'https');
```
バージョン 2.0.3 以降では、[[yii\helpers\Url::current()]] を使って、現在リクエストされているルートと GET パラメータに基づいて URL を生成することが出来ます。
`$params` パラメータを渡して、GET パラメータの中のいくつかを修正したり削除したり、または新しい GET パラメータを追加したりすることが出来ます。
例えば、
Starting from version 2.0.3, you may use [[yii\helpers\Url::current()]] to create a URL based on the currently
requested route and GET parameters. You may modify or remove some of the GET parameters or add new ones by
passing a `$params` parameter to the method. For example,
```php
// $_GET が ['id' => 123, 'src' => 'google'] であり、現在のルートが "post/view" であると仮定
// /index.php?r=post/view&id=123&src=google
echo Url::current();
// /index.php?r=post/view&id=123
echo Url::current(['src' => null]);
// /index.php?r=post/view&id=100&src=google
echo Url::current(['id' => 100]);
```
## URL を記憶する <a name="remember-urls"></a>
URL を記憶して、後に続く一連のリクエストの一つを処理するときに、記憶した URL を使わなければならないという場合があります。
これは、次のようにして達成することが出来ます。
```php
// 現在の URL を記憶する
Url::remember();
// 指定された URL を記憶する。引数の形式は Url::to() を参照。
Url::remember(['product/view', 'id' => 42]);
// 指定された名前で URL を記憶する。
Url::remember(['product/view', 'id' => 42], 'product');
```
次のリクエストで、記憶された URL を次のようにして取得することが出来ます。
```php
$url = Url::previous();
$productUrl = Url::previous('product');
```
## 相対 URL かどうかチェックする <a name="checking-relative-urls"></a>
URL が相対 URL であること、すなわち、URL がホスト情報の部分を持っていないことを確かめるために、次のコードを使うことが出来ます。
```php
$isRelative = Url::isRelative('test/it');
```
......@@ -148,7 +148,7 @@ echo Url::to(['post/index'], 'https');
- ルートが先頭にスラッシュを含まない場合は、カレントモジュールに対する相対ルートと見なされて、カレントモジュールの [[\yii\base\Module::uniqueId|uniqueId]] の値が前置されます。
バージョン 2.0.2 以降では、[エイリアス](concept-aliases.md) の形式でルートを指定することが出来ます。
その場合は、エイリアスが最初に実際のルートに変換され、そのルートが上記の規則に従って絶対ルートに変換されます。
その場合は、エイリアスが最初に実際のルートに変換され、そのルートが上記の規則に従って絶対ルートに変換されます。
例えば、カレントモジュールが `admin` であり、カレントコントローラが `post` であると仮定すると、
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment