webpushのLaravelを使用しないパターンを箇条書き、フロントエンド側は

2024.11.14

Logging

おはようございます.webpushのLaravelを使用しないパターンを箇条書き、フロントエンドは過去記事を参照ください.まずwebpushを使用するにはパブリックキーとシークレットキーが必要になります.下記のURLより発行してみてください.

https://web-push-codelab.glitch.me

フロントエンド側でサービスワーカーの登録された識別データをバックエンドに送信.

// db.php: データベース接続の設定
function getDbConnection() {
    $host = 'localhost';
    $dbname = 'your_database';
    $username = 'your_username';
    $password = 'your_password';

    try {
        $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        return $pdo;
    } catch (PDOException $e) {
        die("DB接続エラー: " . $e->getMessage());
    }
}

// endpoint_register.php: エンドポイントをデータベースに登録
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $endpoint = $_POST['endpoint'];
    $auth = $_POST['auth'];
    $p256dh = $_POST['p256dh'];

    if ($endpoint && $auth && $p256dh) {
        $pdo = getDbConnection();
        $stmt = $pdo->prepare("INSERT INTO push_subscriptions (endpoint, auth, p256dh) VALUES (?, ?, ?)");
        $stmt->execute([$endpoint, $auth, $p256dh]);
        echo "登録成功";
    } else {
        echo "エンドポイントデータが不完全です";
    }
}

バックエンド側で下記のようなコードでデータを保存します.

次にminishlink/web-pushというライブラリを使用し登録されたデータを元に送信処理を行います.

composer require minishlink/web-push
// message_send.php: データベースからエンドポイントを取得し、プッシュ通知を送信
require 'db.php';
require 'vendor/autoload.php';

use Minishlink\WebPush\WebPush;
use Minishlink\WebPush\Subscription;

// VAPIDキーの設定
$auth = [
    'VAPID' => [
        'subject' => 'https://example.com',
        'publicKey' => 'YOUR_PUBLIC_VAPID_KEY',
        'privateKey' => 'YOUR_PRIVATE_VAPID_KEY',
    ],
];

$webPush = new WebPush($auth);

// データベースからサブスクリプション情報を取得
$pdo = getDbConnection();
$stmt = $pdo->query("SELECT endpoint, auth, p256dh FROM push_subscriptions");
$subscriptions = $stmt->fetchAll(PDO::FETCH_ASSOC);

foreach ($subscriptions as $sub) {
    $subscription = Subscription::create([
        'endpoint' => $sub['endpoint'],
        'publicKey' => $sub['p256dh'],
        'authToken' => $sub['auth'],
    ]);

    // 送信するメッセージ
    $message = json_encode(['title' => '通知タイトル', 'body' => 'メッセージ内容']);

    // プッシュ通知の送信
    $webPush->sendNotification($subscription, $message);
}

// 送信キューの実行
foreach ($webPush->flush() as $report) {
    $endpoint = $report->getRequest()->getUri()->__toString();

    if ($report->isSuccess()) {
        echo "成功: {$endpoint}\n";
    } else {
        echo "失敗: {$endpoint}: {$report->getReason()}\n";
    }
}

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

$stmt, catch, endpoint, FETCH_ASSOC, foreach, getDbConnection, getMessage, Laravel, minishlink, MYSQL, PDO, PDOException, prepare, query, setAttribute, subscription, VALUES, vendor, Webpush, シークレットキー,

Photo by Valeria Boltneva on Pexels.com

評価するボタンを改修して以前より直感的な操作になりました.#vue3

2024.10.14

Logging

おはようございます.評価するボタンを改修して以前より直感的な操作になりました.以前のUIはこんな感じでセレクトメニューを選択し評価ボタンを押すという形でしたが、改修したUIは★を触れることで評価の値が変わります.

自分としては改修した方が操作しやすいと思っています.

因みにVue3.jsを使用しています.今までVue3.jsやReactの良さがあまり分かっていませんでしたが、なるほどこういう再レタリングする時に便利だよなって気づきました.バニラJSでコードを書くよりも比較的に簡単に書く事ができ再利用性があるそこが利点だと.

最後にVue3.jsのコードを貼っときます.

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
const Evaluation = {
    props: {
      defaultActive: {
        type: Number,
        required: true
      },
      totalItems: {
        type: Number,
        required: true
      },
      avgVal:{
        type:Number,
        required:true
      }
    },
    data() {
      return {
        defaultActived: null,
        items: []
      };
    },
    created() {
      // HTMLから渡された値を基に、初期の状態を設定
      this.items = Array.from({ length: this.totalItems }, (v, i) =>{
        return (i + 1) <= this.defaultActive ? '★' : '☆';
      }
      );
    },
    methods: {
      // マウスが触れた時に☆を★に変える
      hover(index) {
        this.items = Array.from({ length: this.totalItems }, (v, i) =>
            i <= index ? '★' : '☆'
        );
        document.getElementById('evaluationVal').setAttribute('data-val',index);
      },
      // マウスが離れた時に元の値に戻す
      onclick() {       
        let i = Math.floor(document.getElementById('evaluationVal').getAttribute('data-val')) + 1;
         (async (i) =>{
            let frm = new FormData();
            frm.append('id',document.querySelector('#evaluation_id').getAttribute('data-id'));
            frm.append('val',i);
            let res = await fetch('/evaluation/index.php',{
                method:'post',
                body:frm
            }).then(result=>result.json());
            alert(res.msg);
            if(Math.floor(res.flg) === 1){
              const roundToDecimal = (number, decimalPlaces) =>{
                const multiplier = Math.pow(10, decimalPlaces);
                return Math.round(number * multiplier) / multiplier;
              } 
              document.getElementById('evaluationAvgVal').textContent = roundToDecimal(res.avgVal,2);
              this.defaultActived = res.avgVal;
              this.reRender();
            }
            
        })(i);
      }, 
      reRender() {
        // HTMLから渡された値を基に、初期の状態を設定
        this.items = Array.from({ length: this.totalItems }, (v, i) =>{
            return (i + 1) <= this.defaultActived ? '★' : '☆';
          }
        );
      }    
    },
    template: `
      <div>
        <span v-for="(item, index) in items" :key="index">
          <span
            @mouseover="hover(index)"
          >
            {{ item }}
          </span>
        </span>
        [<span  id='evaluationAvgVal'>{{this.avgVal}}</span>]
        <button @click="onclick()"
         id='evaluationVal'
         data-val='5'
         class='bbtn'
         title="★に触れることで評価の変更が出来ます."
         >評価する</button>
      </div>
    `
  };
  const app = createApp({});
  app.component('evaluation', Evaluation);
  app.mount('#evaluation');

明日へ続く.

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

$flg, app.component, app.mount, async, created, document.getElementById, evaluation, floor, frm, hover, Math.floor, methods, multiplier, onClick, pOW, props, setAttribute, this.totalItems, セレクトメニュー,

ContactForm7で現在ページのURLを送る方法。 #カスタマイズ

2023.05.27

Logging

おはようございます。ContactForm7で現在ページのURLを送る方法です、全ての記事の下にお問い合わせフォームを設置している人はあまりいないかもしれないけれど。そのあまりいない人の一人です😂。

記事の下にショートコードを設置するにはプラグインを自作するか、テンプレート内に埋め込むかどちらかだと思います。自分は前者のプラグインを自作してショートコードを埋め込んでいます。

ショートコードを埋め込むコードはこんなコードです。

<?php
do_shortcode('[contact-form-7 id="XXXX" title="comment"]')

これで全記事にショートコードを埋め込むことが可能ですがこれだけでは動きません。こんな感じのプラグインを作ってみてください。プラグインの設置方法などはググって下さい。

<?php
/*
  Plugin Name: comment-add
  Plugin URI:
  Description: 記事の下にアドセンス広告などを貼り付けるのに使用
  Version: 1.0.0
  Author: @zip358com
  Author URI: https://www.zip358.com
 */


function comment_add($content)
{
    if (is_single() && 'post' == get_post_type()) {
        $content = $content.do_shortcode('[contact-form-7 id="xxxx" title="comment"]');
        return $content;
    } else {
        return $content;
    }
}
add_filter('the_content', 'comment_add');
remove_filter('the_content', 'wpautop');

これだけでは、どのページから問い合わせしたのか分からないので、名前などの入力欄以外に入力欄を設置します。次に設置したそのNoを控えて下さい。

<script>
//Contact Form 7 現在ページのURL
if(document.querySelectorAll("[name='text-564']")){
    [...document.querySelectorAll("[name='text-564']")].forEach(elm=>{
        elm.setAttribute("type","hidden");
        elm.value = decodeURIComponent(location.href);
    });
}
</script>

上記のコードを</body>タグ直前に設置してください。設置後、text-564を控えたNoに変更シテクダサイこれで設置が完了です☹。

⚠ContactForm7のメール送信欄にも控えたNoを設置してください。これで完了です!!
最後に送信のご確認を忘れずに😐。

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

add_filter, body, comment-add, decodeURIComponent, description, document.querySelectorAll, elm, else, foreach, hidden&quot, lt, php, php do_shortcode, quot, remove_filter, return, setAttribute, title, Version, wpautop,

PHPでトランザクションを久々に使用した。サンプルコード

2023.03.08

Logging

おはようございます。

先日、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

OFUSEで応援を送る

タグ

array, beginTransaction, catch, commit, dbh, dbname, echo, execute, getMessage, host, john.doe@example.com, localhost, mydatabase, MYSQL, PDO, PDOException, prepare, rollBack, setAttribute, VALUES,