elm | DEEP DIVE: online

文字の背景に色を付ける．ハイライトを追加してみました．#即興コード．

2024.10.22

おはようございます．文字の背景に色を付ける＝ハイライトを追加してみました．付けた結果、ちょっとごちゃごちゃしている感はありますが、文章の目を引くことになるのかなと思っています、ちなみにハイライトをつけようと思ったきっかけはこのサイトを見て思いました．

犬の散歩中にプログラムを書く。真鍋大度がAIに見出す可能性とは？｜FUZE（フューズ） https://t.co/NezG9tKuSl
— 田岡寿章(taoka_toshiaki) (@taoka_toshiaki) October 17, 2024

思ってから実行に移すのは「思い立ったが吉日」タイプなので直ぐに手を動かすして書きました．

それほど対したコードではないものの．WordPressの記事の文章内にタグを基にして今回のようにハイライトを付けたり太文字にと思っている人は一定数いると思ったので何かの参考にしてみてください．

ソースコードはバニラJS（javascript）とCSSになります．

if (maincontent = document.querySelectorAll('#main_content > p')) {
    let words = [...document.querySelectorAll('.zip358tag > a')].map((elm) => {
        return elm.textContent;
    });
    if (words.length) {
        [...maincontent].forEach((maincontentElm) => {
            words.forEach((word) => {
                const regexp = new RegExp(word, 'g');
                if (maincontentElm.querySelectorAll('a').length === 0 && maincontentElm.querySelectorAll('img').length === 0) {
                    maincontentElm.innerHTML = maincontentElm.innerHTML.replace(regexp, '<strong class="highlight">' + word + '</strong>');
                } else {
                    nodeReplace(maincontentElm, regexp, words, word);
                }
            });
        });
    }
}

function nodeReplace(elm, regexp, words, word) {
    let key = [];
    if (elm.querySelectorAll('a').length) {
        [...elm.querySelectorAll('a')].forEach((e) => {
            key.push(e.outerHTML);
        });
    }
    if (elm.querySelectorAll('img').length) {
        [...elm.querySelectorAll('img')].forEach((e) => {
            key.push(e.outerHTML);
        });
    }

    if (nodeElmJudge(word, key) === true) {
        elm.innerHTML = elm.innerHTML.replace(regexp, '<strong class="highlight">' + word + '</strong>');
    }
}

function nodeElmJudge(word, key) {

    let result = [];
    result.push(...key.map(element => {
        const regex = new RegExp(word, 'g');
        return regex.test(element);
    }));
    return result.every(e => e === false);
}

strong.highlight{
    background: linear-gradient(transparent 40%, #2ff6da 40%);
}

明日へ続く．

著者名 @taoka_toshiaki

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

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

投稿日時 2024年10月22 06:00日

タグ

background, document.querySelectorAll, element, elm, foreach, innerHTML, linear-gradient, lt, maincontent, maincontentElm, nodeElmJudge, nodeReplace, querySelectorAll, quot, RegExp, result.push, textContent, words, words.forEach, words.length,

よさこい2024年の出場チーム一覧をJsonで公開しました．

2024.07.10

Logging

おはようございます．高知の夏と言えばよさこいだと思います、そう思っているのは高知県民だけかもしれません．そんなよさこい高知の出場チーム一覧をJsonファイルで作りましたので、おすそ分けします．

高知県民、未だにPDFや画像でweb公開しているサイトが多い中、高知新聞さんがテキスト形式で公開していたのでデータだけ抽出してJson形式に加工しました．抽出コードはこんな感じの単純なものです．またJsonデータは出場する時間帯などは無い感じです．チーム名だけが得られるJsonファイルになっています．
https://yosakoi-video.com/js/yosakoi2024.json

copy([...document.querySelectorAll('a')].map(elm=>{
    let t ='';
    if(elm.innerText.match(/（/)){
        t = elm.innerText;
    }
    return t + "\n";
}).join(''));

広報活動になりますが、よさこい動画検索という鳴かず飛ばずのサイトを運営しています．なかなか、検索にもヒットしないので、直リンクから訪問頂けたら幸いです．

https://yosakoi-video.com

明日へ続く．

著者名 @taoka_toshiaki

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

投稿日時 2024年07月10 06:00日

タグ

-t, copy, document.querySelectorAll, elm, elm.innerText, gt, if, innerText.match, join, Jsonデータ, jsonファイル, Json形式, map, n&quot, pdf, quot, web, 抽出コード, 高知, 高知県民,

【お知らせ】JavaScriptで背景色の変更が出来るようになりました．

2024.07.05

Logging

おはようございます．【お知らせ】JavaScriptで背景色の変更が出来るようになりました．リロードしても画面の状態を維持するようになっています．因みにこれ、IPアドレスとかいうモノをこちらで取得して判断している訳ではありません．

ユーザーのブラウザの中の保存領域（のが多いw）にカラー色を保存するようになっています．なので、同ブラウザで見るとご自身が選択したカラー色で表示されるようになってます．要するに2015年？あたりから、各ブラウザにデータを保存出来る機能が追加されました．その機能をJS（javascript）言語で呼び出して使用できるようになっているのです．

このメリットはプライバシーが担保出来るということです．ユーザー側でデータを保持しているので消す事も可能ですし、どんなデータを保存しているのかもブラウザの検証項目のアプリケーション、ローカルストレージと進めば確認することが可能です．

因みにソース・コードはこちらです．


if(localStorage.getItem('zcolor')){
    document.body.style.backgroundColor = localStorage.getItem('zcolor');
}
if(document.querySelectorAll('#zcolors > .zcolor')){
    [...document.querySelectorAll('#zcolors > .zcolor')].forEach(elm=>{
        elm.addEventListener('click',(e)=>{
            let color = elm.getAttribute('data-zcolor');
            localStorage.setItem('zcolor',color);
            document.body.style.backgroundColor = color;
        });
    });
}

明日へ続く．

著者名 @taoka_toshiaki

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

投稿日時 2024年07月05 06:00日

タグ

body.style.backgroundColor, color, data-zcolor&#39, document.querySelectorAll, elm, elm.addEventListener, elm.getAttribute, foreach, gt, if, javascript, JS, let color, localStorage, localStorage.getItem, zcolors, アプリケーション, ローカルストレージ, 担保,

定番javascript、右クリックを禁止するあのコード．

2024.06.28

Logging

おはようございます、定番javascript、右クリックを禁止するあのコードを自分のサイトにも導入しました．因みにJSをOFFにするとリダイレクトページへ飛ぶ仕様になっているので右クリックから画像保存とかは出来ない感じになりました．スマホでどういう挙動になるのかは知らないけども．

  if(document.querySelector('video')){
    let elm = document.querySelectorAll('video');
    [...elm].forEach(el=>nocontextmenu(el));
  }
  if(document.querySelector('img')){
    let elm = document.querySelectorAll('img');
    [...elm].forEach(el=>nocontextmenu(el));
  }

  function nocontextmenu(elm){
    elm.addEventListener('contextmenu',function(event){
      event.preventDefault();
    });
  }

今まで画像保存とかしていた人はソースコードからURLを導き出して画像保存とかを行っても良いですが画像などの二次配布などは禁止しています．

尚、当たり前ですが上記のソースコードの可変などはOKです．

追伸：スマホはCSSで対応

video,img{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  user-select:none;
}

明日へ続く．

著者名 @taoka_toshiaki

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

投稿日時 2024年06月28 06:00日

タグ

document.querySelector, EL, elm, elm.addEventListener, EVENT, event.preventDefault, foreach, function, if, JS, moz-touch-callout, moz-user-select, nocontextmenu, none, querySelectorAll, user-select, webkit-touch-callout, webkit-user-select, リダイレクトページ, 追伸,

ContactForm7で現在ページのURLを送る方法。 #カスタマイズ

2023.05.27

Logging

おはようございます。ContactForm7で現在ページのURLを送る方法です、全ての記事の下にお問い合わせフォームを設置している人はあまりいないかもしれないけれど。そのあまりいない人の一人です。

記事の下にショートコードを設置するにはプラグインを自作するか、テンプレート内に埋め込むかどちらかだと思います。自分は前者のプラグインを自作してショートコードを埋め込んでいます。

ショートコードを埋め込むコードはこんなコードです。

<?php
do_shortcode('[contact-form-7 id="XXXX" title="comment"]')

これで全記事にショートコードを埋め込むことが可能ですがこれだけでは動きません。こんな感じのプラグインを作ってみてください。プラグインの設置方法などはググって下さい。

<?php
/*
  Plugin Name: comment-add
  Plugin URI:
  Description: 記事の下にアドセンス広告などを貼り付けるのに使用
  Version: 1.0.0
  Author: @zip358com
  Author URI: https://www.zip358.com
 */


function comment_add($content)
{
    if (is_single() && 'post' == get_post_type()) {
        $content = $content.do_shortcode('[contact-form-7 id="xxxx" title="comment"]');
        return $content;
    } else {
        return $content;
    }
}
add_filter('the_content', 'comment_add');
remove_filter('the_content', 'wpautop');

これだけでは、どのページから問い合わせしたのか分からないので、名前などの入力欄以外に入力欄を設置します。次に設置したそのNoを控えて下さい。

<script>
//Contact Form 7 現在ページのURL
if(document.querySelectorAll("[name='text-564']")){
    [...document.querySelectorAll("[name='text-564']")].forEach(elm=>{
        elm.setAttribute("type","hidden");
        elm.value = decodeURIComponent(location.href);
    });
}
</script>

上記のコードを</body>タグ直前に設置してください。設置後、text-564を控えたNoに変更シテクダサイこれで設置が完了です。

ContactForm7のメール送信欄にも控えたNoを設置してください。これで完了です！！
最後に送信のご確認を忘れずに。

著者名 @taoka_toshiaki

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

投稿日時 2023年05月27 06:00日

タグ

add_filter, body, comment-add, decodeURIComponent, description, document.querySelectorAll, elm, else, foreach, hidden&quot, lt, php, php do_shortcode, quot, remove_filter, return, setAttribute, title, Version, wpautop,

404の画像をno-imageにする#jscode

2023.05.16

Logging

おはようございます、404の画像をno-imageにするコードです。案外簡単なコードですが、これでノーイメージに変換できます。因みに参照した404ページが404のステータスを吐き出していなかったら、このJSコードは機能しません。

if(document.querySelectorAll("img")){
     [...document.querySelectorAll("img")].forEach(elm=>{
        fetch(elm.src).then(response=>{
            if(!response.ok){
                elm.src = "no_image1.gif";
            }
        });
     });
}

因みに自分のブログサイトもこんな感じのコードを埋め込んでいます。これをphp言語で対応すると処理がサーバーサイドになるので重たくなります。こういうのはJSコードで対応するのが個人的には良いと思っています。尚、JSコードとPHPを連動させて表示の有無を行うのも良いかも知れません。

画像URLを参照してレスポンスデータが返ってきます、このレスポンスの変数をconsole.log(response);で表示するとstatusなども返ってきていることが分かると思います。404ステータスだけ何かしたい場合はresponse.statusで判断するともっと厳密になって良いかも知れません。

著者名 @taoka_toshiaki

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

投稿日時 2023年05月16 06:00日

タグ

'src', console.log, document.querySelectorAll, elm, fetch, foreach, gt, if, img&quot, no-image, quot, response, response.ok, response.status, status, then, サーバーサイド, ブログサイト, レスポンス, 変数,

Photo by Sharon McCutcheon on Pexels.com

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

2022.07.22

Logging

こんにちは、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代前半に書いたものです．

投稿日時 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,

JS（javaScript）ファイルを動的に再読み込みする方法。

2021.10.13

Logging

今日は朝からメールで書類提出してクラウドワークスの仕事に何か良いものはないかなどを見ておりましたがありません?。

さて、JS（javaScript）ファイルを動的に再読み込みする方法のオリジナルコードを書きましたので、お裾分けします。前々の会社で JS（javaScript）ファイルを動的に再読み込みしないとJSが動作しないという何ともやるせない気持ちの仕様があり、その時は人様のコードを拝借して使っていましたが、今日はクラウドワークスなどの案件もないのでちゃちゃっと自分でコードを書きました?。同じように困っている方はご使用くださいな?

https://zip358.com/tool/demo67/

ちょっと愚痴?
そもそも前々の会社のオリジナルMVCはいろいろと欠陥だらけで且つ仕様書もない、何が正解なのかも教えてもらえない中、修正やらしていたので本当に大変でした。聞いても明確に答えてもらえないのは正直な所、大変です。後任にはちゃんと教えていたら良いのですがね。

"use strict";
document.querySelector("button").addEventListener("click",jsandcssreload);
function jsandcssreload(){
    let d = (new Date()).getTime();
    [...document.querySelectorAll("link")].forEach((elm)=>{
        elm.href = elm.href.replace(/(\.css)\??[0-9]{0,}$/,".css?" + d);
    });
    [...document.querySelectorAll("script")].forEach((elm)=>{
        elm.src = elm.src.replace(/(\.js)\??[0-9]{0,}$/,".js?" + d);
    });    
}

上手く行かなかった場合の対応．

[...document.querySelectorAll('script')].forEach(elm => {
        let script = document.createElement('script');
        script.src = elm.src;
        document.body.appendChild(script);   
});

著者名 @taoka_toshiaki

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

投稿日時 2021年10月13 11:09日

タグ

'src', addEventListener, createElement, css, document.querySelector, document.querySelectorAll, elm, foreach, getTime, gt, href, javascript, jsandcssreload, quot, quot;button&quot, quot;use, script, src.replace, strict&quot, 後任,

@Blog

日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。

文字の背景に色を付ける．ハイライトを追加してみました．#即興コード．

よさこい2024年の出場チーム一覧をJsonで公開しました．

【お知らせ】JavaScriptで背景色の変更が出来るようになりました．

定番javascript、右クリックを禁止するあのコード．

ContactForm7で現在ページのURLを送る方法。 #カスタマイズ

404の画像をno-imageにする#jscode

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

JS（javaScript）ファイルを動的に再読み込みする方法。