Chromium DashboardのCSS usage metricsとぼくらのusage metrics

火曜にGoogle JapanであったChrome Tech Talk Night #6でライトニングトークをしてきた。
イベント中ずっと資料とコードを書いてて内容をほとんど聞いてないという残念っぷり…こういうのやめたいね。

Chromium Dashboardの概要と、9月に追加されたCSS metricsの紹介と、自分がアクセスしたページならchrome://histogramsからデータとってこれるよという話をした。

資料はこちら。

Chromium Dashboard

以下ちょっといろいろ。

CSS usage metricsで気になるところ

すこしある。

Chromeが解釈できる機能に限定されること
現在のところプロパティのみということ
（たぶん）プロパティの「書かれた回数」をもとにしてないこと

ひとつ目は他のベンダー接頭辞つきプロパティの利用状況がわからないこと。たとえば-moz-border-radiusや-moz-opacity。Geckoはもう解釈しないけど、使われてるページはまだ多いだろうから、そういうのもわかるとうれしいなと。DevToolsでは他のベンダー接頭辞つきプロパティも表示してるので情報は取れると思うんだけど、むつかしいのかなあ。

ふたつ目は、linear-gradient()やinput関連の独自セレクタ、@ruleについてはわからない。ただ値についてはissueが上がっているので、やるひとがいたらなんとかなるかも。

みっつ目はややこしい。ちゃんとソース読んでないので保証できないんだけど、たぶんUseCounterの仕様からプロパティの「書かれた回数」ではなく「出現したか否か」を元にデータを出している。なのでこのmetricsで上位にあるプロパティはWebで多く「書かれている」プロパティではない。「使われている」とは言えると思うけど。そこらへんトリッキー。

ぼくらのCSS metrics

UseCounterを使う関係上、そのデータはGoogleしかわかんないことになる。オープンデータ！とか強く言うつもりはないけど、ちょっとくやしい。

グローバルなデータはないけれど、「ローカル」なデータは手に入る。UseCounterをはじめChromeが集めてるデータはchrome://histogramsで見られる。アクセスするとファンシーなアスキーアートが並んでると思う。DNS関連のあれこれとか、パフォーマンス関連のものが多い。

UseCounterはこの仕組みを使ってるので、このページから探し出せばいい。「ヒストグラム」としては失格だけど、データが手に入るからいいんだ。

で、データの取得がちょっと面倒。なんせ<pre>なアスキーアートなので。

はじめはXHRで自身をDocumentとして取得して、目的の<pre>を見つけて、そのtextContentに正規表現をかけて…ということをやっていた。そしたら先週末くらいにchrome://histograms/FeatureObserver.CSSPropertiesとかで絞り込めることがわかって、XHRのところは省けた。すっきり。

Chrome拡張にしようかと思ったのだけど、今のところchrome://なURLにXHRができない。フラグがあるけど有効にしたら使えるのかな。

そんな中途半端なところでおわった。4分オーバー。すいません。英語むつかしいです。