<h2 id="️-この記事はまだ編集中です">✍️ この記事は、まだ編集中です。<a aria-hidden="true" tabindex="-1" href="#️-この記事はまだ編集中です"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16" class="inline align-baseline"><path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path></svg></a></h2>
<h3 id="todo">TODO<a aria-hidden="true" tabindex="-1" href="#todo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16" class="inline align-baseline"><path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path></svg></a></h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" disabled> 方法をざっとまとめる</li>
<li class="task-list-item"><input type="checkbox" checked disabled> <code>node-vibrant</code> を使ってみる</li>
<li class="task-list-item"><input type="checkbox" disabled> 実装してみる</li>
</ul>
<p>apple の emoji 絵文字の色を抽出して背景色を設定したい。</p>
<p>とりあえず、写真で色を取得するコードを書いた
<a href="https://node-vibrant-example.vercel.app/">https://node-vibrant-example.vercel.app/</a></p>
<p>apple 絵文字から色を抽出できた
<a href="https://node-vibrant-example.vercel.app/">https://node-vibrant-example.vercel.app/</a></p>
<p>コードを追加していると、<code>CreateListFromArrayLike called on non-object</code>の<code>worker.js</code>エラーがめちゃくちゃでて、原因不明で悩んでいたところ、バージョン問題だった。バージョンを変更したらエラーがでなくなった。（2022.05.22 時点）</p>
<p><code>"node-vibrant": "^3.2.1-alpha.1"</code> -> <code>"node-vibrant": "^3.1.6"</code></p>
<p>詳しくは、ここ ↓</p>
<p><a href="https://github.com/Vibrant-Colors/node-vibrant/issues/113">https://github.com/Vibrant-Colors/node-vibrant/issues/113</a></p>
<h2 id="使うライブラリ">使うライブラリ<a aria-hidden="true" tabindex="-1" href="#使うライブラリ"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="16" height="16" class="inline align-baseline"><path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path></svg></a></h2>
<ul>
<li><a href="https://github.com/Vibrant-Colors/node-vibrant">node-vibrant</a></li>
<li><a href="https://github.com/iamcal/emoji-data">emoji-data</a></li>
<li><a href="https://github.com/twitter/twemoji-parser">twemoji-parser</a></li>
</ul>


## ✍️ この記事は、まだ編集中です。

### TODO

- [ ] 方法をざっとまとめる
- [x] `node-vibrant` を使ってみる
- [ ] 実装してみる

apple の emoji 絵文字の色を抽出して背景色を設定したい。

とりあえず、写真で色を取得するコードを書いた
https://node-vibrant-example.vercel.app/

apple 絵文字から色を抽出できた
https://node-vibrant-example.vercel.app/

コードを追加していると、`CreateListFromArrayLike called on non-object`の`worker.js`エラーがめちゃくちゃでて、原因不明で悩んでいたところ、バージョン問題だった。バージョンを変更したらエラーがでなくなった。（2022.05.22 時点）

`"node-vibrant": "^3.2.1-alpha.1"` -> `"node-vibrant": "^3.1.6"`

詳しくは、ここ ↓

https://github.com/Vibrant-Colors/node-vibrant/issues/113

## 使うライブラリ

- [node-vibrant](https://github.com/Vibrant-Colors/node-vibrant)
- [emoji-data](https://github.com/iamcal/emoji-data)
- [twemoji-parser](https://github.com/twitter/twemoji-parser)


appleのemoji絵文字の色を抽出して背景色を設定したい.css-1hfsh05{display:inline-block;font-weight:normal;white-space:nowrap;margin-left:1rem;opacity:0.3;}[open]

✍️ この記事は、まだ編集中です。

TODO

使うライブラリ

appleのemoji絵文字の色を抽出して背景色を設定したい[open]