@Blog{zip358.com}
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
webPush通知機能 完成！👏．これでブラウザ閉じても通知可能✌．
2024.11.12
おはようございます．金曜日の休みを使ってwebPush通知機能を追加しました、これでブラウザ閉じても通知されるようになります．Laravel側はお見せできませんがどういう技術を使用したか書いていきます．まずLaravelの拡張ライブラリを使用しました．
下記のリンクを参照しライブラリをインストールしてみてください．
https://laravel-notification-channels.com/webpush/#installation
インストール手順はリンク先に書いていますので、それを参照しその後フロント側を設定します．下記は作りかけのコードですが通知登録が可能でバックエンド側からスケジュールで通知を飛ばすことが出来ます．
フロント側はサービスワーカーのJSファイルとユーザー通知の許可行い、その情報をバックエンドに渡す処理ファイルが存在します．サービスワーカーJSコードはググれば書き方が出ているので検索してみてください．
公開するのは通知許可を行う方のファイルになります💁あとヒントとしてバックエンドも少し公開します．
const vapidPublicKey = import.meta.env.VITE_VAPID_PUBLIC_KEY;
async function setupPushNotifications() {
if (Notification.permission === 'granted') {
try {
// サービスワーカーを登録
await navigator.serviceWorker.register('/assets/js/npush-service-worker.js').then(async(registration) => {
if ('serviceWorker' in navigator && 'PushManager' in window) {
try {
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(vapidPublicKey),
});
const response = await fetch('/save-subscription', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
},
body: JSON.stringify(subscription),
});
if (!response.ok) throw new Error('サブスクリプションの保存に失敗しました');
new Notification('ご登録', {
body: 'ご登録有難う御座います',
});
} catch (error) {
console.error('Push subscription error:', error);
}
} else if (result !== 'granted') {
console.log('通知の権限が拒否されました。');
}
});
console.log('サービスワーカーが正常に登録されました');
} catch (error) {
console.error('サービスワーカーの登録に失敗しました:', error);
}
}
}
function urlBase64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
document.getElementById('enable-notifications').addEventListener('click', async () => {
const permission = await Notification.requestPermission();
if (permission === 'granted') {
setupPushNotifications();
} else {
console.log('通知の権限が拒否されました。');
}
});これで通知の識別データが取得し登録が可能になります．登録されたデータを元に個別通知、全員に通知などが可能になります．なお、会員登録されたユーザーのみ通知が飛ぶシステムです．
$endpoint = $request->endpoint;
$token = $request->keys['auth'];
$key = $request->keys['p256dh'];
$user = $request->user();
$user->updatePushSubscription($endpoint, $key, $token);上記のデータがバックエンド側に保存されます．それを使用しユーザーにどのように送信すれば良いか？
use App\Notifications\Reserved;
$user = User::find(1);
$user->notify(new Reserved($reservation));こんな感じだと思ってください．抜粋しているのであくまでもヒントです．あとはご自身で考えて対応してください．
明日へ続く
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
addEventListener, assets, async, catch, document.getElementById, document.querySelector, headers, installation, keys, METHOD, padding, permission, rawData.charCodeAt, rawData.length, registration, repeat, replace, save-subscription, subscription, then,
サービスワーカー、フロント側のコード．スターウォーズみたいだね．
2024.11.09
おはようございます．サービスワーカーのプッシュ通知で使用するフロント側のコードの一部部分．このコードのregistration.pushManager等からググるとブラウザを閉じても通知できる方法などが記載しているサイトが見つかるかもしれません．尚、このサイトではこれ以上の情報を記載するつもりはないですが、後日、通知の機能の動画などを掲載するつもりではいます．
if ('serviceWorker' in navigator && 'PushManager' in window) {
navigator.serviceWorker.ready.then(function(registration) {
registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array('VAPID_PUBLIC_KEY')
}).then(function(subscription) {
fetch('/api/save-subscription', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(subscription),
});
}).catch(function(error) {
console.error('Push subscription error:', error);
});
});
}
function urlBase64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
その時、どのようなライブラリーを使用したかや技術の一部を公開しようと思っています．ただ、全体のコードを全て公開するつもりは今の所はないです．理由は有料な情報でありこれで商売している人がいると思うので全ての技術情報を公開は控えるつもりです．
明日へ続く
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
API, application, applicationServerKey, atob, catch, fetch, headers, METHOD, navigator, outputArray, padding, rawData.charCodeAt, rawData.length, registration, repeat, replace, save-subscription, subscription, then, userVisibleOnly,
今の今まで間違った認識でいた、やばぁ．asyncとawaitとPromise
2024.08.20
おはようございます．今の今まで間違った認識でいた、やばぁ．asyncとawaitとPromiseの関係．asyncは非同期、awaitは同期（処理待ち）だと思う．ここでasyncした関数を取得するにはawaitして取得するだけで良いみたい．そうPromiseは出番なくて良いみたい😱．
例文コードを書いていきます．まずは非同期処理の場合です．
async function example1(a){
if(Number.isInteger(a)){
return a;
}
throw new Error('wow');
}
example1(123).then(d=>console.log(d)).catch(e=>console.log(e));
example1('abc').then(d=>console.log(d)).catch(e=>console.log(e));こんな感じに書けば良いだけ．．．．
次に処理待ちの場合はこんな感じです．
async function example2(a){
if(Number.isInteger(a)){
return a;
}
throw new Error('wow');
}
async function example3() {
let result = await example2(123).then(d=>d);
document.body.textContent = result;
}
example3();
async function example4() {
let result = await example2('123').then(d=>d).catch(e=>e);
document.body.textContent = result;
}
//example4();非常にシンプルなコードです．こんな感じで取得することが出来るからPromiseを使ったコードを見なくなったのですね😁．
もっと詳しく知りたい方は下記の記事を参考にしてみてください．
https://qiita.com/soarflat/items/1a9613e023200bbebcb3
明日へ続く．
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
async function example, asyncとawait, await, await example, body.textContent, catch, console.log, example, example1, example3, example4, if, let result, Number.isInteger, Promise, result, then, 出番, 同期, 関数,
Tensorflow.jsの画像認識って
2024.03.11
おはようございます、Tensorflow.jsの画像認識ってドキュメント通り書いて上手く画像認識できますか？自分が試してみたら、どうも下記のエラーがでて上手く動作してくれなかったのでもしかしたらと思いバージョンをアップしたら動作してくれました。
Uncaught (in promise) Error: Tensorflow Op is not supported: _FusedConv2D<!-- Load TensorFlow.js. This is required to use MobileNet. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.17.0"> </script>
<!-- Load the MobileNet model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.1"> </script>
<!-- Replace this with your image. Make sure CORS settings allow reading the image! -->
<img id="img" src="cat.jpg.webp"></img>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
// Notice there is no 'import' statement. 'mobilenet' and 'tf' is
// available on the index-page because of the script tag above.
const img = document.getElementById('img');
// Load the model.
mobilenet.load().then(model => {
// Classify the image.
model.classify(img).then(predictions => {
console.log('Predictions: ');
console.log(predictions);
});
});
</script>
因みに自分は画像投稿系のサイトで使用するために今回のTensorflow.jsを使用するのですが、よくよく調べているとファインチューニングが出来るようです。ファインチューニングとは一度学習したものに再学習を埋め込む手法といえば良いのかな？要するにカスタマイズしてある分類に特化させる手法のことを指します。今のところ学習済みのモデルで全然判定されるのでOKだと思うのですが、ユーザーさんから認識できないという不満の声が上がれば対応しないといけなくなりそうです。
明日へ続く。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
'src', below, const img, Error, getElementById, gt, img, img", Load TensorFlow.js, lt, MobileNet, mobilenet.load, model, predictions, quot, statement, then, Uncaught, ファインチューニング,
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で判断するともっと厳密になって良いかも知れません。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
'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")]);
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
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); // エラー表示
});
});
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
addEventListener, ajax-test, catch, document.getElementById, document.querySelector, fetch, formData, formData.append, getElementById, headers, innerHTML, Laravel, METHOD, quot, res, response, response.json, tailwind, then, 華,
asyncとawaitとthenの関係と使い道。
2021.01.27
asyncとawaitとthenの関係と使い道は？まず、関係性はこの3つでまぁ一つの役割を果たすと考えても良いかもしれません。どんな時に使うかは、例えば、innerHTMLに計算した値を渡したいとか…。いや違うな。同期処理として使うのが正解ですね。尚、asyncとawaitで同期処理とする。
ちなみにIE11では動かない処理なので氣をつけてご使用ください。今どき、IE11なんてと思うかもしれないけど、使っている人がいるから・・・。
document.getElementById("btn").addEventListener("click", async (e) => {
test1();
test2();
test3();
await test1();
await test2();
await test3();
});
function test1() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 1");
resolve('1');
}, 3000);
});
}
function test2() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 2");
resolve('2');
}, 2000);
});
}
async function test3() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 3");
resolve('3');
}, 100);
});
}
IE11を使っているパターン、例えば社長や上司がシニア世代だったりするとIE11をいまだに使っていたりする。そもそもWindows10にIE11がインストールされている時点で悪だ・・・と思う開発者もいるはずです。そろそろマイクロソフト、IE11なんてものを強制的に削除するようなバージョンアップをして戴きたいと思ってます。それぐらい問題だと。あと、IE11で引っかかったことがあります。新しいブラウザでは下記のコードをHTMLに記入すると察してくれてjsファイルを読み込んでくれるが、IE11は違うのだ。
<script src="./assets/js/common.js"></script>これじゃ読み込んでくれない。厳密に書かないとファイルを読み込んでくださらない。やっぱ早くIE11の撲滅を願う。
<script type="text/javascript" src="./assets/js/common.js"></script>
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
'src', addEventListener, assets, async, asyncとawait, await, await test, common.js", document.getElementById, gt, innerHTML, lt, quot, quot;btn, quot;text, resolve, setTimeout, then, 撲滅, 氣,
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"
}
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
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"
}
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
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, コード, こちら, コロナ, サイト, ソース, それ, まとめ, リンク, 事, 単位, 土方, 情報, 県, 配信,
JavaScriptのPromise例えが分からない人のために。
2020.06.06
自分は『Promiseってなんやねん、わからんわ。』という人でした。皆さん賢いので複雑怪奇なコードで教えてくれていて…わかんない。
Promiseって非同期処理にするための道具です。Promiseって書いてその中に非同期処理の内容を書いてあげる。値を戻したい場合は命名した名前のカッコの中に値を返してあげれば良いが！！、どうも渡せる値は一つだけなのだ。
ちなみにthen（その後）で、非同期処理が終わった後にする処理が書けるですね(´・ω・`)。thenの中に非同期処理の値も返ってくる‥但しひとまとめで、、そんだけの話。またエラーになった時の処理も対応できるってさ…、そしてチェーン（数珠繋ぎ）の様に書くことも可能です、ここではそれらは割愛しますね?。
ちなみに最初、asyncとawaitと混合していて悩んでおりました。asyncとawaitは対になっていると同じような感覚でPromiseとthenは対になっていると考えてください。あまり複雑怪奇に考えずサンプルコードを動かして出来るできないを判断した後に賢い人が書いたリファレンスなどを読むことをオススメします。
最後に単純なソースコードとコンソールの結果を載せときますね。
"use strict";
var a = 0;
const q1 = new Promise((zaru)=>{//zaru...名前付けは何でも良い（予約されているものでなければ
a++;
zaru(a + "1..");//データをまとめて返す
});
const q2 = new Promise((zaru)=>{
a++;
zaru(a + "2..");
});
const q3 = new Promise((zaru)=>{
zaru("3~~~~n");
});
const qdaaaaaaaa = new Promise((zaru)=>{
zaru([1,2,3,"Dahahaha!!"]);
});
Promise.all([q1,q2,q3,qdaaaaaaaa]).then((val)=>{
console.log(val);
}
);
qdaaaaaaaa.then((val)=>{
console.log(val);
});
Array(4) [1, 2, 3, "Dahahaha!!"]
move.js:26
length:4
__proto__:Array(0) [, …]
0:1
1:2
2:3
3:"Dahahaha!!"
Array(4) ["11..", "22..", "3~~~~n", Array(4)]
move.js:21
length:4
__proto__:Array(0) [, …]
0:"11.."
1:"22.."
2:"3~~~~n"
3:Array(4) [1, 2, 3, …]
length:4
__proto__:Array(0) [, …]
0:1
1:2
2:3
3:"Dahahaha!!"
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
async, await, javascript, Promise, then, エラー, かっこ, コード, ここ, こと, それら, そん, ため, チェーン, なん, ひとまとめ, 一つ, 中, 人, 但し, 値, 内容, 処理, 割愛, 可能, 同期, 名前, 命名, 場合, 対, 対応, 後, 感覚, 数珠繋ぎ, 時, 最初, 混合, 皆さん, 自分, 話, 道具,
MYSQLのif文みたいなものを使用する機会が物凄く少ない気がする。
2019.05.18
### mysql case = if文みたいなもの
```sql
select namae,tensu
case when (tensu >= 75 and tensu <= 80) then '可'
when (tensu >= 25 and tensu < 75) then '否' else '???' end as kahi
from tbl;table name tbl
|namae|tensu|
|---|---|
|hirose|77|
|non|76|
|arimura|78|
|aragaki|80|mysql case = if文みたいなものを使用する機会が物凄く少ない気がする。
プログラム言語って使用しなければ抜け落ちるです。
自分の場合、たぶん長期的な記憶に障害があって抜け落ちるですw🙄。
メモしたことすら忘れてしまう…これは痛い老害？。
でも、好きな事は大体覚えていますね、概念的な事を覚えていたら大丈夫です😌。
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
```, 25, 39, 75, 76, 77, 78, 80, and, aragaki, arimura, as, case, else, end, from, gt, hirose, if, kahi, lt, MYSQL, namae, name, non, select, SQL, TABLE, tbl, tensu, then, when, こと, プログラム, メモ, もの, 使用, 可, 否, 場合, 文, 機会, 気, 自分, 言語, 記憶, 障害,