こんにちは、みみです。

WP REST API と私とVueとシリーズ？第三弾として、画像から色を取得して表示するのをやってみました。

といっても、そもそもは、Vueで記事取得するだけだとつまらないので、5月の時にやってみてたものです。html上でやるにはサラッと出来たのですが、別ファイル化する際に変に回り道をしてしまって、やっとこまとまりました。出来てみればなんてことないコードなのですが。

色を取得できるライブラリはいくつかありますが、私が気に入ったのは

briangonzalez/rgbaster.js: ? A simple library for extracting dominant colors from images.

イメージソースは img url でもオブジェクトでもOKで、素のJavaScriptなのがポイント。

これを使って、WP REST API の img url から色を取得してオブジェクトにして入れてVueで出す、っていうだけのものです。動いているデモはこのサイトのトップ。

vm.posts に axios などで取得したAPIのデータを入れる前提です。Vueとrgbasterを読み込むのも忘れずに。

肝は、imgUrlにサムネイル画像を指定（._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_urlっていうめっちゃ深いところにある）してあげるところと、リアクティブのためにVue.setを使うところ。最初、 push を使ってしまって躓いたところです。Vueのリアクティブの難しいことはここに書いてあります。取り敢えずsetを使えば救われます（）。

サムネイル画像指定するの当たり前だろと今なら思うのですが、何にも考えずに元ファイル指定していてめっちゃ時間がかかって慌てたのは内緒。ちゃんと設計せずに行き当たりばったりにコードを書いてはいけないという教訓でした（デジャヴ？）。

ホントは値を返すようにしたかったのだけれど、RGBasterの非同期を待つ処理が分からず。asyncで受け取れると思ったのだけど、上手くいかなかった…。

結果、仕上がったものがあんまりおもしろくないので、もうひと工夫したいなあと思っています。