びっくり髭剃りスムースが凄い！ #ニベアメンシェービングフォームスムース
2022.12.06
おはようございます、高知県はどんより曇り空が続きますね🙄今日はどうかな？
今日は昨日、使用したシェービングフォームスムースの話を書きます。女性には全然関係ない話なのでスルーしてください。今までシェービングフォームスムースは外国製のスムースを使用していましたが、この度、日本製のシェービングフォームスムースを使用してみようかなって思って使ってみました。
使用してみてめちゃ驚きです😳、泡が今までと全然違うし本当に泡が分厚いです！！。髭を剃った感覚も今までよりも綺麗に剃れたような気がします。
そして、何だか理髪店のシェービングフォームスムースのような香りもするし、なんかすごいよコレ。因みに自分は一昔前までは電動髭剃りで剃ってたのだけど、この頃は自分で剃るようになりました、その理由は肌荒れがあるから仕方無く剃るようになったですが、今ではそれ程苦にならないぐらいになりました。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
アメン, コレ, シェービング, スムーズ, スルー, ニベ, びっくり, フォーム, 一, 今, 今日, 使用, 外国, 女性, 度, 感覚, 日本, 昔, 昨日, 曇り空, 本当, 気, 泡, 理由, 理髪店, 綺麗, 肌荒れ, 自分, 苦, 話, 電動, 頃, 高知県, 髭, 髭剃り,
JavaScriptでWebstorage使ってますか？🤔 #webstorage #javascript #cookie
2022.12.04
おはようございます。二日酔いです、遅めの更新🍃。
今日は今までフロントエンド側で使用していたcookieの処理コードをwebstorageに置き換えた理由と使い方のコードを記載します、JSでCookieを取り出すコードを書く場合、バニラコードで書くかライブラリを使用して書くかだと思います。自分は前者で、とにかくCookieで保存したものを取り出すのに無駄にコードを書いていましたので、そろそろコードを直そうと思ってwebstorageを採用しました。
webstorageを採用した理由は自分が保管するデータはそれ程、容量を食わないしローカル保存（ブラウザ側保存）で十分な情報だったのでwebstorageを採用しました。そして何より、もう殆どのブラウザで使用できるようになっただろうという考えの元、コードを改修しました。
今まで情報の呼び出しするのに数行書いていたものが、１行のコードで参照できるというのは本当に素晴らしいことです💯。
呼び出すコードはこちら
localStorage.getItem("bgcolor_code")値を保存するコードはこちら
localStorage.setItem("bgcolor_code",color)その他に削除やクリアするコードやSessionで保存するコード等も存在します、もし詳しく知りたい場合は上記のTwitterのリンクを辿ると情報にたどり着くはずです。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
COOKIE, javascript, JS, webstorage, エンド, コード, データ, バニラ, ブラウザ, フロント, もの, ライブラリ, ローカル, 二日酔い, 今日, 使い方, 使用, 保存, 保管, 元, 処理, 前者, 場合, 容量, 情報, 採用, 改修, 更新, 殆ど, 無駄, 理由, 自分, 記載,
Excelでは読み込むことができないような大容量のデータもPowerQueryでは処理できます😤。 #PowerQueryExcel #30万件
2022.12.02
おはようございます、昨日からいきなり寒くなりましたね。🍃
３０万件のダミーデータの作り方を記載します、まずは１万件のダミーデータをこちらのサイトで生成します。後はフォルダを構えてその中にダウンロードしてきたファイルを置き、そのファイルを３０回複製します、その後PowerQueryで操作する（フォルダを開く）ことにより、簡単に３０万件のダミーデータが作れます、なお、一つのエクセルファイルをPowerQueryで開き１万行をコピーアンドペーストする事を繰り返すことでも同じくダミーデータは作れます。
PowerQueryはこちらから無料でダウンロードできますので、ご使用ください。操作手順等はYOUTUBEでPowerQueryと検索するといろいろな解説がありますのでそちらを参照くださいませ。例えばこちらの動画など🙄
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, 30, Excel, PowerQuery, PowerQueryExcel, youtube, アンド, いろいろ, エクセル, こちら, こと, コピー, サイト, そちら, ダウンロード, ダミー, データ, ファイル, フォルダ, ペースト, 一つ, 万, 中, 事, 作り方, 使用, 処理, 動画, 参照, 容量, 後, 手順, 操作, 昨日, 検索, 無料, 簡単, 複製, 解説, 記載,
３０万件のデータを扱っている方の話を聞いて一瞬😱となる。 #laravel #Queue #worker #jobs
2022.12.01
おはよう12月!!。皆さんおはようございます。今日から寒くなるそうですね。
先日、面談の中で３０万件のデータを扱っている方の話を聞いて一瞬尻込みしましたが、自分でもその処理を捌くことが出来そうだなと思ったので、ダミーデータを作って今月中に捌いてみようと思います。なお、ローカルサーバーを使用して捌くのでレンタルサーバーやクラウドサーバーでメモリリークなんかで落ちたりしたらごめんなさい🙇。
因みに３０万件のデーターをどう捌いているかといえば、非同期処理(Queue)で捌いているとの事。フレームワークはLaravelを使用し、非同期処理はララベルの機能であるキューを使用してバックエンドで処理を立ち上げているとの事。要は個々プロセス複数立ち上げて並列処理で動かすという事です、プロセスを立ち上げ過ぎたら、メモリ食いすぎてサーバー事態が落ちる可能性があるので別サーバーで動かすのが理想ぽっい、その場合はコネクションの設定してあげないといけない事やプロセスをどれぐらい立ち上がると良いのかなどの設定が必要みたいですね。
php artisan queue:table
php artisan migrateともあれ自分でダミーデータを用意して試してみないと感覚が掴めないし、実際上手くいくかなどが分からないので試してみます😳。
明日、１万件のダミーデーターを複製（コピペ）して30万件のエクセルファイル作る方法を記載します。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
12, 30, jobs, Laravel, Queue, worker, エンド, キュー, クラウド, こと, サーバー, ダミー, データ, データー, バック, フレームワーク, プロセス, メモリ, ララベル, リーク, レンタル, ローカル, 一瞬, 万, 並列, 中, 事, 事態, 今日, 今月, 使用, 個々, 先日, 処理, 動, 可能性, 同期, 方, 機能, 皆さん, 自分, 複数, 要, 話, 面談,
超簡単なコード🦋マウス追従をする。 #javasriptcode
2022.11.28
おはようございます。先週、土曜日の朝は雨がしとしとと降っていましたね☔。
そんな中で一つのデモコードの動画撮影をしていたのですがボツにしました。理由は超簡単過ぎるコードなので、再生回数が狙えそうにないなという判断からです（尺も短いし…）。でも一応コードを書いたのでソースコードはリリースします。タイトル通り、マウス追従するコードです。マウスポインターを一定の距離間隔で追従します。ソースコードはjavasriptだけ貼っていますが、CSSやHTMLを使用して円を描いています。そちらはデモサイトを検証して頂けたらと思います。
let circle = document.getElementById("circle");
document.body.addEventListener("mousemove",function(e){
let a = e.currentTarget.getBoundingClientRect();
let x = e.clientX - a.left;
let y = e.clientY - a.top;
circle.style.top = `${y}px`;
circle.style.left = `${x}px`;
circle.style.transform = `translate(50px,50px)`;
})余談：
この頃、ブログがスランプ状態ですね、キーボードも弾みません、波に乗っているときは結構早く一つの記事を書くことが出来るのですが全然ですね。そんな弾まないブログ記事作成の一コマの風景を動画に撮りました。明日の記事かYOUTUBEにアップしているので参照してみてくださいな（音楽は軽やかなんですけど…😅）。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
addEventListener, body, circle, css, currentTar, document, function, getElementById, html, javasript, javasriptcode, let, mousemove, quot, コード, サイト, ソース, そちら, タイトル, デモ, ポインター, ボツ, マウス, リリース, 一つ, 一定, 中, 使用, 先週, 円, 再生, 判断, 動画, 回数, 土曜日, 尺, 撮影, 朝, 検証, 理由, 超簡単, 距離, 追従, 間隔, 雨,
理詰め。そんなに変わるだろうかと思う反面。 #人工知能 #シンギュラリティ
2022.11.25
おはようございます、祝日の昨日は雨でしたね😗。今日は３記事ほど予約投稿出来ました。
そんな中、PIVOTの対談を朝（夜も）から観ていました。佐々木さんと対談された落合陽一さん。落合陽一さん曰く、シンギュラリティは再来年にはやってくるだそうです。
落合陽一さんが得意ではない方もいるかと思いますが、聞いていて日本は遅れているなというのは良くわかります。英語圏の方は人工知能を使用して絵を作成したり、音楽を作成したりすることが容易に出来るけど、日本人は英語力がない人が多いのでテキストで思い通りに人工知能に指示することが出来ない。
そんな感じなので、絵を創作するならstability.ai、音楽を創作するならmubert(Mubert-Text-to-Music)を落合陽一さんが使用していたように海外の人たちは、もうこういうツールを使い始めています。日本だけが特殊な環境にあるなって思うところはあります。いろいろな分野にAI（人工知能）が浸透していくのは時間の問題かもしれないと思います。
特にホワイトカラー職は大手から変わるじゃないかと思います。下請けに外注していた単純作業などは恐らくAIに取って代わられる運命に有ると思います。猫も杓子もAIを使いだしたら、世の中は大きく変わるじゃないかな・・・。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
３, AI, mubert, Mubert-Text-to-Music, PIVOT, stability, こと, シンギュラリティ, ツール, テキスト, デジタル, ネイチャー, 中, 予約, 人, 人工, 今日, 佐々木, 作成, 使用, 再来年, 創作, 反面, 夜, 容易, 対談, 得意, 思い通り, 感じ, 投稿, 指示, 方, 日本, 日本人, 昨日, 時代, 曰く, 朝, 海外, 理詰め, 知能, 祝日, 絵, 英語力, 英語圏, 落合, 記事, 陽一, 雨, 音楽,
Chromeブラウザの拡張機能を新たに作ったお話。 #拡張機能
2022.11.22
おはようございます、転職活動はあまりしていません😯。
本当なら就職出来ている頃だと思います。なぜならハローワークだけで活動しているので、他のスカウトは無視しているという変な転職活動をしています。今年欲しいという求人は人手不足な会社かなと思いますし、年末押し迫って転職できるとはとても思い難いです。頑張っている事は確かですが、今は難しいという思いもあります。
そんな中でChromeブラウザの拡張機能を新たに作ったお話です、一応、皆さんが使えるようにGさんに申請しました。どんな拡張機能を作ったのかと言えば、サイト内検索が出来る拡張機能です、特に難しいコードなどは使用していませんが、人様の拡張機能は少し不安なので自分で自作した訳です。どんな時に使用するかは人によって違うかも知れませんが、例えばITエンジニアならサイト内のドキュメント検索に使用できるかなって思います。今のリファレンスサイトなどはサイト内検索が出来るようになっているモノのそれでも抜け落ちている部分があるので、それを拡張機能の力で補えるかなと思います。
因みに中のmainコードはこれだけです。コレでサイト内検索を行っています。
document.getElementsByName("txt")[0].addEventListener("keydown", (elm) => {
if (elm.key === "Enter") {
chrome.tabs.query({ 'active': true,'lastFocusedWindow': true }, function (tabs) {
var site = String(tabs[0].url).match(/https?\:\/\/[a-zA-Z0-9|\.|\-]*\/?/)[0].replace(/https?:\/\//,"").replace(/\//,"");
chrome.tabs.create({
url:"https://www.google.com/search?q=site" + encodeURI(":"+ site + " " + document.getElementsByName("txt")[0].value)
});
});
}
});
追伸：公開されました。拡張機能はこちら👉
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
Chrome, IT, エンジニア, お話, コード, サイト, スカウト, ドキュメント, ハローワーク, ブラウザ, リファレンス, 不安, 中, 事, 人, 人手, 人様, 今, 今年, 他, 会社, 使用, 変, 少し, 就職, 年末, 拡張, 時, 本当, 検索, 機能, 求人, 活動, 無視, 申請, 皆さん, 自作, 自分, 訳, 転職, 頃,
chart.jsでデモを試してみました。📈 #javascriptcode
2022.11.18
おはようございます、朝が早いですねと言われますが、夜が早いだけです😅。
さて、今日はchart.jsのデモを試してみました。売上のグラフとかコレで作るのが一番じゃないかなと思うライブラリですね。動画で編集してみせたのは二箇所ですが、実際、業務で使用する場合は３箇所ほど変更して使用しないといけないのかなって。
そういう訳で、こちらのブログにソース・コードを貼り付けておきます。
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
}
}
}
});業務で変更しないといけない最低限３箇所はこちらです～😆。
- ラベル
- データーセットの中のラベル
- データーセットの中のデータ
上記の３箇所を売上のデータや何やらに使用することで活用できるかと思います。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
12, 19, 2, ３, 39, bar, chart, const, ctx, data, document, getElementById, javascriptcode, JS, let, myChart, new, type, グラフ, コード, こちら, コレ, ソース, デモ, ブログ, ライブラリ, 一, 二, 今日, 使用, 動画, 場合, 変更, 夜, 実際, 朝, 業務, 編集, 訳,
md5でいいのかそれで？。 #wp #phpcode
2022.11.17
おはようございます、いきなり寒くなりましたね。朝起きるのに勢いが必要になってきました😆。
今日はワードプレスでもパスワードの暗号化に使用されているmd5に関して思うことがあります。そもそもmd5は強固な暗号なのか？、答えはnoだと思いますよ。md5を使用すると３２文字の暗号化された文字列が返却されます。確かに暗号化されているですけど・・・。同じ文字をもう一度、暗号化すると同じ文字列が返却されます、なので暗号化された文字列になるかどうかで、元の文字が割り出せてしまいます。
総当たりすれば時間はかかりますがパスワードが分かちゃうので、パスワードを保存する方法としては△な感じかと思います。じゃ何が良いかといえばphpの場合、password_hashと言う関数があるので、そちらを使用した方が得策かと思います。Eメールなどはmd5でも良いかも知れませんが微妙。
echo password_hash("rasmuslerdorf", PASSWORD_DEFAULT);因みに、パスワードなどやメールアドレスを平文で扱っている開発会社はよく見かけます。何故、平文を放置しているかと言えば直す暇がないなどの理由からだと思います。また、クライアント様がそうして欲しいなどの理由もあります。そういう事から個人情報が保護されていないデータベースはあります。
尚、自分が使用しているWEBサービスも個人情報にあたる部分は暗号化しています。なので、データーが流出しても直ぐに情報が漏れるということはないと思っています🫠。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
32, 5, echo, hash, md, no, password, php, PHPCODE, quot, rasmusl, wp, こと, そちら, パスワード, プレス, メール, ワード, 一度, 今日, 何, 使用, 保存, 元, 勢い, 場合, 得策, 微妙, 必要, 文字, 文字列, 方, 方法, 時間, 暗号, 暗号化, 朝, 答え, 総当たり, 返却, 関数,
POSTとGETの考え方について伝えている動画。 #以心伝心
2022.11.12
おはようございます、11月なのに寒くないって不思議です😗温暖化。
さて、POSTとGETの考え方について無音声（音楽あり）で伝えている動画です、以心伝心で意味が通じると良いですが、それではブログを書いている意味がないので要点だけ解説します。POSTとGETとは、インターネット上でデータの送信を行うのに使用します。POSTの利点はデータを隠して送れることと、比較的に重いデータも送れることにあります。ではGET送信の利点は、SEOに有利と言ったところでしょうか。
今回、POST送信とGET送信を行い、PHPのプログラムでPOSTとGETを受信する方法を動画で伝えています。次回は非同期処理を使用して送受信を行う方法をプログラムで書いていきます。
HTMLとPHPプログラムは下記のソースを参照下さいませ🙇。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo site</title>
<style>
html {
width: 100vw;
height: 100vh;
}
body {
background-color: rgb(0, 0, 0);
color: aliceblue;
background-image: url(./assets/images/aig-mid22910-120-xl_TP_V.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
div.box {
border-color: aliceblue;
border-style: inset;
position: absolute;
width: 300px;
height: 450px;
color: white;
border-radius: 1em;
padding: 1em;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
/* background-color: #ffffff80; */
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
overflow-wrap: break-word;
text-align: center;
}
div>form>p {
font-weight: bold;
margin: 13px;
}
input {
opacity: 0.5;
}
textarea {
opacity: 0.5;
}
button {
padding: 5px;
border-radius: 1em;
border-style: solid;
border-color: aliceblue;
background-color: aliceblue;
color: rgb(0, 0, 0);
}
button:hover{
border-color: rgb(255, 255, 255);
border-style: inset;
background-color: rgb(27, 76, 119);
color: aliceblue;
}
.put:nth-child(2){
overflow: auto;
height: 120px;
}
</style>
</head>
<body>
<div class="box">
<div id="box2">
<form action="submit.php" method="post">
<p>名前:<input type="text" name="name"></p>
<p><textarea name="text" id="" cols="30" rows="10"></textarea></p>
<p><button class="btn" type="submit">確認</button></p>
</form>
</div>
<div id="data">
<p class="put"></p>
<p class="put"></p>
</div>
</div>
<script src="./assets/js/main.js"></script>
</body>
</html><?php
var_dump(xss_d($_POST));
print(xss_d($_POST["name"])."<br>");
print(xss_d($_POST["text"])."<br>");
function xss_d(mixed $val){
if(!isset($val))return false;
if(is_array($val)){
foreach ($val as $key => $value) {
$val[$key] = strip_tags($value);
$val[$key] = htmlspecialchars($val[$key],ENT_QUOTES);
}
}else{
$val = strip_tags($val);
$val = htmlspecialchars($val,ENT_QUOTES);
}
return $val;
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
11, 2, css, DOCTYPE, GET, html, lt, no, php, POST, SEO, インターネット, こと, ソース, データ, ところ, ブログ, プログラム, 下記, 不思議, 今回, 以心伝心, 使用, 処理, 初学, 利点, 動画, 参照, 受信, 同期, 意味, 方法, 有利, 次回, 温暖化, 考え方, 要点, 解説, 送信, 送受信, 音声, 音楽,
データからページネーションが出来る。 #jscode
2022.11.10
おはようございます、昨日は朝が寒く昼間は暑い日でしたね😗。
さて、データからページネーションが出来るライブラリがある事を知りましたのでそちらの紹介と使い方です。今回、使用したのはPagination.jsというライブラリです。使い方は簡単、下記のようなデータがあった場合、このようなソースコードを書いて使用します😮。
[
{
"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>コードを抜粋して書きましたが、このコードを書く事とjsのライブラリとcssファイルもダウンロードするようにして下さいね🫠。
因みに自分はこのライブラリを初めて使用しましたが、結構使いやすいですね。今まで開発ではLaravelなんかのページネーションを使用していた事はありますが、フロント側で出来る事を知り驚きを隠せませんというのは大袈裟ですけど使い道は有るなって思います。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
04, １, 10, 1977, 2, 45, age, bday, hiragana, ID, JS, jscode, name, Pagination, qu, quot, コード, しらかわ, ソース, そちら, データ, ネーション, ページ, まさと, ライブラリ, 下記, 事, 今回, 使い方, 使用, 場合, 日, 昨日, 昼間, 朝, 正人, 白川, 簡単, 紹介,
Gドライブの画像仕分けがGASを使うと楽すぎでした！ #gas #jscode
2022.11.09
おはようございます。昨日は暖か陽気でしたね～？、今日はどうかな？🤔
今日はGoogleドライブで画像仕分けが楽すぎた件を書いていきます。GASとはgoogle apps scriptの略です、このGASを使用するとGmailやスプレッドシート、Googleドキュメント等をプログラムで操作出来ちゃうサービスです。尚、プログラムコードはjavascriptベースになっていてとても書きやすいです。
function imagesDrive() {
//画像を仕分けフォルダID googleドライブURL->adaoiujxzouaunWxz33oam__ （ランダム英数字記号の部分）
const folder = DriveApp.getFolderById('画像を仕分けフォルダID');
//移動先のフォルダID googleドライブURL-> UQIJjaoskamlqaxalp98swq--e （ランダム英数字記号の部分）
const imgfolder = DriveApp.getFolderById('移動先のフォルダID');
let hasfiles = folder.getFiles();
while(hasfiles.hasNext()){
let hasfile = hasfiles.next();
if(/(\.png|\.jpg)$/.test(hasfile.getName())){
hasfile.moveTo(imgfolder);
}
}
}今回、上記のようなコードを書いてサクサクと画像の仕分けを行いました。正規表現パターンを変えたりする事で任意の文字列ファイルだけを別フォルダに移動したりコピー、または削除したりすることも可能です（※コードの追加や変更が必要）。GASのエディタではコード補完機能もあるので初めての方でもプログラマーなら何とかなると思います。
プログラム初心者の方へ、jpg,png,gif等をそれぞれのフォルダに別けたい場合はどのようなコードを書いたら良いでしょうか？上記のコードをヒントにコードを書いてみて下さい。回答に関しては下記に一つの答えとして書いています。
function imagesDrive() {
//画像を仕分けフォルダID googleドライブURL->adaoiujxzouaunWxz33oam__ （ランダム英数字記号の部分）
const folder = DriveApp.getFolderById('画像を仕分けフォルダID');
//移動先のフォルダID googleドライブURL-> UQIJjaoskamlqaxalp98swq--e （ランダム英数字記号の部分）
let folderId = {png:'移動先のフォルダID1',jpg:"移動先のフォルダID2",gif:"移動先のフォルダID3"};
Object.keys(folderId).forEach((keyname)=>{
let imgfolder = DriveApp.getFolderById(folderId[keyname]);
let hasfiles = folder.getFiles();
while(hasfiles.hasNext()){
let hasfile = hasfiles.next();
let r = new RegExp("(\."+ keyname + ")$");
if(r.test(hasfile.getName())){
hasfile.moveTo(imgfolder);
}
}
});
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
33, 39, adaoiujxzouaunWxz, apps, const, DriveApp, folder, function, GAS, getFolderById, Gmail, Google, gt, ID, imagesDrive, javascript, jscode, oam, script, UQIJjao, url, コード, サービス, シート, スプレッド, ドキュメント, ドライブ, フォルダ, プログラム, ベース, ランダム, 今日, 件, 使用, 操作, 昨日, 画像, 略, 移動, 英数字, 記号, 部分, 陽気,
常時ディレクトリ監視を行う方法。 #CPU使用率 #炎上
2022.11.03
おはようございます。何だかアカウントを作ってまでコメントする人の考えがわからない🤔。
Qiitaに、このコードのsleep関数がないバージョンをアップしたら、何やらアカウントを作ってまでコメントする人が現れる、理由はCPU使用率がMax近くになるのが駄目だからです、そんな事は分かっているのが普通だと思っていたのだけども…例文として掲載するのも駄目だそうです、コピペで運用する人が結構いるのかもしれない。
正直なところ、そこまで叩かれるとは思っていなかったので、正直なところ驚きを隠せない。段々と世間の常識とズレていっている気がします😗。
昔はそういうコードは巷に溢れていたのにな・・・そんな事も出来なくなってきたのか・・・。
トイウコトデ、常時ディレクトリ監視を行い任意の画像ファイルだけ別のディレクトリへ移動するコードです。
nohup php File_Check.php &├── File_Check.php
├── upload
└── data<?php
while(true){
if($result = is_scandir("./upload")){
foreach($result as $key=>$value){
rename("./upload/$value","./data/$value");
}
}
sleep(3);
}
function is_scandir(string $dirname="",array $ext_list = ["png","jpg"]){
$is_filelest = [];
$result = scandir($dirname);
foreach($result as $key=>$value){
$ext = substr($value, strrpos($value, '.') + 1);
if(in_array($ext,$ext_list,false)!== false){
$is_filelest[] = $value;
}
}
return count($is_filelest)>0 ? $is_filelest : false;
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
check, CPU, file, max, nohup, php, qiita, sleep, アカウント, アップ, コード, コピペ, コメント, そこ, ディレクトリ, トイウコトデ, ところ, バージョン, ファイル, 世間, 事, 人, 任意, 使用, 例文, 別, 巷, 常時, 常識, 掲載, 方法, 昔, 普通, 正直, 段々, 気, 炎上, 理由, 画像, 監視, 移動, 近く, 運用, 関数, 駄目,
Manifest V3、ブラウザ拡張機能のアレに対応した解説動画。
2022.11.02
おはようございます、カサカサ肌には大変な季節です🫠。
今日はManifest V3、ブラウザ拡張機能（Chrome拡張）のアレに対応した解説動画がありましたのでご紹介します。こちらの動画で基本は分かる感じになっています。いつまで掲載されるかわからないので、リンクだけ貼っときます。こちらになります。
尚、マニフェストの書き方だけがV3になってから変わっただけではないので、そこの所が注意しないといけない所です。自分もグーグルクロームに拡張機能を公開していたので、そちらの使用されている拡張機能は修正しました。
今、自分用に作っているV3のマニフェストの書き方だけ載せときますね。
{
"name": "lancers footpoints",
"version": "1.0.0",
"manifest_version": 3,
"description": "ランサーズ。",
"permissions": [
"tabs",
"scripting"
],
"action": {
"default_icon": "icon20221101.png"
},
"background": {
"service_worker": "src/background.js"
},
"content_scripts": [
{
"matches": [
"https://www.lancers.jp/work/search*"
],
"css":["src/style.css"]
}
]
}あと、backgroundとcontent_scriptsの送受信の関係などが記載されているサイトを見つけたので、そちらもリンクを貼っときます、こちらのページになります。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
1.0.0, ３, Chrome, footpoints, Lancers, Manifest, name, quot, Version, アレ, いつ, グーグル, クローム, こちら, ご紹介, そこ, そちら, ブラウザ, マニフェスト, リンク, 今, 今日, 使用, 修正, 公開, 動画, 基本, 大変, 季節, 対応, 感じ, 所, 拡張, 掲載, 書き方, 機能, 注意, 肌, 自分, 解説,
phpでソケット受信をする事だけ覚えとけば良い。#php #code
2022.10.27
おはようございます。Socket.ioというサービスをご存知ですか。あれ良いですよね。
さて、Socketとはいう意味は割愛させて頂き、知っていることを前提に話しますとPHPでSocketサーバーは立てれないじゃないかなって今のところ思っています。localhostや0.0.0.0とかならSocketサーバーは立てれるけど、ドメイン有りきでは難しいような気がします。
なので、Socket.ioなんかを使用してnode.jsなんかでサーバーを立てるのが定石かと思います。尚、webSocketのサーバーに対してPHPで送受信は可能です。要するにクライアント側はPHPでも可能ですね。
自分もAPIサーバーに対して常時通信処理を行っています。
PHPライブラリの使用して接続を確立しています、ライブラリはratchetという有名所のライブラリを使用しています。
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";
});上記のようなPHPのソースコードで送受信が可能です😋
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
0.0.0.0, API, Code, Composer, io, JS, localhost, node, php, ra, ratchet, require, Socket, webSocket, あれ, クライアント, こと, ご存知, サーバー, サービス, ソケット, ところ, ドメイン, なん, ライブラリ, 事, 今, 使用, 処理, 前提, 割愛, 受信, 可能, 名所, 定石, 常時, 意味, 接続, 有, 気, 確立, 自分, 送受信, 通信,
映画、#21ブリッジ を観ましたので感想を残しときます😋
2022.10.21
おはようございます、LINEチャンネルってどうやって削除したら良いのか？？？
さて、遅れながら先日、21ブリッジを観ましたので感想を残しときます、感想というか短文なのだけども…。このストーリー感は何処かで観たことが有るので、そこが少し残念だったけども全体を通して見飽きない作りになっていたのは確かです。
今回、VRとかを使用して仮想大画面（スクリーン）で観たらもっと楽しめた可能性はあります、エンタメ系な作品なので、スマホなどで観るようには作られていないですね。
次回、21ブリッジを観るときは大画面で観ようと思います。
尚、今回は若干、辛口レビューでしたがあまり映画を観ない人にとっては、ハラハラ・ドキドキのストーリー展開だと思います、自分の場合、映画を観尽くしているので前、こういう展開の落ちは観たなって感じになりやすい…。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
21, line, Vr, エンタメ, こと, スクリーン, ストーリー, スマホ, そこ, チャンネル, とき, ブリッジ, レビュー, 人, 今回, 仮想, 何処か, 作り, 作品, 使用, 先日, 全体, 削除, 前, 可能性, 場合, 少し, 展開, 感, 感じ, 感想, 映画, 次回, 残念, 画面, 短文, 自分, 若干, 落ち, 辛口,
数珠繋ぎのツイートシステムに予約機能を付けました😂 #php #code
2022.10.07
おはようございます、偏頭痛持ちは雨が降るが一番大変です☔。
先日、数珠繋ぎのツイートシステムを作ったのですが、そのシステムに予約機能を付けました。尚、TwitterAPIのバージョン２でスケジュールのパラメーターが今のところ無いですね。これから先、機能が付くかも知れないですが今のところ無いようです。因みにソースコードは近日中にQiitaとGithubにUPします。此処ではソースコードの一部を掲載します(※記事を更新しました下へスクロール🫠)。
尚、crontabでPHPファイルを叩くようにしています、あと注意事項ですが予約を一度した投稿については変更等は出来ません、編集機能等の機能追加の予定はないです。また、予約管理はsqlite3を使用して管理しています。
<?php
date_default_timezone_set('Asia/Tokyo');
ini_set("display_errors",0);
require_once "./data/tw-config-v2.php";
require_once "../vendor/autoload.php";
use Abraham\TwitterOAuth\TwitterOAuth;
class tw
{
var $connection = null;
var $pdo = null;
function __construct()
{
$this->connection = new TwitterOAuth(APIKEY, APISECRET, ACCESSTOKEN, ACCESSTOKENSECRET);
$this->connection->setApiVersion("2");
}
function db_connection()
{
try {
//code...
$res = $this->pdo = new PDO("sqlite:./data/tw-tweets-db.sqlite3");
} catch (\Throwable $th) {
//throw $th;
//print $th->getMessage();
$res = false;
}
return $res;
}
function timecheck($timeonoff, $times)
{
if (!$timeonoff) return true;
$n = new DateTime();
$t = new DateTime($times);
return $t <= $n ? true : false;
}
function pickup_tweets(mixed $tw_text = null, int $timeonoff = 0, mixed $times = null, string $id = "")
{
if (!$times) return false;
$obj = (object)[];
$times = preg_replace("/\-/", "/", $times);
$times = preg_replace("/T/", " ", $times);
if ($this->timecheck($timeonoff, $times)) {
if (isset($tw_text) && is_array($tw_text)) {
foreach ($tw_text as $key => $value) {
if (preg_replace("/[ | ]/", "", $value)) {
$obj = !$key ? ($this->connection->post("tweets", ["text" => $value], true)
) : ($this->connection->post("tweets", ["reply" => ["in_reply_to_tweet_id" => $obj->data->id], "text" => $value], true)
);
}
}
return true;
}
} else {
return $timeonoff ? $this->save_sqlite($tw_text, $timeonoff, $times, $id): true;
}
}
function save_sqlite($tw_text = null, int $timeonoff = 0, mixed $times = null, string $id = "")
{
if ($this->db_connection()) {
try {
//code...
if (isset($tw_text) && is_array($tw_text)) {
foreach ($tw_text as $key => &$value) {
if (preg_replace("/[ | ]/", "", $value)) {
$stmt = $this->pdo->prepare("insert into tweets (tw_id,user,times,tw_text)values(:tw_id,:user,:times,:tw_text)");
$stmt->bindValue(":tw_id", $key, PDO::PARAM_INT);
$stmt->bindValue(":user", $id, PDO::PARAM_STR);
$stmt->bindValue(":times", $times, PDO::PARAM_STR);
$stmt->bindValue(":tw_text", $value, PDO::PARAM_STR);
$stmt->execute();
}
}
}
$this->pdo = null;
return true;
} catch (\Throwable $th) {
//throw $th;
return false;
}
}
}
function tweets_load(string $id = "")
{
if (!$id) return false;
try {
//code...
$value = null;
if ($this->db_connection()) {
$stmt = $this->pdo->prepare("select * from tweets where user = :user order by times,tw_id asc;");
$stmt->bindValue(":user", $id, PDO::PARAM_STR);
$res = $stmt->execute();
$value = $res ? $stmt->fetchAll() : false;
$this->pdo = null;
}
return $value;
} catch (\Throwable $th) {
//throw $th;
return false;
}
}
function tweets_update(int $key = 0, int $timeonoff = 0, mixed $times = null, string $id = "",mixed $tw_text="")
{
try {
//code...
if(!preg_replace("/[ | ]{0,}/","",$tw_text))return false;
if ($this->db_connection()) {
$stmt = $this->pdo->prepare("update tweets set tw_text = :tw_text where tw_id = :tw_id and user = :user and times = :times");
$stmt->bindValue(":tw_id", $key, PDO::PARAM_INT);
$stmt->bindValue(":user", $id, PDO::PARAM_STR);
$stmt->bindValue(":times", $times, PDO::PARAM_STR);
$stmt->bindValue(":tw_text", $tw_text, PDO::PARAM_STR);
$stmt->execute();
$this->pdo = null;
}
} catch (\Throwable $th) {
//throw $th;
return false;
}
return true;
}
function tweets_delete(int $key = 0, int $timeonoff = 0, mixed $times = null, string $id = "")
{
try {
//code...
if ($this->db_connection()) {
$stmt = $this->pdo->prepare("delete from tweets where tw_id = :tw_id and user = :user and times = :times");
$stmt->bindValue(":tw_id", $key, PDO::PARAM_INT);
$stmt->bindValue(":user", $id, PDO::PARAM_STR);
$stmt->bindValue(":times", $times, PDO::PARAM_STR);
$stmt->execute();
$this->pdo = null;
}
} catch (\Throwable $th) {
//throw $th;
return false;
}
return true;
}
function bat_tweets(mixed $value = null)
{
if (!$value) return false;
$obj = (object)[];
$t = "";
foreach ($value as $key => $val) {
if ($this->timecheck(1, $val["times"])) {
$obj = ($val["times"]<>$t)? ($this->connection->post("tweets", ["text" => $val["tw_text"]], true)
) : ($this->connection->post("tweets", ["reply" => ["in_reply_to_tweet_id" => $obj->data->id], "text" => $val["tw_text"]], true)
);
$this->tweets_delete($val["tw_id"], 1, $val["times"], $val["user"]);
$t = $val["times"];
} else {
// var_dump($val);
// break;
}
}
}
}
if ($argv[0]) {
$tw = new tw();
$value = $tw->tweets_load(xss_d($argv[1]));
$tw->bat_tweets($value);
}
function xss_d($val = false)
{
if (is_array($val)) {
foreach ($val as $key => $value) {
$val[$key] = strip_tags($value);
$val[$key] = htmlspecialchars($val[$key]);
}
} else {
$val = strip_tags($val);
$val = htmlspecialchars($val);
}
return $val;
}
追記：予約編集機能なども付けました🙄。
GithubとQiitaのリンクはこちらです。
Github:https://github.com/taoka-toshiaki/tweets-system-box1
Qiita:https://qiita.com/taoka-toshiaki/items/5ef12b60b267742bf584
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2, ３, 39, Asia, Code, crontab, date, default, github, ini, lt, php, qiita, Se, set, Sqlite, timezone, Tokyo, TwitterAPI, UP, コード, これ, システム, スクロール, スケジュール, ソース, ツイート, ところ, バージョン, パラメーター, ファイル, 一部, 下, 予定, 予約, 事項, 今, 使用, 偏頭痛, 先, 先日, 変更等, 大変, 投稿, 掲載, 数珠繋ぎ, 更新, 機能, 機能等, 此処, 注意, 管理, 編集, 記事, 近日, 追加, 雨,
基本情報技術者試験ワード集と単語帳作りアプリで学習の下準備をする方法！ #FE #英語 #効率
2022.10.06
おはようございます、朝、３時半頃から起きています😪。
先日から英語の勉強をアプリではじめました、自分が使用しているのはモノグサというアプリです。このアプリをインストールしたのは二年前の話です、そのアプリを使用して効率良く英単語を覚えていってます、なんかよく分からないけど覚えて行けている🙄。
さて、それとは別に本題のお話です、単語帳作りアプリを使って基本情報技術者試験に出てくるワードを再学習しています。ワードの方は基本情報技術者試験ドットコムから引っ張ってきています、そのワードをCSV化してアプリに入れました。個人的に使用している分にはOKですが、これを公開や共有するとNGになりますので使用時はお気をつけてください🙇。
ワードを収取する方法はブラウザのコンソール画面に下記のコードを貼り付けて収集しました。
基本情報技術者試験ドットコムのキーワード集「あ」から「ん」までのリンクページをそれぞれ開きコンソール画面でコードを実行して、それをUTF8のファイルにペーストして一つのファイルにしてCSV保存。本当はnode.jsでコードを書いて実行でもしようかなと思っていたのですが、それすら面倒くさいと思ったので、こちらの地味な方法を選択しました。尚、行末に必要なカンマを追加して上げてくださいね🙄。
let s = [];
let $moji = function(m){
return String(m).replace(/[\,|\n|'|"]/g," ");
};
Object.keys(document.querySelectorAll(".big")).forEach((e)=>{
s[e] = "'" + $moji(document.querySelectorAll(".big")[e].innerText) + "'" + "," + "'" + $moji(document.querySelectorAll("ul > li > div > div")[e].innerText) + "'";
});
copy(s.join("\n"));
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
３, CSV, FE, NG, OK, アプリ, インストール, お気, お話, キーワード, コード, これ, コンソール, それ, ドットコム, ブラウザ, モノグサ, ワード, 下準備, 下記, 二, 使用, 先日, 公開, 共有, 分, 効率, 勉強, 半, 単語帳, 収, 収集, 取, 基本, 学習, 情報, 技術者, 方, 方法, 朝, 本題, 画面, 自分, 英単語, 英語, 試験, 話,
文字数カウントは奥が深いよ。日本語より𓅇エジプト😇 #javascript #code #プログラミング #unicode
2022.10.05
おはようございます、先日（日曜日のこと）は久しぶりに本屋さん巡りしていました😋。本屋📖は良いですね落ち着きます。
さて、文字コードのカウントは奥が深いなって話を記載していきます。人目線からすれば文字をカウントするという至って簡単な話にですが、PC（コンピューター）にとっては奥が深いです・・・日本語漢字も面倒だけどエジプト系の象形文字系(unicode)は本当に面倒そうです。まだ、作りかけですがツイッターの用な文字コードのカウントするjavascriptコードを書きましたのでサンプルコードとしてご使用ください。
※WindowsOSの環境下でChromeブラウザ動作させ検証しました。コピペ文字には対応していません😇。UTF-8 ではない違う文字コードを貼り付けてみてください、変なことになると思います😂。例えばEUC文字コードだとか・・・。
動作サイトはこちらです。
function moji(o) {
let m = o.nextElementSibling;
//ads
let h = ((o) => {
let l = o.value.match(/(https?:\/\/[a-z|A-Z|0-9|\-|_|%|\.|\/]{0,})/giu);
let ml = l ? ((l) => {
return sum = l.reduce((s, e) => {
return s + e.length;
}, 0);
})(l) : 0;
return l ? {
len: (l.length * 23),
mlen: ml
} : {
len: 0,
mlen: ml
};
})(o);
//zenkaku
let k = ((o) => {
let l = o.value.match(/[^\x20-\x7e]/giu);
let ml = l ? ((l) => {
return sum = l.reduce((s, e) => {
return s + e.length;
}, 0);
})(l) : 0;
return l ? {
len: (l.length * 2),
mlen: l.length
} : {
len: 0,
mlen: ml
};
})(o);
m.innerHTML = "【 " + (o.value.length + h.len - h.mlen + k.len - k.mlen) + "文字{半角/280} 】";
if ((o.value.length + h.len - h.mlen + k.len - k.mlen) >= 280) {
m.innerHTML = "<span class='text-danger'>【 " + (o.value.length + h.len - h.mlen + k.len - k.mlen) + "文字{半角/280} 】</span>";
}
} <label for="my-textarea" class="h3">文字を入力してください。</label>
<textarea id="my-textarea" class="form-control" oninput="moji(this);" name="" rows="3"></textarea>
<span class="h3"></span>尚、サンプルコードは１バイトを一文字としてカウントしていきます、そしてURL文字はどんなに長くても２３文字にカウントされます、これはTwitter社の仕様と合わしています。URL文字はURL短縮が行われ23文字の短縮URLが生成されるからその様にカウントしているのですが、なんか本物と違うですよね挙動が・・・🙇♂。因みに絵文字がどのようにカウントされるかは確認していません。
※UTF8では絵文字(unicode)を３バイトで表記させているそうです。昔、UTF-8は2バイトで表現しているとか習っていたのですが、それはカナリ古い知識だったみたいです😇。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
8, Chrome, Code, EUC, javascript, PC, Unicode, UTF-, WindowsOS, エジプト, カウント, コード, こと, コピペ, コンピューター, サンプル, ツイッター, ブラウザ, プログラミング, 久しぶり, 人目, 使用, 先日, 動作, 変, 奥, 対応, 数, 文字, 日曜日, 日本語, 本屋, 本当, 検証, 漢字, 環境, 用, 簡単, 記載, 話, 象形, 面倒,
Twitter-API-v2ツイート数珠繋ぎ #コード公開 #php
2022.10.04
おはようございます。土日祝も関係なくブログは毎日書いています🤮。
さて、今日はPHP言語でTwitterAPIバージョン2（v2）を使用してツイート数珠繋ぎをする方法を抜粋して記載していきます。こういうコードは今のところ出回っていないようです。少し調べれば公式サイトに記載しているのだけども・・・。まだ、日本語に対応した記事が少ないようです。v2でツイートする方法やリツイートする方法は何故かあるのだけどリプライ（Reply）[/statuses/update]する方法が記事としては記載していなかったので?記載します。
<?php
require_once "vendor/autoload.php";
use Abraham\TwitterOAuth\TwitterOAuth;
class tw{
var $connection = null;
function __construct()
{
$this->connection = new TwitterOAuth(APIKEY, APISECRET,ACCESSTOKEN, ACCESSTOKENSECRET);
$this->connection->setApiVersion("2");
}
function pickup_tweets(mixed $tw_text=null){
$obj = (object)[];
if(isset($tw_text) && is_array($tw_text)){
foreach ($tw_text as $key => $value) {
if(preg_replace("/[ | ]/","",$value)){
$obj = !$key?(
$this->connection->post("tweets", ["text" =>$value], true)
):
(
$this->connection->post("tweets", ["reply"=>["in_reply_to_tweet_id"=>$obj->data->id],"text"=> $value], true)
);
}
}
return true;
}
return false;
}
}
最初に結論とコードのアルゴリズムに付いて解説します。まず、tweetsのパラメーターでリプライ出来るように変更されています。v1.1とはそこが変わっているので同じ仕組みを検索しがちですがそれでは検索にヒットしないようです🤔。まずはエンドポイントの変更点の確認が必要みたい👏。
エンドポイントのv1.1からv2への対応表が公式から出ているので確認してみてください↑。
次にコードの解説ですがまずTwitterOAuthライブラリをインストールを行い、defineなどの設定なども考慮した上で実行してみてください（コードに追記記載が必要）。変数、$tw_textは配列です。また投稿する文字が入っていると考えてください。そしてこのコードを下記のような考え方で実行してみてください。
<?php
require_once "tw-index.php";
$tw_text[0] ="test1";
$tw_text[1] ="test2";
$tw = new tw();
if($tw->pickup_tweets($tw_text)){
$ret["msg"] = "ok";
}else{
$ret["msg"] = "NG";
}
var_dump($ret);
※前提条件としてtwitter社にAPIの申請を行って受理されている事。
これで思った通り実行出来たと思います。尚、自分のように管理画面などを作って数珠繋ぎの投稿するのも良いかも知れません🫠。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2, Abraham, autoload, class, connection, function, lt, null, once, php, quot, Reply, require, statuses, tw, Twitter-API-v, TwitterAPI, TwitterOAuth, UPDATE, use, var, vendor, コード, サイト, ツイート, ところ, バージョン, ブログ, リツイート, リプライ, 今, 今日, 使用, 公式, 公開, 土日, 対応, 少し, 抜粋, 数珠繋ぎ, 方法, 日本語, 毎日, 祝, 言語, 記事, 記載,
WPのapply_filtersとadd_filterの説明が難解に書いているサイトが多い事に🤬。 #php #wordpress
2022.09.28
おはようございます、今月もそろそろ終わります🤔。
さて、来月から毎月一回しか投稿しなかったブログサイトを不定期更新に変更します。指針の変更にあたってブログデザインもデフォルトのテンプレートから無料のcocoonというテンプレートに変えました。
今までYOUTUBE動画URLを記載しているだけの投稿だったので、アイキャッチー画像等は無い状態でした。その為、テンプレートを変えるとノーイメージという画像が表示されるという事象が発生。これをプラグイン側で解決したかったのですが、独自の関数を多く使用しておりプラグイン側だけでは無理だということで、独自のアイキャッチー画像を処理しているコアの部分にapply_filtersを差し込み、プラグイン側でadd_filterで処理するという流れの対応を行いました。
apply_filtersというのはテンプレート側（他のプラグインでも可能）の関数の中に目印（付箋）を付けることが出来る機能（関数）です。
add_filterは目印（付箋）の部分の処理が走った時に、自分が作った処理を割り込ませることが出来る機能（関数）です。
※まずはカッコの中は読まずに理解してください😌。
巷では、これをややこしい例えで解説している所が多いのですが、それだけの話しです。今回、image-funcs.phpファイル（cocoon）の関数get_original_image_tagにapply_filtersを挿入し独自プラグインから呼び出して、ノーイメージの時にYOUTUBEのサムネイル画像を表示させるという事を行っていました。前、次ページのサムネイル画像は現在のページのサムネ画像が表示されるというバグはあるものの、ちゃんと跡のサムネ画像は変わっています。
サンプルコードを掲載します。ご参考程度に😌。
<?php
//オリジナルサムネイルタグの取得
if (!function_exists('get_original_image_tag')) :
function get_original_image_tag($image_url, $width, $height, $class, $alt = null)
{
$html = '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($alt) . '" class="' . esc_attr($class) . '" width="' . esc_attr($width) . '" height="' . esc_attr($height) . '" />';
$html = convert_all_lazy_load_tag($html);
$html = apply_filters("youtubeimage",$html);
return $html;
}
endif;<?php
/*
Plugin Name: youtube image
Description: youtube image chg
Version: 1.0
*/
if (!defined('ABSPATH')) exit;
function youtubeimage_chg($imgurl){
$url = null;
if(preg_match("/(https:\/\/www\.youtube\.com\/watch\?v=[\-|_|a-zA-Z|0-9]{1,})/",get_the_content(),$matches)){
$url = "https://img.youtube.com/vi/".preg_replace("/(https:\/\/www\.youtube\.com\/watch\?v=)/","",$matches[0])."/hqdefault.jpg";
$url = preg_replace("/(src=\"https:\/\/.*no\-image\-[0-9]{2,3}\.png\")/","src=\"".$url."\"",$imgurl);
}
return $url?$url:$imgurl;
}
add_filter("youtubeimage","youtubeimage_chg");
余談：この対応はテンプレートが更新（アップデート）際にファイルが上書きされる可能性があります。その際にページが見えなくなるという問題を秘めています🙇。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
Add, apply, cocoon, filter, filters, php, url, WordPress, wp, youtube, あい, イメージ, キャッチー, コア, こと, これ, サイト, デザイン, デフォルト, テンプレート, ノー, プラグイン, ブログ, 一, 不定期, 事, 事象, 今月, 使用, 処理, 動画, 変更, 多く, 対応, 投稿, 指針, 更新, 来月, 毎月, 為, 無料, 状態, 画像, 発生, 表示, 解決, 記載, 説明, 部分, 関数, 難解,
あのサイトをリニューアルしました。👏、やっとのことで。 #renew #site #よさこい祭り
2022.09.25
おはようございます、昼間は暑い日もありますが夜は涼しくなりましたね😄。
今日は昨日、一日かけて【よさこい祭り動画検索】サイトをリニューアルしました。ソースコード（プログラム）も１からやり直しています。表示するのに結構時間がかかっていた部分は瞬時に表示されるように調整しました。
以前は検索結果が全て表示されるような仕様でしたが、ページに分割して表示されるように変更しました。また、検索ワードを入力すると検索結果（チーム名）が表示される様に変更しました。チーム名を押すとページへ遷移するようになっています。以前より直感的に操作出来る形になったかと思います。
尚、このサイトを作るにあってYOUTUBEのAPIを使用しているのですが、リアルタイムに動画を検索している訳では無くデータで押さえています。そのデータに関しては数ヶ月置きに更新するように致します。何故、データで押さえている理由はAPIの問い合わせに上限があり、その上限数を超える検索結果が返って来なくなる為です。この上限は申請を行えばある程度増やしてくれるそうですが、それでも上限数量を超えると表示されなくなるというデメリットがあるので、データで押さえています😌。
トイウコトデ、よさこい祭り動画検索サイトよろしくお願いします。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, API, com, https, renew, site, yosakoi-video, youtube, コード, サイト, ソース, チーム, データ, プログラム, ページ, よさこい祭り, リアルタイム, リニューアル, ワード, 一, 今日, 仕様, 以前, 使用, 入力, 全て, 分割, 動画, 変更, 夜, 形, 操作, 数, 日, 昨日, 昼間, 時間, 検索, 瞬時, 結果, 表示, 訳, 調整, 遷移, 部分,
ページ無限スクロールの作り方 #インフィニティ#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, いろいろ, カラム, コード, ご注意, サーバー, せっかく, そのまま, ダウンロード, トライ, ワード, 三連, 事, 二, 今日, 休, 使用, 先日, 削除, 動作, 可能, 台風, 地下, 所, 投稿, 掲示, 昇順, 時, 残念, 為, 状態, 環境, 禁止, 簡易, 経過, 自分, 良, 誰, 配布, 関数, 防止, 階層, 面倒,
submit(サブミット)：送信させない４つの方法です🙄。#javascript #サブミットキャンセル
2022.09.07
おはようございます、台風一過が去りましたね😌。
さて、今日はsubmit(サブミット)：送信させない４つの方法を記載します、方法は大きく分けて２つの方法があり、それを細分化して４つの方法になります。まず、一番目は“送信する際（form側）”にてキャンセルする方法です。この場合、addEventListener（アッドイベントリスナー）でキャンセル処理する場合とonsubmitを使用してキャンセルする方法があります。
サンプルコード例１と例３にあたるコードが上記のコードになります。
次に”ボタンをクリック”した際にサブミット（送信）処理をキャンセルする方法です、この方法でも送信を阻止する事ができます。
サンプルコード例２と例４にあたります、自分としてはフォームで処理した方が良いかなと思いますが、こちらでも送信をキャンセルする事ができます。
尚、ソースコードは下記になります。また、参考にしたサイトのリンクを貼っときます。MDNのリンクです。
<form id="frm" method="post" action="./example/">
<input type="hidden" name="example" value="data">
<button type="submit" class="btn btn-primary">Submit1</button>
</form>
<form method="post" action="./example/">
<input type="hidden" name="example" value="data">
<button id="btn" type="submit" class="btn btn-primary">Submit2</button>
</form>
<form method="post" action="./example/" onsubmit="return func1()" >
<input type="hidden" name="example" value="data">
<button type="submit" class="btn btn-primary">Submit3</button>
</form>
<form method="post" action="./example/" >
<input type="hidden" name="example" value="data">
<button type="submit" class="btn btn-primary" onclick="return func2()" >Submit4</button>
</form>//例１
document.getElementById("frm").addEventListener("submit",function(event){
event.preventDefault();
});
//例２
document.getElementById("btn").addEventListener("click",function(event){
event.preventDefault();
event.stopPropagation();//インターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。
});
//例３
function func1(){
return false;
}
//例４
function func2(){
return false;
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, 2, ３, 4, addEventListener, Form, javascript, onsubmit, submit, アッド, イベント, キャンセル, クリック, コード, こちら, サブミット, サンプル, それ, フォーム, ボタン, リスナー, 一, 上記, 事, 今日, 使用, 例, 側, 処理, 台風一過, 場合, 方, 方法, 次, 細分化, 自分, 記載, 送信, 阻止, 際,