@Blog
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
CSSファイルの設定を読み込んで一括背景色変更するコード。 #cssfile #javascript #coding #colors
2022.11.30
おはようございます、先日の日曜日は原因不明の体調不良で寝込んでおりました(¦3[▓▓]。
今日は何とか体調が回復したので、CSSファイルの設定コード読み込んで一括背景色変更するプログラムコードを作成しました。※実際、自分のブログ・サイトで動いているコードになります。
<link rel="stylesheet" href="examplestyle.css">導入方法はまずヘッダーに変更したいCSSファイルを記述します。次にbody内に下記のコードを記述します。
<span id="site_description"></span>最後にJSコードを挿入します。JSコードはファイルで読み込むでもベタ書きでも良いのですが、上記のHTMLタグより下に記述してください。そうしないと動作しません😗。
let htmlcode = ["#efefef", "#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 (CodeColor) {
let r = document.cookie.split(';');
return r.length ? ((r) => {
let changecolor = "";
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") {
changecolor = content[i + 1];
}
}
}
return changecolor?changecolor:CodeColor;
})(r) : CodeColor;
};
let old_color = cookiefn(basecolor);
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
[...document.querySelectorAll(".color_code")].forEach(elm => {
elm.addEventListener("click", function (e) {
color_set(elm.getAttribute("data-color-code"));
});
});
color_set(old_color);
function color_set(color) {
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];
try {
element_css_code.style.backgroundColor = color;
if (color === "#efefef") {
element_css_code.style.color = "#000000";
} else {
element_css_code.style.color = "#FFFFFF";
}
//いらないかも領域🤔👇
document.querySelectorAll("#wp-calendar > tbody > tr > td > a").forEach(elm=>{
elm.style.backgroundColor = "#909091";
});
document.getElementById("searchsubmit").style.backgroundColor = "#000";
document.querySelector("#s").style.backgroundColor = "#909091";
[...document.querySelectorAll("code")].forEach(elm=>{
[...elm.querySelectorAll("span")].forEach(childen_elm=>{
childen_elm.style.backgroundColor = "#565656";
});
});
//いらないかも領域🤔👆
} catch (error) {
}
}
document.cookie = "bgcolor_code=" + color;
}
}
}注意事項：背景色を変更するCSSファイルをJSコードでチェックしています。そのチェックしている部分を外すと全てのCSSファイルの背景色を変えることが可能です。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
３, body, coding, colors, css, cssfile, description, examplestyle, gt, href, ID, javascript, JS, link, lt, quot, rel, site, span, stylesheet, コード, サイト, ファイル, ブログ, プログラム, ベタ, ヘッダー, 一括, 下記, 不明, 不良, 今日, 体調, 作成, 先日, 内, 原因, 回復, 変更, 実際, 導入, 挿入, 方法, 日曜日, 最後, 背景色, 自分, 記述, 設定,
JS（javaScript）ファイルを動的に再読み込みする方法。
2021.10.13
今日は朝からメールで書類提出してクラウドワークスの仕事に何か良いものはないかなどを見ておりましたがありません?。
さて、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代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
'src', addEventListener, createElement, css, document.querySelector, document.querySelectorAll, elm, foreach, getTime, gt, href, javascript, jsandcssreload, quot, quot;button", quot;use, script, src.replace, strict", 後任,
jsのクリックイベントの謎？？
2019.06.22
javaScriptとjqueryのクリックイベントの挙動が違うのは
わかったのですが・・・。
これは結構奥が深い気がします。
See the Pen jsのクリックイベントの謎？？ by taoka (@taoka-toshiaki) on CodePen.
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
0, 265, BY, codepen, default, embed, gt, hash, Height, href, html, ID, io, javascript, jquery, JS, lt, ON, Pen, QXprJX, result, See, slug, tab, taoka, taoka-toshiaki, The, theme, user, イベント, クリック, これ, 奥, 挙動, 気, 謎,
単純なコードで背景色にグラデーション。
2019.06.15
単純なコードで背景色にグラデーションつける。
このコード自体は単純なコードです、ですが・・・。
気に食わないので何度も初期の色コードを設定を変えてみたのですが
鮮やかさがでません。ちょっとドス黒いグラデーションのまま。
コードを貼り付けておきます。
一時間ぐらい色を変えて遊んでました:D
See the Pen 単純なコードで背景色にグラデーション。 by taoka (@taoka-toshiaki) on CodePen.
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
0, 265, BY, codepen, default, embed, gt, hash, Height, href, ID, io, JQGLoO, JS, lt, Pen, result, See, slug, tab, taoka, taoka-toshiaki, The, theme, user, グラデーション, コード, ドス, まま, 一, 何度, 初期, 単純, 背景色, 自体, 色, 設定,
文字の置き換え と コールバック
2019.06.08
お蔵入りしたコードです。文字の置き換えとコールバック関数です。
置換する際に、それぞれ違う文字に置き換えて表示したいなどに
使用すると便利かなと思います。
See the Pen 文字の置き換え と コールバック by taoka (@taoka-toshiaki) on CodePen.
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
0, 265, BeXapO, BY, codepen, default, embed, gt, hash, Height, href, html, ID, io, lt, ON, Pen, result, See, slug, tab, taoka, taoka-toshiaki, The, theme, user, お蔵入り, コード, コール, それぞれ, バック, 使用, 便利, 文字, 置換, 表示, 関数, 際,
グーグル画像検索リンク抽出とYahoo画像検索リンク抽出!!
2018.01.15
昨日Qiitaで公開したコードです。プラスYahooも作ってみたよ。
php5.6
ライブラリ Goutte
説明：コマンドラインから巨人ぐーぐるさんの画像検索に検索内容を投げHTMLを抽出後、
HTML解析を行い画像リンクだけを抽出するものです。コメントを外しダウンロードディレクトリを
作成すればダウンロードが可能ですが、あくまでもローカルで動かす事を前提としています。
尚、機械学習の為に画像収集するには少し数が少ないですね・・・（水増し）orz。
リンクはこちら
ライブラリはググってインストールして下さい。
おそらくレンタルサーバーなら大体、標準がPHP5.6だと思います。
PHP7とかで動いている場合もあるだろうけれど・・・。
ライブラリはバージョン2系を自分はインストールして作成しました。
<?php
date_default_timezone_set('Asia/Tokyo');
include '/composer/vendor/autoload.php';
use Goutte\Client;
$p=count($argv)>=2?$argv[1]:"cat";
$client = new Client();
$client->setHeader('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36');
$crawler = $client->request('GET',"https://www.google.co.jp/search?hl=fr&tbm=isch&source=hp&biw=1920&bih=959&q={$p}&oq={$p}&gws_rd=cr&dcr=0");//'https://www.google.com/search?hl=fr&tbm=isch&source=hp&biw=1920&bih=959&q='.$p.'&oq='.$p);
$img = $crawler->filter('div.rg_bx.rg_di.rg_el.ivg-i')->each(function($element){
if(preg_match("/\"ou\":\".*\"\,\"ow\"/",$element->text(),$link)){
$url = str_replace(array('"ou":"','","ow"'), "",$link[0]);
$ext = pathinfo($url, PATHINFO_EXTENSION);
$name = pathinfo($url,PATHINFO_FILENAME);
echo $url."\n";
if(preg_match('/((jpg)|(jpge)|(png)).*/',$ext)){
//$data = file_get_contents($url);
//file_put_contents('./download/dl_'.$name.".".$ext,$data);
//echo '<img src="'.'./download/dl_'.$name.".".$ext."\">\n";
}
}
});
こちらがYahoo版ですが、あまり抽出出来てません。
<?php
date_default_timezone_set('Asia/Tokyo');
include '/composer/vendor/autoload.php';
use Goutte\Client;
$p=count($argv)>=2?$argv[1]:"cat";
$client = new Client();
//$client->setHeader('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36');
$crawler = $client->request('GET','https://search.yahoo.co.jp/image/search?p='.$p.'&rkf=1&oq=inu&ei=UTF-8&imc=&ctype=&dim=large');
$img = $crawler->filter('.gridmodule .SeR .tb a')->each(function($element){
if(!preg_match("/.*search\.yahoo\.co\.jp/",$element->attr('href'),$link)){
$url = $element->attr('href');
$ext = pathinfo($url, PATHINFO_EXTENSION);
$name = pathinfo($url,PATHINFO_FILENAME);
echo $url."\n";
if(preg_match('/((jpg)|(jpge)|(png))$/',$ext)){
//$data = file_get_contents($url);
//file_put_contents('./download/dl_'.$name.".".$ext,$data);
//echo '<img src="'.'./download/dl_'.$name.".".$ext."\">\n";
}
}
});
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
'User-Agent', 63.0.3239.132 Safari, AM, AppleWebKit, Asia, autoload.php', href, img src, like Gecko, new Client, pathinfo, PATHINFO_EXTENSION, PHP5.6, setHeader, Tokyo, use GoutteClient, Win64, Windows NT 10.0, ライブラリ, 巨人ぐーぐる,
ANA旅割逆算日導きサービスモバイル版：最終
2016.05.04
<!DOCTYPE html>
<html>
<head>
<title>ANA旅割逆算日導きサービス（mobile）</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="jquery-mobile/jquery.js"></script>
<script src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
<style>
.ui-page{
background:#73cbe6;
}
</style>
<script>
$(function(){
$("#ckday").click(function(){
//alert($("#day").val().replace(/\-/g,'\/'));
$.ajax({
type: 'POST',
url: "../ana_calendar/json.php",
data:{day:$("#day").val().replace(/\-/g,'\/')},
dataType: 'json',
success: function(obj){
var str = '<ul id="ana_listview" data-role="listview">\n';
str = str + '<li>予定日：' + obj.anaday + '</li>\n';
str = str + '<li>75日［旅割］の予約期日：' + obj.day75 + '</li>\n';
str = str + '<li>55日［旅割］の予約期日：' + obj.day55 + '</li>\n';
str = str + '<li>45日［旅割］の予約期日：' + obj.day45 + '</li>\n';
str = str + '<li>28日［旅割］の予約期日：' + obj.day28 + '</li>\n';
str = str + '<li>21日［旅割］の予約期日：' + obj.day21 + '</li>\n';
str = str + '</ul>\n';
$("#ana_api").html(str);
$("#ana_listview").listview().listview('refresh'); ;
}
});
});
});
</script>
</head>
<body>
<div data-role="page" data-title="ANA旅割逆算日導きサービス（mobile）">
<!--ヘッダー領域-->
<div data-role="header">
<h1>ANA旅割逆算日導きサービス（mobile）</h1>
</div>
<div role="main" class="ui-content">
<input type="date" id="day">
<button id="ckday" class="ui-btn">逆算する。</button>
<span id="ana_api"></span>
</div>
<div data-role="footer">
<h3>Copyright zip358.com</h3>
</div>
</div>
</body>
</html>ANA旅割逆算日導きサービスモバイル版：最終として webから逆算日を導きだすサービスを公開します。
ほんと・・・簡単なものですので 最初からwebで作れたんじゃねぇっていう疑惑が あると思うです。
webｺﾞﾆｮｺﾞﾆｮ…(ﾉﾟдﾟ(;￣Д￣)っていう誘惑は モバイル版のアプリを作る時からありましたが アプリ作るよって言ったので、有言実行ということで 作ってみました。
作った結果ですけど・・・ ウェブで作れるものはウェブで作ったほうが手間暇かからないという事がわかりました。 http://zip358.com/tool/ana_calendar/?［PC］
zip358.com/tool/ANAmobile/?[モバイル] ?
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
1.0, 1.4.5, 8, ANA, charset, content, css, device-width, DOCTYPE, gt, head, href, html, http, initial-scale, jquery, jquery-mobile, link, lt, meta, min, mobile, name, quot, rel, stylesheet, title, UTF-, viewport, Width, サービス, モバイル, 旅割, 最終, 逆算,