サイト内の文字をハイライトする一万円の案件は。 #案件
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, 朝飯前,
よんでんコンシェルジュの不具合について考える人。 #日別料金計算
2022.09.27
おはようございます。タイトルの不具合が解消されていたらゴメンナサイ。これは昨日に書いた記事です🤔。
夕方頃によんでんコンシェルジュの日別の電力と電力料金を見ようとした所、何やら不具合が発生していたらしく、合計金額が見えなくなっていたのでコードを書いてみました😌。
ざっくりとした金額合計が表示するような物ですので、実際の金額とは差異が発生します。ソースコードはこんな感じです。
let kwh = document.querySelectorAll(".img_area > table > tbody > tr > td");
if(kwh){let s = 0;
for(let i = 0;i < kwh.length ; i++){
if(kwh[i].innerText.match(/(kWh)/)){
s = s + (Number(String(kwh[i].innerText).replace("kWh",""))*100);
console.log(kwh[i].innerText);
}
}
let r = 0;
s = Math.floor(s /100);
if(s >11){
if(s < 120){
r = ((s -11) * 20) + 411;
}
if(s < 300){
r = ((s - 120) * 27) + 411 + 2220;
}
if(s >= 300){
r = ((s - 300) * 30) + 411 + 2220 + 4858;
}
}
console.log("合計金額=" + String(s) + "kWh " + String(r) + "円");
}尚、消費電力が11kwh以下の人の金額は０円になっていますが、実際は料金が発生します。それにしても四国電力の料金内訳を見ていると何だか、モヤモヤする料金体系になっていて、これは面倒だなと感じました。こんな料金体系じゃなく一律のお値段にして欲しいですね・・・（消費電力によって値段が変動しますし…etc…）。
ソースコードの取り扱い：
上記のソースコードを四国電力（よんでんコンシェルジュ）の日別ページを開いた状態にして、ブラウザのコンソール画面にソースコードを貼り付けて実行してみてください。電力の合計金額などがコンソール画面に表示されます。
タグ
0, area, document, For, gt, if, img, innerText, kwh, length, let, lt, match, querySelectorAll, quot, TABLE, tbody, td, tr, コード, これ, コンシェルジュ, ソース, タイトル, よんでん, 不具合, 人, 合計, 夕方, 実際, 差異, 感じ, 所, 料金, 日別, 昨日, 物, 発生, 表示, 解消, 計算, 記事, 金額, 電力,
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,
もし今、自分が小学生だったら自由研究でこんなの作ってると思いたい。
2019.08.24
もし今、自分が小学生だったら自由研究でこんなの作ってると思いたい。
自動で九九表を生成するjQueryなんかを作ってそう。
(いまの小学生が羨ましいなw夏休み一日中ネットに浸っているだろう）
デモサイトはこちら
https://zip358.com/tool/demo5/index-12.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>九九表</title>
<link rel="stylesheet" href="../MDB-Free_4.8.5/css/bootstrap.css" >
<link rel="stylesheet" href="../MDB-Free_4.8.5/css/mdb.css" >
<link rel="stylesheet" href="../fontawesome-free-5.9.0-web/css/all.css">
<script src="../jquery/jquery-3.4.1.js"></script>
</head>
<body>
<form>
<div class="form-group">
<label for="exampleInputEmail1">数字を入力してください</label>
<input type="text" class="form-control" id="inp" aria-describedby="inp" placeholder="数字を入力してください(デフォルト(9))">
<small id="emailHelp" class="form-text text-muted">1以下の数字、数字以外、または桁が2桁を超えた場合デフォルトを表示します</small>
</div>
</form>
<span id="tbl99"></span>
<script>
$(function(){
var cc = function(){
var c=$(this).val().match(/[0-9]{1,2}/) && Number($(this).val())>1?$(this).val():9;
$("#tbl99").html(c99(c));
return c;
};
$("#tbl99").html(function(){
c99($("#inp").val(cc));
});
$("#inp").on("keyup",cc);
$("#inp").on("keydown",cc);
});
function c99(c){
var str="<h1><span class="badge badge-primary">九九表</span></h1>";
var x = y = c;
str+="<table class="table table-striped table-dark table-bordered">";
for(var i=1;i<=x;i++){
str+="<tr>";
for(var ii=1;ii<=y;ii++){
var s = i * ii;
str+="<td>" + i + " × " + ii + " = " + s + "</td>";
}
str+="</tr>";
}
str+="</table>";
return str;
}
</script>
</body>
</html>タグ
aria-describedby, cc, content, css, device-width, function, IE, Ii, initial-scale, inp", jquery, lt, match, Number, placeholder, quot, STR, stylesheet", val,
昨日の続き、cronPHP(´Д｀)、一つのジョブから複数のPHPファイルを実行させる方法。
2015.06.25
<?php
//5分刻みに対して有効な無限クローン 処理が負荷の場合どうなるかは知りません。
date_default_timezone_set('Asia/Tokyo');
class cron{
public function d_m($obj)
{
if($obj->m==="*")return true;
if(preg_match("/,/",$obj->m))return $this->comma($obj->m,date("m"));
if((int)$obj->m === (int)date("m"))return true;
return false;
}
public function d_d($obj)
{
if($obj->d==="*")return true;
if(preg_match("/,/",$obj->d))return $this->comma($obj->d,date("d"));
if((int)$obj->d === (int)date("d"))return true;
return false;
}
public function d_H($obj)
{
if(preg_match("/\*\/[0-9]{1,2}/",$obj->H)){
$H = explode("/",$obj->H);
if((int)$H[1]>0 && ((int)date("H") % (int)$H[1])===0)return true;
}else{
if($obj->H==="*")return true;
if(preg_match("/,/",$obj->H))return $this->comma($obj->H,date("H"));
if((int)$obj->H === (int)date("H"))return true;
}
return false;
}
public function d_i($obj)
{
if(preg_match("/\*\/[0-9]{1,2}/",$obj->i)){
$i = explode("/",$obj->i);
if((int)$i[1]>0 && ((int)date("i") % (int)$i[1])===0)return true;
}else{
if($obj->i==="*")return true;
if(preg_match("/,/",$obj->i))return $this->comma($obj->i,date("i"));
if((int)$obj->i === (int)date("i"))return true;
}
return false;
}
//曜日 0=日曜日 6=土曜日
public function d_w($obj)
{
if((int)$obj->w[date("w")]===1)return true;
return false;
}
public function comma($c="",$t=""){
if($c==="")return false;
if($t==="")return false;
$flg = false;
foreach(explode(",",$c) as $cc){
if((int)$cc===(int)$t)$flg = true;
}
return $flg;
}
public function d_command($obj){
if($obj->command){
exec($obj->command . " > /dev/null &");
}
return true;
}
}
if ($argv[1]) {
$filename = $argv[1];
if(is_file($filename)){
$jsn = json_decode(file_get_contents($filename));
$cron = new cron();
try {
foreach($jsn as $obj){
if($cron->d_m($obj)){
if($cron->d_d($obj)){
if($cron->d_H($obj)){
if($cron->d_i($obj)){
if($cron->d_w($obj)){
$cron->d_command($obj);//波動拳{{{{
}
}
}
}
}
}
} catch (\Throwable $th) {
print $th->getMessage();
}
}
}
この頃、ネタがないので手抜き投稿です。気づいた人どのぐらいいるのだろうか？
Qittaに公開しました。https://qiita.com/question909/items/8f1df9b62ab4fba76243
タグ
39, 5, Asia, class, comma, cron, cronphp, date, default, function, gt, if, int, lt, match, obj, php, preg, public, quot, retu, return, set, this, timezone, Tokyo, true, クローン, ジョブ, ファイル, 一つ, 処理, 分刻み, 場合, 実行, 方法, 昨日, 有効, 無限, 複数, 負荷,