カラーコードソムリエに私はなる
最近業務やtechのネタ作りをしていて、デザインベースのあるものからコードやレイアウトを組むことがありまして。
そのときにふと思ったこと。
例えばあるサイトのテンプレートの配色を参考にしたい、と言う場合。
「いちいち要素の配色をChromeの検証を開いて調べるのは面倒だなー」
「カラーコードがパッと見て読める能力があればいいのに…」
「そう、ワインソムリエが見ただけで銘柄を当ててしまうように…」
よし、じゃあその能力、身につけようではないか！！
（はい？
カラーコードソムリエに私はなる
（いきなりカラーコードソムリエってなんなんだ←）
、、、と言っても、さすがに今からカラーコードを絶対音感のように極める時間もなく。
ここはエンジニアとして、技術でその能力の代用品を作ってしまいましょう！
機能的には単純な以下の設定で作成していきます。
- 使用言語はJavaScript
- カラーコードを知りたい要素をmouseover
- jQueryのtooltipでカラーコードを表示
能力の源を生み出す
早速能力を作っていきましょう！
まずはmouseover時の要素のスタイルを取ってくる処理を。
今回はカラーコードということで、スタイルのcolorとbackground-colorとborder-colorを取ってきましょう。
window.onmouseover = function (e) {
var target = e.target;
var colorData = {
"color": "",
"background-color": "",
"border-color": ""
}
var computedStyle = window.getComputedStyle(target, null);
for (var prop in colorData) {
if (target.style.hasOwnProperty(prop)) {
colorData[prop] = computedStyle[prop];
if (target.style[prop]) {
colorData[prop] = target.style[prop];
}
}
}
}
直接elementにスタイルが適用されていないことも見越して、
window.getComputedStyleで前提条件を取得してからtarget.styleの指定スタイルを格納しています。
これで欲しい情報は手に入りました。
しかし、このままだと色の形式がHEXとRGBが混在してしまいます。
なんとかHEXだけにしたいなと。
function changeTohex(color)
{
var rgb = color.match(/(\d{1,3}), (\d{1,3}), (\d{1,3})/);
if (!rgb) {
return color;
}
rgb = [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])]
// 16進数に変換
var hex = "#" + rgb.map(function (value) {
return ("0" + value.toString(16)).slice(-2);
}).join("");
var rgba = color.match(/\d{1,3}, \d{1,3}, \d{1,3}, (\d*?(?:\.?\d+))?\)$/);
if (!rgba) {
return hex;
}
// rgbaの場合
var alpha = Math.round(Number(rgba[1]) * 100) / 100
alpha = Math.round(alpha * 255)
var alphaHex = (alpha + 0x10000).toString(16).substr(-2).toUpperCase();
return hex + alphaHex;
}
HEXはRGBの数値を16進数で表した文字コードなので、それを変換できるメソッドを用意しました。
alphaが指定されていた場合も対応しています。
これを先ほど取得したスタイルに適用することでHEXが取り出せます。
続いてjQueryのtooltipを使って取り出したスタイルを表示させます。
$(target).attr('title', '');
$(target).tooltip({
tooltipClass: "ccs-tooltip",
content: function() {
return `
<div class="ccs-tooltip-content"
style="color: ${colorData["color"]};
background-color: ${colorData["background-color"]};
border-color: ${colorData["border-color"]};">
color: ${colorData["color"]}<br>
background-color: ${colorData["background-color"]}<br>
border-color: ${colorData["border-color"]}
</div>
`
}
}).tooltip('open');
mouseoverイベントが稼働しているので、tooltip自体にさらにtooltipがかかってしまわないよう固有のclassを設定しています。
あとはこのクラスを含まないものにだけ能力が発動するようにif文を冒頭に書き足すだけです。
実際に出来上がったコードはこちらから
→ カラーコードソムリエの能力の源
能力発動方法
さぁ先ほど作った能力をどう発動させようか。
いちいち検証を開いてこのコードをコンソールに書くのは面倒だな。。。
そこで思いついたのはChrome拡張機能。
せっかくJavaScriptで書いたことですし、環境的にはちょうどいいですね。
ちなみに以前はAngularで指定日時に自動でサイトを開く拡張機能を作成した記事を上げています。
→ Chrome拡張機能をAngularで作ってみた
ではさっそく拡張機能として必要なmanifest.jsonを用意します。
{
"name": "Color Code Sommelier",
"manifest_version": 2,
"short_name": "CCS",
"author": "mao-miyaji",
"version": "1.0.0",
// 一部省略
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["js/jquery-3.3.1.min.js", "js/jquery-ui.min.js", "content.js"],
"css": ["css/jquery-ui.min.css", "css/style.css"]
}]
}
この能力を発動させるにあたって、jQueryのjsとcssファイル読み込みが必要なのでcontent_scriptsに設定します。
基本的にはこれだけで完了です！
能力を発動させてみる
作成した能力を拡張機能に読み込ませて準備完了！
いざ、発動….
おおおお。見える。
カラーコードソムリエになれた。。。←
最後に
この能力ではカラーコードしかわかりませんが、応用を利かせればどのスタイルでも見ることができますね。
色々なページで表示を確認していましたが、
「タグに直接styleを付与している」かつ
「色の指定にredやblueなどの名称を設定している」
という条件下だと、HEXのカラーコードが取得できないことがわかりました。
また、tooltipがたくさん出てくるので情報量が多すぎて逆に困惑するという事態が。。。
…まだまだ不完全な能力ですね←
今回作成したカラーコードソムリエになれるコードはgitHubにて公開しております。
良ければ皆さんもこの能力身につけてみてくださいね！
mao-miyaji/chrome_ccs
（ちょっとネタに走り過ぎた記事でしたが最後まで茶番にお付き合いくださいありがとうございました！）
参考
