PowerCMS Xで出力するHTMLの整形

そもそもHTML転送量の削減を考えるならminifyすれば良く、可読性を考える場合もブラウザにHTMLのインスペクターがあるためCMSから出力されるHTMLをきれいにする意味はあまりないのでは？と考えますが、何らか理由がありインデントをしたいケース、テンプレートを書いていてどの要素がトラブルの原因になっているか直接HTMLを見て探りたいケースがあるかもしれません。HTMLをきれいに出力する、かつテンプレート（ビュー）を見やすくすることを両立する方法を探りました。

テンプレートと出力の例

テンプレートを書く際、どのようにインデントをつけるべきか迷うケースがあります。例えば、出力されるHTMLのインデントや行頭スペースを全く考えない場合は下記のようにmt:ifの子要素にもインデントをつけることができるでしょう。

<mt:entries>
  <mt:if name="__first__">
    <ul>
  </mt:if>
  <li><mt:entrytitle escape></li>
  <mt:if name="__last__">
    </ul>
  </mt:if>
</mt:entries>

しかし、HTMLに出力されるul要素やli要素のインデント量を考え始めると、mt:ifの子要素にインデントをつけないとか、li要素はul要素よりもインデントが増えるようにするとか、面倒なことになってきます。無駄なスペースが行頭に出ることを嫌ってPowerCMS Xのタグはインデントしない、というケースもあります。

<mt:entries>
  <mt:if name="__first__">
  <ul>
  </mt:if>
    <li><mt:entrytitle escape></li>
  <mt:if name="__last__">
  </ul>
  </mt:if>
</mt:entries>

ただ、工夫を重ねてもテンプレートモジュールのインクルードやmt:setvarなどのHTMLには出力されないタグもあり、下記のような出力になることがほとんどでしょう。（mt:setvarblockでコンテンツを変数に入れ、後でまとめて出力する場合はもう少しきれいなのかもしれません。）

人力ではなく整形ツールを使う

フロントエンドに関わる人であれば、JavaScriptやCSSを整形するためにツールを使った経験があるかもしれません。今回のようなテンプレートのケースも人の力に頼るのではなくツールを使用して解決するのが良いでしょう。

具体的には、GitHubで公開されている「ivanweiler / beautify-html」を使用します。「JS Beautifier project」の一部をベースにしたコードのようです。環境変数publish_callbacksを有効化し、post_rebuildコールバックで出力するHTMLをbeautify-htmlに通します。

<?php
require_once LIB_DIR . 'Prototype' . DS . 'class.PTPlugin.php';
require_once 'lib/beautify-html.php';

class BeautifyHtml extends PTPlugin {

    function __construct () {
        parent::__construct();
    }

    function post_rebuild_html( $cb, $app, $tmpl, &$data ) {
        $ui = $cb['urlinfo'];
        $file_path = $ui->file_path;
        $extension = PTUtil::get_extension( $file_path );
        if ( $extension !== 'html' ) {
            return true;
        }

        $beautify = new Beautify_Html([
            'indent_inner_html'     => false,
            'indent_char'           => " ",
            'indent_size'           => 2,
            'wrap_line_length'      => 32786,
            'unformatted'           => [ 'code', 'pre' ],
            'preserve_newlines'     => false,
            'max_preserve_newlines' => 32786,
            'indent_scripts'        => 'separate' // keep|separate|normal
        ]);

        $data = $beautify->beautify( $data );
    }

}

結果、このように無駄な空行やスペースを排除し、きれいにインデントされたHTMLが出力されます。当ブログにもこのプラグインを適用しています。

時々プラグイン導入をためらわれる方がいらっしゃいますが、本プラグインはテンプレートに基づいて作成されたHTMLを出力する直前にbeautify-htmlに通しているだけですので、PowerCMS Xの動作に悪い影響を及ぼすことは全く考えられません。強いて言うならば若干の処理コストがかかることでしょうか。

まとめ

過去のプロジェクトの反省から検討した内容でしたが、エンジニアはテンプレートが見やすく・書きやすいようにインデントすることに集中する、どうしてもHTMLを整形する必要がある場合にはこの記事で紹介したコードを利用することが答えだろうと考えます。