こんにちは。
まずは、ごめんなさい、この回答は**「こういうツールがあるよ」という回答ではない**です。
そこだけ最初に言っておきますね。それでは何かといえば、いま自分が関わっている開発案件
でも、grapeeeさんの担当されているサイトと同様に、大量のHTML(実態は、Smartyテンプ
レートですが)とCSSファイルがあり、本当に活きてるスタイルがどれなのか、すぐには分か
らない状況になっていますので、おっしゃるような
(1) htmlから使用しているCSS(最終的に効いているスタイル)だけ抽出してまとめて
くれるようなツール
(2) CSS内に記述されたスタイル側から、そのスタイルが適用されている箇所がわかる
方法やツール
があればいいなと思いまして、軽くGoogleで調べてみましたが、案外無いものですね。
(あっても良さそうなものだけど、と正直思いましたが)
そこで、(私はサーバー側+フロントエンドのJSも書くプログラミング担当なのですが、)
もし、WEBデザインやコーディングのチームのほうからgrapeeeさんのような要望があった
場合どうするかを考えましたが、多分「ツールを作ってしまいましょう」という提案をする
と思うので、以下に、実際作るならば、どんなプログラムになるのかのアウトラインを記し
ました。
まず、最も単純な場合として、ある1つのHTMLファイルに1つのCSSファイルが
読み込まれているケースを想定して、以下のプログラム1、2を作成します。
(1)このCSSファイルのセレクタだけを読み込んで、1行1セレクタのテキストファイルを出力する。
(1)検証対象のHTMLをパースして、(プログラムの中で)要素のツリーを作る。
(2)プログラム1が作ったセレクタのリストを読んで、上から順にそのセレクタに相当する
要素数を数える。(※該当要素を抽出するために、セレクタをXPathに変換する必要がある
かもしれないので、その際は適宜変換)
(3)その数えた結果を、ファイル(CSVとか)に、セレクタと該当数を1行にカンマ区切りで出力
→注目すべきは、該当数が0のセレクタですね。
といった処理を行うプログラムを書くことになるかと思います。
プログラム1の出力をテキストファイルにしないで、プログラム1と2を結合した
1個のプログラムにすることもできますが、ここではストーリーを分かりやすく
するために分割して2つのプログラムにしています。
このアウトラインを実装するには、HTMLのパーサー、DOM、セレクタ、XPath周辺の
知識があれば、そんなに作るのに難易度の高いプログラムにはならないと思います。
あとは、
- 1つのCSSが複数のCSSをimport している場合
や
- 静的なHTMLではなく、プログラムで動的にHTMLを作っている場合(例:Smarty、JSPなど)
に対応しなければなりませんが、これらは 1HTML-1CSSのチェックの応用なので、
(それなりに時間はかかると思いますが、)すごく難しいアルゴリズムを考えないと
クリアできない種類の難問ではないと思います。
これを実装する言語としては、PHPでもJavaでもRubyでも、または他の言語でも
できそうな気がしますが、機能が充実しているHTMLパーサーのライブラリがある
言語を選ぶのがよいと思います。
とはいえ、HTMLから、CSSセレクタなりXPathで要素を取ってくるのは、いわ
ゆるスクレイピングと呼ばれるよく知られた技術の範疇なので、どの言語でも便利な
ものはあると思います。(JavaならJsoup、RubyならNokogiri、など)
以上が、私からの回答としての
「こんなプログラムを書けばいいのでは?」
というのものになります。
(やや突き放した回答で申し訳ないのですが)もしgrapeeeさんのお近くで、上記の
プログラミングができそうな方がいらっしゃれば、ご相談されてみてはいかがでしょうか?
私からの回答は以上です。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/05/04 11:01
2015/05/04 11:10