tidyる(tidyを使用してHTML5を整形する)お話

HTML コマンド 環境構築

あけましておめでとうございます。

マークアップエンジニアの　　です。



新年でいろいろな案件が溜まってしまっている事かと思います。
汚いソースコードの改修案件とか。

今回はマークアップが汚い案件の時に大変便利なtidyってコマンドを見つけたのでご紹介します。



tidyコマンドは、汚いマークアップを綺麗にしてくれる大変便利なコマンドです。
Mac環境だとデフォルトで入ってたりします。

そんなtidyを使ってみたお話
Mac環境でも古い環境だとHTML5に対応していなかったりするので、今回はtidy-html5を入れてみました。

環境

MaxOSX 10.7.2

導入してみる

gitからtidy-html5をダウンロードしてmake

$ git clone https://github.com/htacg/tidy-html5.git
$ cd tidy-html5
$ make -C build/gmake/
$ make install -C build/gmake/

github.com




これでtidyが使えます。
Mac のターミナルから tidyのバージョン確認して for HMTL5となっていたらtidyれます。

$ tidy -v
HTML Tidy for HTML5 (experimental) for Mac OS X https://github.com/w3c/tidy-html5/tree/c63cc39

Macではデフォルトでtidyが入っていますが、そのtidyがHTML5に対応していないケースがあります。
その状態でtidyをインストールするとデフォルトのtidyが使われてしまっている可能性があるります。

その場合

$ tidy -v
HTML Tidy for Mac OS X released on 31 October 2006 - Apple Inc. build 15.6

こんな表示になったりします。
その場合は、/usr/binにあるtidyを移動させるかパスの読み込み順序を変えます。

/etc/pathsを書き換えるのも怖いので、今回はデフォルトのtidyを移動させる方法です。

$ cd /usr/bin
$ sudo mv tidy tidy.bk
$ sudo ln -s /usr/local/bin/tidy tidy

/usr/binの中を移動して、念のためシンボリックリンクを貼っておく。

でtidyのバージョンを見るとgitでcloneしてきたtidy-html5が入っていると思います。

実際にtidyる


早速htmlファイルの一括インデントしてみます。

$ cd fooDir/
$ tidy -im *.html


これで、fooDirという名前のディレクトリの第一階層に存在するhtmlファイルは全てインデントして保存されます。
正しく表現するとfooDir直下のhtml拡張しを持つファイルをtidyってます。

なんかvimと組み合わせてみたり、Sublimeと組み合わせてみたりして
tidyりながら開発してる人もいたりして調べてみると面白いです。

簡単なオプション説明

-i インデントしてくれます。
-m インデント整えたりなんやかんやしたファイルを上書きしちゃいます。
--drop-empty-elements noを指定すると空要素を削除しません。(BootStrapの<i>)とかで便利です。

他にもエラーをファイルにまとめたり、整形後のファイルを別ファイル保存したりとか色々できます。
オプションが豊富に有るので -hとかでオプションを見てみると面白いです。

それでは、どんどん快適なtidyライフを！