WordPressの質問（q10315144）の続

質問

共有ボタンをクリックすると SNSシェアリンクとテキストボックス（中にページURL）とページURL をコピーするボタンをポップアップで表示させ、✕ボタンで閉じる機能を HTML で書いてみました。
希望通りの動作にすることが出来たのですが、コードをもう少しまとめてみてはどうかとアドバイス頂きました。

頂いたアドバイス ➀ と ➁ をどのように修正すべきか悩んでおります。
➂ の一貫性に関して dell_ok さんであれば addEventListener で統一されますでしょうか？
innerHTML は HTMLエスケープを行っていない場合にクロスサイト・スクリプティング攻撃の対象になるようなので、下記コードに修正致しました。

//旧コード
divShapeText.onclick = function() {
divShapeText.innerHTML = "コピーされました";
};
↓
//新コード
divShapeText.onclick = function() {
divShapeText.textContent = "コピーされました";
};

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

※ 参考サイト
https://qiita.com/RYO_nami/items/4543edfc7febe88 …

https://dubdesign.net/javascript/execcommand-copy/

※ 頂いたアドバイス
➀ const textboxHref = location.href;
let url = location.href
と同じ内容を、別の変数に代入しているのは無駄に思えます。

➁ jQueryを読み込んでいるようですが、最後の数行を除いて、ほとんど利用していませんよね？

➂ イベントのバインドも、「addEventListener」であったり「onclick」であったりと一貫性が感じられません。
ご提示のスクリプトに限って言えば、「textContent」と「innerHTML」も同様です。

要素取得のためだけに、jQueryを読み込むのであれば、例えば自前で
　const QS = s => document.querySelector(s);
のような関数を定義しておけば、読み込みは不要になりますし、「要素を取得する関数」とだけ覚えておけば、個別に要素の変数を多数作成するよりもわかりやすくなる可能性がありますし、スクリプトも全体的に短縮化が可能です。
（jQueryに慣れているなら、関数名を$にしておいてもよい）

回答No.9

dell_OK

・間違えている部分などありますでしょうか？

１３行目でエラーになっています。
kazu.forEach(code.length => {
参考サイトの元のコード
for(let i = 0; i < kazu; i++) {

６７行目
});
参考サイトの $(function(){ の最初の ( に対応した閉じカッコが不要です。
};

回答No.8

dell_OK

・正確ないいね数にはならないのではないかとアドバイス頂きました。
いいねボタンを可能であれば実装したいのですが、UUID の代わりとなるテーブルカラムに悩んでおります…

そうですね。
ＩＰアドレスでは個人を特定できないため、
正確ないいねを表示するには、
ログイン制にしてユーザーを特定するしかないと思います。

ＩＰアドレスでは特定できない、という意味では、
質問投稿で取得して保持しているＩＰアドレス（sortableのip）も、
正確に役割をはたすことはできません。

いいね数を正確にするか、正確さはあきらめるか、どちらかになってくると思います。

補足

A.回答ありがとうございます。
正確さはあきらめる形で実装したいです。
いいね部分だけを表示するように変更してみたのですが、間違えている部分などありますでしょうか？

※ 最新コード（前回の方法も残して起きたかったので sin_bbs_lile_count にコードを書きました。）
https://github.com/i6Grja3R/sample_theme.git

回答No.7

dell_OK

最新コードを見ました。
101行目がDELETE文からSELECT文に変わってしまっています。

・$query が複数あり違和感を感じていたのですが

WordPressへの書きかえが間違っています。
－－－－参考サイト
$sql = "SELECT * FROM good WHERE k_code=? AND g_name=?";
$stmt = $dbh -> prepare($sql);
$data[] = $post_id;
$data[] = $name_id;
$stmt -> execute($data);
$rec = $stmt -> fetch(PDO::FETCH_ASSOC);
－－－－WordPress
$sql = "SELECT * FROM good WHERE k_code=%s AND g_unique=%s";
$query = $wpdb->prepare($sql, $post_id, $unique_id);
$rec = $wpdb->get_results($query, ARRAY_A);
－－－－

お礼

こちらが最新の回答になります。
申し訳ありません、回答No.4に関する補足を忘れておりました。

Q.リアルタイムというのは、
閲覧中に他人のカウントが反映されるということでしょうか。
そのようなタイプのものはあまりないような気がします。
閲覧したタイミングのカウントが表示されるのが一般的ではないでしょうか。

A.回答ありがとうございます。
解釈の違いがあったようです申し訳ありません。
ユーザーがいいねボタンを押した時にいいねが更新されることを想像しておりました。

Q.同時に他人がいいねしたカウントは反映されません。
閲覧したタイミングのいいねカウントをもとにカウントアップしているからです。

もし自分がいいねしたタイミングでも、
閲覧中に他人がいいねしたカウントも反映したいのであれば、
非同期通信では、カウントアップ（またはカウントダウン）を要求し、
サーバーはそれに応じてデータベースを更新し、その結果のカウントを返し、
返された値を表示する、のが現在のカウントという意味では正解です。
ですが、そのせいで、
自分のいいねで「2 増えた」とか「3 増えた」とかをまのあたりにすると、
不具合ではないかと思ったりもするでしょう。
リアルタイムに表示されないのも、
そのようなことがあるからではないでしょうか。

A.解説ありがとうございます。
dell_ok さんのおっしゃるように閲覧中に不自然にカウントが増えるものはなさそうですし、不具合ではないかと思いますね。
リアルタイムで反映する必要がないという説明の意味を理解出来ました。

補足

A.修正ありがとうございます。
SELECT クエリからすべてのデータを連想行の配列として取得する方法は参考サイトを見て書き換えてみたのですが、$rec = $wpdb->get_results($query, ARRAY_A); でも取得可能なんですね勉強になりました。

UUID でのいいねボタンを想定していたのですが、IPアドレスは偽装やなりすましができますし、串を通せば個人情報としてつかえないので、正確ないいね数にはならないのではないかとアドバイス頂きました。
いいねボタンを可能であれば実装したいのですが、UUID の代わりとなるテーブルカラムに悩んでおります…
dell_ok さんであればどうされますでしょうか？

※ 参考サイト
https://stackoverflow.com/questions/74423308/how-to-fetch-all-data-from-a-select-query-as-an-array-of-associative-rows-in-wor

※ 最新コード（前回の方法も残して起きたかったので sin_bbs_lile_count にコードを書きました。）
https://github.com/i6Grja3R/sample_theme.git

回答No.6

dell_OK

・いいね数をリアルタイムに更新する必要はないのではないかとアドバイス頂いたのですが、どう思われますでしょうか？

回答No.4に、私の憶測でいろいろと書きましたが、リアルタイムがどのタイミングなのか私がわかっていません。
アドバイスくださった人がこのようなことに詳しいのでしたら、リアルタイムでなくていいと思います。

補足

回答ありがとうございます。
いいねが押された時に更新されるものとデータベースに一定期間で保存して？出力するものがあるようです。

回答No.5

dell_OK

WordPress でのＳＱＬ文のパラメータは %s などを使ってください。

－－－－変更前
// goodテーブルから k_code（質問を一意に識別する番号）と g_unique（いいねを押した UUID（IPアドレス））が一致したレコードを取得するSQL文
$sql = "SELECT * FROM good WHERE k_code=? AND g_unique=?";
// エスケープ処理されたSQL文をクエリ実行
$query = $wpdb->query($wpdb->prepare($sql));

$data[] = $post_id;
$data[] = $unique_id;
// エスケープ処理されたSQL文をクエリ実行
$query = $wpdb->query($wpdb->prepare($data));
－－－－変更後
// goodテーブルから k_code（質問を一意に識別する番号）と g_unique（いいねを押した UUID（IPアドレス））が一致したレコードを取得するSQL文
$sql = "SELECT * FROM good WHERE k_code=%s AND g_unique=%s";
// エスケープ処理されたSQL文をクエリ実行
$query = $wpdb->prepare($sql, $post_id, $unique_id);
－－－－

補足

修正ありがとうございます。
$query が複数あり違和感を感じていたのですがまとめることは可能なんですね、勉強になりました。

POSTデータで、質問ID と UUID（IPアドレス）を送信することはセキュリティ上問題ないか質問をした際に、いいね数をリアルタイムに更新する必要はないのではないかとアドバイス頂いたのですが、dell_ok さんはどう思われますでしょうか？

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

回答No.4

dell_OK

・表示部分が PHP で書かれておりリアルタイムで反映されるタイプではないように感じました。
表示部分は Ajax でなくても問題ないのでしょうか？

リアルタイムというのは、
閲覧中に他人のカウントが反映されるということでしょうか。
そのようなタイプのものはあまりないような気がします。
閲覧したタイミングのカウントが表示されるのが一般的ではないでしょうか。

参考サイトでは、自分がいいねした分のカウントアップは、
非同期通信のところでやっています。
iine.textContent = g_iine[i] + 1;

ただ、これがいいのかどうか、一般的なのかはわかりません。
自分がいいねした時にカウントアップされたら、
「1 増えた」と思うので気にならないと思いますが、
同時に他人がいいねしたカウントは反映されません。
閲覧したタイミングのいいねカウントをもとにカウントアップしているからです。

もし自分がいいねしたタイミングでも、
閲覧中に他人がいいねしたカウントも反映したいのであれば、
非同期通信では、カウントアップ（またはカウントダウン）を要求し、
サーバーはそれに応じてデータベースを更新し、その結果のカウントを返し、
返された値を表示する、のが現在のカウントという意味では正解です。
ですが、そのせいで、
自分のいいねで「2 増えた」とか「3 増えた」とかをまのあたりにすると、
不具合ではないかと思ったりもするでしょう。

リアルタイムに表示されないのも、
そのようなことがあるからではないでしょうか。
自分のカウントが反映されたのかどうかがわかりにくくなります。
例えば、自分はカウントアップして、同時にひとりの他人がカウントダウンをしたら、
カウントが変わらなかったように見えますよね。

回答No.3

dell_OK

・他の情報を探したところ3つほど見つけることが出来たのですが、どの方法を参考にするのが良いと思われますでしょうか？

どの方法もコピー＆ペーストして使えるような感じではないようです。

カウンターはデータベースに保存するのがいいと思いますので、
テキストファイルに保存する③はなしですね。

②よりは①の方が簡単そうでいいのですが、
Ajaxを新しい書き方に書き直すのと、
データベース処理の書き直しが②より多いです。
それと、いいねの解除がありません。

試すのなら②ですかね。

もしくはですが、その前に、
前回の方法の続きとして、
GitHubから全コードダウンロードして、
必要な関数を追加してみるかです。
「重大なエラーが発生しました」は、
関数がないことが原因のような気がしますので。

補足

Q.②よりは①の方が簡単そうでいいのですが、
Ajaxを新しい書き方に書き直すのと、
データベース処理の書き直しが②より多いです。
それと、いいねの解除がありません。

試すのなら②ですかね。

A.回答ありがとうございます。
②の方法でコードを書き換えてみたのですが、表示部分が PHP で書かれておりリアルタイムで反映されるタイプではないように感じました。
表示部分は Ajax でなくても問題ないのでしょうか？

$stmt -> fetch(PDO::FETCH_ASSOC); は Wordpress用にすべて $rec = $wpdb->get_results('SELECT * FROM ', ARRAY_A); に変更しております。

参考サイトでは、[ページ先頭でPOSTデータを受信し、いいねテーブルにて回答IDといいねを押した名前と照合させている] ようですが、ログイン制ではないため質問ID と UUID（IPアドレス）に変更致しました。

※ 参考サイト
https://denkenmusic.com/phpmysql%E3%81%A7%E5%A4%A7%E5%96%9C%E5%88%A9%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B%E2%91%A5%E3%81%84%E3%81%84%E3%81%AD%E6%A9%9F%E8%83%BD%E3%81%AE%E5%AE%9F/#POST

https://zenn.dev/cota_hu/articles/how-to-count-so-many

※ 最新コード（前回の方法も残して起きたかったので sin_bbs_lile_count にコードを書きました。）
https://github.com/i6Grja3R/sample_theme.git

回答No.2

dell_OK

・参考サイトの方法でいいねボタンを実装することは可能でしょうか？

これは難しそうです。
参考サイトに書かれているコードは、この人がポートフォリオ用に作成したものの一部で、必要な関数が載っていません。
必要な関数をGitHubにある全コードから探し出さなくてはならないです。
別の情報を探した方がよさそうです。

補足

A.回答ありがとうございます。
他の情報を探したところ3つほど見つけることが出来たのですが、どの方法を参考にするのが良いと思われますでしょうか？
➁ はログイン機能を実装されているのでそのまま使う事は難しそうです…

➀ PHPとJavaScriptの非同期処理で「いいねボタン」を作ろう！
https://it-nyanter.com/like-btn/

➁ PHP,MySQLで大喜利サイトを作ってみる⑥いいね機能の実装
https://denkenmusic.com/phpmysql%E3%81%A7%E5%A4%A7%E5%96%9C%E5%88%A9%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B%E2%91%A5%E3%81%84%E3%81%84%E3%81%AD%E6%A9%9F%E8%83%BD%E3%81%AE%E5%AE%9F/

➂ いいねボタン実装の方法
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11281328991

回答No.1

dell_OK

・➀ const textboxHref = location.href;
let url = location.href
と同じ内容を、別の変数に代入しているのは無駄に思えます。

そうですね。
私もそう感じていました。
その行は削除して、
テキストボックスの値に直接ＵＲＬを代入しましょう。
divScopeRenderer.value = location.href;

・➁ jQueryを読み込んでいるようですが、最後の数行を除いて、ほとんど利用していませんよね？

jQuery を Vanilla JS（素の JavaScript）で書くと以下のようになります。
Vanilla JS についてはこちらなどをご覧ください。
https://zenn.dev/seya/articles/66809b3d59151c
－－－－変更前
let snsLinks = $(".sns-link")
for (let i = 0; i < snsLinks.length; i++) {
let href = snsLinks.eq(i).attr('href');
//シェアページのURL上書き
href = href.replace("u=", "u=" + url) //facebook
href = href.replace("url=", "url=" + url) //LINE,X,ピンタレスト
snsLinks.eq(i).attr('href', href);
}
－－－－変更後
let snsLinks = document.querySelectorAll(".sns-link")
snsLinks.forEach(snsLink => {
let href = snsLink.getAttribute('href');
href = href.replace("u=", "u=" + url)
href = href.replace("url=", "url=" + url)
snsLink.setAttribute('href', href);
});
－－－－

・➂ イベントのバインドも、「addEventListener」であったり「onclick」であったりと一貫性が感じられません。

そうですね。
addEventListener で統一した方がよさそうですね。
以前、addEventListener と onclick の違いについて話したことがあると思います。
onclick は代入（上書きされる）で、addEventListener は追加です。
どちらにもメリットとデメリットがあるとは思いますが、
私も決めかねて addEventListener を使うようにしています。

お礼

こちらが最新の質問になります。
いいねボタンを参考サイトのコードを Javascript に直して考えてみました。
var $this = $(this); の this はイベントが起こったDOM要素のようなので、Javascript の this で代用しております。
テーブル構成も変えずにコードを書いたのですが、delete_flg と update_date はいいねボタンに関するコードとして関係ないようでよく使い方が分かっていません。

1点疑問点がありまして、 goodPostId = $this.parents('.post').data('postid'); の .parents は何を指しているのでしょうか？ .post を指定していることから <section class="post" data-postid="<?php echo sanitize($p_id); ?>"> だと思うのですが、その上の親クラスがなく違和感を感じました。

コードを実行してみたところこのサイトで重大なエラーが発生しました。と表示され、debug.log で確認すると多数エラーが出ております。
dell_ok さんにコードを確認して頂いてそれから修正を行う方法が最善だと考えているのですが、参考サイトの方法でいいねボタンを実装することは可能でしょうか？

※ 参考サイト
https://qiita.com/kanasann1106/items/4ea0675afde639e6d540

※ 最新コード（bbs_lile_count.phpにいいねボタンに関するコードを書きました。）
https://github.com/i6Grja3R/sample_theme.git

※ var $this = $(this);の意味
https://teratail.com/questions/85338

補足

Q.テキストボックスの値に直接ＵＲＬを代入しましょう。
divScopeRenderer.value = location.href;

A.回答ありがとうございます。
同じ関数をまとめて直接ＵＲＬを代入するんですね。

Q.jQuery を Vanilla JS（素の JavaScript）で書くと以下のようになります。

－－－－変更前
let snsLinks = $(".sns-link")
for (let i = 0; i < snsLinks.length; i++) {
let href = snsLinks.eq(i).attr('href');
//シェアページのURL上書き
href = href.replace("u=", "u=" + url) //facebook
href = href.replace("url=", "url=" + url) //LINE,X,ピンタレスト
snsLinks.eq(i).attr('href', href);
}
－－－－変更後
let snsLinks = document.querySelectorAll(".sns-link")
snsLinks.forEach(snsLink => {
let href = snsLink.getAttribute('href');
href = href.replace("u=", "u=" + url)
href = href.replace("url=", "url=" + url)
snsLink.setAttribute('href', href);
});
－－－－

A.修正ありがとうございます。
jQuery を Javascript に直して統一したほうがよいという意味だったのですね勉強になりました。

Q.どちらにもメリットとデメリットがあるとは思いますが、
私も決めかねて addEventListener を使うようにしています。

A.回答ありがとうございます。
dell_ok さんのおっしゃるように addEventListener を使うようにしたほうが間違えも起こりにくそうです。

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git