@Blog

<script src="./js/example.js" type="module"></script>

import { ref, createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

is_robots() //wp

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;
        });
    });
}

  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();
    });
  }

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

const fruits = ['apple', 'banana', 'orange'];

const hasBanana = fruits.includes('banana');
console.log(hasBanana); // true

const hasGrape = fruits.includes('grape');
console.log(hasGrape); // false

localStorage.getItem("bgcolor_code")

localStorage.setItem("bgcolor_code",color)

<link rel="stylesheet" href="examplestyle.css">

<span id="site_description"></span>

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;
        }
    }
}

        const ctx = document.getElementById('myChart');
        let data = [12, 19, 3, 19, 2, 3];
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['demo1', 'demo2', 'demo3', 'demo4', 'demo5', 'demo6'],
                datasets: [{
                    label: '# of Votes',
                    data: data,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    x: {
                        beginAtZero: true
                    }
                }
            }
        });

"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);
    });    
}

[
  {
    "id": 1,
    "name": "白川 正人",
    "hiragana": "しらかわ まさと",
    "age": "45",
    "bday": "1977年04月10日"
  },
  {
    "id": 2,
    "name": "大村 麻衣子",
    "hiragana": "おおむら まいこ",
    "age": "42",
    "bday": "1979年12月11日"
  },
  {
    "id": 3,
    "name": "大原 静香",
    "hiragana": "おおはら しずか",
    "age": "53",
    "bday": "1969年06月20日"
  },
  {
    "id": 4,
    "name": "吉田 佐代子",
    "hiragana": "よしだ さよこ",
    "age": "40",
    "bday": "1982年05月24日"
  },
  {
    "id": 5,
    "name": "宮原 和弘",
    "hiragana": "みやはら かずひろ",
    "age": "22",
    "bday": "2000年04月29日"
  },
  {
    "id": 6,
    "name": "伊藤 二郎",
    "hiragana": "いとう じろう",
    "age": "27",
    "bday": "1995年02月18日"
  },
  {
    "id": 7,
    "name": "井上 明子",
    "hiragana": "いのうえ あきこ",
    "age": "55",
    "bday": "1967年06月26日"
  },
  {
    "id": 8,
    "name": "恩田 雄",
    "hiragana": "おんだ ゆう",
    "age": "37",
    "bday": "1985年09月25日"
  },
  {
    "id": 9,
    "name": "山崎 幸志",
    "hiragana": "やまざき こうじ",
    "age": "29",
    "bday": "1993年03月24日"
  }
]

        $.extend($.fn.pagination.defaults, {
            className: 'paginationjs-theme-blue',
            pageSize: 3
        });
        let url = "json data のurl";
        (async () => {
            await fetch(url).then((result) => result.json()).then(
                (data) => {
                    data.reverse();
                    $('#demo').pagination({
                        dataSource: data,
                        callback: function (data, pagination) {
                            var html = table_make(data);
                            document.querySelector("#tbl").innerHTML = html;
                        }
                    })
                }
            )
        })();

        function table_make(data) {
            return (data.map((element) => {
                let str = "";
                str += "<tr>";
                str += ((Object.keys(element).map(el => "<td>" + element[el] + "</td>")).join(""));
                str += "</tr>";
                return str;
            })).join("\n");
        }

            <div class="col-12" id="demo">
                <table class="table table-dark" id="tbl"></table>
            </div>

<?php
session_start();
$toke_byte = openssl_random_pseudo_bytes(16);
$csrf_token = bin2hex($toke_byte);
$_SESSION['csrf_token'] = $csrf_token;
?>
<!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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .qiita_feed-list>li {
            /* font-weight: bold; */
            color: aliceblue;
        }

        .qiita_feed-list>li>a {
            color: aliceblue;
        }

        body {
            background-color: #60b111;
        }

        .shadow-lg {
            box-shadow: 0 1rem 3rem rgba(255, 255, 255, .195) !important;
        }
    </style>
    <title>Qiita-feed</title>
    <?php
    require $_SERVER['DOCUMENT_ROOT'] . "/header_script.php";
    ?>
</head>

<body>
    <input type="hidden" id="csrf_token" value="<?= $csrf_token ?>">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="text-light">Qiita-feed</h1>
            </div>
        </div>
    </div>
    <div class="container mt-2">
        <span id="view"></span>
        Copyright <?= date("Y") ?>  <a href="https://358tool.com">358tool.com</a>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <script src="./js/main.js?<?= time() ?>"></script>
</body>

</html>

//qiita feed
["taoka-toshiaki","mpyw","suin"].forEach(id=>{
    let data = {
        csrf_token:document.getElementById("csrf_token").value,
        feedid:[id]
    };
    let url = "./qiita-feed.php";
    qiita_feed(url,data);
});

async function qiita_feed(url, data) {
    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(data)
    }
    await fetch(url, options).then(response =>
        response.json()
    ).then(resultdata => {
        document.getElementById("view").insertAdjacentHTML("beforeend",resultdata.reshtmlcode)
    }
    ).catch(error => {
        console.log(error);
    }
    );
}

<?php
session_start();
$obj = json_decode(strip_tags(@file_get_contents("php://input")));

if (isset($obj)) {

    if (isset($obj->csrf_token)  && $_SESSION["csrf_token"] === $obj->csrf_token) {
        $str ="";
        foreach ($obj->feedid as $key => $id) {
            $str.= '
        <div class="row shadow-lg p-3 mb-5 bg-body rounded">
            <div class="col-12">
            🌿<span class="text-light">://qiita.com/' . xss_d($id) . '/feed :[引用]</span>';
            $str .= get_Qiitafeed("https://qiita.com/" . xss_d($id) . "/feed");
            $str .= '
             </div>
        </div>      ';
        }
        $res["reshtmlcode"] = $str;
        print json_encode($res);
    }
}


function xss_d(mixed $val): mixed
{
    if (is_array($val)) {
        foreach ($val as $key => $value) {
            $val[$key] = htmlentities($value, ENT_QUOTES);
        }
    } else {
        $val = htmlentities($val, ENT_QUOTES);
    }
    return $val;
}

function get_Qiitafeed(string $feedUrl): string
{
    $xml = @simplexml_load_file($feedUrl);
    if (isset($xml->entry)) {
        $str = "<ul class='qiita_feed-list'>";
        foreach ($xml->entry as $key => $val) {
            $str .= "<li><a href='{$val->url}'>" . $val->title . "</a></li>";
        }
        $str .= "</ul>";
    }
    return $str;
}

composer require ratchet/pawl

<?php

require __DIR__ . '/vendor/autoload.php';

\Ratchet\Client\connect('wss://example.com')->then(function($conn) {
    $conn->on('message', function($msg) use ($conn) {
        echo "Received: {$msg}\n";
        $conn->close();
    });

    $conn->send('Hello World!');
}, function ($e) {
    echo "Could not connect: {$e->getMessage()}\n";
});

var showDiffDate = function( tYear, tMonth, tDay) {
    var nowDate = new Date();
    var dnumNow = nowDate.getTime();
    var targetDate = new Date( tYear, tMonth-1, tDay );
    var dnumTarget = targetDate.getTime();

    var diffMSec = dnumTarget - dnumNow;
    var diffDays = diffMSec / ( 1000 * 60 * 60 * 24 );
    var showDays = Math.ceil( diffDays ); 
    var Msg;
    if( showDays >= 0 ) {
       Msg = "" + showDays + " days(" + function(){
         var is_days = parseInt(parseInt(showDays) - Math.floor(showDays / 7) * 2);
         is_days = (nowDate.getDay() === 0)?is_days -2:is_days;
         is_days = (nowDate.getDay() === 6)?is_days -3:is_days;
         return is_days;
       }() +")";
    }
    else {
       Msg = "" + (showDays * -1) + "";
    }
    return Msg;
 };

 document.getElementById("days").innerText = showDiffDate(2022,7,15);

"use strict";
const main = (a,b,c)=>{
    return new Promise ((resolve)=>{
        console.log(a,b,c);
        b++;
        resolve({a:a,b:b,c:c}); 
    });
}
(async()=>{
    await main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
    // main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
    console.log("fin");
})();

let useKendata = [
    {'no':'01','name':'北海道'},
    {'no':'02','name':'青森県'},
    {'no':'03','name':'岩手県'},
    {'no':'04','name':'宮城県'},
    {'no':'05','name':'秋田県'},
    {'no':'06','name':'山形県'},
    {'no':'07','name':'福島県'},
    {'no':'08','name':'茨城県'},
    {'no':'09','name':'栃木県'},
    {'no':'10','name':'群馬県'},
    {'no':'11','name':'埼玉県'},
    {'no':'12','name':'千葉県'},
    {'no':'13','name':'東京都'},
    {'no':'14','name':'神奈川県'},
    {'no':'15','name':'新潟県'},
    {'no':'16','name':'富山県'},
    {'no':'17','name':'石川県'},
    {'no':'18','name':'福井県'},
    {'no':'19','name':'山梨県'},
    {'no':'20','name':'長野県'},
    {'no':'21','name':'岐阜県'},
    {'no':'22','name':'静岡県'},
    {'no':'23','name':'愛知県'},
    {'no':'24','name':'三重県'},
    {'no':'25','name':'滋賀県'},
    {'no':'26','name':'京都府'},
    {'no':'27','name':'大阪府'},
    {'no':'28','name':'兵庫県'},
    {'no':'29','name':'奈良県'},
    {'no':'30','name':'和歌山県'},
    {'no':'31','name':'鳥取県'},
    {'no':'32','name':'島根県'},
    {'no':'33','name':'岡山県'},
    {'no':'34','name':'広島県'},
    {'no':'35','name':'山口県'},
    {'no':'36','name':'徳島県'},
    {'no':'37','name':'香川県'},
    {'no':'38','name':'愛媛県'},
    {'no':'39','name':'高知県'},
    {'no':'40','name':'福岡県'},
    {'no':'41','name':'佐賀県'},
    {'no':'42','name':'長崎県'},
    {'no':'43','name':'熊本県'},
    {'no':'44','name':'大分県'},
    {'no':'45','name':'宮崎県'},
    {'no':'46','name':'鹿児島県'},
    {'no':'47','name':'沖縄県'},
];
document.getElementById("ken").insertAdjacentHTML('afterbegin',(function(ken){
    let str = '';
    for (const key in ken) {
        str+= '<option value=' + ken[key].no + '>' + ken[key].name +'</option>';
    }
    return str;
}(useKendata)));

"use strict";
var csv = {
	load:async function(filename,id){
		const responseFile = await fetch(filename);
        const result = await responseFile.text()
		let separate1 = /\r\n/;
		let separate2 = ",";
		let data = (result.split(separate1)).map(function(value){
			return (value.split(separate2)).map(function(value1){
				return value1;
			});
		});
		let sum =[];
		for (const usedata of data) {
            (usedata).map(function(val,index,array){
                sum[index] = (isNaN(parseInt(sum[index]))?0:parseInt(sum[index])) + parseInt(array[index]);
            });
		}
        console.log(sum);
		document.getElementById(id).innerHTML = sum.join(",");
		return "OK";
	}
};
csv.load("math.csv?", "sum");

class main{
    constructor(foo){
        this.name = foo;
    }
    view() {
      document.getElementById("demo42").innerHTML  =  this.name;
    }
}
const m = new main("ES6");
m.view();