2022年7月22日 | zip358.com

小中大

■ ■ ■ ■ ■ ■ ■

Home > 2022年 > 7月 > 22日

Photo by Sharon McCutcheon on Pexels.com

JavaScriptで背景色を変更するコードです。保持機能あり。

2022年07月22日

Logging

この投稿は1年以上前に公開されました。 現在の情報とは異なる可能性がありますので、ご了承ください。

こんにちは、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;
            }
        }    
})();

あとソースコードとは関係ありませんが、今日は４４度を超える県が出てくると人工知能が予測したそうです、４４度って凄まじく暑いと思いますので熱中症対策はしっかりとしてくださいね。

尚、このコードを可変してご自由に使用して構いませんが、出来ればお声掛けして頂けると嬉しいです。また、この記事のシェア、いいね等よろしくお願いします。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2022年07月22 11:35日

タグ

backgroundColor.replaceAll, basecolor, catch, CodeColor, ColorCodeObject, cookiefn, document.getElementById, element, elm, hex, htmlcode, insertAdjacentHTML, join, match, parseInt, querySelectorAll, replaceAll, RGB, styleSheets, val,

Home > 2022年 > 7月 > 22日

倉庫作業がロボットに仕事が奪われるまで、あと何年？

2022年07月22日

Logging

この投稿は1年以上前に公開されました。 現在の情報とは異なる可能性がありますので、ご了承ください。

おはようございます。退職してから一週間経過しましたが、まだ何ともです。

The Future of Robotics

さて、倉庫作業がロボットに仕事が奪われるまで、あと何年か考えてみました。自分の予想はあと数十年先だと思っていますが、これは既存のシステム、今までの倉庫作業を置き換えるという意味であって今までとは考え方を変えてロボットに優しい倉庫システムを作ったのならばロボットは人型ロボットではならないなどの制約は受けないのです。そういう倉庫（物流センター）2.0は、もう導入されています。

ロボットが倉庫を縦横無尽に走る　ニトリの通販商品、大量仕分け

なので、ゆくゆくは物流センター（物流倉庫）は上記の動画にもあるような、自動化へ置き換わると思います。それは時間の問題だと思います。因みに配送までも全てロボットに何れ置き換わると思いますよ。因みに自動化が行われるのは労働系よりもデスクワークのお仕事の方が早く置き換わると考えています。なので、実は職を失うのは労働者よりもデスクワーカーだったりしてそんな人々が労働へシフトしていくと可能性もあり労働者も大変な時代になる可能性はあると思います。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年07月22 05:58日

タグ

2.0, Future, of, Robotics, The, お仕事, これ, システム, センター, それ, デスク, ニトリ, ロボット, ワーク, 一, 上記, 予想, 人型, 仕事, 何, 何年, 作業, 倉庫, 全て, 制約, 労働, 動画, 商品, 問題, 大量, 導入, 意味, 数十, 方, 既存, 時間, 物流, 経過, 考え方, 自分, 自動, 退職, 通販, 配送,

Home > 2022年 > 7月 > 22日

タイトルの下に背景色を変える■を追加しました。

2022年07月22日

Logging

この投稿は1年以上前に公開されました。 現在の情報とは異なる可能性がありますので、ご了承ください。

おはようございます、背景色を変える■を追加しました。四角をクリックすると背景色が変わります、ソースコードは下記になります。取り分けて難しくないソースコードになると思いますが、少しだけ解説をします。このソースコードはスタイルシートの記述（ファイルなど）を読み込んでバックグラウンドカラーの一部のカラーだけを任意のカラーに置き換えています。

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で格納されている所ですね。ここの比較が「えっ」って感じになるぐらいでしょうか。あとはそれ程、難しくないソースコードだと自負しております😌。