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,
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, 華,
ワードプレスの自動タグ生成するプラグイン再開発。 #wp #tag
2022.12.12
おはようございます、今年もあと半分とちょっとですね、月曜日のたわわ☕。
さて、今日はワードプレスの自動タグ生成するプラグイン再開発しましたってお話です、この自動タグを生成するツールは以前、作っていたのですがYahoo!APIのバージョンアップに伴い使用出来なくなっていました。その為、プラグインを更新しV2対応をこの度、行ったって話です。もともと日本語記事のタグ自動生成するものは存在していたのですが、それがエラーで使用出来なくなり自分で開発したのが今に至っています。
プラグインをダウンロードして使いたい方は、zipファイルを解凍し解凍したフォルダをサーバーのプラグイン置き場にアップロードすることにより使用出来るようになります。尚、前手順としてYahoo!APIのアプリケーションIDの取得を行う必要があります。
プラグインをダウンロードしたくないという方のためにソースコードを一部貼っときます。
if (isset($appid)) {
$endpoint = "https://jlp.yahooapis.jp/KeyphraseService/V2/extract";
$headers = [
"Content-Type: application/json",
"User-Agent: Yahoo AppID: ".$appid,
];
$param = [
"id"=> time(),
"jsonrpc" => "2.0",
"method" => "jlp.keyphraseservice.extract",
"params" => [
"q"=>preg_replace("/https?:([a-zA-Z0-9|\/|_|\-|%|@|\*|\.|\?|&|=]){0,}/m","",$content)
]
];
$curl=curl_init($endpoint);
curl_setopt($curl,CURLOPT_POST, TRUE);
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
curl_setopt($curl,CURLOPT_POSTFIELDS, json_encode($param));
curl_setopt($curl,CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($curl,CURLOPT_SSL_VERIFYHOST, FALSE);
curl_setopt($curl,CURLOPT_RETURNTRANSFER, TRUE);
$response = json_decode(curl_exec($curl));
if (isset($response->result->phrases)) {
foreach ($response->result->phrases as $keys=>$word) {
if ($word->text) {
$tags[] = $word->text;
}
if (is_array($tags)) {
wp_set_post_tags($post_id, implode(",", array_unique($tags)), false);
}
}
}
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
application, false, foreach, gt, headers, implode, isset, jlp, json_decode, json_encode, keys, PARAM, phrases, quot, quot;User-Agent, response, result, Text, true, VERIFYHOST,
goo-labのひらがな化API雛形を作りました。
2021.05.17
goo-labのひらがな化API雛形を作りましたので、お裾分けです。YOUTUBEで解説している事を抜粋して記載します、まずAPIとはアプリケーションプログラミングインターフェイスの略です。APIを簡単に解説するとAというデータを送るとAのデータを処理して何らかの結果を返却してくれるサービスを言います。
今回のひらがな化APIは漢字の文字をひらがな（カタカナ）に変換して返却してくれるサービスです。自分が作った部分はひらがな化APIのサーバにデータを送信して返却データをキャッチする部分になります。APIというのはどんなAPIも同じようなものですので、一度、理屈を分かってしまうと簡単なものです。
因みにディファインの部分を自分のAPIに変更してお使いください、尚、コマンドラインから実行するように設計しています。
<?php
define("APIKEY","xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
class Hieagana{
public function main($str="漢字が混ざっている文章"){
if(!$str){return false;}
$headers = array(
"Content-Type: application/x-www-form-urlencoded",
);
// app_id（必須項目） アプリケーションID
// request_id リクエストID
// 省略時は"labs.goo.ne.jp[タブ文字]リクエスト受付時刻[タブ文字]連番"となります。
// sentence（必須項目） 解析対象テキスト
// output_type (必須項目) 出力種別
// hiragana(ひらがな化)、katakana(カタカナ化)のどちらかを指定してください。
$params = [
"app_id"=>APIKEY,
"sentence"=>$str,
"output_type"=>"hiragana"
];
$curl = curl_init("https://labs.goo.ne.jp/api/hiragana");
curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($params));
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
curl_setopt($curl, CURLOPT_FOLLOWLOCATION, TRUE);
$output = (object)json_decode(curl_exec($curl));
curl_close($curl);
var_dump($output);
}
}
if($argv[0]){
(new Hieagana)->main($argv[1]);
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
$params, APIKEY, application, argv, array, decode, false, goo.ne.jp, headers, hiragana, katakana, labs, lt, object, php define, quot, VERIFYHOST, youtube, アプリケーションプログラミングインターフェイス, コマンドライン,