WordPressの質問（q10255357）の続

質問

クライアント側の3番についてお聞きしたいのですが、1週間で質問をリセットする場合こちらは必要なくなるのでしょうか？
データベースの容量から考えて定期的に質問を削除するように考えております。
4番の画像ファイルというのは画像、動画、PDF それぞれにあったタグに Javascript で変更するということでしょうか？

サーバー側のコードは bbs_que_list.php を想定しております。

※最新コード
https://wandbox.org/permlink/a5reYrjPHQnrGXXi

回答No.36

dell_OK · ベストアンサー

・見落としておりました申し訳ありません。

当時のfunctions.phpをそのまま使ってもだめです。
途中で、以下の変更が入りましたよね。
ここは変更しておいてください。
$result['items'][] = ['title' => $row->title, 'img1' => $url, 'type' => $type, 'url' => home_url('質問みる?'.$row->unique_id)];

・console に書いてあるエラーの読み方が分からず教えて頂きたいです。

どのようなエラーが出ていますか。

お礼

こちらが最新の回答になります。
質問の期限が切れてしまいました、下記のリンクからアドバイスよろしくお願い致します。

https://okwave.jp/qa/q10271965.html

補足

A.回答ありがとうございます。
過去の回答は見たつもりだったのですが変更点が抜けておりました申し訳ありません…
Uncaught ReferenceError: group_id is not defined　と書かれておりエラー文を調べようと思ったのですが、該当箇所が分からずどこを修正すべきなのか分かりませんでした。

※表示されているエラー文
➀jQuery.Deferred exception: group_id is not defined ReferenceError: group_id is not defined
at add (http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e8%b3%aa%e5%95%8f%e4%b8%80%e8%a6%a7%e8%a1%a8%e7%a4%ba%e7%94%bb%e9%9d%a2/:130:32)
at HTMLDocument.<anonymous> (http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e8%b3%aa%e5%95%8f%e4%b8%80%e8%a6%a7%e8%a1%a8%e7%a4%ba%e7%94%bb%e9%9d%a2/:118:9)
at e (http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js?ver=6.5.5:2:30005)
at t (http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js?ver=6.5.5:2:30307) undefined

➁Uncaught ReferenceError: group_id is not defined
at add (雑談掲示板　質問一覧表示画面/:130:32)
at HTMLDocument.<anonymous> (雑談掲示板　質問一覧表示画面/:118:9)
at e (jquery.min.js?ver=6.5.5:2:30005)
at t (jquery.min.js?ver=6.5.5:2:30307)

※該当ページ
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e8%b3%aa%e5%95%8f%e4%b8%80%e8%a6%a7%e8%a1%a8%e7%a4%ba%e7%94%bb%e9%9d%a2/

回答No.5

dell_OK

・cron で行う場合もコードは同じで良いのでしょうか？

RSS のコードがどうなっているかわからないのですが、
テーブル名を変更するだけかもしれないですし、
その他の変更が必要なのかもしれないです。

回答No.4

dell_OK

fetch でアクセスする url は実行環境に合わせる必要があるので、
以下のようにしておいてくださいね。
－－－－
fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt)
－－－－

補足

アドバイスありがとうございます。
試してみたのですが SQL と Javascript が連携されておらず無限スクロールになっておりませんでした。
参考サイトを見てコードを書きたいのですが、try catch で書かれており $wpdb に適応する方法が分かりません…
PHP で JSON形式で出力して非同期通信で dataType: "json", で受け取るようにしたい場合どのように書けばよいでしょうか？

※最新コード（bbs_que_list.php）
https://wandbox.org/permlink/9nSZHq6sJm7WkHfp

※参考サイト
https://webcake.stars.ne.jp/jquery-ajax-php-json-sample.html

回答No.3

dell_OK

・全件削除 SQL は RSS の際に作成してコードを参考にしております。
データベースに接続するのが一覧表示画面の bbs_que_list.php なのでそこに追加すると思うのですが、

RSS では cron を使ったような気がしますが、
定期的な処理はクライアントからの要求ではなく、
サーバーのスケジュールで行なった方がいいと思います。

補足

アドバイスありがとうございます。
cron で行う場合もコードは同じで良いのでしょうか？

回答No.2

dell_OK

・4番の画像ファイルというのは画像、動画、PDF それぞれにあったタグに Javascript で変更するということでしょうか？

そうです。
表示するファイルはすでにアップロードされたもの、つまり、安全である前提なので、ファイルの拡張子でそれぞれにあったタグにしていいように思います。

お礼

こちらが最新の回答になります。
dell_ok さんから頂いたアドバイスを元に複数のコードを考えてみました。

1,Javascript でイベントを書く
2,全件削除 SQL
3,現在のデータベースの数、表示件数の保持

1,Javascript でイベントを書くコードは jQueary を参考にしております。
※参考サイト
https://pg.kdtk.net/2184
https://qiita.com/ringtail003/items/00d40b4b586d33b0737a
https://gray-code.com/javascript/get-scroll-amount/

<script>
　　// スクロールが発生した時のイベント
$(window).scroll(function() {
// ドキュメント全体の高さを取得
const document_h = document.documentElement.scrollHeight;
//　表示行きの高さ + スクロールした距離
const window_h = window.innerHeight + window.scrollY;
//　ドキュメント全体の高さ - 表示行きの高さ + スクロールした距離 / ドキュメント全体の高さ
const scroll_pos = (document_h - window_h) / document_h;
// 画面最下部にスクロールされている場合
if (scroll_pos <= 1) {
// ajaxコンテンツ追加処理
ajax_add_content()
}
});

function ajax_add_content() {
//FormDataオブジェクトのアクションフック
const formData = new FormData();
formData.append("action", "bbs_que_list_items");//formData.append("action", "アクション名");

const opt = {
method: "post",
body: formData
}
fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt)
.then(response => {
return response.json();
})
.then(json => {
for (const item of json.items) {
$content =
"<div>" + item.img1 + "</div>" +
"<div>" + item.title + "</div>";
$("#content").append($content);
}
})
.catch(error => {
console.log(error);
});
};
</script>

2,全件削除 SQL は RSS の際に作成してコードを参考にしております。
データベースに接続するのが一覧表示画面の bbs_que_list.php なのでそこに追加すると思うのですが、表示の際にもデータベースを使用するためどのように書けばよいか分からず最新コードには追加しておりません。

// 古いRSSの削除
function clear_form()// ※接続オブジェクト、RSSテーブル名を受け取る
{
global $wpdb;
$sql = "DELETE FROM sortable WHERE date < %s"; $change_form=date('Y-m-d H:i:s', strtotime('-1 week')); // ※削除対象日付 $query=$wpdb->prepare($sql);
$wpdb->get_results($query);

return $change_form; // 削除対象日付を返す
}

3,現在のデータベースの数、表示件数の保持についてのコードは jQueary と Javascript の両方で探したところ value を設定せずに数を取得できそうなコードを見つけそちらを参考に致しました。

※jQuearyで要素数を取得する方法　
※参考サイト
http://keylopment.com/faq/2137/

<script>
var QA_content = $('.QA_content').length;
$('.QA_content_text .num').text( QA_content );
</script>

※javascript要素数をカウント
※参考サイト
https://mebee.info/2022/09/16/post-78375/

<script>
//子要素だけ取得する場合は「children」を使用
const elm = document.querySelectorAll('QA_list');

const count = elm.children.length;
console.log(count);
</script>

sample.php に dell_ok さんが考えてくださったコードと無限スクロールについてのコードを合体させたものを書いております。
SQL のデータを Javascript で表示させる必要があるのではないかと勘違いしていたようで、非同期通信でデータ取得して出力する場合 SQL との紐付けは必要なさそうですね…

※[php+jQuery+SQL]ajaxでデータ取得・出力する
https://blog.megefeps.info/20230531/phpjquerysqlajax%E3%81%A7%E3%83%87%E3%83%BC%E3%82%BF%E5%8F%96%E5%BE%97%E5%87%BA%E5%8A%9B%E3%81%99%E3%82%8B/

※最新コード
https://wandbox.org/permlink/jJxazaT5iTHUN0Dv

※PHPとajaxで無限スクロール
https://www.agent-grow.com/self20percent/2021/08/03/php%E3%81%A8ajax%E3%81%A7%E7%84%A1%E9%99%90%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F/

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

Javascript で適応するファイルの拡張子の変換について調べてみたのですが、MIMEタイプを調べた後に変換するのかアップロードされて際に拡張子を取得しておくのか分からず止まっております。
拡張子変換が難しいと書かれていた為、迷っております…
アドバイスお願い致します。

※アップロード画像の拡張子変換について
https://qiita.com/TkTkTkTkTako/items/3fcc7ac233f20eccaf03

※JavaScriptでアップロードするファイルの拡張子をチェック
https://blog.ver001.com/javascript-get-extension/

補足

回答ありがとうございます。理解することが出来ました。

回答No.1

dell_OK

・送信というのがボタンを押さないとコンテンツが取得できないのではないかと考えておりました…

なるほど、そういうわけだったんですね。
送信に限ったことではありませんが、何かしらの処理をおこなうタイミングとして、イベントと呼ばれるものがあります。
今回のことでは、この部分ですね。
　$(window).on("scroll", function() {}
jQueryについて理解不足の私でははっきりと言えませんが、
おそらくこれがイベントの登録です。
on("イベント")　と書くようで、イベントが　scroll　なのでスクロールした時になにか処理する、という感じだと思います。
HTMLの要素にイベントを直接書く方法を参考にしてみてください。
https://www.tagindex.com/html_tag/basic/event.html
onイベント　みたいな感じになっているので、jQueryでもon("イベント")という記述になったのではないかと思います。

JavaScript標準でイベントを追加する時には、addEventListener()を使います。
クリアボタンがクリックされたときとかでやってますね。
　clear[i].addEventListener('click',～
書き方としては、
　イベントのもとになる要素.addEventListener("イベント",～

・3番についてお聞きしたいのですが、1週間で質問をリセットする場合こちらは必要なくなるのでしょうか？

リセットと言うのが全件削除と言うのであれば、３の処理が必要ない話しの前に、無限スクロールが無用だと思います。
１週間で質問が何件あるかわかりませんが、スクロールするほどなかったり、スクロールしても３画面分ぐらいだったり、なら最初から全件表示してもいいように思います。
それはそれとして。

「表示件数」と書きましたが、これは現在何件表示しているかです。
それをカウントする必要はあります。
次のデータを何件目から取得すればいいかの基準になるからです。
このカウントを保持していたのが、参考サイトのこれです。
　<input type="hidden" id="count" value=0>
ですが、<input>を使わなくても、変数で保持しておけばいいような気がしています。

補足

Q.　$(window).on("scroll", function() {}
jQueryについて理解不足の私でははっきりと言えませんが、
おそらくこれがイベントの登録です。
onイベント　みたいな感じになっているので、jQueryでもon("イベント")という記述になったのではないかと思います。

A.解説ありがとうございます。
イベント覚えておきます、勉強になりました。

Q.JavaScript標準でイベントを追加する時には、addEventListener()を使います。
クリアボタンがクリックされたときとかでやってますね。
　clear[i].addEventListener('click',～
書き方としては、
　イベントのもとになる要素.addEventListener("イベント",～

A.解説ありがとうございます。window.addEventListener('scroll', handleScroll); のように JavaScript でスクロールしたときに処理を実行することもできるようですね。

・3番についてお聞きしたいのですが、1週間で質問をリセットする場合こちらは必要なくなるのでしょうか？

Q.リセットと言うのが全件削除と言うのであれば、３の処理が必要ない話しの前に、無限スクロールが無用だと思います。
１週間で質問が何件あるかわかりませんが、スクロールするほどなかったり、スクロールしても３画面分ぐらいだったり、なら最初から全件表示してもいいように思います。
それはそれとして。

A.アドバイスありがとうございます。1日で投稿が150～200で想定しているため7日～10日で1050～1400の投稿がくると想定しております。
1列で4件の投稿で1スクロール内に8件を想定しているのですが、1400の場合8で割ると875回分のスクロールが必要です。
上記の事からスクロールはあったほうが良いのではないかと考えております。

Q.「表示件数」と書きましたが、これは現在何件表示しているかです。
それをカウントする必要はあります。
次のデータを何件目から取得すればいいかの基準になるからです。
このカウントを保持していたのが、参考サイトのこれです。
　<input type="hidden" id="count" value=0>
ですが、<input>を使わなくても、変数で保持しておけばいいような気がしています。

A.解説ありがとうございます。理解することが出来ました。