Skip to content

Headless Chrome で CSS プロパティ情報の一覧を取得してみる

MDN の CSS プロパティの説明ページには、初期値や継承についての情報がまとまった次のようなテーブルがあります。

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

この情報は各プロパティの詳細ページに掲載されているのですが、全プロパティが一覧できるところは見つかりませんでした。そこで、クローラーを作成して各ページの情報をひとつにまとめてみました。

Headless Chrome

クローラーは Node.js だけでも作成できるのですが、今回は以前から使いたかった Headless Chrome を使ってみました。

また Headless Chrome には、Node.js から操作するための puppeteer というライブラリがあるので、今回はこれを使いました。

https://github.com/GoogleChrome/puppeteer

Node.js などのバージョンは以下の通りです。

  • OS: Windows10
  • Node.js: 8.7.0
  • npm: 5.4.2
  • puppeteer: 0.12.0

実装方針

今回は、次のような方法で全プロパティの情報を取得することにしました。

  1. リファレンスページ(https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)にアクセスし、Keyword index 欄にまとめられているリンクから、各プロパティの詳細ページの URL を取得する。
  2. 各プロパティの詳細ページにアクセスし、欲しい情報を取得する。このとき、効率と負荷を考慮して全ページ同時ではなく5ページずつアクセスする。
  3. 取得した情報を整形し、テキストファイルとして出力する。
  4. 出力したテキストファイルを、煮るなり焼くなりする。

ソース

クローラーのソースです。

ちなみに全ページの情報をまとめるのに、私の環境では4分弱かかりました。

活用例

煮るなり焼くなりしたサンプルです。

結果をテーブルで表示し、Vue.js で絞り込み機能を実装しました。

See the Pen CSS Property Features by okaka (@okaka) on CodePen.light

 

Comments are closed.