新しくなったFontFaceSet

はじめに

最近ChromeのWebFonts周りをいじっていて、練習がてら実装したFontFaceSetの機能を紹介します。JavaScriptからdocument.fontsで参照できるアレです。

仕様

CSS Font Loading APIで定義されています。最近setlike、maplikeの仕様が出てきたので、FontFaceSetも追従してsetlike<FontFace>としての振る舞いを実装する事になりました。

Chromeでの実装（47以前）

FontFaceSet自体は以前からChromeに入っていたのですが、setlikeとしての振る舞いが実装されておらず、最新の仕様書に追従できていませんでした。

新しい実装（48以降）

setlikeとしての振る舞いをフルに実装しています。具体的にはentries()、keys()、values()と言った関数が呼べるようになっており、for...of構文などでiteratorとして回せるようになりました。

余談: setlikeとWeb MIDI API

もともとECMA Script 6の機能としてSetとMapが定義されていたのですが、Web MIDIでMIDIInputMap、MIDIOutputMapの議論をしている際、標準的なツールとしてreadonlyなMapが欲しいよね、という議論から派生してmaplike、setlikeが誕生しました。WebIDLも更新され、今では当たり前のようにあちこりの仕様で利用されています。Chromeの実装ではmaplikeを使ったインタフェースはいくつかあったのですが、setlikeは今回が初めてです。

Web MIDI自体はまだまだ限られた一部のユーザのみが喜んで使っている状況ですが、仕様の面ではわりと普段使いの機能に食い込んでますね。

maplike、setlike以外にPromiseなんかも一番乗りでした。

Permissions APIでもWeb MIDIのためにPermissionDescriptorという概念を導入してもらっています。

Prefer Secure Origins For Powerful New Featuresの方針に従って出荷されたAPIとしても最初期のものです。

AndroidでChromeベースのWebViewがOSとは独立してアップデートされるようになってから追加された（WebViewのAPIに影響を与えた）最初のAPIでもあります。今までAndroidはAPI levelで互換性を維持してきましたが、Web MIDI以降はAPI levelとは独立してPermissionRequestに渡る文字列のバリエーションが増える事になりました。（blacklistでpermission判定していた人はwhitelistに変更しましょう、将来追加される未知のpermissionを認めることになってしまいます）。SDK的にはAPI level 23以降でRESOURCE_MIDI_SYSEXが使えますが、22以前でも"android.webkit.resource.MIDI_SYSEX"を文字列として指定すれば判定できます。

閑話休題

さて、FontFaceSetの話に戻ります。知っている方は知っていると思いますが、Chrome Platform StatusというページでChromeにおける新機能の実装状況が確認できます。今回のFontFaceSetについてはこちらがエントリとなります。サンプルコードのリンクもありますので、ぜひご活用ください。