プロジェクト「FEATGRAPH」を公開しました

新たなプロジェクト「FEATGRAPH（フィートグラフ）」を公開しました。

web-features のカタログデータを使用して、グリッドシステム上に図形を描画するデザインプロジェクトです。

執筆時点では 1070 点にも及ぶ、ウェブプラットフォームの各機能の Baseline（主要ブラウザのサポート）のデータをもとに図形を描いています。

絞り込み機能や、フィルタ、スタイル、サイズ変更などのエフェクト機能、並び順をシャッフルする機能を備えています。また、リスト上の各機能を選択することで、機能の概要やブラウザがサポートを開始したバージョンなどの詳細情報が表示されます。

`web-features` のデータ

web-features では、以下のデータを JSON 形式で取得することができます。

データ	内容
`browsers`	主要ブラウザのリリースデータとバージョンの一覧
`features`	各機能の概要と Baseline ステータス、主要ブラウザのサポートバージョンなど
`groups`	各機能のグループの一覧
`snapshots`	ECMAScript のスナップショットの一覧

本プロジェクトでは、features のみを使用しています。たとえば、CSS の mix-blend-mode であれば以下のようなデータで構成されています。

features の JSON データの例

{
  "mix-blend-mode": {
    "caniuse": [
      "css-mixblendmode"
    ],
    "compat_features": [
      "css.properties.mix-blend-mode",
      "css.properties.mix-blend-mode.plus-darker",
      "css.properties.mix-blend-mode.plus-lighter",
      "css.properties.mix-blend-mode.svg_elements"
    ],
    "description": "The mix-blend-mode CSS property blends an element's content with its background or parent elements using blend modes like multiply, difference, or color.",
    "description_html": "The <code>mix-blend-mode</code> CSS property blends an element's content with its background or parent elements using blend modes like <code>multiply</code>, <code>difference</code>, or <code>color</code>.",
    "group": [
      "blend-mode"
    ],
    "kind": "feature",
    "name": "mix-blend-mode",
    "spec": [
      "https://drafts.fxtf.org/compositing-2/#mix-blend-mode"
    ],
    "status": {
      "baseline": "high",
      "baseline_high_date": "2022-07-15",
      "baseline_low_date": "2020-01-15",
      "support": {
        "chrome": "41",
        "chrome_android": "41",
        "edge": "79",
        "firefox": "32",
        "firefox_android": "32",
        "safari": "8",
        "safari_ios": "8"
      }
    }
  }
}

ここから必要となるデータのみを抜き出して、HTML や CSS を生成しています。

図形の描画

各アイテムは、以下の 3 つの図形から構成されています。

A. 基本図形
B. 反転した図形
C. 縮小して回転した図形

A. 基本図形

基本図形は、10x10 のグリッドシステム上にポイントを指定しています。このポイントの座標は、該当する機能をサポートしたブラウザのバージョンの末尾の数字を参照しています。

基本図形の例

ポイントの対象となるブラウザは、Chrome、Edge、Firefox、Safari の 4 つで、それぞれ、上辺、右辺、下辺、左辺に対応しています。

ブラウザ	辺	方向
Chrome	上辺	左から右
Edge	右辺	上から下
Firefox	下辺	左から右
Safari	左辺	上から下

例えば、Chrome 48、Edge 15、Firefox 34、Safari 9.1 でサポートされた font-feature-settings であれば、末尾の数字である 8、5、4、1 をパラメータとして使用し、CSS の clip-path で図形を描画しています。

Widely available の例

ポイントが 4 点の場合は四角形、3 点の場合には三角形になりますが、2 点以下の場合には面が生まれないので図形が描画されません。つまり、サポートするブラウザが 2 つ以下の場合には空白（背景のみ）になります。

また、この基本図形や背景の配色は、Widely available、Newly available、Limited availability それぞれのカラーをベースとしています。

Newly available の例

Limited availability の例

B. 反転した図形

2 つ目の図形は、さきほどの「A. 基本図形」の向きを反転させて重ねています。さらに、mix-blend-mode: difference を指定して、重なる色も反転させています。

反転した図形を追加

図形の反転は、以下の 3 パターンのいずれかになります。

上下反転
左右反転
上下左右反転

どのパターンが適用されるかは、features 内の compat_features のアイテム数を 3 で割った数の余りで決めています。

ランダム感を出すのが目的のため、compat_features との関連性はありません。

C: 縮小して回転した図形

ここからさらに立体感や動きを出すために、「A. 基本図形」のサイズを 50% に縮小して、15 度回転させて重ねています。また、「B. 反転」と同様に、mix-blend-mode: difference を指定して、重なる色を反転させています。

縮小して回転した図形を追加

ちなみに、この図形に対しても、features のデータをもとに何らかの変化をつけてもよかったのですが、いろいろ試した結果、最終的には固定値に落ち着きました。

詳細情報

各アイテムを選択すると、詳細情報がオーバーレイ表示されます。

web-features のデータをそのまま使用しているので、テキストはすべて英語ですが、機能の概要や、Baseline ステータスと開始時期、サポートを開始したブラウザのバージョン、さらには Web platform features explorer と Web Platform Status へのリンクを表示しています。

このリンクのアイデアは、「Baseline timeline」を参考にしました。

また、詳細情報を開くと、URL に # とフラグメント識別子（id）が付与されるので、機能ごとのパーマリンクとして利用することができます。

設定の変更

「CONFIG」を開くと、設定を変更することができます。

FEATURES
FILTERS
STYLES
TRANSFORMS
BUTTONS

1. FEATURES

Widely available、Newly available、Limited availability それぞれの表示・非表示の切り替えと、キーワードによる絞り込みが可能です。

キーワード（「SEARCH」の入力フィールド）は機能の名前のみが対象で、大文字・小文字は区別しません（case-insensitive）。

2. FILTERS

図形に以下のフィルタをかけることができます。基本的には CSS の filter プロパティで効果を付与しています。

フィルタ	内容	関数
OFF	フィルタを無効化
CONTRAST	コントラストを増加	`contrast()`
HUE-ROTATE	色相を回転	`hue-rotate()`
INVERT	色を反転	`invert()`
GRAYSCALE	グレースケールに変換	`glayscale()`

「INVERT」を選択した例

3. STYLES

チェックボックスのオン・オフで要素のスタイルを変更することができます。

スタイル	内容
LABEL	機能名の表示・非表示
GRID	グリッド線の表示・非表示
CIRCLE	要素のコンテナを円に変形
SHRED	「A. 基本図形」にシュレッダー効果を付与
PIXELATE	図形にピクセレート効果を付与

「GRID」と「SHRED」をオンにした例

4. TRANSFORMS

カラム幅や図形のサイズを変更したり、回転することができます。

スタイル	内容
COLUMN	機能一覧のカラム幅の変更
SCALE	図形のスケールの変更
ROTATE	図形を回転

「INVERT」「SHRED」を選択して「SCALE」を最大値まで上げた例

5. BUTTONS

「SHUFFLE」ボタンを選択すると、要素の並び順がシャッフルされ、「RESET」ボタンを選択すると、すべて初期状態にリセットされます。

おわりに

このプロジェクトは、「Baseline から考えるブラウザサポート」というブログ記事を執筆したときに試した、web-features のデータを使って何か作りたいという動機から始まり、書籍『ANALOG ALGORITHM』に着想を得て形になりました。

『ANALOG ALGORITHM』の表紙 — 『ANALOG ALGORITHM アナログ・アルゴリズムグリッドシステムによる形の探求』（著者：クリストフ・グリュンベルガー、翻訳：百合田香織、監修：久保田晃弘、出版：株式会社ビー･エヌ･エヌ）

図形については、当初は SVG で実装していたのですが、パフォーマンス上の問題と、ブラウザによってフィルタのかかり方が大きく変わるという問題があったため、CSS の clip-path に移行した経緯があります。

とはいえ、要素の数が 1000 を超えるため、閲覧環境によってはパフォーマンスに悪影響を及ぼす可能性があり、依然として残された課題です。

また、web-features のデータは非同期で取得しているわけではないため、最新のデータを取得して、事前にビルドする必要があるという、メンテナンス上の課題もあります。

内容としては過去のプロジェクトに近似しており、その応用ともいえますが、これまでにはないポイントとしては、実用性を兼ね備えているということです。

より情報としての側面を重視するのであれば、たとえば、ブラウザのサポート期間の長さに応じてバーの長さを変える、ドットの数を増減させる、色を変化させるといったように、視覚的にブラウザのサポート状況を表現するアプローチも考えられそうです。

FEATGRAPH

web-features のデータ