このエントリーが役に立ったらシェアをお願いします!

CakePHPにHTML5を適用する方法

このエントリーが役に立ったらシェアをお願いします!

CakePHPでは基本的にXHTMLを採用しており、省略可能なHTMLタグや属性はデフォルトで省略されていません。
なのでHtmlHelperやHtmlHelperを呼び出しているHelperはXHTMLのタグを出力します。
XHTMLでも良い!という場合はそのまま使えますが、どうしてもHTML5で書きたい!タグを省略して書きたい!
という時はCakePHPの機能を使って設定をしてやる必要があります。

スポンサーリンク

HtmlHelperをHTML5に対応させる

順序は以下のとおり。

  1. Configにタグの設定ファイルを作成
  2. HtmlHelper::$_tagsを参考にHTML5に置き換えたタグを設定ファイルに記述する
  3. AppController::$helpersでHtmlHelperの設定を追加する

実はCakePHPのドキュメントにも小さーーーく解説してありますが、これだけではかなり分かりづらいので、噛み砕いて解説します。

HtmlHelper 組み込みのタグ設定は、 XHTML に準拠したものです。 そのため、 HTML5 に準拠した HTML を生成するためには、新しいタグの設定を 作成して読み込む必要があります。

CakePHP HtmlHelper

また、ドキュメントにはloadConfigという関数も紹介されていますが、今回は使用しません。

HTML5タグの設定ファイルを作成

まずConfigフォルダ以下にhtml5_tags.phpを作成します。
そして中に以下の記述をします。

<?php
$config = array(
    'tags' => array(
      'css' => '<link rel="%s" href="%s" %s>',
      'style' => '<style%s>%s</style>',
      'charset' => '<meta charset="%s">',
      'javascriptblock' => '<script%s>%s</script>',
      'javascriptstart' => '<script>',
      'javascriptlink' => '<script src="%s"%s></script>',
      'css' => '<link rel="%s" href="%s" %s/>',
      'style' => '<style %s>%s</style>',
      'charset' => '<meta charset="%s" />',
      'selectempty' => '<option value=""%s>&nbsp;</option>',
      'selectoption' => '<option value="%s"%s>%s</option>',
      'para' => '<p%s>%s',
      'li' => '<li%s>%s',
      'tableheader' => '<th%s>%s</th>',
      'tableheaderrow' => '<tr%s>%s',
      'tablecell' => '<td%s>%s',
      'tablerow' => '<tr%s>%s',
    ),
    'minimizedAttributes' => array('async')
);

sprintfのformat形式で記述します。
デフォルトでは省略可能な閉じタグや属性が記述されていますが、この設定ファイルで上書きしてやります。
minimizedAttributesにはscriptタグを使用する際にasyncを正しく出力できるように設定しています。
CakePHPではscript関数でscriptタグを出力する際にdeferを指定することができますが、なぜかasyncは対応していません。
なのでasyncを使えるようにしてやります。

HtmlHelperに設定を読み込ませる

AppControllerに以下の記述を行います。

class AppController extends Controller {
  public $helpers = array('Html' => array('configFile' => 'html5_tags'));
}

HtmlHelperに対して「html5_tagsが設定ファイルだかんな。Configん中から探して読んどけ」っていうお願い(命令)をします。

これでいつもどおりHtmlHelper::script()やcss(),charset(),その他該当のタグ出力をする関数を呼び出す際は
HTML5にもとづいて省略されたタグが出力されるようになります。
一部対応していないHelperの関数もありますが、これは今後のバージョンアップでの対応を期待。。。

ひとまずこれでHTML5に対応させることが出来ました。
省略可能属性、省略可能タグを設定することでViewのファイルサイズを削減することができるので
やってみる価値はあると思います。

スポンサーリンク

このエントリーが役に立ったらシェアをお願いします!

1この記事を書いた人
ShoheiTai
フロントエンド志向のWebエンジニア。
HTML5やWeb高速化、SEO等のフロントエンド開発が大好物。
バックエンドではCakePHP,Wordpress開発を主戦場としています。
Web開発のスパイスファクトリー株式会社創業メンバー。

CakePHPにHTML5を適用する方法
イケてないコード - Webエンジニアのブログの
最新情報をいいねしてチェックしよう!