7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CakePHP3 HTMLヘルパーについて

Last updated at Posted at 2017-09-01

#HTMLヘルパーとは?
MVCの中でもっとも作成が面倒なのは、V(ビュー)だと思います。
頭を使う使わないは置いといて、単純に普通に記述すると記述する量が多すぎる・・・

基本的に構文はHTMLですが、ページのステータスによってPHPによる処理や計算によって可変させるような作業もあるかと思います。
せっかくMVCで処理と表示を分離させたのにもかかわらず、気づいたらビューのあちこちにPHPコードが埋まっている状態だとMVCで分離したメリットが失われてしまいます。

そこで考え出されたのが、コードの記述量を短縮してくれる【ヘルパー】という機能です。
ヘルパーはビューによって出力するさまざまな表示の作成をサポートしてくれます。

#HTMLヘルパーのメリット

##ソースコードの量が減る

ファイルのパスを環境に応じて、自動的に出力してくれる
テーブルのコードのように、幾つかのタグを決まった形式で書く必要があるときに自動的にそれらを作成してくれる

#コードサンプル

##charsetの指定

HTMLヘルパーによる記述

$this->Html->charset('utf-8')

通常

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

##スタイルシートファイルを読み込ませる記述

HTMLヘルパーによる記述

$this->Html->css('hello');

通常

<link rel="stylesheet" type="text/css" href="/cake3app/css/hello.css">

#スタイルの指定

//第二引数をtrueにすると、その場で出力,falseにすると、<head>内に記述される
<p style='<$this->Html->style(['color'=>'red','font-size'=>'14','font-weight'=>'bold'],false); ?>'>Hello</p>

<p style='color:red;font-size:14px;font-weight:bold;'>Hello</p>

##イメージタグの出力

HTMLヘルパーによる記述

//(第二引数の属性を指定するところは連想配列で指定)
<?=$this->Html->image('aaa.png',array('width'=>'200','height'=>'200','alt'=>'aaaの画像です')); ?>

通常

<img src="/cake3app/img/aaa.png" width="200" height="200" alt="aaaの画像です">

##テーブル ヘッダーの出力

tableHeadersは、テーブルのヘッダーを出力します。
これは、ヘッダーの各項目名のテキストを配列としてまとめたもの。<tr>タグとthタグの属性をそれぞれ連想配列として引数に指定します。

$this->Html->tableHeaders(配列,<tr>属性設定,<th>属性設定)

配列 → ヘッダーとして表示するテキストを配列にまとめたもの
属性設定 →tr タグに用意する属性を連想配列にまとめたもの
配列 → th タグに用意する属性を連想配列にまとめたもの

##テーブル セルの出力

$this->Html->tableCelles(配列,奇数行属性,偶数属性,boolean1,boolean2);

配列 → 各セルに表示するテキストを配列としてまとめたもの
奇数行の属性設定 → 奇数行のセルに設定される属性を連想配列としてまとめたもの
偶数業の属性設定 → 偶数業のセルに設定される属性を連想配列にまとめたもの
boolean1 → <tr>のクラス属性にcolumn-行数(column-1,column-2など)を自動設定するかどうか
boolean2 → 偶数業と奇数業で異なる属性を設定するかどうか

tableCellesは、配列データを元に、1行分のセル(<tr>で囲われている部分)をまとめて出力するメソッドです。
上記のように設定することにより、わざわざ条件分岐や、連番などをphpで設定する手間がなくなります。

###サンプル

<table>
	<?=$this->Html->tableHeaders(
		['投稿者','タイトル'],
		['style'=>'color:#000066; background-color:#CCC'],
		['style'=>'color:#000066; background-color:#EEEEFF'],
	); ?>
	<?php foreach($data as $obj): ?>
		<?=$this->Html->tableCelles(
			//[$obj['person']['name'] = 投稿者のデータが格納されている配列,$obj['title'] = タイトルの配列
			[$obj['person']['name'],$obj['title']],
			['style'=>'color:#000099'; 'background-color:#CCCCFF'],
			['style'=>'color:#006600'; 'background-color:#EEFFEE'],
			false,true
		)?>
	<?php endforeach; ?>
</table>

##リスト表示タグの生成(nestedListメソッド)

<ul> <ol>タグなどによるリストや階層メニューなどの表示を作成するためのメソッドも用意されています。
HTMLでは複数のタグを組み合わせて作成をしますが、nestedListメソッドを使用することにより、、ツリー構造の表示を作成することができます。

###仕様

$this->Html->nestedList(配列,タグの属性,要素の属性);

###サンプル

<span style='font-size: 18pt; font-weight: 700;'>
<?=$this->Html->nestedList(
	['階層化されたリスト'=>
		['最初の項目',
			'次の項目'=>
				['サブ項目1','サブ項目2'],
			'最後の項目'=>
				['サブ項目A','サブ項目B']]],
	['style'=>'font-size: smaller; font-weight: lighter','tag'=>'ol'],
	['style'=>'color: #006600']
); ?>

##ナビゲーションメニューの作成(addCrumb,getCrumbs)

###項目の追加

$this->Html->addCrumb(表示テキスト,リンク先,属性設定)

###メニューの出力

$this->Html->getCrumbs(区切り文字,トップの名前)

###サンプル

<?php
	$this->Html->addCrumb('First','one');
	$this->Html->addCrumb('Second','two');
	$this->Html->addCrumb('Third','third');
?>

<?=$this->Html->getCrumbs(' > ','HOME')?>

#まとめ

上記いかがでしたでしょうか?
個人的に、HTMLヘルパーはソースコードを短縮することができることがメリットだと思いますが、
書き方によっては、HTMLヘルパーを使わない方法のほうが見やすく、複数のエンジニアで開発する際、可読性も変わってくると思いました。
(ここでは共有してませんが、pタグの書き方など。。。)

ただ、tableの記述については、HTMLヘルパーを活用してみても良いかと思います。
ケースバイケース(複数人のエンジニアで対応するのか、複数人のエンジニアで開発する場合のcakePHP3の理解度 など)で活用することをオススメします。

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?