サイト内の文字をハイライトする一万円の案件は。 #案件
2022.12.18
おはようございます、笑う門には福来る😆この記事は月曜日の朝に書いたものです💦。
先日、Chromeの拡張機能でサイト内の文字をハイライトする一万円の案件を募集しておりました。この一万円の案件は妥当な金額なのかが“????”。例えば人工知能をゴリゴリと使えるスーパーエンジニアにとっては朝飯前の案件だと思いますが、見習いエンジニアにとっては難しい案件なのかもしれない。
この一万円という金額は人によって高くもなるし安くもなるかもしれないです。要するに見習いエンジニアが3日間かけて納品した場合とスーパーエンジニアがものの数秒で納品した場合を日本の平均時給で考えると一方は黒字でもう一方は赤字になる。
そう考えると今回の文字をハイライトするという案件は適正価格なのかもしれない。
因みにこの文字をハイライトするChromeの拡張機能はもう存在しており無料で公開されている。そう考えると一万円も貰えるというのはラッキーなのかも知れない。
尚、文字をハイライトするコードは下記により参照ください（デモページはこちら）。
let funs = {
init: { htmlcode: document.getElementById("vals").innerHTML },
highlight: function (e) {
document.getElementById("vals").innerHTML = funs.init.htmlcode;
if (!String(this.value).match(/[a-zA-Z]/) && this.value) {
document.getElementById("vals").innerHTML = String(funs.init.htmlcode).replace(new RegExp(this.value, 'g'), '<span style="color:red">' + this.value + '</span>');
}
},
inputevent:function(){
document.getElementById("txt").addEventListener("input", this.highlight);
}
};
funs.inputevent();
タグ
a-zA-Z, addEventListener, document.getElementById, function, funs.init.htmlcode, getElementById, gt, highlight, htmlcode, init, innerHTML, inputevent, lt, match, quot, replace, string, this.highlight, this.value, 朝飯前,
JavaScriptで背景色を変更するコードです。保持機能あり。
2022.07.22
こんにちは、JavaScriptで背景色を変更するコード＋保持機能ありのコードを記載しますね。カラー色の保管はCookieを使用して対応しています。もう少しソースコードを短く出来るような気がしますが、お昼から出かけるのでこれで一旦終了とさせて頂きます。
let htmlcode = ["#181B39","#262a2e","#192734","#1c483b","#bf7800","#83094f"].map(elm =>`<span class='color_code' style='color:${elm}' data-color-code='${elm}'>■</span>`).join("\n");
const basecolor = "#262a2e";
let cookiefn = function (val) {
let CodeColor = val;
let r = document.cookie.split(';');
return r?((r)=>{
for(let ii = 0 ;ii<r.length;ii++){
let content = r[ii].split('=');
for(let i = 0 ;i<content.length;i++){
if(content[i].replaceAll(" ","")==="bgcolor_code"){
CodeColor = content[i +1];
}
}
}
return CodeColor;
})(r):CodeColor;
};
let old_color = cookiefn(basecolor);
console.log("log=" + old_color);
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
let ColorCodeObject = document.querySelectorAll(".color_code");
for (const key in ColorCodeObject) {
if (Object.hasOwnProperty.call(ColorCodeObject, key)) {
const element = ColorCodeObject[key];
element.addEventListener("click", function (element) {
for (let ii = 0; ii < document.styleSheets.length; ii++) {
if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
let element_css_code = document.styleSheets[ii].cssRules[i];
let rgbfn = function (hex) {
let red = parseInt(hex[1] + hex[2], 16);
let green = parseInt(hex[3] + hex[4], 16);
let blue = parseInt(hex[5] + hex[6], 16);
return `rgb(${red},${green},${blue})`;
};
try {
if (element_css_code.style.backgroundColor.replaceAll(" ","") === rgbfn(old_color).replaceAll(" ","")) {
console.log(rgbfn(old_color));
element_css_code.style.backgroundColor = rgbfn(ColorCodeObject[key].getAttribute("data-color-code"));
}
} catch (error) {
//console.log("not backgroundColor");
}
}
old_color = ColorCodeObject[key].getAttribute("data-color-code");
document.cookie = "bgcolor_code=" + old_color;
}
}
});
}
}
(function(){
for (let ii = 0; ii < document.styleSheets.length; ii++) {
if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
let element_css_code = document.styleSheets[ii].cssRules[i];
let rgbfn = function (hex) {
let red = parseInt(hex[1] + hex[2], 16);
let green = parseInt(hex[3] + hex[4], 16);
let blue = parseInt(hex[5] + hex[6], 16);
return `rgb( ${red}, ${green}, ${blue})`;
};
try {
console.warn(element_css_code.style.backgroundColor.replaceAll(" ","") + " === " + rgbfn(old_color).replaceAll(" ",""));
if (element_css_code.style.backgroundColor.replaceAll(" ","") === rgbfn(basecolor).replaceAll(" ","")) {
element_css_code.style.backgroundColor = rgbfn(old_color);
}
} catch (error) {
//console.log("not backgroundColor");
}
}
document.cookie = "bgcolor_code=" + old_color;
}
}
})();あとソースコードとは関係ありませんが、今日は４４度を超える県が出てくると人工知能が予測したそうです、４４度って凄まじく暑いと思いますので熱中症対策はしっかりとしてくださいね。
尚、このコードを可変してご自由に使用して構いませんが、出来ればお声掛けして頂けると嬉しいです。また、この記事のシェア、いいね等よろしくお願いします。
タグ
backgroundColor.replaceAll, basecolor, catch, CodeColor, ColorCodeObject, cookiefn, document.getElementById, element, elm, hex, htmlcode, insertAdjacentHTML, join, match, parseInt, querySelectorAll, replaceAll, RGB, styleSheets, val,
タイトルの下に背景色を変える■を追加しました。
2022.07.22
おはようございます、背景色を変える■を追加しました。四角をクリックすると背景色が変わります、ソースコードは下記になります。取り分けて難しくないソースコードになると思いますが、少しだけ解説をします。このソースコードはスタイルシートの記述（ファイルなど）を読み込んでバックグラウンドカラーの一部のカラーだけを任意のカラーに置き換えています。
let htmlcode = `
<span class='color_code' style='color:#262a2e' data-color-code='#262a2e'>■</span>
<span class='color_code' style='color:#192734' data-color-code='#192734'>■</span>
<span class='color_code' style='color:#1c483b' data-color-code='#1c483b'>■</span>
<span class='color_code' style='color:#bf7800' data-color-code='#bf7800'>■</span>
<span class='color_code' style='color:#83094f' data-color-code='#83094f'>■</span>
`;
let old_color = "#262a2e";
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
let ColorCodeObject = document.querySelectorAll(".color_code");
for (const key in ColorCodeObject) {
if (Object.hasOwnProperty.call(ColorCodeObject, key)) {
const element = ColorCodeObject[key];
element.addEventListener("click", function (element) {
for (let ii = 0; ii < document.styleSheets.length; ii++) {
if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
let element_css_code = document.styleSheets[ii].cssRules[i];
let rgbfn = function(hex){
let red = parseInt(hex[1]+hex[2],16);
let green = parseInt(hex[3]+hex[4],16);
let blue = parseInt(hex[5]+hex[6],16);
return `rgb(${red}, ${green}, ${blue})`;
};
try {
if (element_css_code.style.backgroundColor === rgbfn(old_color)) {
//console.log(rgbfn(old_color));
element_css_code.style.backgroundColor = rgbfn(ColorCodeObject[key].getAttribute("data-color-code"));
}
} catch (error) {
//console.log("not backgroundColor");
}
}
old_color = ColorCodeObject[key].getAttribute("data-color-code");
}
}
});
}
}ソースコードも上から下へ進む感じで読んでいただけたら、読めるはずです。尚、躓く箇所といえば１６進数でスタイルシートに記述しているものもRGBで格納されている所ですね。ここの比較が「えっ」って感じになるぐらいでしょうか。あとはそれ程、難しくないソースコードだと自負しております😌。
この頃、jqueryを触らなくなって悲しいかな仕様を半分ぐらい忘れております。やはりコードは毎日書くべきかなって思います。
タグ
backgroundColor, catch, ColorCodeObject, cssRules, document.getElementById, element, getAttribute, hex, htmlcode, Ii, insertAdjacentHTML, jquery, match, parseInt, querySelectorAll, quot, RGB, rgbfn, string, styleSheets,