昔に書いたHTMLとか、何人かで保守するサイトのHTMLなど、しばらく触らなかったコードを修正・編集するときに、コードを読む(理解する)までに時間がかかることがある。とくに、サイトの表示を少しでも早く(HTMLを軽く)するために、不要な空行や意味のないふたつ以上の半角スペース、ときにはインデントまで削除しているコードは、HTMLに限らず読みにくい。正式にリリースしているサイトでは、当然ながらコメント行もすべて削除するのがフツーだ。つまり、なぜこんなコードになっているのかサッパリなことが多いのもフツーなのだ。

こんなときに便利なのが、HTMLなどのコードを整形してくれるWebツールだ。HTML・CSS・JavaScriptに対応していて、各要素ごとに改行・インデントを加えて読みやすいコードにしてくれる。

今回は「Dirty Markup」を使ってみたので、メモ。

Dirtry Markup
Dirtry Markup

1. Dirty Markupの使いかた

  1. Dirty Markup」へアクセスする
  2. 右ペインにコードをペーストする
  3. 必要に応じて各オプションを設定する
  4. 「Clean」ボタンをクリックする

2. Dirty Markupのまとめ

  • 日本語文字列も使える(と思う)
  • 文字列の削除・追加・修正が可能
  • 足りない要素を補完する機能がある。使いかたに注意が必要(HTMLの場合)
  • コードのエラーチェック機能はない(HTMLの場合)
  • 独立した<・>は&lt;&gt;へ、それぞれ変換される

実際に、あたしが昔に書いたHTMLをDirty Markupで整形してみた(↓)。

Dirty MaerkupでHTMLを整形
Dirty MaerkupでHTMLを整形

# いまさらだけれど、テーブル要素の羅列である。
# マップ要素まで切っている。
# 当時としては、まあ、ありふれた書きかたかもしれないが、
# 今となっては古すぎるコードだよね (@_@;)

読みやすいようにとの配慮だと思うけれど、Dirty Markupは、ブロック要素の間に空行を入れてしまう傾向がある。

各ブロック要素は、上図の64、67、70行のように、閉じることができる。これは、離れた場所にある要素を対比させてみたいときに便利な機能。ブロック要素の開始タグと終了タグを、細い破線でつないで見せてくれる機能もある。ジミに便利だと思う。

Dirty Markupは、コードの修正ができる。見つけてしまったコードや文字の誤りをついでに訂正できる。

残念ながら、コードのエラーをチェックする機能はないようだ。

タグがひとつ多い場合の例(整形前)

タグがひとつ多い場合の例(整形前)
 タグがひとつ多い場合の例(整形後)

タグがひとつ多い場合の例(整形後)

ただし、足りない要素を補完する機能があり、これは使いかたによっては不便な機能かもしれない。たとえば、上図のように<tr>タグがひとつ多い場合、これを補完してしまう。気をつけておく事項だろう。注意したいのは、行番号が振りなおされて変わってしまうこと。

今回の作業では日本語の文字化けは起こらなかった。

3. おまけののまとめ

HTMLの整形機能のWebサービスはほかにもいくつかある。ある整形ツールでは(理由は不明だけれど)、HTMLのコードが十数行にわたって無視されて消えてしまった。このようなツールの使いかたとして、Webページ全体を整形するのではなく、読みたい部分(理解したい部分・判読しにくい部分)だけを切り取って、整形してみるのがよいのかもしれない。