ページ無限スクロールの作り方 #インフィニティ#InfinityPageScroll #JavaScript
2022.09.22
おはようございます、台風１４号が過ぎ去ってからいきなり秋模様ですね🫠。
さて、先日ツイートしたページ無限ループが出来るJavaScriptコードを書きました。これを作ろうと思ったキッカケは、自分が運営しているWordPressサイトに巷のページ無限スクロールプラグインが尽く（ことごとく）使用出来なかったので自分で自作した訳です。因みにページ無限スクロールプラグインとはページを送りをしなくてもページの最下までスクロールすると次頁を読み込んでくれるプラグインの事を指します。
下記のコードは自サイト専用なのでそのまま使用することは出来ませんが、重要な部分だけ抜き取って再利用すれば、独自のページ無限ループに対応することは可能かと思います。
コードを読んで頂ければ分かることですが、重要なポイントはページを読み込む方法とそれをDomに変換する方法だと思います。まず、ページを読み込む方法は下記のファンクションで可能です。
fetch(next_url).then(
response => response.text()
).then(data => {そしてDomに置き換えている所はこの部分になります。これら２つの箇所が重要になります。
const parser = new DOMParser();
const doc = parser.parseFromString(data, 'text/html');これらの事に注意して独自コードを書いてみてください。最後に全コードを記載しときます。
let cnt = 2;
let blk = 0;
async function nextpage() {
if (cnt !== blk) {
blk = cnt;
await (async () => {
let next_url = "https://fox-black.com/blog/page/" + cnt;
return await fetch(next_url).then(
response => response.text()
).then(data => {
const parser = new DOMParser();
const doc = parser.parseFromString(data, 'text/html');
let blogs = doc.querySelectorAll('.blogpage');
cnt++;
if (blogs[0].innerHTML !== undefined) {
document.querySelector(".foxpage").insertAdjacentHTML("beforeend", (function (elm) {
let str = "";
for (const key in elm) {
const element = elm[key];
if (element.innerHTML !== undefined) {
str += "<div class=\"blogpage\">" + element.innerHTML + "</div>";
}
}
return str;
})(blogs));
} else {
if (document.querySelector("#fin") === null) {
document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
}
}
}).catch(error => {
if (document.querySelector("#fin") === null) {
document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
}
});
})();
}
}
if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
window.addEventListener("scroll", async function () {
let s = (() => {
let tgt;
if ('scrollingElement' in document) {
tgt = document.scrollingElement;
} else if (this.browser.isWebKit) {
tgt = document.body;
} else {
tgt = document.documentElement;
}
return tgt;
})();
if (document.querySelector("#fin") === null && s.scrollTop >= (s.clientHeight - 650)) {
await nextpage();
}
});
} else {
document.querySelector(".foxpage").addEventListener("scroll", async function () {
if (document.querySelector("#fin") === null && document.querySelector(".foxpage").scrollTop >= (document.querySelector(".foxpage").scrollHeight - 300)) {
await nextpage();
}
});
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
14, dom, InfinityPageScroll, javascript, WordPress, インフィニティ, キッカケ, コード, こと, これ, サイト, スクロール, それ, ツイート, プラグイン, ページ, ポイント, ループ, 下記, 事, 作り方, 使用, 先日, 利用, 可能, 台風, 変換, 対応, 専用, 巷, 方法, 最下, 模様, 次頁, 無限, 秋, 自, 自作, 自分, 訳, 運営, 部分, 重要,
Sqliteで作った簡易掲示板のコードを配布致します。#php #code
2022.09.20
おはようございます。台風は過ぎ去りましたがせっかくの三連休が残念です💦。
今日は先日、Sqliteを使用して簡易掲示板を作ってみましたのでコードを配布致します、尚、PHP８の環境下で動作させています（PHP7系でも動作すると思います）。
Sqliteってnow()関数がなかったりだとか、Deleteする時に、noカラムを昇順しlimitを使用して削除出来ないだとか、いろいろとMysqlとは違う所があり、面倒だなと思いながらコードを書きました、尚、SqliteはWebサーバーの階層に置かないように、置いても良いですが・・・。そのままの状態だと誰でもダウンロードが可能になってしまいますのでご注意ください。自分は地下に眠らしています😅。
一応、二重投稿防止の為に２０秒経過しないと再投稿出来ないようにしています😌。トライしていない事は禁止ワード等がありません🤔。つけようと思ったのですがまぁ良いかなと、、、。
動作している環境のリンクはこちら。
軸となるPHPのソースコードを２つ貼っときますね。
<?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">
<meta name="Description" content="Enter your description here" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css?<?= time() ?>">
<title>掲示板</title>
</head>
<body class="p-3 text-white">
<div class="p-4 shadow rounded" style="background-color:#d6dbdf;">
<div class="container mt-5">
<div class="row">
<div class="col-12 text-center">
<h1 class="shadow" style="color:#195a57;">掲示板::version 2.5</h1>
</div>
<div class="col-12">
<div class="input-group shadow rounded">
<div class="input-group-append">
<span class="input-group-text bg-dark text-white" id="my-addon">ニックネーム</span>
</div>
<input class="form-control" type="text" name="name" placeholder="ニックネームを入力" aria-describedby="my-addon">
</div>
<div class="form-group shadow rounded">
<label for="my-textarea">コメント</label>
<textarea id="my-textarea" class="form-control" name="comment" rows="7"></textarea>
</div>
<button id="btn" class="mt-2 btn btn-info text-white shadow rounded" type="button">投稿する</button>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div id="view" class="col-12"></div>
</div>
</div>
</div>
<footer>
<a href="/">TOP</a> :: © Reborn9.sakura.ne.jp <?=date("Y")?>
</footer>
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
<script src="assets/js/main.js?<?= time() ?>"></script>
</body>
</html><?php
class db
{
var $pdo = null;
function __construct()
{
try {
$this->pdo = new PDO("sqlite:../../bbs.sqlite3");
$this->pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); //code...
} catch (\Throwable $th) {
//throw $th;
print $th->getMessage();
}
}
function select_limit()
{
if($this->pdo){
$stmt = $this->pdo->prepare('select * from bbs order by no desc limit 0,5');
$stmt->execute();
$result = $stmt->fetchAll();
$stmt = null;
$this->pdo = null;
return new view($result);
}
}
function insert($name,$comment,$sns_cnt=0)
{
try {
$stmt = $this->pdo->prepare('INSERT INTO bbs (`time`,`name`,`comment`,sns_cnt)values(strftime(\'%Y年%m月%d日 %H時%M分%S秒\',CURRENT_TIMESTAMP, \'localtime\'),:name,:comment,:sns_cnt)');
$stmt->bindParam(':name', $name, PDO::PARAM_STR);
$stmt->bindParam(':comment', $comment, PDO::PARAM_STR);
$stmt->bindParam(':sns_cnt', $sns_cnt, PDO::PARAM_INT);
$stmt->execute();
$stmt = $this->pdo->prepare('DELETE FROM bbs WHERE bbs.no = (SELECT no from bbs ORDER BY no ASC LIMIT 1);');
$stmt->execute();
$stmt = null;
$this->pdo = null;
return true;
} catch (\Throwable $th) {
print $th->getMessage();
return false;
}
}
}
class view{
var $item = null;
function __construct($item)
{
$this->item = $item;
}
function view_item($item="")
{
try {
$item = $item?$item:$this->item;
ob_start();
?>
<?php
foreach($item as $key=>$value){
?>
<div class="mt-2 row txtbox shadow rounded">
<div class="col-3 name_<?=$value["no"]?> rounded-start fs-6">
ニックネーム::<?=$value["name"]?>さん
</div>
<div class="col-9 time_<?=$value["no"]?> fs-6">
投稿日時::<?=$value["time"]?>
</div>
<div class="col-12 comment_<?=$value["no"]?>">
<?= nl2br($value["comment"])?>
</div>
<div class="col-12 sns_cnt_<?=$value["no"]?>">
<!-- <?=$value["sns_cnt"]?> -->
</div>
</div>
<?php
}
?>
<?php
$ret["view"]= ob_get_clean();
$ret["msg"]= "done";
} catch (\Throwable $th) {
//throw $th;
$ret["msg"] = "error";
}
return $ret;
}
}
session_start();
$ret = null;
$mode = xss_defence($_POST["mode"]);
// $time = ;
$name = xss_defence($_POST["name"]);
$comment = xss_defence($_POST["comment"]);
$sns_cnt = (int)xss_defence($_POST["sns_cnt"]);
if (isset($_POST["csrf_token"])
&& $_POST["csrf_token"] === $_SESSION['csrf_token'] && (function($t){
return time() - $t > 20?true:false;
})($_SESSION["save"])) {
if($mode==="save"){
$name = !preg_replace("/[ | ]/","",$name)?"匿名":$name;
$comment = !preg_replace("/[ | ]/","",$comment)?"":$comment;
if($comment){
$db = new db();
$db->insert($name,$comment);
$_SESSION["save"] = time();
}
}
$db = null;
$db = new db();
$ret = $db->select_limit()->view_item();
print json_encode($ret);
}
function xss_defence($value){
if(is_array($value)){
foreach($value as $key=>$val){
$value["$key"] = strip_tags($val);
$value["$key"] = htmlspecialchars($value["$key"],ENT_QUOTES);
}
}else{
$value = strip_tags($value);
$value = htmlspecialchars($value);
}
return $value;
}
配布コードはこちらです。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
20, 7, 8, Code, Delete, LIMIT, MYSQL, no, Now, php, Sqlite, web, いろいろ, カラム, コード, ご注意, サーバー, せっかく, そのまま, ダウンロード, トライ, ワード, 三連, 事, 二, 今日, 休, 使用, 先日, 削除, 動作, 可能, 台風, 地下, 所, 投稿, 掲示, 昇順, 時, 残念, 為, 状態, 環境, 禁止, 簡易, 経過, 自分, 良, 誰, 配布, 関数, 防止, 階層, 面倒,
一言感想、欲望の資本主義メタバースの衝撃デジタル経済！
2022.09.19
おはようございます。台風が何事もなく通り過ぎるのを祈りながら日曜日のお昼に書いています✍。
８月３１日頃に「欲望の資本主義２０２２夏メタバースの衝撃デジタル経済のパラドックス」というNHK：BSで放送されていたものを昨日、オンデマンドで購入して視聴しました。尚、単品販売一本１２０円ぐらいだったと思います（NHKさん、ペイペイ支払いに対応してくださいませ🙇）。
一言で感想を述べるとするならば経済が迷走していて出口が見えていないなという事が分かったぐらいですかね。あと、自分の主観を述べるとするならばメタバースが浸透するのはまだ先の話になると思います。もしかしたら、あと５年、１０年先の話になるのではという印象ですね。
なので、今の子供達が大人になる頃に流行るものだと思ったほうが良さそう。スマホが浸透するにもそれぐらい時間がかかったように最初は熱狂的なテクノロジーヲタクから浸透していき、その後、一般人も認知していく様な流れになるのだろうと。
これは前半に登場された佐藤航陽 氏が書かれた書籍、世界2.0にも書かれていることですが・・・、その様に欲望の資本主義を見て思いました。
まとめ、迷走していてこれと言って、答えを見いだせない世の中が後、数年は続きそうです。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
10, 120, 2022, 31, 5, 8, bs, NHK, オンデマンド, お昼, スマホ, それぐらい, テクノロジー, デジタル, バース, パラドックス, ペイ, メタ, もの, ヲタク, 一, 一般, 一言, 主義, 主観, 事, 今, 何事, 先, 出口, 単品, 印象, 台風, 夏, 大人, 子供, 対応, 後, 感想, 放送, 日曜日, 昨日, 時間, 最初, 欲望, 浸透, 経済, 自分, 衝撃, 視聴, 話, 販売, 資本, 購入, 迷走, 頃,
エゴサーチしますか？しませんか？ #世の中 #大変だな
2022.09.18
おはようございます、今日から明日にかけて超大型台風が来るそうです🫠
さて、エゴサーチしますか？という問いに答えは「します」です、最初は見るのが嫌でしたが今はエゴサーチして何かしている人を見て思うことは、何でしているのだろうかと思うようになってきてます。
SNSの負の側面を見て、これはやってはイケナイ事だなという事が分かりますね、小学生や中学生などのSNSいじめが酷いという話をニュースなどで目にしますが、確かにこれはメンタルが強くないとダメージになるなと思います。
嘘や誹謗中傷などをデジタル上に残すわけですからね。それも殆どは消えないものです、被害者側からすれば一刻も早く消して欲しいものかも知れませんが消えません。
こういうのは警察も動きにくいケースが多いです。じゃどうすれば良いか。それはSNSを自分自身もアカウントを開設する事と発信する事が大事です。発信していると匿名や偽名を使って叩くアカウントもいるでしょうけど、それでも自ら発信していく事が大事になります。
発信するのは自分が思った事から、自分が興味を持ったものでも良いので、そういう事を発信する事です。尚、メンタルが弱い人はエゴサーチしないことも大事です。
昔は無視することが大事だと言われましたが、無視しても嘘や誹謗中傷は消えません。それが今の現実です、SNS運営会社に規約違反を報告しても消えないのが現実です。複数人が報告すれば消えますが、新たなアカウントを開設してのいたちごっこになります。
恨んだり誹謗中傷する人は、そんなに良い環境下にいる人ではないので弱い立場の人を見つけて叩きたくなるものだと思ってください。心に余裕がない人が大体叩いている傾向にあります。
こういう事は社会人になってもあります。自分が子供だった時、大人はもっとちゃんとした者だと思っていましたが、あまり子供と変わりません、子供に少し知恵が付いたのが大人なんだろうと・・・。ちゃんとした大人もいますが、あまりいない様な気もします。
そういう人達が、自分は正義だという斧を振りかざしてきますが、それって本当に正義なのでしょうか？正しいって何だろうかとたまに思います。一切、自分は悪くないと思ってやっているのでしょうかね。そうだったら人の気持ちを理解出来ない人なのかもしれないなって思います。
まぁそういう人とは関わらない方が良いですよ。器が小さい人達です。
そういう事ですので気にせずに前向きに生きてください。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
SNS, アカウント, エゴサーチ, ケース, こと, これ, それ, ダメージ, デジタル, ニュース, メンタル, もの, 一刻, 世, 中, 中傷, 中学生, 事, 人, 今, 今日, 側面, 偽名, 匿名, 台風, 嘘, 大事, 大変, 小学生, 明日, 最初, 殆ど, 発信, 目, 自分, 自身, 被害者, 話, 誹謗, 警察, 負, 超大型, 開設,
一週間の予約が出来るデモコードです。良かったらどうぞ😌。 #php #code
2022.09.17
おはようございます、今日から台風接近らしいですね。この投稿は昨日書きました。
さて、一週間の予約（時刻表から）が出来るデモコードを書きました。これを書いたキッカケは昔の職場の方がこんな感じのUIを作られていたのを見て、自分も書いてみようと思いDEMOコードを朝起きて調べながら書きました。調べたことは選択を解除する方法だけで、後はオリジナルコードです、設計書も何もなく組み立ていきましたので、欠陥があるかもです。また、Qiitaにも記載しましたが、コメントをほぼ書いていません。書かずともプログラマーなら分かるだろうという感覚です。
肝心の確認部分は記載していないのにも訳があります。営業妨害になっては駄目だからです。そういう理由で確認部分以降は書いていません。
こちらにもソースコードを掲載しときますね。
<?php
ini_set("display_errors",0);
/**
* @param array $holiday
* @return string $str
*/
function fn_header($holiday = [])
{
$str = "";
$date = new DateTime();
for ($i = 0; $i < 7; $i++) {
!$i ? "" : $date->modify('+1 day');
$w = $date->format("w");
$tabindex = $i*7;
$ho = (function ($days, $holiday = []) {
return (array_search($days, $holiday) !== false) ? "holiday" : "";
})($date->format("Y-m-d"), $holiday);
$str .= "
<th tabindex=$tabindex>
<span class='header_no week_no_$w $ho'>" . $date->format("Y-m-d") . "</span>
</th>";
}
return $str;
}
/**
* @param int $h_min
* @param int $h_max
* @param int $m_interval
* @param array $cnt
* @param array $reserve
* @param array $holiday
* @return string $str
*/
function fn_time($h_min, $h_max, $m_interval,$cnt=[],$holiday = [], $reserve = [])
{
$str= [];
for ($h = $h_min; $h <= $h_max; $h++) {
for ($m = 0; $m < 60; $m = $m + $m_interval) {
print("<tr>\n");
$date = new DateTime();
for ($i = 0; $i < 7; $i++) {
$cnt[$i]=!$cnt[$i]?(((($h_max - $h_min)+1)*(60/$m_interval))*($i))+7:(++$cnt[$i]);
!$i ? "" : $date->modify('+1 day');
$w = $date->format("w");
$ho = (function ($days, $holiday = []) {
return (array_search($days, $holiday) !== false) ? "holiday" : "";
})($date->format("Y-m-d"), $holiday);
$time = sprintf("%02d:%02d",$h, $m);
if ($ho) {
print("
<td class='' tabindex={$cnt[$i]}>
<span class='header_no week_no_$w $ho'>" . $time . "</span>
</td>");
} else {
$r = (function ($days, $reserve = []) {
return (array_search($days, $reserve) !== false) ? "reserve" : "";
})($date->format("Y-m-d") . "_" . $time, $reserve);
if (!$r) {
print("
<td class='date_" . $date->format("Y-m-d") . "_{$time}' tabindex={$cnt[$i]} data-date='" . $date->format("Y-m-d") . "_{$time}'>
<a class='time_{$m}_" . $date->format("Y-m-d") . "_{$time}' data-sortno={$cnt[$i]} href='#?data=" . $date->format("Y-m-d") . "_{$time}'><span class='header_no week_no_{$w} {$h}'>{$time}</span></a>
</td>");
} else {
print("
<td class='' tabindex={$cnt[$i]}>
<span class='header_no week_no_$w $r'>" . $time . "</span>
</td>");
}
}
}
$date = null;
print("</tr>\n");
}
}
return "";
}
?>
<!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">
<meta name="Description" content="Enter your description here" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>予約-時刻表(デモ版)</title>
<style>
table,tr,td{
user-select: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h1 class="display-1">予約-時刻表<br></h1>
<h5>{予約：時刻をクリックするか、<br>
左クリック選択状態で複数選択可能です<br>
（日付またぎは禁止しています）}</h5>
<h5>{ダブルクリックすると予約画面に遷移します。<br>
※DEMO版ですので予約登録画面は御座いません}</h5>
</div>
</div>
</div>
<div class="container-fluid text-center">
<div class="row">
<div class="col-12">
<table class="shadow-lg table table-hover table-bordered">
<thead>
<tr>
<?= fn_header() ?>
</tr>
</thead>
<tbody>
<?=fn_time(10, 20, 10,[],["2022-09-18","2022-09-23"],["2022-09-19_10:40","2022-09-19_10:50"]) ?>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
<script src="./assets/js/main.js?<?=time()?>"></script>
</body>
</html>let date_obj = document.querySelectorAll("td");
let submit_url = "https://example.com";
let is_date_data = [];
let cnt = 0;
date_obj.forEach(function (elm, key) {
elm.addEventListener("mouseout", select_in_value);
elm.addEventListener("click", sp_select_in_value);
elm.addEventListener("touchend", sp_select_in_value);
elm.addEventListener("dblclick", select_out_value);
});
function check_value(o, e) {
if (is_date_data.length === 0) {
return true;
}
let d = o.getAttribute("data-date");
return d ? ((d) => {
let f = is_date_data.find(element => {
let pattern = new RegExp(d.split("_")[0]);
return !element.match(pattern);
}) ? false : true;
if (!f) {
select_clear(o, e);
is_date_data = [];
cnt = 0;
}
return f;
})(d) : false;
}
function select_in_value(e) {
if (e.buttons === 1 && check_value(this, e)) {
if (this.getAttribute("data-date")) {
this.style.backgroundColor = "#555";
this.children[0].style.color = "#fff";
if (is_date_data.indexOf(this.getAttribute("data-date")) && is_date_data.indexOf(this.getAttribute("data-date"))) {
is_date_data[cnt] = this.getAttribute("data-date");
cnt++;
}
}
}
}
function sp_select_in_value(e) {
if (check_value(this, e)) {
if (this.getAttribute("data-date")) {
this.style.backgroundColor = "#555";
this.children[0].style.color = "#fff";
if (is_date_data.indexOf(this.getAttribute("data-date")) && is_date_data.indexOf(this.getAttribute("data-date"))) {
is_date_data[cnt] = this.getAttribute("data-date");
cnt++;
}
}
}
}
function select_out_value(e) {
if (is_date_data.length) {
let is_data = is_date_data.map(function (elm, index) {
return "date[" + index + "]=" + elm;
});
window.location.href = submit_url + "?" + is_data.join("&");
}
}
function select_clear(o, e) {
let is_ClassName = [];
is_ClassName = is_date_data.map(function (d) {
return "date_" + d;
});
is_ClassName.map(class_name => {
document.getElementsByClassName(class_name)[0].style.backgroundColor = "#fff";
document.getElementsByClassName(class_name)[0].children[0].style.color = "#0d6efd";
})
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
0, Code, com, demo, https, ligaLgY-uZ, php, qiita, UI, watch, www, youtube, オリジナル, キッカケ, コード, こちら, こと, コメント, これ, ソース, デモ, プログラマー, 一, 予約, 今日, 台風, 営業, 妨害, 後, 感じ, 感覚, 投稿, 接近, 掲載, 方, 方法, 昔, 昨日, 時刻表, 朝, 欠陥, 理由, 確認, 職場, 肝心, 自分, 解除, 記載, 設計書, 訳, 選択, 部分, 駄目,
千里の道も一歩からとはよく言ったものですね。毎日の？🤔
2022.09.04
おはようございます、台風が過ぎ去ったらまた暑い日なるのかな？
今日は動画を２本ほど朝視聴したので、その事を踏まえながらブログを記載していこうと思います。記事を読む前に動画を視聴してください、視聴したことを前提に記事は書いています。最初に見たのはウィリアム・マクレイブンさんの動画です。人々が笑っている所に何か大事なことが隠れているような気がします。毎日続けるという事は中々、出来ることではなくて大体の人が辞めてしまいます。おそらく９割の人は辞めてしまうのです。
次に茂木健一郎さんの”ネットで目立っている人にあこがれるなよ！”を見ました。これを見て日の目を見ない人にも凄い人はいるという事はよくわかりますし、何も得ることが出来ないという事も最もだと感じました。
自分のやりたいことがあるのならば、千里の道も一歩からという気持ちで毎日、担々とこなすことが大事になると思います。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
0, 2, ９, com, gMcaNQ, https, NEO, watch, www, youtube, ウィリアム, こと, これ, ネット, ブログ, ふん, マク, マクレイ, もの, レイブン, 一, 中々, 事, 人, 人々, 今日, 何, 前, 前提, 動画, 千里, 台風, 変化, 大事, 大体, 所, 日, 日の目, 最初, 朝, 毎日, 気, 自分, 茂木健一郎, 視聴, 記事, 記載, 道,
45歳定年制提言したサントリーの社長さん、世間が見えていないと思った件。
2021.09.18
天気予報の予報では高知県、深夜に台風が通り過ぎる予定になり朝には晴天になるらしいですけど、どうなんですかね。自分の予想ではこれを書いている日には台風が通り過ぎる気がします。
さてサントリーの社長さんが45歳定年制ってどうって言った発言が物議を醸して（ぶつぎをかもして）ます。45歳定年制なんかにされたら、路頭に迷う人がいそうですね。大体、年齢等や転職回数などを見て判断する会社が未だに日本では多い中、45歳定年制にされたらほとんどの人が困ってしまうだろうなと思います。
そして動画を見て45歳定年制に対しての意見が若い子とある程度、歳を重ねた人との意見の隔たりがあって興味深い内容でした。歳を重ねることによってやっぱ現実的に考えるようになるのだなと思いましたね。
最後に毒を吐くとサントリーの社員はまずは社長が定年してくださいと思ったに違いない…。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
45, こと, これ, サントリー, ほとんど, 世間, 中, 予報, 予定, 予想, 人, 件, 会社, 内容, 判断, 動画, 台風, 回数, 大体, 天気, 子, 定年, 年齢, 意見, 提言, 日, 日本, 晴天, 最後, 朝, 未だ, 歳, 毒, 気, 深夜, 物議, 発言, 社員, 社長, 自分, 路頭, 転職, 高知県,
高知県のローカルネタ、東側の地域の郵便局の配送方法！？。
2021.09.15
台風がUターンして九州・四国などへ接近するかもしれないという天気予報を見て、ほんと・・・異常気象なんだなぁって思いました。今まで中国あたりまで行って引っ返してくる台風なんてなかったと思います。
さてローカルネタです?。高知県の東側地域だけかもしれないけど、各支店の郵便局に郵便を出すとすると、その郵便は一度、東郵便局に集約され県外等に配達されるだってさ。なので急ぎの荷物などは東郵便局の出すと良いです。因みにヤマト運輸は南国にあるヤマト運輸 高知主管支店に配送すると一番早く配達されます。
昨今、ネットで買物をする人が増えてきて運送業の現場は大変そうです、自分も１０年以上前に運送業界で働いていたので現場の辛さはわかります、あの当時でさえかなり過酷な現場でしたから今はもっと大変なだと思います。特に夏はハードです、冬でも荷物の仕分けなんかしていると半袖シャツで十分なぐらいで・・・本当に体力がないと続かないし仕分けしないといけないので、ある程度、市や区のことを覚えていないと仕事になりません。
ここらへんは一か月も働いていると覚えるのだけども。どこの運送業界も大変だと感じます。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
10, かなり, シャツ, ダーン, ネタ, ネット, パート, ほんと, ヤマト運輸, ローカル, 一度, 中国, 主管, 九州, 予報, 人, 今, 体力, 冬, 半袖, 南国, 台風, 四国, 地域, 夏, 大変, 天気, 当時, 接近, 支店, 方法, 昨今, 本当, 東, 東側, 業界, 現場, 異常気象, 県外, 自分, 荷物, 買物, 運送, 過酷, 郵便, 郵便局, 配送, 配達, 集約, 高知, 高知県,
NASと書いてナスと呼ぶ、お茄子のナスではありません。
2021.08.11
台風9が通り過ぎてから、なんだか暑さの中に涼しさを感じるようになりました、朝方とか結構涼しいなと感じますが日中はまだまだ暑い日が続きます。
さてお休みの日にYOUTUBEのオススメに出てきた、「NASを取り付けてみたら快適になった」とかいう動画を二本ほど立て続けに見ました。これをエンジニア目線で見ると古くなったPCにリナックスを入れてNAS化するので良いじゃんとは思ったものの、外からアクセスしたいなと思った時はセキュリティーによほど、自信がないと駄目だなと感じます。
そう思うと市販のNASが良さげに感じますよね。ただ自分はグーグルのバックアップで良いじゃないのと思っているし、ソースコードはgithubなので十分ですよねと思ってます。容量の多い動画を取り扱っているわけでもないので欲しいなという気持ちはあるものの、ここは心を鬼にしてポチるのを辞めました。
いま、ポチりたいのはCドライブを取っ替えたいという事だけです、まだ不安定なSSDを使用しております。
因みにNASってなんだよってのは、動画を見て頂けたら分かると思いますが簡単に説明するとファイルなどの保管庫（バックアップ）です、もしもパソコンのHDDが壊れたりした時にバックアップとして機能するものです。クラウドにファイルなどを預けることがなかった時代は耐久性が今より悪かったので、RAID技術などを使って自宅のPCの守っていたものですが、今はそういう事をする人は少なくなっていると思います。
尚、サーバーやクラウドではRAID技術は今でも使用されております。特に金融機関はそういう技術は強固に作られています、データが消えたら大変なことになりますからね。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
９, com, github, https, NAS, PC, www, youtube, アクセス, エンジニア, おすすめ, お休み, グーグル, コード, ここ, これ, セキュリティー, ソース, ナス, バックアップ, ぽち, リナックス, わけ, 中, 二, 動画, 台風, 外, 容量, 市販, 心, 快適, 日, 日中, 時, 朝方, 気持ち, 目線, 立て続け, 自信, 自分, 茄子, 駄目, 鬼,
ネタがなくて九九表なんか作っている訳ではなく。
2021.08.10
暑い暑い日曜日、台風9号の影響は日曜日の夕方から夜中までかなとか思いながら記事を書いています。因みにこの頃、予約記事のストックが切れそうですね。ネタが思いつく時は一気に数記事書けるのですがネタが出てこないスランプに落ち込むと記事のネタが思いつかなくて書けない日が続くこともあります。
ネタがなくて九九表なんか作っている訳ではなく。単純に自分の頭は九九表がかけた頭になっていたので、そのために作っただけです。計算とかをパソコンなどに委ねていると自分の頭は退化する一方です。暇で何もせずにズゥーっと頭を使わないと呆けるというのは、本当なのかもしれません。
何もしないと漢字は書けなくなるし、基本的な計算することすら出来なくなるのですよね。プログラミングは毎日のようにしているのだけど、それ以外の事は何ひとつしていないので文字を書く時の筆圧具合いがめちゃくちゃだったりもして・・・、本当に基本的なことが全然できなくなってきています。
そういう事で基本の基に立ち返ろうとしているわけです?。
小学生の勉強につまずくとその後、全部の勉強につまずくことになります。なので小学生の勉強はかなり大事だと思います。
因みに今回のjavascriptのソースコードはこんな感じになります。
9×9:九九表はこちらから
document.getElementById("Q9_select").innerHTML = (function () {
let str = "";
for (var i = 0; i <= 9; i++) {
str += !i ? "<option value=''> " + "選択してください" + "</option>\n" : "<option value=" + i + ">" + i + "の段</option>\n";
}
return str;
})();
document.getElementById("Q9_select").addEventListener("change", function (e) {
let Q = this.value ? this.value : 0;
let str = "";
let view_flg = 1;
for (var i = 1; i <= 9; i++) {
let ans = Q * i;
str += "<p class='h2'><span class='text-primary'>" + Q + "</span> × " + i + "= <span class='Q9_ans' style='visibility:visible'>" + ans + "</span></p>";
}
str += "<p class='text-center'><button class='h2 btn btn-primary' id='view'>九九の解を<span id='txt'>非表示に</span>する</button></p>";
document.getElementById("Q9_view").innerHTML = str;
document.getElementById("view").addEventListener("click", function () {
let object = document.getElementsByClassName("Q9_ans");
for (const key in object) {
if (Object.hasOwnProperty.call(object, key)) {
const element = object[key];
element.style.visibility = view_flg ? "hidden" : "visible";
}
}
view_flg = view_flg ? 0 : 1;
document.getElementById("txt").innerText = view_flg ? "非表示に" : "表示";
});
});
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
９, こと, ズゥー, ストック, スランプ, それ, ため, ネタ, パソコン, プログラミング, めちゃくちゃ, 一方, 九九, 予約, 事, 何, 具合い, 単純, 台風, 夕方, 夜中, 影響, 数, 文字, 日, 日曜日, 時, 暇, 本当, 毎日, 漢字, 筆圧, 自分, 計算, 記事, 訳, 退化, 頃, 頭,
半年過ぎましたね、フリーランサーという無職ｗ。
2020.06.23
無職になり半年過ぎましたね。基本的に勤めていたときと生活習慣は変わらず規則正しい生活のままです。まぁそろそろ働かないといけないなという焦りも出てきましたが、どうなるかは分からないです。就活はしています?。
さてハローワークへ求人出している企業さんには悪いのですが、ハローワークサイトから高知県に求人を出している会社の求人データを全て引っこ抜いてきました（スクレイピング）。そして最低賃金とか最高賃金とかを調べてみました。結果、正社員求人は2000社ほどあり、その中で比較的、賃金の良いのは建築・土木と薬剤師でした。日給で一番低いのは断続的な仕事で505円、そして恐らく高知県の最低賃金790円が続きます。これを見ていると高知県は土木関係が多いですね、これは昔の名残だと思います、今では台風銀座ではなくなりましたが昔は毎年のように台風が通る県だったので、それに伴う災害が頻繁に発生する県だったこともあり、建築・土木関係のお仕事が比較的に多いですね。
次に多い仕事は介護職の仕事です、高知県は日本で一番ぐらいに高齢者が多い県ではないだろうか？あとよさこい祭りがあるので美容関係のしごとも実は比較的に多いです。自分が勤めていたIT関係の仕事は他の県比べて求人数が少ないですね。これから増えていって欲しいですが、、、サポートセンターばかりが増えていっているのが現状です。6000件超のデータを見て思ったことは高知県、頑張れ・・・！！と思いたくなります。『いや違うだろ、お前が頑張れ・・・』とツッコまれそうですが、そこは・・・忘れてください?。
ちなみにハローワークを検索するアプリを使用すると同じような結果が得られるかもしれませんが、このデータを取って三ヶ月ごとに比較してみようかと思います。時間があればジャンルごとにグラフとか作って視覚化するのも面白いかもしれません。今回、スクレイピングするのにC#とsqliteを使ってます。コードの公開はありませんが、高知県の現状を伝えていきたいと思います。
次回の求人レポートの記事予定は9月23日です。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2000, 505, 790, ｗ, お仕事, こと, これ, サイト, スク, それ, データ, とき, ハローワーク, ピング, フリーランサー, まま, レイ, 中, 今, 仕事, 企業, 会社, 全て, 半年, 台風, 名残, 土木, 就活, 建築, 日給, 昔, 最低賃金, 最高, 正社員, 毎年, 求人, 災害, 無職, 焦り, 生活, 発生, 県, 結果, 習慣, 薬剤, 賃金, 銀座, 関係, 頻繁, 高知県,
台風が過ぎったら高知県は梅雨明けだろうと。
2015.07.17
台風が過ぎったら高知県は梅雨明けだろうと思います。映画、バケモノの子がかなりヒットしているらしいです。はやい所では夏休みにはいっている小学生や中学生がいると思います。おそらくバケモノの子、内容がしっかりしていていれば結構、ロングランになりそうな気がします。自分はブルーレイかオンデマンドで観ると思います。自分が小学生だったら恐らく上映がはじまったら即、映画を観に行っていたと・・・。※ちなみにアニメ好きな大人も楽しめる映画になっているらしいので足を運んでみては良いかなと思います。
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
アニメ好き, オンデマンド, かなり, バケモノ, はやい所, ブルーレイ, ロングラン, 上映, 中学生, 内容, 台風, 夏休み, 大事, 大人, 子, 小学生, 気, 足, 高知県,