|
|
|
|
@ -24,12 +24,10 @@ Yii はそのような手助けを Html ヘルパの形式で提供します。
|
|
|
|
|
<?= Html::tag('p', Html::encode($user->name), ['class' => 'username']) ?> |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
最初の引数はタグの名前です。 |
|
|
|
|
二番目の引数は、開始タグと終了タグの間に囲まれることになるコンテントです。 |
|
|
|
|
最初の引数はタグの名前です。二番目の引数は、開始タグと終了タグの間に囲まれることになるコンテントです。 |
|
|
|
|
`Html::encode` を使っていることに注目してください。 |
|
|
|
|
これは、必要な場合には HTML を使うことが出来るように、コンテントが自動的にはエンコードされないからです。 |
|
|
|
|
三番目の引数は HTML のオプション、言い換えると、タグの属性です。 |
|
|
|
|
この配列で、キーは `class`、`href`、`target` などの属性の名前であり、値は属性の値です。 |
|
|
|
|
三番目の引数は HTML のオプション、言い換えると、タグの属性です。この配列で、キーは `class`、`href`、`target` などの属性の名前であり、値は属性の値です。 |
|
|
|
|
|
|
|
|
|
上記のコードは次の HTML を生成します。 |
|
|
|
|
|
|
|
|
|
@ -43,13 +41,16 @@ Yii はそのような手助けを Html ヘルパの形式で提供します。
|
|
|
|
|
その全ての場合において、いくつか追加の処理がなされることを知っておいてください。 |
|
|
|
|
|
|
|
|
|
- 値が `null` である場合は、対応する属性はレンダリングされません。 |
|
|
|
|
- 値が真偽値である属性は、[真偽値属性 (boolean attributes)](http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes) として扱われます。 |
|
|
|
|
- 値が真偽値である属性は、[真偽値属性 (boolean attributes)](http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes) |
|
|
|
|
として扱われます。 |
|
|
|
|
- 属性の値は [[yii\helpers\Html::encode()|Html::encode()]] を使って HTML エンコードされます。 |
|
|
|
|
- 属性の値が配列である場合は、次のように処理されます。 |
|
|
|
|
|
|
|
|
|
* 属性が [[yii\helpers\Html::$dataAttributes]] にリストされているデータ属性である場合、例えば `data` や `ng` である場合は、値の配列にある要素の一つ一つについて、属性のリストがレンダリングされます。 |
|
|
|
|
* 属性が [[yii\helpers\Html::$dataAttributes]] にリストされているデータ属性である場合、例えば `data` や `ng` である場合は、 |
|
|
|
|
値の配列にある要素の一つ一つについて、属性のリストがレンダリングされます。 |
|
|
|
|
例えば、`'data' => ['id' => 1, 'name' => 'yii']` は `data-id="1" data-name="yii"` を生成します。 |
|
|
|
|
また、`'data' => ['params' => ['id' => 1, 'name' => 'yii'], 'status' => 'ok']` は `data-params='{"id":1,"name":"yii"}' data-status="ok"` を生成します。 |
|
|
|
|
また、`'data' => ['params' => ['id' => 1, 'name' => 'yii'], 'status' => 'ok']` は |
|
|
|
|
`data-params='{"id":1,"name":"yii"}' data-status="ok"` を生成します。 |
|
|
|
|
後者の例において、下位の配列に対して JSON 形式が使用されていることに注意してください。 |
|
|
|
|
* 属性がデータ属性でない場合は、値は JSON エンコードされます。 |
|
|
|
|
例えば、`['params' => ['id' => 1, 'name' => 'yii']` は `params='{"id":1,"name":"yii"}'` を生成します。 |
|
|
|
|
@ -136,7 +137,8 @@ Html::addCssStyle($options, 'height: 200px; position: absolute;');
|
|
|
|
|
Html::removeCssStyle($options, ['width', 'height']); |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
[[yii\helpers\Html::addCssStyle()|addCssStyle()]] を使うときには、CSS プロパティの名前と値に対応する「キー-値」ペアの配列か、または、`width: 100px; height: 200px;` のような文字列を指定することが出来ます。 |
|
|
|
|
[[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()]] メソッドは、削除すべきプロパティの配列を受け取ります。 |
|
|
|
|
プロパティが一つだけである場合は、文字列で指定することも出来ます。 |
|
|
|
|
@ -145,9 +147,11 @@ Html::removeCssStyle($options, ['width', 'height']);
|
|
|
|
|
### コンテントをエンコードおよびデコードする <span id="encoding-and-decoding-content"></span> |
|
|
|
|
|
|
|
|
|
コンテントが適切かつ安全に HTML として表示されるためには、コンテント内の特殊文字がエンコードされなければなりません。 |
|
|
|
|
特殊文字のエンコードとデコードは、PHP では [htmlspecialchars](http://www.php.net/manual/ja/function.htmlspecialchars.php) と [htmlspecialchars_decode](http://www.php.net/manual/ja/function.htmlspecialchars-decode.php) によって行われます。 |
|
|
|
|
特殊文字のエンコードとデコードは、PHP では [htmlspecialchars](http://www.php.net/manual/ja/function.htmlspecialchars.php) と |
|
|
|
|
[htmlspecialchars_decode](http://www.php.net/manual/ja/function.htmlspecialchars-decode.php) によって行われます。 |
|
|
|
|
これらのメソッドを直接使用する場合の問題は、文字エンコーディングと追加のフラグを毎回指定しなければならないことです。 |
|
|
|
|
フラグは毎回同じものであり、文字エンコーディングはセキュリティ問題を防止するためにアプリケーションのそれと一致すべきものですから、Yii は二つのコンパクトかつ使いやすいメソッドを用意しました。 |
|
|
|
|
フラグは毎回同じものであり、文字エンコーディングはセキュリティ問題を防止するためにアプリケーションのそれと一致すべきものですから、 |
|
|
|
|
Yii は二つのコンパクトかつ使いやすいメソッドを用意しました。 |
|
|
|
|
|
|
|
|
|
```php |
|
|
|
|
$userName = Html::encode($user->name); |
|
|
|
|
@ -173,10 +177,8 @@ $decodedUserName = Html::decode($userName);
|
|
|
|
|
<?= Html::beginForm(['order/update', 'id' => $id], 'post', ['enctype' => 'multipart/form-data']) ?> |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
最初の引数は、フォームが送信されることになる URL です。 |
|
|
|
|
これは [[yii\helpers\Url::to()|Url::to()]] によって受け入れられる Yii のルートおよびパラメータの形式で指定することが出来ます。 |
|
|
|
|
第二の引数は使われるメソッドです。`post` がデフォルトです。 |
|
|
|
|
第三の引数はフォームタグのオプションの配列です。 |
|
|
|
|
最初の引数は、フォームが送信されることになる URL です。これは [[yii\helpers\Url::to()|Url::to()]] によって受け入れられる Yii のルートおよびパラメータの形式で指定することが出来ます。 |
|
|
|
|
第二の引数は使われるメソッドです。`post` がデフォルトです。第三の引数はフォームタグのオプションの配列です。 |
|
|
|
|
上記の場合では、POST リクエストにおけるフォーム・データのエンコーディング方法を `multipart/form-data` に変更しています。 |
|
|
|
|
これはファイルをアップロードするために必要とされます。 |
|
|
|
|
|
|
|
|
|
@ -248,8 +250,7 @@ $decodedUserName = Html::decode($userName);
|
|
|
|
|
<?= Html::activeListBox($users, 'id', ArrayHelper::map($userModels, 'id', 'name')) ?> |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
最初の引数はインプットの名前、第二の引数は現在選択されている値です。 |
|
|
|
|
そして第三の引数は「キー-値」のペアであり、配列のキーはリストの値、配列の値はリストのラベルです。 |
|
|
|
|
最初の引数はインプットの名前、第二の引数は現在選択されている値です。そして第三の引数は「キー-値」のペアであり、配列のキーはリストの値、配列の値はリストのラベルです。 |
|
|
|
|
|
|
|
|
|
複数の選択肢を選択できるようにしたい場合は、チェックボックス・リストが最適です。 |
|
|
|
|
|
|
|
|
|
@ -268,8 +269,7 @@ $decodedUserName = Html::decode($userName);
|
|
|
|
|
|
|
|
|
|
### ラベルとエラー <span id="labels-and-errors"></span> |
|
|
|
|
|
|
|
|
|
インプットと同じように、ラベルを生成するメソッドが二つあります。 |
|
|
|
|
モデルからデータを取るアクティブなラベルと、データを直接受け入れるアクティブでないラベルです。 |
|
|
|
|
インプットと同じように、ラベルを生成するメソッドが二つあります。モデルからデータを取るアクティブなラベルと、データを直接受け入れるアクティブでないラベルです。 |
|
|
|
|
|
|
|
|
|
```php |
|
|
|
|
<?= Html::label('ユーザ名', 'username', ['class' => 'label username']) ?> |
|
|
|
|
@ -308,9 +308,7 @@ echo Html::getAttributeValue($post, 'title');
|
|
|
|
|
echo Html::getAttributeValue($post, '[0]authors[0]'); |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
上記において、最初の引数はモデルであり、第二の引数は属性を示す式です。 |
|
|
|
|
これは最も単純な形式においては属性名ですが、配列の添字を前 および/または 後に付けた属性名とすることも出来ます。 |
|
|
|
|
配列の添字は主として表形式データ入力のために使用されます。 |
|
|
|
|
上記において、最初の引数はモデルであり、第二の引数は属性を示す式です。これは最も単純な形式においては属性名ですが、配列の添字を前 および/または 後に付けた属性名とすることも出来ます。配列の添字は主として表形式データ入力のために使用されます。 |
|
|
|
|
|
|
|
|
|
- `[0]content` は、表形式データ入力で使われます。表形式入力の最初のモデルの "content" 属性を表します。 |
|
|
|
|
- `dates[0]` は、"dates" 属性の最初の配列要素を表します。 |
|
|
|
|
@ -355,8 +353,7 @@ CSS ファイルの外部スタイルをリンクしたい場合は、次のよ
|
|
|
|
|
<![endif]--> |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
最初の引数は URL であり、第二の引数はオプションの配列です。 |
|
|
|
|
通常のオプションに加えて、次のものを指定することが出来ます。 |
|
|
|
|
最初の引数は URL であり、第二の引数はオプションの配列です。通常のオプションに加えて、次のものを指定することが出来ます。 |
|
|
|
|
|
|
|
|
|
- `condition` - 指定された条件を使って `<link` を条件付きコメントで囲みます。 |
|
|
|
|
条件付きコメントなんて、使う必要が無くなっちゃえば良いのにね ;) |
|
|
|
|
@ -369,8 +366,7 @@ JavaScript ファイルをリンクするためには、次のようにします
|
|
|
|
|
<?= Html::jsFile('@web/js/main.js') ?> |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
CSS と同じように、最初の引数はインクルードされるファイルへのリンクを指定するものです。 |
|
|
|
|
オプションを第二の引数として渡すことが出来ます。 |
|
|
|
|
CSS と同じように、最初の引数はインクルードされるファイルへのリンクを指定するものです。オプションを第二の引数として渡すことが出来ます。 |
|
|
|
|
オプションに置いて、`cssFile` のオプションと同じように、`condition` を指定することが出来ます。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -382,8 +378,7 @@ CSS と同じように、最初の引数はインクルードされるファイ
|
|
|
|
|
<?= Html::a('プロファイル', ['user/view', 'id' => $id], ['class' => 'profile-link']) ?> |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
最初の引数はタイトルです。 |
|
|
|
|
これはエンコードされませんので、エンド・ユーザから取得したデータを使う場合は、`Html::encode()` でエンコードする必要があります。 |
|
|
|
|
最初の引数はタイトルです。これはエンコードされませんので、エンド・ユーザから取得したデータを使う場合は、`Html::encode()` でエンコードする必要があります。 |
|
|
|
|
第二の引数が、`<a` タグの `href` に入ることになるものです。 |
|
|
|
|
どのような値が受け入れられるかについて、詳細は [Url::to()](helper-url.md) を参照してください。 |
|
|
|
|
第三の引数は、タグのプロパティの配列です。 |
|
|
|
|
@ -407,8 +402,7 @@ CSS と同じように、最初の引数はインクルードされるファイ
|
|
|
|
|
<img src="http://example.com/images/logo.png" alt="私のロゴ" /> |
|
|
|
|
``` |
|
|
|
|
|
|
|
|
|
最初の引数は、[エイリアス](concept-aliases.md) 以外にも、ルートとパラメータ、または URL を受け入れることが出来ます。 |
|
|
|
|
[Url::to()](helper-url.md) と同様です。 |
|
|
|
|
最初の引数は、[エイリアス](concept-aliases.md) 以外にも、ルートとパラメータ、または URL を受け入れることが出来ます。[Url::to()](helper-url.md) と同様です。 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## リスト <span id="lists"></span> |
|
|
|
|
|
Nobuo Kihara
6 years ago
committed by
Alexander Makarov