WordPressの質問（q10263921）の続

質問

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.33

dell_OK · ベストアンサー

ファイル名にUUIDを付加しなかったのには、と言うか質問IDを使いたかったのには、ファイルを探す時に楽なのもありました。
サーバーの中のファイルを目で見て探したりすることはないかも知れませんが、ファイル名に質問IDがあればどの質問のファイルなのかがわかりやすいです。
UUIDになると、まず質問データのUUIDを確認して、それからその長い長い文字列をもつファイル名を探すことになります。

前回の回答で、
ファイル名は「{質問UUID}_{ファイル番号}.{拡張子}」になると言いましたが、
PHPでUUIDを生成する方法でしたら「{UUID}.{拡張子}」にもできます。
アップロードファイルごとにUUIDが別々なのでファイル番号で重複をさける必要もなくなります。

お礼

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

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

補足

Q.UUIDになると、まず質問データのUUIDを確認して、それからその長い長い文字列をもつファイル名を探すことになります。

A.アドバイスありがとうございます、コードを見返してみたところ理解出来ました。
UUID を使用して動画をランダムで表示させる場合、データベースから動画がアップロードされた投稿のみを抽出する際に時間がかかるという事ですね。

dell_ok さんの前回の回答でMySQLではなくPHPでUUIDを生成する方法をおすすめされたのは速度を少しでも上げられるという事でしょうか？
データを追加する前にUUIDを生成して、ファイル名が先に決めることが可能であれば、本来のデータベースから PHP に変更しているため速くなりそうなイメージです。

PHPの標準でUUIDを生成する関数についても調べてみたのですが、将来的な保守を考えると SQL を使う方が良さそうです。
回答No.32 で教えて頂いた {質問UUID}_{ファイル番号}.{拡張子} の形でコード修正してみたのですが、おかしなところなどありますでしょうか？

functions.phpの141行目に質問UUIDを読み込んで取得するコードを追加いたしました
bbs_que_list.phpの10行目に質問IDを追加するコードをコメントアウトいたしました
bbs_que_list.phpの19行目に質問UUIDを追加いたしました

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

※UUIDv4について
https://rensaba-programer.jp/2023/09/04/php%E3%81%A7uuidv4%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89/

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

質問掲示板から動画のみで投稿したところそれが無限スクロールでも表示されております。
以前までは投稿に画像がない場合ダミー画像を表示していたので、functions.php にコードを追加した際に問題が発生しているようです。
原因となるコードは分かりますでしょうか？

※旧コード
https://wandbox.org/permlink/M4yGxrYf0PWv5L9g

※質問一覧表示画面
https://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.32

dell_OK

・データ型をvarcharにした理由などありますでしょうか？

ファイル名は文字列ですのでvarcharにしました。
bigintでは数値しか保存できません。

・uuid をアップロードファイルにも使用するというのはカラムに個別に設定するという意味ではなかったのでしょうか？

UUIDを付加するかどうかについてはお返事がなかったのでしませんでした。
ファイル名「{質問ID}_{ファイル番号}.{拡張子}」から質問IDがばれてしまっても、
誰からも何もされないと思ったからです。

UUIDを付加するとしたら「{質問UUID}_{ファイル番号}.{拡張子}」になると思います。
質問UUID（unique_id）はMySQLに任せたデフォルト値で uuid() 関数によって生成しています。
質問IDは　$wpdb->insert_id　として自動的に取得できているのですぐに使えますが、
質問UUIDは一度そのデータを読み込んで取得する必要があります。
イメージ的にはこのようなＳＱＬ文を実行します。
　SELECT unique_id FROM sortable WHERE ID = {$wpdb->insert_id}
このひと手間が増えるので、しなかったのもあります。

他には、MySQLではなくPHPでUUIDを生成する方法もあります。
なぜそうしてないのか覚えていませんが、PHPには標準でUUIDを生成する関数がなかったからかも知れません。
標準ではないので自作の関数を作って生成できます。
自作といっても探せばすぐにみつかるとは思います。
そうした場合、データを追加する前にUUIDを生成して、ファイル名が先に決まりますので、
後からUPDATEしなくても、INSERTだけですむようになります。

補足

Q.ファイル名は文字列ですのでvarcharにしました。
bigintでは数値しか保存できません。

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

Q.UUIDを付加するかどうかについてはお返事がなかったのでしませんでした。
ファイル名「{質問ID}_{ファイル番号}.{拡張子}」から質問IDがばれてしまっても、
誰からも何もされないと思ったからです。

A.回答ありがとうございます、以下のサイトを見て予測しやすい URL は危険ではないかと思いました。
質問一覧表示画面は URL が予測しやすいわけではないと思うので問題ないと思うのですが、ファイル URL も攻撃される可能性があり UUID を使うように推奨された可能性が高そうです。

※参考サイト
https://zenn.dev/praha/articles/3c84e3818891c3

Q.そうした場合、データを追加する前にUUIDを生成して、ファイル名が先に決まりますので、
後からUPDATEしなくても、INSERTだけですむようになります。

A.回答ありがとうございます、保存するファイル名にUUIDを付与するなどランダムで推測困難なファイル名にする場合はこちらの方法が一番良いようですね…

回答No.31

dell_OK

・原因として考えられることはありますでしょうか？

テーブルの構成が原因です。
さきほど添付した画像のようにテーブルを変更してみてください。

補足

回答ありがとうございます、テーブルを修正してみたところ表示することが出来ました。

回答No.30

dell_OK

・attach1,attach2,attach3,usericon の値を更新するコードを追加したのは、$i と $n の値をカウントするように変更したからでしょうか？

いいえ。
ファイル名には質問ＩＤが含まれています。
質問ＩＤはデータベースにデータを追加（insert）しないと生成されません。
なので追加時にファイル名を保存できないのです。
なので後から更新（update）で保存しています。

・$filenames[0], $filenames[1], $filenames[2], $filenames[3] としているのは下記のように出力する為でしょうか？

質問の意図がわからないので返答に困りますが、たぶん、いいえ、です。
それぞれのファイルのファイル名がそれぞれの配列要素に入っているからです。
アップロードファイル１：$filenames[0]
アップロードファイル２：$filenames[1]
アップロードファイル３：$filenames[2]
ユーザーアイコン　　　：$filenames[3]

補足

Q.質問ＩＤはデータベースにデータを追加（insert）しないと生成されません。
なので追加時にファイル名を保存できないのです。
なので後から更新（update）で保存しています。

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

Q.質問の意図がわからないので返答に困りますが、たぶん、いいえ、です。
それぞれのファイルのファイル名がそれぞれの配列要素に入っているからです。

A.回答ありがとうございます。
1点気になることがあるのですが、uuid をアップロードファイルにも使用するというのはカラムに個別に設定するという意味ではなかったのでしょうか？

回答No.29

dell_OK

・データベースは225から登録されておりますこれで問題ないのでしょうか？

問題ありません。
データを削除（delete）されたのですね。
「空にする」（truncate）でならIDは1に戻ります。
気になるようでしたらこちらを試してみてください。

添付画像を忘れてました。
データ型はvarcharです。

補足

回答ありがとうございます。
データ型をvarcharにした理由などありますでしょうか？
IDと同様にbigintで考えておりました。

回答No.28

dell_OK

スライダーの処理はこうです。

bbs_que_list.php
－－－－
<?php
/*
Template Name: que_list
固定ページ: 質問一覧画面
*/
get_header();
$sql = "SELECT * FROM sortable WHERE attach1 LIKE '%.mp4' ORDER BY RAND() LIMIT 5";
$query = $wpdb->prepare($sql);
$rows = $wpdb->get_results($query);
$upload_dir = wp_upload_dir();
$carousel_list = [];
$indicator_list = [];
foreach ($rows as $row) {
$carousel_list[] = '
<div class="carousel-container">
<div class="carousel-video-area" style="display: inline-block;">
<a href="'.home_url('質問みる?'.$row->unique_id).'">
<div class="carousel-video-wrap">
<video class="carousel-video-streaming" src="'.$upload_dir['baseurl'].'/attach/'.$row->attach1.'#t=0.1" type="video/mp4" autoplay muted loop></video>
</div>
<div class="carousel-video-title">'.$row->title.'</div>
</a>
</div>
</div>';
$indicator_list[] = '<li class="list"></li>';
}
?>
<div id="feed4-layout">
<div class="inline-player">
<!-- スライドの外枠 -->
<div class="carousel-area">
<!-- スライド（コンテンツ） -->
<div id="carousel" class="carousel">
<?php echo implode('', $carousel_list); ?>
</div>
<!-- 左右のボタン -->
<span id="prev" class="prev"></span>
<span id="next" class="next"></span>
<!-- インジケーター -->
<ul class="indicator" id="indicator">
<?php echo implode('', $indicator_list); ?>
</ul>
</div>
</div>
<div class="footer-test">
<p>© All rights reserved by dmmwebcampmedia.</p>
</div>
</div>
－－－－

補足

修正ありがとうございます。
下記コードでアップロードファイル1のみ SQL を5件実行させるのですね勉強になりました。

$sql = "SELECT * FROM sortable WHERE attach1 LIKE '%.mp4' ORDER BY RAND() LIMIT 5";

動画付きの質問を投稿してみたのですが表示されていない状態です。
SQL の設定に問題があるような気がするのですが、原因として考えられることはありますでしょうか？

※質問一覧表示画面
https://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/

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

回答No.27

dell_OK

過去の質問についてはファイル名が保存されていないので、すべてダミー画像になります。
新しく投稿した質問についてのみ対応なので、古い質問とファイルは削除してしまった方がいいかも知れません。

補足

アドバイスありがとうございます。
削除して新規で質問を投稿して試してみました。

回答No.26

dell_OK

質問一覧の処理はこうなります。

functions.php
－－－－
function bbs_que_list_items()
{
global $wpdb;
$count = $_POST['count'];
$sql = 'SELECT * FROM sortable LIMIT %d,10';
$query = $wpdb->prepare($sql, $count);
$rows = $wpdb->get_results($query);
$result = [];
$result['items'] = [];
$upload_dir = wp_upload_dir();
foreach ($rows as $row) {
if (empty($row->attach1)) {
$url = '';
$type = '';
} else {
$info = pathinfo($row->attach1);
$url = $upload_dir['baseurl'].'/attach/'.$info['basename'];
$ext = $info['extension'];
switch ($ext) {
case 'jpeg':
case 'png':
$type = 'img';
break;
case 'mp4':
$type = 'video';
break;
case 'pdf':
$type = 'iframe';
break;
default:
break;
}
}
$result['items'][] = ['title' => $row->title, 'img1' => $url, 'type' => $type, 'url' => home_url('質問みる?'.$row->unique_id)];
}
echo json_encode($result);
exit;
}
－－－－

globの処理をなくして、データベースに保存したファイル名　$row->attach1　を使うようにしています。

補足

修正ありがとうございます。
試してみたところ画像を3件送信したのですがどちらもダミー画像が表示されております…
データベースに保存したファイル名を使うというのは attach1
attach2
attach3
usericon
のカラムにデフォルト値 uuid() を設定するという事でしょうか？

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

回答No.25

dell_OK

ファイル名を保存するにあたって、テーブル sortabe に以下のカラムを追加してください。
attach1
attach2
attach3
usericon
添付画像のようになります。

ファイル名の書式はいままでどおり　{質問ID}_{ファイル番号}.{拡張子}　ですが、
ファイル番号のつけ方を変えたいと思います。
いままでは、以下のような番号を付けていましたが、
　アップロードファイル１：0
　アップロードファイル２：1
　アップロードファイル３：2
　ユーザーアイコン　　　：3
これからは、以下のようにしたいと思います。
　アップロードファイル１：1
　アップロードファイル２：2
　アップロードファイル３：3
　ユーザーアイコン　　　：usericon
この方がわかりやすいかと思ってのことです。

ファイル名を保存する処理はこうです。
functions.php
－－－－
function bbs_quest_confirm()
{
// 新しいセッションを開始、あるいは既存のセッションを再開する
session_start();
// 何もせず終わる処理
if (empty($_SESSION['question']) || empty($_SESSION['title']) || empty($_SESSION['stamp'])) {
exit;
}
// $wpdbでSQLを実行
global $wpdb;
// どのようなデータをどのテーブルに登録するか
$sql = 'INSERT INTO sortable(question,namae,title,stamp,ip) VALUES(%s,%s,%s,%d,%s)';
// セッション変数に登録
$question = $_SESSION['question'];
$namae = $_SESSION['namae'];
$title = $_SESSION['title'];
$stamp = $_SESSION['stamp'];
// ipアドレスを取得する
$ip = $_SERVER['REMOTE_ADDR'];
$query = $wpdb->prepare($sql, $question, $namae, $title, $stamp, $ip);
// プリペアードステートメントを用意してから、下記のようにresultsで値を取得
$query_result = $wpdb->query($query);
// アップロードディレクトリ（パス名）を取得する
$upload_dir = wp_upload_dir();
// 『filenames』を記述して配列名を記述し、それに『[]』を代入すればそれは配列として扱われます
$filenames = [];
foreach ($_SESSION['attach']['tmp_name'] as $i => $tmp_name) {
if (empty($tmp_name)) {
$filenames[$i] = '';
} else {
$type = explode('/', $_SESSION['attach']['type'][$i]);
$ext = $type[1];
if (3 == $i) {
$n = 'usericon';
} else {
$n = $i + 1;
}
$filenames[$i] = "{$wpdb->insert_id}_{$n}.{$ext}";
$attach_path = $upload_dir['basedir'].'/attach/'.$filenames[$i];
// 文字列をファイルに書き込む、文字列データを書き込むファイル名を指定
file_put_contents($attach_path, $_SESSION['attach']['data'][$i]);
}
}
$result = [];
// 条件式が成り立った場合処理を実行
if (false === $query_result) {
$result['error'] = '登録できませんでした';
// 条件式が成り立たなければ処理を実行
} else {
$sql = 'UPDATE sortable SET attach1=%s,attach2=%s,attach3=%s,usericon=%s WHERE ID=%d';
$query = $wpdb->prepare($sql, $filenames[0], $filenames[1], $filenames[2], $filenames[3], $wpdb->insert_id);
$wpdb->query($query);
$result['error'] = '';
}
header('Content-type: application/json; charset=UTF-8');
echo json_encode($result);
exit;
}
－－－－

前は $i をファイル名につけていましたが、
$filenames[$i] = "{$wpdb->insert_id}_{$i}.{$ext}";
以下のように変更しています。
if (3 == $i) {
$n = 'usericon';
} else {
$n = $i + 1;
}
$filenames[$i] = "{$wpdb->insert_id}_{$n}.{$ext}";

これで質問を投稿してみて、ファイル名がこうなるか確認してみてください。

補足

修正ありがとうございます。過去の投稿をすべて削除して新規で質問掲示板から投稿してみたのですが、データベースは225から登録されておりますこれで問題ないのでしょうか？
テーブルの構造について悩んでいるのですが、ID と同じようにタイプ bigint(20) で、その他 AUTO_INCREMENT に変更する形で良いでしょうか？

※データベース登録画面
https://imgur.com/IeCjcB9.png
https://imgur.com/CEBwLQu.png

※テーブル構造
https://imgur.com/J2ZNP88.png
https://imgur.com/EoIjW9P.png

下記コードについて質問があるのですが、attach1,attach2,attach3,usericon の値を更新するコードを追加したのは、$i と $n の値をカウントするように変更したからでしょうか？

if (3 == $i) {
$n = 'usericon';
} else {
$n = $i + 1;
}
$filenames[$i] = "{$wpdb->insert_id}_{$n}.{$ext}";

$sql = 'UPDATE sortable SET attach1=%s,attach2=%s,attach3=%s,usericon=%s WHERE ID=%d';
$result['error'] = '';
$query = $wpdb->prepare($sql, $filenames[0], $filenames[1], $filenames[2], $filenames[3], $wpdb->insert_id);

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

$filenames[0], $filenames[1], $filenames[2], $filenames[3] としているのは下記のように出力する為でしょうか？

アップロードファイル１：1
アップロードファイル２：2
アップロードファイル３：3
ユーザーアイコン　　　：usericon

回答No.24

dell_OK

アドバイスにあった、ファイル名にＵＵＩＤを付加する件についてはどうされますか。
質問表示画面のＵＲＬにはＵＵＩＤを付加しているので、そのＵＵＩＤを使うようにもできなくはありません。
質問ＩＤを隠すためにＵＵＩＤにしたと思いますので、画像ファイルや動画ファイルも質問ＩＤではなくＵＵＩＤの方がいいような気はします。

質問表示画面のＵＲＬをＵＵＩＤにした理由を忘れてしまいましたが、ＵＵＩＤのおかげでＵＲＬは予測不可能レベルになりはしたものの、あてずっぽうにアクセスされないわけではないので、なんだかメリットを忘れてしまいました。

補足

A.解説ありがとうございます。
質問表示画面のＵＲＬをＵＵＩＤにした理由について調べなおしてみたところ、URLが予測しやすいと攻撃しやすいからのようです。

URLを連番にした場合、攻撃者から予測しやすいのではないかという意見がありました。

※該当質問
https://okwave.jp/qa/q10177232_3.html#answers_contents

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

動画5件横スクロールについてのコードを実装することができました。
タイトルを表示する際に19文字以降は…で省略したいと考えております。

※該当ページ
https://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/

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

回答No.23

dell_OK

・こちらの方法のデメリットが分からないのですが、どのようなことになるのでしょうか？

デメリットと言うと語弊があったかも知れません。
あくまで対比ですが、ファイル名を保存するようにした場合、ファイルシステムにアクセスしてファイルを探す必要がなくなるメリットがあります。
一覧表示のためにファイルシステムにアクセスしている処理はこれです。
　$files = glob($pattern);
この glob は少々負荷がかかると聞いたような覚えがあります。
負荷のことがないとしても、質問一覧表示やスライダー部そしてこれから作られるであろう質問表示画面においても、この glob を使うことなく、保存したファイル名をそのままＵＲＬに使える方がいいような気がします。

補足

回答ありがとうございます。
どちらの方が良いか質問としてお聞きしてみたところ、基本的には保存するファイル名にUUIDを付与して、それを保存するとのことでした。

データの整合性についてもアドバイス頂いたのですが、古い質問を削除する処理で関連するファイルの削除も実装する又は質問のページなどにアクセスされたときに関連ファイルが無かったら、そのときに質問のレコードを削除して４０４ページを表示する、もしくはcronで質問に紐づくファイルがない場合に質問自体を削除するバッチを動かすといった事で不整合データを削除できるようです。

上記の事からも dell_ok さんがおっしゃられるように保存したファイル名をそのままＵＲＬに使える方が良さそうです。