こんにちは。UI大好きフロントエンド担当の@ykskです。主な仕事はコメントを書くことです。。

さて、先日pixivにプレミアム会員限定のアクセス解析機能が付きました。

プレミアム会員の方はこちらからご自分のレポートを見ることがきます。会員でない方はこちらに登録ページが、また、こちらにサンプルページがあります。主な機能は現在のところ以下の通りです。

イラストの全作品とそれぞれの作品についての閲覧数、総合点/評価回数、コメント数、ブックマーク数と被フォローユーザー数を直近1週間のグラフで見ることができる
作品のリファラー（pixiv内外のどこから訪問されたか）を見ることができる
最近反応のあった作品のリストを見ることができる

今回僕はUIの設計とJS、HTML、CSSの実装を担当したのですが、その際メイン機能のグラフを描く部分ではD3というデータのビジュアライズに特化したライブラリを使ってみました。適当に書くだけでそれっぽくなって素晴らしい。非常に多機能でとても使い切れませんでしたが、その中でも便利だった機能を紹介します。

対応付けが便利

値をピクセルに対応付けしたり、日付データから軸のテキストを自動的に作成していい位置に配置したり。めんどくさそうな部分は大抵機能が用意されています。

日付の目盛りを表示する例です。

D3はSVGで描画を行うので、当然SVGを操作するメソッドも用意されています。色や配置などの調整にはそれらのメソッドを使って、直接要素のプロパティーを編集する形で行います。多少SVGの知識が必要になります。

標準で用意されるレイアウトが便利

D3にはよく使う表現を簡単に作ることができるレイアウトが多数用意されています。アクセス解析機能の総閲覧数グラフでは1つの棒グラフに男女の内訳を表示しますが、こういった表示も簡単に記述できます。

データを表示する際、D3がそのまま解釈できる構造でデータを渡すと捗ります。APIを設計する前にどんな形で受け渡しすると楽なのかを確認しておくといいかもしれません。

アニメーション追加が便利

現状のページではグラフにアニメーション効果を付けていませんが、これから追加しようと思った際にD3なら簡単に追加できます。

SVGのいいところ

前述のようにD3の描画はSVGを用いて行われるので、結果的にCSSでは不可能なSVGならではの効果を与えることもできます。

今回はSVGフィルターを使ってテキストの反転表示をすることにしました（デザインでこう指定されていたので……）。

linearGradientを使います。

# この例はSafariでテキストが滲む問題があります。またIE 8では効かないのでフォールバックする必要があります。

SVGはCSSよりも厳密に要素の配置ができたり（1pxにこだわれる）、またベクターデータなのでRetinaディスプレイへの対応も必要ありません。やったね。

僕自身久しぶりにSVGを使ったのですが、案外普通に使えるしありだなと思いました。

IE 8の対応

D3のドキュメントには「スタンダードに準拠したブラウザ向けに作っている」とあります。つまりSVGを扱えないIE 8はそのままだと表示できません。ツァ！

表示するだけであればR2D3というライブラリを通すことで概ね対応できます（いくつか制限があるので実装前に確認しましょう）。R2D3はRaphaëlというD3とは別のベクターデータ描画ライブラリの力を借りて、IE 8が対応するVMLで描画します。CSSや動きに関しては個別対応が必要になります。

ちなみにWindows XPのサポートは2014年4月9日に切れます。

まとめ

アクセス解析機能で利用したD3とSVGについて紹介しました。

pixivでは新機能を作る際、まずUIチームがあーでもないこーでもないとデザインするところから始まります。自分で表示を練って自分で実装したい。そんなあなたにおすすめの職種がUX/UIエンジニアです。思い入れのある方ご応募お待ちしております。コードに自由にコメントを書きたい方も歓迎ですが、JSファイルは将来的に圧縮する予定があります。よろしくお願いします。

次回は@Moyashipanが裏側やリリースまでの道程について紹介する予定です。