404の画像をno-imageにする#jscode
2023.05.16
おはようございます、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で判断するともっと厳密になって良いかも知れません。
タグ
'src', console.log, document.querySelectorAll, elm, fetch, foreach, gt, if, img", no-image, quot, response, response.ok, response.status, status, then, サーバーサイド, ブログサイト, レスポンス, 変数,
カウンターを簡易的な設置してみた話。#phpcode
2023.03.24
おはようございます、黄砂によるP.M.2.5とやらが辛いです😭。
前置きはさておきブログタイトルの近くにカウンターを設置してみました、かなり適当なカウンターですが上手く動いているようです。ソースコードはこんな感じになります。これはchatGPTが創作したコードでは有りません。
counterHtml = "<br><span id='counter'>アクセスカウンター：0</span><br><br>";
document.getElementById("site_description").insertAdjacentHTML("afterend",counterHtml);
if(!(localStorage.getItem("counter")) || ( parseInt(localStorage.getItem("counter")) + 420000 < (new Date()).getTime()) ){
fetch("/counter/?counter=1").then(response=>response.json()).then(data=>{
document.getElementById("counter").innerText = "アクセスカウンター：" + data.cnt;
localStorage.setItem("counter",(new Date()).getTime());
});
}else{
fetch("/counter/?counter=0").then(response=>response.json()).then(data=>{
document.getElementById("counter").innerText = "アクセスカウンター：" + data.cnt;
localStorage.setItem("counter",(new Date()).getTime());
});
}自分で書いたソースコードになります。実際、GPTにPHP言語とJS言語を使ってカウンターを作ってと投げたら答えが返ってくると思いますが、これは自前コードです。テストというテストもろくにせず動作させています。
<?php
if($_GET["counter"]==1){
$cnt = (int)(file_get_contents("cnt.txt"));
$cnt++;
file_put_contents("cnt.txt",$cnt);
print json_encode(["cnt"=>$cnt]);
}else{
print json_encode(["cnt"=>(int)file_get_contents("cnt.txt")]);
}
タグ
ChatGPT, cnt, counter, counterHtml, data.cnt, document.getElementById, fetch, getElementById, getTime, GPT, innerText, insertAdjacentHTML, int, json, localStorage, lt, parseInt, quot, response, then,
laravelの非同期処理でDELETE・PATCH・PUT😗する方法。 #php #code
2023.01.27
おはようございます、華の金曜日ですね～🙄。けんすうさんは一体何歳なんだろか？自分より若いのかな？それとも・・・・。
さて、今日は久しぶりにlaravelの非同期処理でDELETE・PATCH・PUTをする方法を記載しておきます。大体の人が知っているもしくは非同期処理でRESTの設計を使わないよという方もいるかもしれない。ですが、あまり遷移させたくない、遷移させると余計にコードを書かないといけない等、そういう場面があると思います。是非、そういう時は非同期処理でDELETE・PATCH・PUTして上げてください。
因みにこの頃、知ったのですがBootstrapからtailwindへ鞍替えする人が続出してダウンロード数が逆転した話を知りました。web業界に限らずですが隅から隅まで覚えている人は凄いなと関心します。自分は、どうしてもググったりドキュメントでググったりします。
document.getElementById('btn').addEventListener('click', () => {
const formData = new FormData();
formData.append('id', document.getElementById('id_number').value);
formData.append('_method','PUT');//DELETE・PATCH・PUT
fetch('ajax-test', {
method: 'POST',
headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content}, // CSRFトークン対策
body: formData
})
.then(response => response.json())
.then(res => {
console.log('res: '+res[0].id);
document.getElementById("result").innerHTML = "ID番号" + res[0].id + "は「" + res[0].name + "」です。価格は「" + res[0].price+"円」です。";
})
.catch(error => {
console.log(error); // エラー表示
});
});タグ
addEventListener, ajax-test, catch, document.getElementById, document.querySelector, fetch, formData, formData.append, getElementById, headers, innerHTML, Laravel, METHOD, quot, res, response, response.json, tailwind, then, 華,
JavaScript(js)でcsvファイルを読み込み自動計算する(合計sum)
2021.11.17
謎の訪問者さんが検索窓を使用して何度かググっているので要望にお応えJavaScript(js)でcsvファイルを読み込み自動計算する(合計sum)というものを作りました。以前、csvを元にテーブルを作成するものを作っていました、ソースコードはそれを応用して作っています。実際、数万行に渡るファイルを自動計算するには、かなり爆速のパソコンが必要になります。このプログラムで耐えれるのは精々、1,000行あたりだと思います。
過去のコードと今回のサンプルデモのリンクを貼っときます。
どうぞご自由にお使いください。
https://zip358.com/tool/demo47/
"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");タグ
000, １, async, await, const, CSV, fetch, filename, function, ID, javascript, JS, load, quot, res, responseFile, strict, sum, use, var, お応え, かなり, コード, ご自由, サンプル, ソース, それ, テーブル, デモ, パソコン, ファイル, プログラム, もの, リンク, 今回, 以前, 何度か, 作成, 使用, 元, 合計, 実際, 必要, 応用, 数万, 検索窓, 爆速, 精々, 自動, 要望, 計算, 訪問者, 謎, 過去,
Yahoo japanサイトのコロナ情報リンク集です。好評に付きVer2。
2020.12.21
Yahoo japanサイトのコロナ情報リンク集です。好評に付きバージョン2を
作成しました。見た目はこんな感じです。県名をクリックするとYahoo!japanのコロナサイトの
画面が開きます(遷移します)。ほんとは、Yahoo!データをウェブスクレイピングしようと思ったのですが、別にそこまでする必要はないかなと思いとどまり、いまに至っています。
データは国もJSONで公開していますのでわざわざ作ることもないのですけど、自分が見やすいように、時間があれば改善していきます。
追記：時間があったので改善しました。
https://zip358.com/tool/COVID-19-japan/
var ken_json = {};
fetch("./assets/js/ken47.json").then(response => response.json()).then((data)=>{
let ken = [];
for (const key in data) {
ken.push("<a href='#' onClick='c19(\"" + "https://hazard.yahoo.co.jp/article/covid19" + data[key].roman +"\")' onmouseover='c19_f(\"" + data[key].roman.toUpperCase() + "\",\"red\")'' onmouseout='c19_f(\"" + data[key].roman.toUpperCase() + "\",\"#fff\")'>" + data[key].name + "</a>");
}
document.getElementById("covid19-link-list").innerHTML = ken.join(",");
for (const key in data) {
document.getElementById(data[key].roman.toUpperCase()).setAttribute("fill","#fff");
}
});
function c19(url){
window.open(url,"_blank");
}
function c19_f(kenid,color){
document.getElementById(kenid).setAttribute("fill",color);
} {
"1": {
"name": "北海道",
"roman": "hokkaido"
},
"2": {
"name": "青森",
"roman": "aomori"
},
"3": {
"name": "岩手",
"roman": "iwate"
},
"4": {
"name": "宮城",
"roman": "miyagi"
},
"5": {
"name": "秋田",
"roman": "akita"
},
"6": {
"name": "山形",
"roman": "yamagata"
},
"7": {
"name": "福島",
"roman": "fukushima"
},
"8": {
"name": "茨城",
"roman": "ibaraki"
},
"9": {
"name": "栃木",
"roman": "tochigi"
},
"10": {
"name": "群馬",
"roman": "gunma"
},
"11": {
"name": "埼玉",
"roman": "saitama"
},
"12": {
"name": "千葉",
"roman": "chiba"
},
"13": {
"name": "東京",
"roman": "tokyo"
},
"14": {
"name": "神奈川",
"roman": "kanagawa"
},
"15": {
"name": "新潟",
"roman": "niigata"
},
"16": {
"name": "富山",
"roman": "toyama"
},
"17": {
"name": "石川",
"roman": "ishikawa"
},
"18": {
"name": "福井",
"roman": "fukui"
},
"19": {
"name": "山梨",
"roman": "yamanashi"
},
"20": {
"name": "長野",
"roman": "nagano"
},
"21": {
"name": "岐阜",
"roman": "gifu"
},
"22": {
"name": "静岡",
"roman": "shizuoka"
},
"23": {
"name": "愛知",
"roman": "aichi"
},
"24": {
"name": "三重",
"roman": "mie"
},
"25": {
"name": "滋賀",
"roman": "shiga"
},
"26": {
"name": "京都",
"roman": "kyoto"
},
"27": {
"name": "大阪",
"roman": "osaka"
},
"28": {
"name": "兵庫",
"roman": "hyogo"
},
"29": {
"name": "奈良",
"roman": "nara"
},
"30": {
"name": "和歌山",
"roman": "wakayama"
},
"31": {
"name": "鳥取",
"roman": "tottori"
},
"32": {
"name": "島根",
"roman": "shimane"
},
"33": {
"name": "岡山",
"roman": "okayama"
},
"34": {
"name": "広島",
"roman": "hiroshima"
},
"35": {
"name": "山口",
"roman": "yamaguchi"
},
"36": {
"name": "徳島",
"roman": "tokushima"
},
"37": {
"name": "香川",
"roman": "kagawa"
},
"38": {
"name": "愛媛",
"roman": "ehime"
},
"39": {
"name": "高知",
"roman": "kochi"
},
"40": {
"name": "福岡",
"roman": "fukuoka"
},
"41": {
"name": "佐賀",
"roman": "saga"
},
"42": {
"name": "長崎",
"roman": "nagasaki"
},
"43": {
"name": "熊本",
"roman": "kumamoto"
},
"44": {
"name": "大分",
"roman": "oita"
},
"45": {
"name": "宮崎",
"roman": "miyazaki"
},
"46": {
"name": "鹿児島",
"roman": "kagoshima"
},
"47": {
"name": "沖縄",
"roman": "okinawa"
}
}タグ
19, 2, 358, 47, assets, com, covid, fetch, gt, https, JAPAN, JS, json, ken, quot, response, then, tool, var, ver, www, Yahoo, zip, ウェブ, クリック, こと, コロナ, サイト, スク, そこ, データ, バージョン, ピング, ほんと, リンク集, レイ, わざわざ, 作成, 公開, 国, 好評, 必要, 情報, 感じ, 改善, 時間, 画面, 県名, 自分, 見た目, 追記, 遷移,
Yahooが567（コロナ）の情報を取り扱っているそれも県単位でURLまとめたよ。
2020.12.20
Yahooが567の情報を取り扱っている。567（コロナ）を県単位で情報を配信しているまとめリンクサイトを作りましたので、ご自由にお使いください。
リンクはこちらです。https://zip358.com/tool/demo28/
ソースコードとJSONを貼っときます。IT土方さんみたいな事をした?。
<script>
fetch("./assets/js/ken47.json").then(response => response.json()).then((data)=>{
let ken = [];
ken.push('<div class="list-group">');
for (const key in data) {
ken.push("<a class='list-group-item list-group-item-action' href='https://hazard.yahoo.co.jp/article/covid19" + data[key].roman + "' target='_"+ data[key].roman +"'>" + data[key].name +":::https://hazard.yahoo.co.jp/article/covid19" + data[key].roman + "</a>");
}
ken.push("</div>");
document.getElementById("covid19-link-list").innerHTML = ken.join("")
});
</script>{
"1": {
"name": "北海道",
"roman": "hokkaido"
},
"2": {
"name": "青森",
"roman": "aomori"
},
"3": {
"name": "岩手",
"roman": "iwate"
},
"4": {
"name": "宮城",
"roman": "miyagi"
},
"5": {
"name": "秋田",
"roman": "akita"
},
"6": {
"name": "山形",
"roman": "yamagata"
},
"7": {
"name": "福島",
"roman": "fukushima"
},
"8": {
"name": "茨城",
"roman": "ibaraki"
},
"9": {
"name": "栃木",
"roman": "tochigi"
},
"10": {
"name": "群馬",
"roman": "gunma"
},
"11": {
"name": "埼玉",
"roman": "saitama"
},
"12": {
"name": "千葉",
"roman": "chiba"
},
"13": {
"name": "東京",
"roman": "tokyo"
},
"14": {
"name": "神奈川",
"roman": "kanagawa"
},
"15": {
"name": "新潟",
"roman": "niigata"
},
"16": {
"name": "富山",
"roman": "toyama"
},
"17": {
"name": "石川",
"roman": "ishikawa"
},
"18": {
"name": "福井",
"roman": "fukui"
},
"19": {
"name": "山梨",
"roman": "yamanashi"
},
"20": {
"name": "長野",
"roman": "nagano"
},
"21": {
"name": "岐阜",
"roman": "gifu"
},
"22": {
"name": "静岡",
"roman": "shizuoka"
},
"23": {
"name": "愛知",
"roman": "aichi"
},
"24": {
"name": "三重",
"roman": "mie"
},
"25": {
"name": "滋賀",
"roman": "shiga"
},
"26": {
"name": "京都",
"roman": "kyoto"
},
"27": {
"name": "大阪",
"roman": "osaka"
},
"28": {
"name": "兵庫",
"roman": "hyogo"
},
"29": {
"name": "奈良",
"roman": "nara"
},
"30": {
"name": "和歌山",
"roman": "wakayama"
},
"31": {
"name": "鳥取",
"roman": "tottori"
},
"32": {
"name": "島根",
"roman": "shimane"
},
"33": {
"name": "岡山",
"roman": "okayama"
},
"34": {
"name": "広島",
"roman": "hiroshima"
},
"35": {
"name": "山口",
"roman": "yamaguchi"
},
"36": {
"name": "徳島",
"roman": "tokushima"
},
"37": {
"name": "香川",
"roman": "kagawa"
},
"38": {
"name": "愛媛",
"roman": "ehime"
},
"39": {
"name": "高知",
"roman": "kochi"
},
"40": {
"name": "福岡",
"roman": "fukuoka"
},
"41": {
"name": "佐賀",
"roman": "saga"
},
"42": {
"name": "長崎",
"roman": "nagasaki"
},
"43": {
"name": "熊本",
"roman": "kumamoto"
},
"44": {
"name": "大分",
"roman": "oita"
},
"45": {
"name": "宮崎",
"roman": "miyazaki"
},
"46": {
"name": "鹿児島",
"roman": "kagoshima"
},
"47": {
"name": "沖縄",
"roman": "okinawa"
}
}タグ
39, 47, 567, assets, class, const, data, div, fetch, For, gt, in, IT, JS, json, ken, key, let, list-grou, list-group, list-group-item, lt, push, quot, response, script, then, url, Yahoo, コード, こちら, コロナ, サイト, ソース, それ, まとめ, リンク, 事, 単位, 土方, 情報, 県, 配信,