@Blog
日常日誌からプログラムや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,
vue3.jsでWordPressを無限スクロールするコードを書いた話．
2024.09.21
おはようございます．長いので説明は省きますが、これは生成AIと自分との合作みたいなコードです．一度目の指示では上手くコードを生成してくれなかったので何度か壁打ちみたいなことをしました．尚、WordPressと言ってもREST APIとかいうのを使用した奴です．WordPress側でREST APIを有効にしないと上手く機能しませんのであしからず🙇．
そして、このコードはスマホとPCではスクロール位置が違うようになっているサイト用の専用コードです．なので、普通のレスポンシブ対応サイトだったら判断部分を削除してbody対応のコードだけで無限スクロールが可能になります．
因みにこんな事をしなくてもv3-infinite-loadingのライブラリが合ったりします．それを使用するともっと効率的なコードが書けるみたいだけども、自分はvue初心者さんなのでこんな感じになってます．
<div id='app' class="page">
<?php if (have_posts()):?>
<div v-for="post in posts" :key="post.id" class="blogpage">
<h3>{{ post.title.rendered }}</h3>
<p> {{ formattedDate(post.date) }}</p>
<p v-html="post.content.rendered"></p>
</div>
<?php endif; ?>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/moment@2.30.1/min/moment.min.js"></script>
<script src="<?= get_template_directory_uri() ?>/asset/Infinity.js?<?=time()?>" type="module" ></script>import { ref, onMounted, onUnmounted, createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
setup() {
const posts = ref([]);
const page = ref(1);
const loading = ref(false);
const hasMore = ref(true);
onMounted(async () => {
await fetchPosts();
if (window.innerWidth < 600) {
window.addEventListener('scroll', handleScroll);
} else {
document.querySelector('#app').addEventListener('scroll', handleScroll);
}
});
onUnmounted(() => {
if (window.innerWidth < 600) {
document.documentElement.removeEventListener('scroll', handleScroll);
} else {
document.querySelector('#app').removeEventListener('scroll', handleScroll);
}
});
const formattedDate = (dateString) => {
return moment(dateString).format('YYYY年MM月DD日');
};
const fetchPosts = async () => {
if (loading.value || !hasMore.value) return;
loading.value = true;
try {
const response = await axios.get(`/wp-json/wp/v2/posts?page=${page.value}`);
if (response?.data?.length) {
posts.value = [...posts.value, ...response.data];
page.value++;
hasMore.value = true;
}else{
hasMore.value = false;
}
} catch (error) {
//console.error(error);
} finally {
loading.value = false;
}
};
const handleScroll = async () => {
let scrollHeight = null;
let clientHeight = null;
let scrollTop = null;
if (window.innerWidth < 600) {
scrollHeight = document.documentElement.scrollHeight;
clientHeight = document.documentElement.clientHeight;
scrollTop = document.documentElement.scrollTop;
} else {
scrollHeight = document.querySelector('#app').scrollHeight;
clientHeight = document.querySelector('#app').clientHeight;
scrollTop = document.querySelector('#app').scrollTop;
}
if (scrollTop + clientHeight >= scrollHeight - 100 && hasMore.value) {
await fetchPosts();
}
};
return { posts, page, loading, hasMore, fetchPosts, handleScroll, formattedDate };
}
}).mount('#app')明日へ続く．
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
addEventListener, asset, async, catch, createApp, dateString, document.querySelector, finally, formattedDate, handleScroll, loading.value, mount, onMounted, onUnmounted, removeEventListener, response, response.data, setup, window.addEventListener, window.innerWidth,
今の今まで間違った認識でいた、やばぁ．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, 出番, 同期, 関数,
頻繁にランダム番号が重複しないようにするクラス.
2024.05.24
おはようございます、頻繁にランダム番号が重複しないようにするクラスを作りましたのでお裾分けです．実際、Laravelで個人開発しているものに同じ様なコードを走らせています．因みに昨日、Qiitaに投稿したコードと同じものになります．このコードはどういう時に使用しているか．
自分の場合、ランダムにポストするのにこちらのコードを可変したコードを走らせています．
<?php
// 頻繁にランダム番号が重複しないようにするクラス.
class randomizeClass
{
/**
* ランダムに配列のインデックス番号を取得する
*/
public function getRandomIndex($hasArray,$index,$filename='rand.dat',$max=15)
{
try {
//過去のランダム番号を保存しているファイルが無ければ空ファイルを作成する
if(!file_exists($filename)){
file_put_contents($filename,'');
}
//過去のランダム番号を保存しているデータを取得
$fileData = file_get_contents($filename);
//下記の場合は処理しない
if ($fileData === false || count($hasArray) < $max) {
return $index;
}
//ファイルデータをカンマで配列に分離
$isArray = explode(',',$fileData);
//過去のランダム番号に存在しないか？
if (array_search($index,$isArray,false) === false) {
//ランダム格納前処理
array_unshift($isArray,$index);
if (count($isArray)>$max) {
array_pop($isArray);
}
array_filter($isArray,function($val){
return $val !=='';
});
//ランダム番号を格納
file_put_contents($filename,implode(',',$isArray));
return $index;
}
//過去のランダム番号に合致したため再帰処理を行う．
return $this->getRandomIndex($hasArray,array_rand($hasArray),$filename,$max);
} catch (\Throwable $th) {
throw $th;
echo $th->getMessage();
}
}
}
//テスト用配列を生成
$hasArray = (function(){
$val = [];
for($i=0;$i<100;$i++){
$val[] = $i;
}
return $val;
})();
$filename = 'rand.dat';
//ランダム番号::配列インデックスを取得し表示
print (new randomizeClass)->getRandomIndex($hasArray,array_rand($hasArray),$filename);
print PHP_EOL;
//過去のランダム番号を保存しているデータを取得し表示
print file_get_contents($filename);
print PHP_EOL;
ご自由にコピペでお使い頂ければと思っています😌．そんなに対したコードではないのでオープンにしています．今回は一応、日頃あまり書かないコメントを書きましたが書き慣れていないためか日本語が変かもですね．．．
明日へ続く．
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
catch, count, echo, explode, false, filename, function, getMessage, getRandomIndex, gt, Laravel, lt, print, qiita, return, throw, Throwable, try, val, カンマ,
blueSky画像複数投稿API。
2024.02.04
おはようございます、QiitaにblueSky画像複数投稿を行うにはどうしたら良いですか😌と質問が来たので速攻で回答しました。わからないことは聞くしかないよね。大体の人は答えてくれないけど自分はヒントを与えてそれでもわからない場合は答えを渡す。これは昔、自分はその方が良いじゃないかって思っていたけども・・・・どうなんですかねぇ🤔。あまりその人の力にはならないかも。
やはり考える力が必要になる職業なんで、やっぱ闇雲に質問して答えを知っても力にならないじゃないかって思います。悪いことではないけれど技術を手に入れたければ、自分でライブラリのソースコードを読んで頑張らないと駄目なんだろうと思っています。
そうするしか、今も昔も技術力付かないし新人はいろいろな人が書いたソースコードを読むべしだとも思っています、コードを書くよりも読む方が大変です。それ乗り越えないとこの職業は難しい教えてもらうでは身につかないだよなぁ～。
一応、質問の回答のソースコードをこちらでも掲載しておきます。
<?php
require '../vendor/autoload.php';
require 'config.php';
use \potibm\Bluesky\BlueskyApi;
use \potibm\Bluesky\BlueskyPostService;
use \potibm\Bluesky\Feed\Post;
class bluesky
{
private $api = null;
private $postService = null;
public function __construct()
{
$this->api = new BlueskyApi(USER_NAME, APP_PASSWORD);
$this->postService = new BlueskyPostService($this->api);
}
/**
* 簡単なテキスト投稿
* @param $text
* @return object
*/
public function post($text)
{
$post = Post::create($text);
$response = $this->api->createRecord($post);
return $response;
}
/**
* link付き投稿
* @param $text
* @param $url
* @param $title
* @param $description
* @param $optionalimage|null
* @return object
*/
public function webPost($text,$url,$title,$description,$optionalimage=null)
{
$post = Post::create($text);
$post = $this->postService->addWebsiteCard(
$post,
$url,
$title,
$description,
$optionalimage,
);
$response = $this->api->createRecord($post);
return $response;
}
/**
* 画像投稿
* @param $text
* @param $ImgLinkAndAltText
* @return object
*/
public function imagePost($text, $ImgLinkAndAltText=[])
{
$post = Post::create($text);
$response = null;
foreach($ImgLinkAndAltText as $val){
$post = $this->postService->addImage(
$post,
$val['img'],
$val['alt']
);
}
$response = $this->api->createRecord($post);
return $response;
}
}
if($argv[0]){
try {
var_dump((new bluesky)->post('これはテスト投稿ですよ'));
//var_dump((new bluesky)->imagePost('これは画像テスト投稿ですよ',[['img'=>'cron.png','alt'=>'クロン'],['img'=>'Gotcha.png','alt'=>'ガチャ']]));
} catch (\Throwable $th) {
print $th->getMessage();
//throw $th;
}
}
明日へ続く。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
addImage, addWebsiteCard, argv, catch, construct, createRecord, foreach, getMessage, imagePost, PARAM, postService, potibmBlueskyBlueskyApi, potibmBlueskyBlueskyPostService, print, qiita, require, throw, Throwable, use, vendor,
何かの役に立つ#bluesky
2024.01.29
おはようございます、QiitaにblueSkyのプロフィールURLからRSSを抽出するコードを書きました。先日、blueSkyにRSS機能を追加したという記事を読んだので、その日のうちに対応した形になります。
特に難しいコードでもないので、コメントは一切書いていませんが、それなりに役に立つと信じてリリースしました、ソースの改修などを行って頂けて構いませんが出来ればQiitaもしくはこちらの記事にリンクを貼っていただけたら幸いです。
PHP環境は8．2になっていますが、PHP7系でも動くソースコードなので安心してご使用いただけるかと思います。使用にあたって最終行はコメントアウトを行ってください、url変数も自分にあったurlに変えていただければと思います。
<?php
class blueSkyRss{
public $rss = null;
/**
* __construct
* @param $url
* @return void
*/
public function __construct($url)
{
try {
$html = file_get_contents($url);
preg_match('/https:\/\/bsky\.app\/profile\/did.*\/rss/',$html,$matches);
if($rssUrl = $matches[0]){
$feed = simplexml_load_file($rssUrl);
$this->rss = $feed;
}
} catch (\Throwable $th) {
//throw $th;
}
}
/**
* getRss
* @return object
*/
public function getRss():object
{
$response = [];
if(isset($this->rss->channel)){
$cnt = 0;
foreach($this->rss->channel->item as $item){
$response[$cnt]['link'] = $item->link;
$response[$cnt]['comment'] = $item->description;
$response[$cnt]['date'] = $item->pubDate;
$cnt++;
}
}
return (object)$response;
}
}
$url = 'https://bsky.app/profile/xxxxxxx.bsky.social';
//var_dump((new blueSkyRss($url))->getRss());明日へ続く。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
bluesky, catch, cnt, construct, description, did, foreach, getRss, isset, lt, object, PARAM, preg_match, pubDate, qiita, return, RSS, throw, Throwable, try,
PHP言語でblueskyの自動投稿を作ってみた。
2024.01.12
おはようございます。blueskyの自動投稿を作ってみたくなり即興で作りました。因みにblueskyの開発ドキュメントに記載されていたライブラリを使用しています。トライしてみて案外簡単に作れたのでライブラリに感謝だと感じました🙇。なお、自分のブルースカイアカウントのpost/3khojypfnf62zとpost/3khok6quxgj23が自動投稿（コマンドラインからの投稿）になります。
動作環境・sakuraれんたるサーバー・PHP8.2
作成手順
①アプリのパスワードを作成
https://bsky.app/settings/app-passwords
②potibm/phluesky(v0.3.0)をインストールする(composerのインストールはご自身で調べてください)
composer require potibm/phluesky:"0.3.0"③php8.2.bluesky.phpと同じ階層にconfig.phpを作成しdefineを設定する。
画像はphp8.2.bluesky.phpと同じ階層に置いているものとします。
USER_NAMEはプロフィールページに記載されている＠の後のあかうんと名.bsky.social、 APP_PASSWORDは①で作成したパスワードになります。
④コマンドラインより実行する。なお、vendorの配置などで参照先は変わります。
php php8.2.bluesky.php<?php
require '../vendor/autoload.php';
require 'config.php';
use \potibm\Bluesky\BlueskyApi;
use \potibm\Bluesky\BlueskyPostService;
use \potibm\Bluesky\Feed\Post;
class bluesky
{
private $api = null;
private $postService = null;
public function __construct()
{
$this->api = new BlueskyApi(USER_NAME, APP_PASSWORD);
$this->postService = new BlueskyPostService($this->api);
}
/**
* 簡単なテキスト投稿
* @param $text
* @return object
*/
public function post($text)
{
$post = Post::create($text);
$response = $this->api->createRecord($post);
return $response;
}
/**
* link付き投稿
* @param $text
* @param $url
* @param $title
* @param $description
* @param $optionalimage|null
* @return object
*/
public function webPost($text,$url,$title,$description,$optionalimage=null)
{
$post = Post::create($text);
$post = $this->postService->addWebsiteCard(
$post,
$url,
$title,
$description,
$optionalimage,
);
$response = $this->api->createRecord($post);
return $response;
}
/**
* 画像投稿
* @param $text
* @param $imgLink
* @param $altText
* @return object
*/
public function imagePost($text, $imgLink, $altText)
{
$post = Post::create($text);
$post = $this->postService->addImage(
$post,
$imgLink,
$altText
);
$response = $this->api->createRecord($post);
return $response;
}
}
if($argv[0]){
try {
var_dump((new bluesky)->post('これはテスト投稿ですよ'));
var_dump((new bluesky)->imagePost('これは画像テスト投稿ですよ','cron.png','クロン'));
} catch (\Throwable $th) {
print $th->getMessage();
//throw $th;
}
}
最後に、cron設定などはご自身で調べてください。
ありがとうございました🙇。
こちらの記事はQiitaで記載されている自分の記事のコピーになります。
https://qiita.com/taoka-toshiaki/items/1508f4e79ea592565cef
明日へ続く。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
addImage, addWebsiteCard, argv, bluesky, catch, Composer, construct, createRecord, define, getMessage, imagePost, PARAM, phluesky, postService, potibm, potibmBlueskyBlueskyApi, potibmBlueskyBlueskyPostService, print, Throwable, vendor,
例外処理をスローする奴（throw＝飛ばす？） #php
2023.12.09
おはようございます、久しぶりにちょっとした技術のお話です。トライキャッチ（try-catch）した後にたまにスローしているコードとか見かけると思います。大体、エラーメッセージとか出力していると思いますが、これ独自のクラスなどに変更することが可能なんですよね。
なので、こんな事が出来るわけです、コケたら違う処理を行ってリカバリみたいな事やコケた値を拾ってバックアップするとか、いろいろな事が出来てしまいます。
PHPの公式でも例文を書いていますが、アレだとなんかわからない方もいると思いますので、もっと簡略化した例文コードを書いてみました。このコードを実行するとゼロによる除算エラーになりますが、トライキャッチ（try-catch）の中に書いているのでエラーにならずcatchへ処理は推移します。そしてスローでオリジナルのクラスを呼び出しているわけです。
<?php
class errors{
public function __construct($msg,$x) {
print $msg;
print $x;
}
}
try {
$x=5;
$a = $x/0;
//code...
} catch (\Throwable $th) {
throw new errors($th->getMessage(),$x);
}トライキャッチの良いところはエラーにならないところですが、エラーにならない事が困り物になる場合もあるので注意が必要です。そこは現場の諸先輩方の話を聞いて対応したほうが良さげかと思います。
明日へ続く。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
$msg, $th, $th->, catch, class errors, construct, getMessage, lt, php, print, public function, throw new errors, Throwable, try, try-catch, スロー, リカバリ, 例文, 除算エラー,
#久しぶりのコード｀Xにポストするコード｀
2023.11.17
おはよう御座います、さて正月休みは11日ぐらいあります、いやー正月休みはネトフリとゲームざんまいしてみたいと思っているのですが、結局どこかに出ていったりとかして目標達成できずにズルズルと休みを過ごすことになりそうです。👈前と言っていることが違いますね🙇。
さて、久しぶりにコードを書きました、この記事だけ見るとプログラマーじゃないかって思われるので最初に記載しときます。毎日のように仕事ではコードを書いています、仕事以外でコードを書いたのは一週間ぶりかなぁ。でも、このコードはポストでも書いている通り、特に難しいコードでもないのでオープンに公開しました。
このコードには必要ないコードが紛れているのはこのコードが使いましたコードだからです😂。
<?php
date_default_timezone_set('Asia/Tokyo');
ini_set("display_errors", 0);
require_once "../tw-config-v2.php";
require_once "../vendor/autoload.php";
use Abraham\TwitterOAuth\TwitterOAuth;
class merukari{
public $connection = null;
public $pdo = null;
public function __construct()
{
$this->connection = new TwitterOAuth(APIKEY, APISECRET,ACCESSTOKEN,ACCESSTOKENSECRET);
$this->connection->setApiVersion("2");
}
public function tweet($pattern)
{
$result = $this->connection->post("tweets", ["text" =>$pattern], true);
}
public static function pattern()
{
$pattern = [
'メルカリで参考書を取り扱ってます📖 どれも綺麗な状態です。#学び #python Cシャープ #プログラム ⏭ https://jp.mercari.com/user/profile/808093563',
'メルカリで参考書を出品してます📖 どれも綺麗な状態です。#学び #機械学習 #AI #プログラム ⏭ https://jp.mercari.com/user/profile/808093563',
'メルカリで参考書を売ってます📖 どれも綺麗な状態です。#学び #人工知能 #python #プログラム ⏭ https://jp.mercari.com/user/profile/808093563',
'メルカリで参考書を取り扱ってますよ📖 どれも綺麗な状態です。#学び #テック #企業 #学び #プログラム ⏭ https://jp.mercari.com/user/profile/808093563',
];
return $pattern[ (int)rand(0,(count($pattern)-1))];
}
}
try {
if($argv[1] === 'merukari'){
(new merukari())->tweet(merukari::pattern());
}
} catch (\Throwable $th) {
//throw $th;
}
もしかしたら、以前にもコードを公開して2回目になっていたりするかも知れません。そうだったらごめんなさい、無駄に記事を量産しています（反省。
そうそうXのハッシュタグ廃止は誤解だそうです。思い出したので書いときます、、、。
明日へ続く。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
argv, Asia, catch, connection, construct, int, lt, null, pattern, Python, quot, rand, return, throw, Throwable, true, try, Tweet, use AbrahamTwitterOAuthTwitterOAuth, vendor,
PHPでトランザクションを久々に使用した。サンプルコード
2023.03.08
おはようございます。
先日、PHPでトランザクションを久々に使用した。サンプルコードは以下になります。トランザクションやロールバックとかいう言葉は聞いても実際に使用してみないとその役割りや良さはわからないものかなって思います。
$dsn = 'mysql:host=localhost;dbname=mydatabase';
$username = 'myusername';
$password = 'mypassword';
try {
$dbh = new PDO($dsn, $username, $password);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// トランザクションを開始する
$dbh->beginTransaction();
// データベース操作1を実行する
$stmt1 = $dbh->prepare('INSERT INTO users (name, email) VALUES (?, ?)');
$stmt1->execute(array('John Doe', 'john.doe@example.com'));
// データベース操作2を実行する
$stmt2 = $dbh->prepare('UPDATE accounts SET balance = balance - 100 WHERE user_id = ?');
$stmt2->execute(array(1));
// データベース操作3を実行する（エラーが起きることをシミュレートする）
$stmt3 = $dbh->prepare('INSERT INTO orders (user_id, total_amount) VALUES (?, ?)');
$stmt3->execute(array(1, 'abc')); // 'total_amount'カラムに文字列を挿入しているため、エラーが発生する
// コミットする
$dbh->commit();
} catch (PDOException $e) {
// エラーが発生した場合はロールバックする
$dbh->rollBack();
echo 'Transaction failed: ' . $e->getMessage();
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
array, beginTransaction, catch, commit, dbh, dbname, echo, execute, getMessage, host, john.doe@example.com, localhost, mydatabase, MYSQL, PDO, PDOException, prepare, rollBack, setAttribute, VALUES,
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, 華,
JavaScriptで背景色を変更するコードです。保持機能あり。
2022.07.22
こんにちは、JavaScriptで背景色を変更するコード＋保持機能ありのコードを記載しますね。カラー色の保管はCookieを使用して対応しています。もう少しソースコードを短く出来るような気がしますが、お昼から出かけるのでこれで一旦終了とさせて頂きます。
let htmlcode = ["#181B39","#262a2e","#192734","#1c483b","#bf7800","#83094f"].map(elm =>`<span class='color_code' style='color:${elm}' data-color-code='${elm}'>■</span>`).join("\n");
const basecolor = "#262a2e";
let cookiefn = function (val) {
let CodeColor = val;
let r = document.cookie.split(';');
return r?((r)=>{
for(let ii = 0 ;ii<r.length;ii++){
let content = r[ii].split('=');
for(let i = 0 ;i<content.length;i++){
if(content[i].replaceAll(" ","")==="bgcolor_code"){
CodeColor = content[i +1];
}
}
}
return CodeColor;
})(r):CodeColor;
};
let old_color = cookiefn(basecolor);
console.log("log=" + old_color);
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
let ColorCodeObject = document.querySelectorAll(".color_code");
for (const key in ColorCodeObject) {
if (Object.hasOwnProperty.call(ColorCodeObject, key)) {
const element = ColorCodeObject[key];
element.addEventListener("click", function (element) {
for (let ii = 0; ii < document.styleSheets.length; ii++) {
if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
let element_css_code = document.styleSheets[ii].cssRules[i];
let rgbfn = function (hex) {
let red = parseInt(hex[1] + hex[2], 16);
let green = parseInt(hex[3] + hex[4], 16);
let blue = parseInt(hex[5] + hex[6], 16);
return `rgb(${red},${green},${blue})`;
};
try {
if (element_css_code.style.backgroundColor.replaceAll(" ","") === rgbfn(old_color).replaceAll(" ","")) {
console.log(rgbfn(old_color));
element_css_code.style.backgroundColor = rgbfn(ColorCodeObject[key].getAttribute("data-color-code"));
}
} catch (error) {
//console.log("not backgroundColor");
}
}
old_color = ColorCodeObject[key].getAttribute("data-color-code");
document.cookie = "bgcolor_code=" + old_color;
}
}
});
}
}
(function(){
for (let ii = 0; ii < document.styleSheets.length; ii++) {
if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
let element_css_code = document.styleSheets[ii].cssRules[i];
let rgbfn = function (hex) {
let red = parseInt(hex[1] + hex[2], 16);
let green = parseInt(hex[3] + hex[4], 16);
let blue = parseInt(hex[5] + hex[6], 16);
return `rgb( ${red}, ${green}, ${blue})`;
};
try {
console.warn(element_css_code.style.backgroundColor.replaceAll(" ","") + " === " + rgbfn(old_color).replaceAll(" ",""));
if (element_css_code.style.backgroundColor.replaceAll(" ","") === rgbfn(basecolor).replaceAll(" ","")) {
element_css_code.style.backgroundColor = rgbfn(old_color);
}
} catch (error) {
//console.log("not backgroundColor");
}
}
document.cookie = "bgcolor_code=" + old_color;
}
}
})();あとソースコードとは関係ありませんが、今日は４４度を超える県が出てくると人工知能が予測したそうです、４４度って凄まじく暑いと思いますので熱中症対策はしっかりとしてくださいね。
尚、このコードを可変してご自由に使用して構いませんが、出来ればお声掛けして頂けると嬉しいです。また、この記事のシェア、いいね等よろしくお願いします。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
backgroundColor.replaceAll, basecolor, catch, CodeColor, ColorCodeObject, cookiefn, document.getElementById, element, elm, hex, htmlcode, insertAdjacentHTML, join, match, parseInt, querySelectorAll, replaceAll, RGB, styleSheets, val,
タイトルの下に背景色を変える■を追加しました。
2022.07.22
おはようございます、背景色を変える■を追加しました。四角をクリックすると背景色が変わります、ソースコードは下記になります。取り分けて難しくないソースコードになると思いますが、少しだけ解説をします。このソースコードはスタイルシートの記述（ファイルなど）を読み込んでバックグラウンドカラーの一部のカラーだけを任意のカラーに置き換えています。
let htmlcode = `
<span class='color_code' style='color:#262a2e' data-color-code='#262a2e'>■</span>
<span class='color_code' style='color:#192734' data-color-code='#192734'>■</span>
<span class='color_code' style='color:#1c483b' data-color-code='#1c483b'>■</span>
<span class='color_code' style='color:#bf7800' data-color-code='#bf7800'>■</span>
<span class='color_code' style='color:#83094f' data-color-code='#83094f'>■</span>
`;
let old_color = "#262a2e";
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
let ColorCodeObject = document.querySelectorAll(".color_code");
for (const key in ColorCodeObject) {
if (Object.hasOwnProperty.call(ColorCodeObject, key)) {
const element = ColorCodeObject[key];
element.addEventListener("click", function (element) {
for (let ii = 0; ii < document.styleSheets.length; ii++) {
if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
let element_css_code = document.styleSheets[ii].cssRules[i];
let rgbfn = function(hex){
let red = parseInt(hex[1]+hex[2],16);
let green = parseInt(hex[3]+hex[4],16);
let blue = parseInt(hex[5]+hex[6],16);
return `rgb(${red}, ${green}, ${blue})`;
};
try {
if (element_css_code.style.backgroundColor === rgbfn(old_color)) {
//console.log(rgbfn(old_color));
element_css_code.style.backgroundColor = rgbfn(ColorCodeObject[key].getAttribute("data-color-code"));
}
} catch (error) {
//console.log("not backgroundColor");
}
}
old_color = ColorCodeObject[key].getAttribute("data-color-code");
}
}
});
}
}ソースコードも上から下へ進む感じで読んでいただけたら、読めるはずです。尚、躓く箇所といえば１６進数でスタイルシートに記述しているものもRGBで格納されている所ですね。ここの比較が「えっ」って感じになるぐらいでしょうか。あとはそれ程、難しくないソースコードだと自負しております😌。
この頃、jqueryを触らなくなって悲しいかな仕様を半分ぐらい忘れております。やはりコードは毎日書くべきかなって思います。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
backgroundColor, catch, ColorCodeObject, cssRules, document.getElementById, element, getAttribute, hex, htmlcode, Ii, insertAdjacentHTML, jquery, match, parseInt, querySelectorAll, quot, RGB, rgbfn, string, styleSheets,