iconHoudiniというプロジェクトをご存知ですか?HoudiniはJavaScirptからアクセスできるCSSの機能を広げ、プログラマブルなCSSを実現するためのものです。APIを使って、ブラウザの上の魔術であるHoudiniを体験してみましょう。APIは、CSSで用いる画像をJavaScriptから動的に生成するためのAPIです。生成した画像は、background-imageやborder-imageで利用可能です。今までcanvas要素で無理やり実現していた複雑な背景なども、CSSの枠組みの中で実現することができるようになります。画像はプログラマブルに生成できるので、単なる静止画だけでなく、アニメーションさせることもできます。パラメータを使ったバリエーションも作成できます。APIの実装状況は現在のところあまり良くはありません。65でも一部機能はまだ使えません。65を前提に話を進めていきます。ソースコードこの記事で使用するソースコードはGithubで公開しています。以下のURLからアクセスできます。ご自由にお使いください。APIを使用するには、まずWorkletと呼ばれるものを作成する必要があります。WorkletはWorkerの一種で、特定用途向けの環境で実行されます。APIで使用するのはPaintWorkletと呼ばれていて、描画に関係する環境を備えたWorkletとなります。PaintWorkletはメインスレッド(UIスレッド)で動作します。PaintWorkletの作成は簡単で、まず別ファイルとして(たとえばworklet.jsとしましょう)JavaScriptファイルを作り、その中に任意の処理を書きます。APIを使用するには、まず適当なクラスを作ります。そのクラスの中にpaintメソッドを実装します。最後にregisterPaint関数でクラスを登録します。CirclePainter);paintメソッドは引数を3つ取ります。最初の引数contextはCanvasの2DContextとほぼ同じです。contextに対して描画命令を発行することによってグラフィックを生成できます。height)を含むオブジェクトです。他の情報は含んでいません。最後のpropertiesはアクセスできるCSSプロパティの一覧です。これについては後述します。contextを受け取って、geometryでサイズを測りながら、好きに図形を描いていけば完成するというわけです。この例では、要素の中心に半径50pxの赤い円を描いています。最後にregisterPaint関数で任意の名前で登録します。今回はcircleという名前で登録しました。</script></body></html>CSSから利用するには、まずCSS.paintWorklet.addModuleメソッドを使ってWorkletを登録します。CSS側で、「paint(登録した名前)」とすることで画像として扱うことができます。今回はbackground-imageに使用しています。何も中身のない500×500のdiv要素にこのpaint(circle)を背景として適用しています。これを実行してみます:赤い丸が表示されました!注意点PaintWorkletにはひとつ注意点があります。それはcontextはcanvas要素のcontextとは完全に一緒ではないということです。簡単にいうと、いくつかの機能が欠けています。具体的にいうと、テキスト描画系の命令は存在せず、imageData系の命令も使えません。canvasのサブセットということに注意しつつ使用しましょう。CSSのプロパティを読み出すPaintWorkletを使用することでCSS用のグラフィックを描画することができました。これでは何か物足りません。凝ったことをしてみましょう。先ほどの例でも少し見えましたが、paintメソッドはpropertiesという引数を受け取ります。これはCSSのプロパティを読み出すために使う引数です。CSSのプロパティをパラメータとして使うことで、柔軟にバリエーションを作ることができます。inputPropertiesを実装し、読み取りたいプロパティの名前の配列を返します。paintメソッドの第3引数であるpropertiesからgetメソッドを使って値を取得します。inputPropertiesゲッターを定義する。ここで配列として返したプロパティを取得できる。CirclePainter);properties.getで返ってくるのはCSSStyleValueなのでtoStringメソッドで文字列に変換します。あとは普通にその値を使えば、プロパティをパラメータとしての描画ができます。</script></body></html>これを実行してみます:今度は青い円が描画されました!これで自由自在に描画できます。CSSのプロパティを使ってパラメータを実現することができました。プログラミングに少し興味のある人なら「方法がちょっとダサい」と思うはずです。そこでもう少し賢い方法が用意されています。CSSで使うpaint()に、引数として値を渡す方法です。inputArgumentsを実装します。inputArgumentsは引数の型の配列を返します。引数が色ならば'<color>’という文字列を配列に入れます。複数の引数を定義するときは、その数だけの型文字列を配列に入れてください。paintメソッドの引数を4つに増やします。4つめの引数がCSSでの引数になります。inputPropertiesを定義する。ここで配列として返したプロパティを取得できる。配列には型情報(文字列)を入れる。CirclePainter);このようにしてCSSから引数を受け取ることができるようになります。ここで少し馴染みの薄いものが出てきます。ここには'<color>’や'<length>’などを指定します。これらの型については詳しくは以下のURLをご覧ください:https://www.w3.org/TR/css-properties-values-api-1/#supported-syntax-stringsアニメーションさせる静止画がひとつ描画されるだけ、というのもなんだか面白くないです。今度はアニメーションさせてみましょう。アニメーションには、プロパティの取得かCSSの引数を使います。値をどんどん変化させていくことで、アニメーションが実現できます。実際にやってみましょう。Wroklet側ではCSSのプロパティを見て描画する図形を変えます。CirclePainter);そしてJavaScriptでプロパティをどんどん変化させていきます。VariablesはTransition/Animationに対応していなため、requestAnimationFrameを使っての手動での変化になります。requestAnimationFrameを使ったアニメーションに馴染みのない方は、「JavaScriptとcanvasでアニメーションを作る」もあわせてご覧ください。アニメーションさせる。Variablesには対応してないので手動で動かす。APIを使うことで、CSSで使える画像を様々に生成できます。対応ブラウザが少ない状況ですが、実装が増えればいろいろと使いどころのあるAPIとなっています。各ブラウザの足並みが揃ってきたら、ぜひ使ってみましょう。APIを利用してリクエストを送信するRSSプロフィール古都ことふるみやことです。フロントエンドとかいろいろやるよ。