@Blog{zip358.com}
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
評価するボタンを改修して以前より直感的な操作になりました.#vue3
2024.10.14
おはようございます.評価するボタンを改修して以前より直感的な操作になりました.以前の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
タグ
$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
おはようございます。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
タグ
add_filter, body, comment-add, decodeURIComponent, description, document.querySelectorAll, elm, else, foreach, hidden", lt, php, php do_shortcode, quot, remove_filter, return, setAttribute, title, Version, wpautop,
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,