PowerCMS ブログ

HTML Tidy は、妥当ではない HTML文書を修正するプログラムです。とても有名なツールであり、歴史のあるツールでもありますが、手軽なHTMLチェックツールとしては現在も十分に有用です。

• HTML TIDY で Web ページをお掃除する

HTML を編集していると、思わぬ間違いを犯してしまうことがよくあります。 こういう間違いを自動的に修正して、適当に書いたマークアップをきれいに してくれる、簡単な方法があれば良いと思いませんか？ そう、Hewlett Packard の Dave Raggett に感謝しましょう。HTML TIDY はそのための フリーなユーティリティです。また tidy は非常に読みづらい HTML 専用 エディタや変換ツールの出力するマークアップにもきわめて有効で、障害を 持つ人々に対するページのアクセシビリティを改善するため、どのような点 に注意を払う必要があるか判断する手助けをします。

様々なOSで利用でき、Perlモジュールもあるのですが、少々インストールが難しいと感じましたので、オンラインで手軽に利用できるゲートウェイを作りました。

• HTML Tidy Gateway (Beta)

Movable TypeなどのCMSから気軽に利用できることを考慮し、検証結果をJSONで返すAPIもあります。

• HTML Tidy Gateway (Beta) - API Documentation

※このサービスはβ版で、予告なくサービスを停止することがあります。
※現状ではHTML5には完全に対応していません。

早速ですが、PowerCMS / Movable Typeから利用できるプラグインを作成しました。記事やウェブページの「保存」「プレビュー」ボタンの上にチェックボタンを表示します。ボタンをクリックすることで別ウインドウ上にチェック結果を表示します。

• https://github.com/alfasado/mt-plugin-html-tidy

検証範囲をカスタマイズする

デフォルトでは、タイトル、本文、続き欄と日付、カテゴリ(記事の場合)などのメタ情報をビルドした結果をチェックに利用します。テンプレートは下記のようになっています。

<mt:if tag="EntryClass" eq="entry">
<h2 class="title"><$mt:EntryTitle$></h2>
<p>Date: <$mt:EntryDate format="%x"$><mt:IfArchiveTypeEnabled archive_type="Category"><mt:If tag="EntryPrimaryCategory"> <mt:EntryPrimaryCategory><a href="<$mt:CategoryArchiveLink$>" rel="tag" class="label category <$mt:CategoryBasename$>"><$mt:CategoryLabel$></a></mt:EntryPrimaryCategory></mt:If></mt:IfArchiveTypeEnabled></p>
<div class="entry-content">
    <$mt:EntryBody$>
<mt:if tag="EntryMore" eq="entry">
    <$mt:EntryMore$>
</mt:if>
</div>
<mt:else>
<h2 class="title"><$mt:PageTitle$></h2>
<p>Date: <$mt:PageDate format="%x"$></p>
<div class="entry-content">
    <$mt:PageBody$>
<mt:if tag="PageMore" eq="entry">
    <$mt:PageMore$>
</mt:if>
</div>
</mt:if>

このテンプレートは plugins/HTMLTidy/tmpl/preview.tmpl にありますが、ブログ/ウェブサイトのプラグイン設定でテンプレートを登録することができます。カスタムフィールドやテンプレートのヘッダやフッタ等をチェックの対象に追加したい場合、プラグイン設定の「プレビューテンプレート」にMTタグを入力して保存します。