たまにはTidyでサイトのメンテナンスをしませんか?

WordPressによるサイトであれば、ほとんどの場合HTMLの構造がおかしくなることはないでしょう。しかし、WordPress等のCMSをカスタマイズしたり、完全にオリジナルのサイトであればタグの閉じ忘れ等のミスは割と発生しやすいものです。

ここで紹介する Tidy は「HTMLのエラー検出機能と強力な自動修正機能」を備えています。Tidyは歴史のあるツールであり、現在も更新され続けています。Windows、Mac、UNIXに対応しており公式サイトからバイナリをダウンロードすることができます。

HTML Tidy
http://www.html-tidy.org/

Windows版は「MSVCR100.dllが見つからない」というエラーが発生することがあります。その場合「Microsoft Visual C++ 2010 再頒布可能パッケージ (x64) or (x84) 」をインストールすれば問題なく動作します。Microsoftの公式サイトからダウンロード可能です。

Mac版はHomebrewでもインストール可能です。

簡単な使い方

ここではMacを例としています。Windowsの場合「tidy」を「tidy.exe」に置き換えるだけですが、grepなどは動作しません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <ul>
    <li>エックスサーバー</li>
    <li>ロリポップ!
    <li>JETBOY
</body>
</html>

</ul></li> が抜けています。このindex.htmlにtidyを適用してみましょう。

$ tidy index.html

line 8 column 3 - Warning: missing </ul>
Info: Document content looks like HTML5
Tidy found 1 warning and 0 errors!

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="generator" content=
"HTML Tidy for HTML5 for Mac OS X version 5.2.0">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>エックスサーバー</li>
<li>ロリポップ!</li>
<li>JETBOY</li>
</ul>
</body>
</html>

</ul>がないという警告 (Warning) が提示されます。</li>もないはずですが、HTMLの仕様として<li>の次にすぐ<li>が来る場合、</li>の省略が可能となっているため警告が発生しません。

tidyの特徴は不正な構造の発見だけではありません。実行結果を見れば分かりますが、HTMLが自動的に修正されていることがわかります。

実行結果をファイルへ出力することもできます。紹介しきれないほどの多くのオプションが用意されているので、詳しくは公式サイトのドキュメントを確認してください。

tidy index.html > output.html 2> errs.txt

index.html:入力ファイル output.html:修正結果の出力ファイル errs.txt:エラーや警告の出力ファイル
他にもこのように書けます。
tidy -o output.html -f errs.txt index.html

警告だけ出力させるなら、以下の様に記述できます。

tidy index.html 2>&1 >/dev/null | grep "missing" > errs.txt

tidyは非常に強力なツールであり、類似ツールと比較してもより正確に修正されます。前回紹介したLinkCheckerと組み合わせれば、自動的に全てのページをチェックすることも可能でしょう。他の用途として、HTMLが正しくないサイトに対するスクレイピングにも利用できます。

PHPで利用するなら「HTML Purifier」というライブラリもあります。

HTML Purifier - Filter your HTML the standards-compliant way!
http://htmlpurifier.org/

関連記事

BLOG

UPDATE