imgタグのsrc属性やaタグのhref属性などに書くパス名を本番環境ではサイトルート相対にしておく必要があったので、ちゃんと書き換えたかHTMLファイルを提出する前にチェックしたい。他にもimgタグのalt属性に書き忘れがないかなども。
こんな時、HTMLエディタ上でファイル内を検索しながらチェックするのが面倒だったので、HTMLファイルからタグの属性と設定値をリストに出力するコマンドlist-attrをnode.jsで作りました。
使い方
以下の例で、入力のサンプルに使ったindex.htmlは記事の最後にあります。
imgタグのsrc属性やalt属性をリストする
コマンドにオプションを指定しない場合は、imgタグのsrc属性とalt属性を抽出します。
list-attr index.html
list-attrコマンドからの出力は属性が１行につき１個ずつ表示されますので、grepコマンドに通して行を絞り込むと見やすいです。
出力例1で、行頭の数字はHTMLファイル中の行番号です。行21と29はサイトルート相対パスへの書き換え忘れ、さらに行21はテスト環境のファイルを指したままのようです。
$ list-attr index.html | grep src
20 src: /site/img/photo1.jpg
21 src: ../my-folder/photo2.jpg
29 src: site/img/photo3_large
出力例2で、行20のalt属性が空になっていることがわかります。また、行21は仮のテキストが残っている、行29は画像差し替え時にaltのテキストを変更し忘れていたのかもしれません。
$ list-attr index.html | grep alt
20 alt:
21 alt: あとで書く
29 alt: 古い内容
-nオプションを指定すると、alt属性が空になっているimgタグのみ出力します。
$ list-attr -n index.html
20 <img> [1/3]
20 src: /site/img/photo1.jpg
20 alt:
aタグやlinkタグのhref属性をリストする
list-attr -t a index.html
list-attr -t link index.html
$ list-attr -t a index.html | grep href
23 href: http://localhost/test.html
24 href: /site/link.html
hrefやsrc属性のパス名がサイトルート相対でないタグを抽出する
--not-root-pathオプションを指定します。
$ list-attr -t img --not-root-path index.html | grep src
21 src: ../my-folder/photo2.jpg
29 src: site/img/photo3_large
$ list-attr -t a --not-root-path index.html | grep href
23 href: http://localhost/test.html
$ list-attr -t script --not-root-path index.html | grep src
31 src: js/app.js
imgタグのwidth, height属性をリストする
list-attrコマンドがデフォルトで抽出する属性に加えて、任意の属性を抽出対象に追加するには、-aオプションの後に属性名をカンマで区切って指定します。
list-attr -t img -a width,height index.html
出力をgrepコマンドに通す場合、-Cオプションを指定して前後の行も表示させると見やすくなります。
$ list-attr -t img -a width,height index.html | grep -C1 width
20 src: /site/img/photo1.jpg
20 width: 1200
20 height: 720
--
--
29 src: site/img/photo3_large
29 width: 1920
29 height: 1080
metaタグのOGP画像の設定情報をリストする
list-attrコマンドの出力に対し、grepコマンドの-Aオプションを指定してcontent行も表示させます。
$ list-attr -t meta -a property index.html |grep -A1 og:
10 property: og:url
10 content: https://localhost/test.html
--
11 property: og:title
11 content: あとで書く
--
12 property: og:type
12 content: article
--
13 property: og:site_name
13 content: テスト用サイト
--
14 property: og:description
14 content: あとで書く
--
15 property: og:image
15 content: https://localhost/test.jpg
list-attrコマンドに渡すHTMLファイルは１個ずつ、抽出対象のタグも１個ずつしか指定できませんが、自分が日常使うにはこれで十分間に合ってます。
CSSファイル内に記述したパス名、たとえばbackground: url(test.jpg)などはこのコマンドではチェックできないので今後の課題。
サンプルのHTMLファイル
修正漏れ満載のindex.htmlはこちら
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns#">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>テキトーなページ</title>
<meta name="description" content="あとで書く">
<meta name="keywords" content="">
<meta property="og:url" content="https://localhost/test.html">
<meta property="og:title" content="あとで書く">
<meta property="og:type" content="article">
<meta property="og:site_name" content="テスト用サイト">
<meta property="og:description" content="あとで書く">
<meta property="og:image" content="https://localhost/test.jpg">
<meta name="twitter:card" content="summary_large_image">
<link rel="stylesheet" href="../test/style.css">
</head>
<body>
<div><img src="/site/img/photo1.jpg" width="1200" height="720" alt=""></div>
<div><img src="../my-folder/photo2.jpg" alt="あとで書く"></div>
<ul>
<li><a href="http://localhost/test.html" target="_blank">Home</a></li>
<li><a href="/site/link.html">About</a></li>
</ul>
<picture>
<source srcset="/site_old/img/photo3_sp.jpg" media="(max-width: 767px)" width="800" height="600">
<source srcset="img/photo3_tab.jpg" media="(max-width: 1024px)">
<img src="site/img/photo3_large" width="1920" height="1080" alt="古い内容">
</picture>
<script src="js/app.js"></script>
</body>
</html>