いいね数をリアルタイムで反映して表示させるためにはどうすればよいでしょうか？

Question

実現したいこと

Q＆A掲示板の質問にいいね機能を実装したいです。

発生している問題・分からないこと

参考サイトを見ながらコードを書き換えたのですが、表示部分がPHPで書かれており、カウントをカラムに集計して一定期間でカウントしているのではないかと思い、表示部分を Javascript に変更すべきか悩んでおります。

ログイン制ではないためPOSTデータでは、質問ID と UUID（IPアドレス）を送信するように考えたのですが、セキュリティを考えると危険でしょうか？

該当のソースコード

<!-- いいねのクリックイベント -->
<script>
    let nongood = document.getElementById("nongood");
    let kazu = code.length;
    //let kazu = count(code);

    kazu.forEach(code.length => {
        // +[]は0
        let good = +code[i];
        let iine = +code[i];
        good = document.getElementById("good" + code[i]);
        iine = document.getElementById("iine" + code[i]);
        //いいねボタンをクリックした時にイベントが発生
        good.addEventListener("click", () => {
            //good.classList.toggle('クラス名');
            //指定された文字列がリスト内にあるかどうかを示す
            if (good.classList.contains('on')) {
                //要素を削除
                good.classList.remove('on');
                //要素を追加
                good.classList.add('off');
                //取り消しでいいね数を-1して出力
                iine.textContent = g_iine[i] - 1;
                g_iine[i] = g_iine[i] - 1;
            } else {
                good.classList.remove('off');
                good.classList.add('on');
                //いいねで総数+1
                iine.textContent = g_iine[i] + 1;
                g_iine[i] = g_iine[i] + 1;
            }
            
            //FormData オブジェクトをインスタンス化したら append() メソッドを呼び出すことでフィールドに追加することができる
            formData.append("action", "like_dislike_button");
            //フォームの入力値を送信
            const require = {
                method: "post",
                body: formData,
                data: {
                    "post_id": code[i],
                    "unique_id": unique
                }
            }

            fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", require)
                .then(res => {
                    // return data.json();
                })
                .then(date => {
                    //ここにいいね機能の表示コードを書かないとリアルタイムで反映させることが出来ないのでは…？
                })

                .catch(error => {
                    console.log(error);
                });

            
        });
    });
</script>

<!-- いいねをデータベースに登録 -->
<?php
//もしいいねテーブルにて質問IDといいねを押した UUID（IPアドレス）と照合させる
if (!empty($_POST["post_id"]) === true or !empty($_POST["unique_id"]) === true) {

    $post_id = $_POST["post_id"];
    $unique_id = $_POST["unique_id"];

    // $wpdbでSQLを実行
    global $wpdb;

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

    $data[] = $post_id;
    $data[] = $unique_id;
    
    $query = $wpdb->query($wpdb->prepare($data));
    $data = array();

    //Wordpress で SELECT クエリからすべてのデータを連想行の配列として取得する
    $rec = $wpdb->get_results('SELECT * FROM good', ARRAY_A);

    //もしいいねテーブルにて質問IDといいねを押した UUID（IPアドレス）が存在しなければ
    if (!empty($rec) === true) {
        $sql = "DELETE FROM good WHERE k_code=? AND g_unique=?";
        
        $query = $wpdb->query($wpdb->prepare($sql));

        $data[] = $post_id;
        $data[] = $unique_id;
        
        $query = $wpdb->query($wpdb->prepare($data));
        $data = array();
        
    } else {
        $sql = "INSERT INTO good(k_code, g_unique, good) VALUES(?,?,1)";
        
        $query = $wpdb->query($wpdb->prepare($sql));

        $data[] = $post_id;
        $data[] = $unique_id;
        
        $query = $wpdb->query($wpdb->prepare($sql));

        
    }
}
?>

<!-- いいねの表示について -->
<?php
//データベース接続
global $wpdb;

//lile_countテーブルから m_w（ユーザーの回答）のレコードを取得するSQL文
$sql = "SELECT * FROM lile_count WHERE m_w = ? ORDER BY time DESC";

$query = $wpdb->query($wpdb->prepare($sql));
$data[] = $day;

$query = $wpdb->query($wpdb->prepare($data));
$data = array();



while (true) {
    //Wordpress で SELECT クエリからすべてのデータを連想行の配列として取得する
    $rec = $wpdb->get_results('SELECT * FROM lile_count', ARRAY_A);

    //もしデータがなければ終了する
    if (empty($rec) === true) {
        break;
    }
    print '<div class="card">';
    print '<div class="card-in">';
    print '<div class="ico">';

    //userテーブルから name（名前）のレコードを取得するSQL文
    $sql = "SELECT img FROM user WHERE name=?";
    
    $wpdb2 = $wpdb->query($wpdb->prepare($sql));

    $data[] = $rec["name"];
    
    $wpdb2 = $wpdb->query($wpdb->prepare($data));
    $data = array();
    
    //Wordpress で SELECT クエリからすべてのデータを連想行の配列として取得する
    $rec2 = $wpdb2->get_results('SELECT * FROM user', ARRAY_A);

    //もしユーザーアイコン画像がなければ
    if (empty($rec2["img"]) === true) {
        $nanasi = "nanasi.png";
        $disp_gazou = "<img src='./img/" . $nanasi . "'>";
        //画像を出力する
        print $disp_gazou;
    } else {
        $disp_gazou = "<img src='./img/" . $rec2['img'] . "'>";
        print $disp_gazou;
    }
    print "</div>";
    print '<div class="bun">';
    print '<div class="time">';
    print date('Y年n月j日 g:i', strtotime($rec["time"]));
    print '</div>';
    print '<div class="name">';
    print $rec["name"];
    print '</div>';
    print '</div>';
    print '</div>';
    print '<div class="kaitou">';
    print $rec["comment"];
    print "</div>";
    $code = $rec["code"];
    print "<div class='goodiine'>";

    
    if (!empty($name) === true) {
        //goodテーブルから k_code（質問を一意に識別する番号）と g_unique（いいねを押した UUID（IPアドレス））のレコードを取得するSQL文
        $sql = "SELECT * FROM good WHERE k_code=? AND g_unique=?";
        
        $wpdb3 = $wpdb->query($wpdb->prepare($sql));
        $data[] = $rec["code"];
        $data[] = $name;
        
        $wpdb3 = $wpdb->query($wpdb->prepare($data));
        $data = array();
        //Wordpress で SELECT クエリからすべてのデータを連想行の配列として取得する
        $rec2 = $wpdb3->get_results('SELECT * FROM user', ARRAY_A);

        //もし名前がテーブルに存在しなければ
        if ($rec["name"] === $name) {
            print "<div class='clear'>";
            print "<form action='sakujyo.php' method='post'>";
            print "<input type='hidden' name='re' value='" . $code . "'>";
            print "<input type='submit' value='回答を削除'>";
            print "</form>";
            print "</div>";
            print "<div id='good$code'><img src='./img/ハートのマーク3.png'></div>";
            
            //存在していれば
        } else if (!empty($rec3) === true) {
            
            print "<div id='good$code' class='on'><img src='./img/ハートのマーク3.png'></div>";
        } else {
            print "<div id='good$code'><img src='./img/ハートのマーク3.png'></div>";
        }
    } else {
        print "<div id='good$code'><img src='./img/ハートのマーク3.png'></div>";
    }

    //goodテーブルから k_code（質問を一意に識別する番号）のレコードを取得するSQL文
    $sql = "SELECT * FROM good WHERE k_code=?";
    
    $wpdb4 = $wpdb->query($wpdb->prepare($sql));
    //回答を一意に識別する番号
    $data[] = $code;
    
    $wpdb4 = $wpdb->query($wpdb->prepare($data));
    $data = array();
    $iine = 0;

    while (true) {
        //Wordpress で SELECT クエリからすべてのデータを連想行の配列として取得する
        $rec4 = $wpdb4->get_results('SELECT * FROM user', ARRAY_A);
        //もしいいねがなければ
        if (!empty($rec4["good"]) === true) {
            //いいねを登録する
            $g_i[] = $rec4["good"];
        } else {
            break;
        }
        //いいね数をカウントする
        $iine = count($g_i);
    }
    $g_i = array();
    print "<div id='iine$code'>$iine</div>";
    print "</div>";
    print "</div>";

    if (!empty($name) === true) {

        if ($rec["name"] === $name) {
            $code = "non";
        }
    }
    $k_code[] = $code;
    $g_iine[] = $iine;
}
//もしいいね数がカウントされてなければ
if (!empty($g_iine) === true) {
    $g_iine = json_encode($g_iine);
}
//もし質問を一意に識別する番号がなければ
if (!empty($k_code) === true) {
    $k_code = json_encode($k_code);
}

if (!empty($name) === true) {
    $name = json_encode($name);
}
print "<div id='goodnon'></div>";

$dbh = null;
?>


<div id="scrolltop" class="st">top</div>
<div id="scrollmenu" class="sm">menu</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="main.js"></script>
<script src="anime.min.js"></script>
<script src="footerFixed.js"></script>
<script type="text/javascript">
    //let name = 
    let code = <?php echo $k_code; ?>;
    let name = <?php echo $name; ?>;
    let g_iine = <?php echo $g_iine; ?>;
</script>
<script src="sub.js"></script>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

参考サイト②を見てみるとカウントには2パターンあり表示部分をAjaxで書かないとリアルタイムでの反映は不可能なようです。

補足

※参考サイト
①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

Comments

[utm.]

そもそもいいね数をリアルタイムに更新する必要がない

[homepage-site]

utm.さん回答ありがとうございます。
無理にリアルタイムで更新する必要はないということで理解致しました。

Answer 1

状況がわかりませんが、ログイン制ではない掲示板自体がだめだし、匿名のいいね機能なんて絶対だめでしょう。IPアドレスではユーザーを特定できないです

まずはログイン制にして、ユーザーIDと質問IDの紐づけをRDBで管理します。そのうえで表示されている質問一覧のIDを定期的にAPIに投げれば更新されたいいね数は取得できるはずです。（サーバー側がそういうAPIを用意していればという前提ですが）

Comments

[homepage-site]

A.yambejpさん回答ありがとうございます。
7～10日で削除される掲示板を作成しているのですが、匿名のいいね機能は何故駄目なのでしょうか…？
理由を教えて頂けると助かります。

[yambejp]

＞匿名のいいね機能は何故駄目

「ポケモンコイル祭り」「イナズマイレブン五条事件」などで検索するとよいでしょう

[homepage-site]

A.yambejpさん回答ありがとうございます。
匿名だといたずらでいいね数が上下するからということでしょうか？
期間が短く質問が多ければ分散されると考えております。
ユーザーを特定する方法として、UUID を選択したのは膨大なパターンから将来に渡って重複しないのではないかと思いました。

[yambejp]

＞匿名だといたずらでいいね数が上下するからということでしょうか？

言い換えれば「いいね」の機能が「いいね」に利用されないということですから、目的の通り動作しないのであれば「いらない機能」ということです。むしろこの機能の実装ならUUIDと紐づける必要もなく、発言IDに対して「いいね」を押すたびに無条件にインクリメントさせればよいと思います

ログイン制にしない意図がわからないのでこれ以上は助言しかねます。まあどうしてもというならその運用でも構わないのではないでしょうか？（私が困るわけではないので）

[homepage-site]

A.yambejpさん回答ありがとうございます。
ログイン制にしない意図としては、属人性の軽減、Q＆Aの敷居を下げることになります。

[tezcello]

> 属人性の軽減
回答の信用・信頼も下落すると思います。

> Q＆Aの敷居を下げる
質問・回答の質も下がり、スパム等の迷惑投稿も増えるでしょう。

[yambejp]

ちょっと認識がちがったのですが・・・
質問・回答はログイン制なんですよね？（いいねだけが自由に押せるのかなと）
もしそちらがフリーで書き込める仕様でしたら、問題発言があったとき個人の特定ができないですが大丈夫でしょうか？裁判で訴えらて億単位の賠償請求がきたとき、ひろゆきみたいに海外に逃げるつもりでしょうか？

[homepage-site]

tezcelloさん回答ありがとうございます。
回答の信用・信頼の低下は下落してしまいそうですね、数で補えると考えたのですが…
最近のヤフー知恵袋を見ると回答の数が減っているように見えて、その要因がログイン制ではないかと考えました。
質問・回答の質はあまり変わらないのではないかと思っております。
ログイン制にしているサイトであっても必ずしも質が高いQ＆Aになっているようには見えませんでした。

[homepage-site]

yambejpさん回答ありがとうございます。
フリーで書き込める仕様にしております。
IPアドレスをデータベースに保存することで個人の特定は可能だと考えているのですが、それでは危険でしょうか？
ライブドアブログのような形でQ&A掲示板を運営できるのではないかと考えたのですが…

[yambejp]

＞IPアドレスをデータベースに保存することで個人の特定

IPアドレスは偽装やなりすましができますし、串を通せば個人情報としてつかえないと思いますが・・・
逆に複数端末からアクセスしたとき「同じ人間」の書き込みと判断できないですよね

[tezcello]

> 数で補えると考えた
集まるのがゴミばかりでは補いようがありません

> ログイン制にしているサイトであっても必ずしも質が高いQ＆Aになっているようには見えません
ログイン制にしないともっとトンデモないことになるでしょう
まともな（＝信用・信頼できる）回答者であるかの判断も出来なくなるでしょうし

> 最近のヤフー知恵袋を見ると回答の数が減っているように見えて、その要因がログイン制ではないか
縛りの緩いログイン制のおかげで低品位の質問が連発され、回答側が疲弊したからでしょう。
また、SNSで得られる程度の情報で満足する質問者は、知恵袋で質問なんてしないし、ggrkなんて回答を浴びせられて寄り付かなくなるって循環では？

[homepage-site]

yambejpさん回答ありがとうございます。
IPアドレスで特定可能だと考えておりました…
IPアドレスは偽装やなりすましというのはVPNで可能だと思うのですが、VPNをブロックする方法では不足しているのでしょうか？
またログイン制でメールアドレスを入力させるのは個人情報を特定するためということでしょうか？

※ 参考サイト
https://qiita.com/mf_Mii/items/b0aec1215b7a694e856c

[homepage-site]

tezcelloさん回答ありがとうございます。
質問内容に制限を設けなかったから品位の低い回答が増えて回答側が疲弊したという考えはありませんでした。
回答の母数をあげるためにログイン制を無くすことを思いついたのですが色々と問題がありそうですね…

[yambejp]

>ログイン制でメールアドレスを入力させるのは個人情報を特定するためということでしょうか？

あれ？私メールアドレスをキーにするっていいましたっけ？
基本は登録メールにワンタイムパスワードをつけて送付し、クリックすることでそのメールアドレスの利用者だと特定するという流れではありますが、メールアドレスとは別にユーザーIDで管理するほうが確実です。
きちんとしたサービスを提供するのであれば携帯をつかった二段階認証などが必要になりますが、どこまで精度を担保したいのかによります。（二段階認証をする場合はユーザーのハードルが若干高くなって敬遠される可能性はあります）

とはいえ、メールアドレスを預かる事になった場合は個人情報ですので、悪質なハッカーにユーザー情報を抜かれないように厳密な管理が必要になりますので、サービス提供の際にはそれなりのスキルがついてからの対応になるでしょう。

[homepage-site]

yambejpさんアドバイスありがとうございます。
IPアドレスの偽装やなりすましについて1点お聞きしたいのですが、VPNをブロックする方法では防ぐことは難しいのでしょうか？
複数端末からアクセスした場合も考えてみたのですが、正確なIPアドレスを取得できれば特定も可能ではないかと思いました。

※ 参考サイト
https://qiita.com/mf_Mii/items/b0aec1215b7a694e856c

https://michisugara.jp/proxy-vpn-blocker-plugin/

[shiketa]

あなたが使用しているデバイス、スマホでもPCでもいいので、そのIPアドレスを確認してみましょう。
10.x.x.xとか172.x.x.xとか192.168.x.xのプライベートIPアドレスであることが多いでしょう。
ここからあなたのサイトにアクセスしたとき、あなたのサイトが取得できるのはこのプライベートIPアドレスではなく、プロバイダが用意したプロキシ(串)のグローバルIPアドレスです。串の下にはン十万ン百万単位のデバイスがあることでしょう。
この状態で、IPアドレスから個人を特定できますか？
プロバイダはどのデバイスにどのプライベートIPアドレスを割り当てたのかを管理しているとは思いますが、それをあなたには教えてくれないでしょう。きっと。

[yambejp]

>IPアドレスの偽装やなりすましについて1点お聞きしたい

たとえばクローラーを使い
wget -e use_proxy=yes -e http_proxy=http://プロクシサーバー:ポート http://example.com
とするとexample.comで得られるIPアドレスはプロクシサーバーのものになります

よくドラマである「海外の複数のプロクシを経由して接続されていてユーザーの特定できません」という状態です

[tezcello]

> 回答の母数をあげるためにログイン制を無くす
ゴミが容易に投稿できる状況は、誰にもメリットがありません...
母数が増えても有益な情報である確率が下がるだけだと思います。

> 正確なIPアドレスを取得できれば特定も可能
ケータイ電話からのアクセスは、特定範囲のIPを大勢の端末で共有しているのでは？
＿＿流石にIPv6に完全移行は出来ていないんじゃない？

> メールアドレスを預かる事になった場合は個人情報
確か、アクセス履歴（投稿日時等も含む）とか、投稿内容とかも個人データだったかと。
メールアドレスだけが保護しなければいけないモノでは無く、その周辺も保護されるべきモノだったと思います。
個人情報保護法については、一般によく知られている情報には誤りや不正確が多いらしいので、かなりの用心が必要でしょう。
＿＿チャンとした勉強が必要!!

[homepage-site]

shiketaさん回答ありがとうございます。
プライベートIPアドレスから辿れると考えていたのですが甘かったようです…

[homepage-site]

yambejpさん回答ありがとうございます。
複数のプロクシを経由していても追跡することが可能だと考えていたのですが特定することは難しいと理解出来ました。
何度もお聞きしてしまい申し訳ありません。

[homepage-site]

tezcelloさん回答ありがとうございます。
IPv6のことが頭から消えておりました確かにIPv4の場合もありますね。
個人のデータが流出しないよう勉強致します。

[yambejp]

>プロクシを経由していても追跡することが可能

海外のプロクシは事件性があっても捜査に協力はしてくれません（協力義務はない）し、ログが非公開だったりログ自体を保管していない（保管も義務ではない）場合、多段で串を噛ませばかなり追跡が難しいでしょう。絶対に不可能かと言われれば技術的にはたぶんないことはないのでしょうけど、それを解析できるスキルが質問者さんにあるかといえば相当厳しいように見受けられますが？

[68user]

匿名でのいいねを許容するかどうかはサービス提供者がメリットデメリットを考えた上で決めることであって、回答者がいいだのダメだの決める話ではないです (意見ならご自由にどうぞですが)。実際ヤフコメやガールズちゃんねるなど匿名でいいねできるサービスがありますし。

サイト運営者の立場としては
　・いいねを押した IPアドレスが proxy や NAT 経由であることは正確には判別できません
　　(proxy がヘッダを渡してくるか次第)
　・いいねを押した IPアドレスが VPN 経由であることは普通は判別できません
　　(VPN サービスが公開している IP アドレス帯と突き合わせるしかないのでは?)
です。押された回数分素直にカウントアップするもよし、IP アドレス重複時はカウントアップしなもよし、カウントアップしない場合でもあたかもカウントアップされたかのように表示するもよし、CookieやLocalStorageで管理するもよしです。

[homepage-site]

A.yambejpさん回答ありがとうございます。
IPアドレスというものを信用しすぎておりました、もう一度考え直してみます。

[yambejp]

普通にログイン制にすればいいので要検討ですね
知識やスキルがおいつくならSNS認証もありですが、SNS側が急にサービスを停止するリスクもありますのでご注意ください

[homepage-site]

A.68userさん回答ありがとうございます。
もう一度セキュリティを再考していいねぼたんの実装を試みます。

[homepage-site]

A.yambejpさん回答ありがとうございます。
アドバイス頂いた登録メールにワンタイムパスワードをつけて送付し、リンクをクリックするという形で進めてみます。
以前お問合せページを作成した際にそちらの方法で作成しているので、同じ作りで考えてみます。

[otn]

> 回答の信用・信頼の低下は下落してしまいそうですね、数で補えると考えたのですが…
目的が、
・サイトアクセス数を稼ぎたい（広告目的など）
・質の高いQAサイトを提供したい
のどちらに近いかで、考えることも違ってくるかと思います。理由は他の方の書いている通り。

匿名掲示板でも、「同好の士が集まる」的な場所だと質の高い回答が得られたりする所もあった気がしますが、そういう場所は意図的に作るのは難しい。
「あなた自身が興味も知識もある特定分野」に限定したQAサイトを作り、あなたが質の高い回答を繰り返して検索にヒットするようになれば、知識のある他の人も集まってきて、「ここで聞けば何とかなる」と思って知識の無い人も参加するようになるというのはあり得るかと思います。それがご希望なのかどうか分かりませんが。

IPアドレスでのチェックは自分でやるならホワイトリスト方式でしょうか。意味あるかどうか不明ですが。

「その投稿がされた正確な時刻とアクセス元IPアドレス」は一定期間の保存が義務づけられており、犯罪行為があった場合は、警察にその情報を提供すれば、責任を果たしたことになるはずです。
その期間内なのに記録が残ってない場合、意図的であると判断されると罰を受ける可能性もありますね。意図的でないことが証明できれば刑事罰はないでしょう。民事は分からない。
その先は、国内で合法的に行っているプロバイダーであれば、彼らは警察から「この日時でこのIPアドレスでアクセスしたのはどこの誰だ？」と聞かれたら情報提供義務があるので、そこは自分でプロバイダーと交渉する必要は無いです。「刑事事件として扱ってもらうようにする」必要はありますが。
で、その記録したIPアドレスが海外のProxyやVPNで警察がその先を追えない場合に責任がどうなるか？？法律でProxyやVPN経由でないかのチェックまでは求められていないと思うので刑事責任はおそらく大丈夫だと思いますが、民事はどうか。私が知らないだけかも知れませんが、おそらくこういうケースでの民事の判例はまだない。