WordPressの質問（q10271965）の続

質問

アップロードファイルを質問UUID_ファイル番号.拡張子で保存するようにコードを変更してみたのですが、間違っているところなどありますでしょうか？

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

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

質問掲示板から動画のみで投稿したところ動画横スクロールと同じものが無限スクロールでも表示されております。

以前までは投稿に画像がない場合ダミー画像を表示していたので、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.26

dell_OK · ベストアンサー

・回答画面の返信機能についてカラムを幾つ追加すべきでしょうか？参考サイトから返信 ID は必要だと考えました。

そうですね。
返信ＩＤのひとつだけでいいと思います。

・質問画面の HTMLクラス名を question で維持したままカラム名のみ text に変更することは可能でしょうか？

可能です。
修正もれがいくつかあるようですので、クラス名以外は text にしてください。

・名前のカラムについて namae としていたのですが、1つだけローマ字なので name の方が良いのではないかとアドバイス頂きこちらも変更すべきではないかと思いました。

そうですね。
その方がいいと思います。

テーブル構成を変更して動作確認してみてください。

お礼

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

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

補足

Q.修正もれがいくつかあるようですので、クラス名以外は text にしてください。

テーブル構成を変更して動作確認してみてください。

A.回答ありがとうございます、下記コードはすべて text にしても良いのでしょうか？

bbs_quest_input.php の101行目 name="question"

bbs_quest_input.php の214行目 var question_value = "";

bbs_quest_input.php の335行目 if (!['name', 'title', 'question'].includes(e.target.id)) return;

bbs_quest_input.php の364行目 question_value = "";

bbs_quest_input.php の390行目 question_value = json.question;

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

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

以前 dell_ok さんに教えて頂いた質問と回答と返信を識別する2択の方法についてどちらが良いかお聞きしたところ➁一択とのことでした。

頂いたアドバイスから考えると返信ＩＤ は必要ない可能性もありそうですが、そうした場合、返信できる深さの上限を浅くまでしか設定できないのではないかと思っております。

dell_ok さんはどう思われますでしょうか？

方法➀
識別用のカラムを持たせる方法で質問を「1」、回答を「2」のように意味付けて識別する。

方法②
親ＩＤが NULL（紐づけられていない）のものを質問として、親ＩＤが設定されているものを回答とする。

理由は下記になります。

回答にさらに回答が付くことがある（返信）ということなので、メッセージはメッセージとして前後関係や親子関係のようにとらえて属性付けして管理していくのが良いです。
前(親)が無いものが原始(root)のメッセージというような考えかたになるでしょう。

上記とは別のアドバイスも頂きました。テーブル構成➁が良く、親IDを利用した自己結合が必要になってくるはずです。

何段階でも返信ができるようにするのであれば、WITH RECURSIVE をつかった結合を利用すると一度にデータを抽出できます。
SQLとしてはややこしくなるので、返信できる深さの上限を決めて複数回のSELECTを行う、でも良いとは思います。

テーブルの例（SQL）

CREATE TABLE messages (
id INT AUTO_INCREMENT PRIMARY KEY,
parent_id INT NULL,
content TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (parent_id) REFERENCES messages(id)
);

INSERT INTO messages (id, parent_id, content) VALUES (1, NULL, 'これは親メッセージです');
INSERT INTO messages (id, parent_id, content) VALUES (2, 1, 'これは親メッセージへの返信です');
INSERT INTO messages (id, parent_id, content) VALUES (3, 1, '親メッセージへの別の返信です');
INSERT INTO messages (id, parent_id, content) VALUES (4, 2, 'これは最初の返信への返信です');
INSERT INTO messages (id, parent_id, content) VALUES (5, NULL, 'これは別の親メッセージです');
INSERT INTO messages (id, parent_id, content) VALUES (6, 5, '2つ目の親メッセージへの返信です');
INSERT INTO messages (id, parent_id, content) VALUES (7, 6, '2つ目の親メッセージの返信への返信です');

_____________________________________________________

テーブルの例（SQL、SELECTの例）

WITH RECURSIVE threads AS (
SELECT
id,
parent_id,
content,
created_at,
id AS top_id,
CAST(id AS CHAR(255)) AS path,
0 AS depth
FROM messages
WHERE parent_id IS NULL

UNION ALL
SELECT
m.id,
m.parent_id,
m.content,
m.created_at,
t.top_id,
CONCAT(t.path, '-', m.id) AS path,
t.depth + 1 AS depth
FROM messages m
INNER JOIN threads t ON m.parent_id = t.id
)
SELECT * FROM threads
ORDER BY top_id DESC, path

回答No.5

dell_OK

共通にしたいところですが、truncateはJavaScriptで作成した関数なので簡単には呼べません。

やるとしたら、PHPでこうした方が簡単です。
－－－－
<div class="carousel-video-title">'.mb_strimwidth($row->title, 0, 20, '…').'</div>
－－－－

補足

回答ありがとうございます。
Javascript だと処理がまとめずらいということでしょうか？何故簡単に呼べないのか教えて頂きたいです…
CSS で動画横スクロールと無限スクロールを横並びにして、回答ページの作成したいと考えております。

回答No.4

dell_OK

・動画や pdf である場合にもダミー画像を表示させるようにしたい

それでは、以下のように変更してください。
functions.php　の　bbs_que_list_items()　の処理です。
－－－－変更前
switch ($ext) {
case 'jpeg':
case 'png':
$type = 'img';
break;
case 'mp4':
$type = 'video';
break;
case 'pdf':
$type = 'iframe';
break;
default:
break;
}
－－－－変更後
switch ($ext) {
case 'jpeg':
case 'png':
$type = 'img';
break;
case 'mp4':
$type = ''; /* ダミー */
break;
case 'pdf':
$type = ''; /* ダミー */
break;
default:
break;
}
－－－－

bbs_que_list.php
－－－－変更前
if (item.type == "img") {
const img = document.createElement("img");
//img.style.height = "150px";
//img.style.width = "260px";
img.src = item.img1;
imageThumbnailCard.appendChild(img);
} else if (item.type == "video") {
const video = document.createElement("video");
//video.style.height = "150px";
//video.style.width = "260px";
video.src = item.img1 + "#t=0.1";
imageThumbnailCard.appendChild(video);
} else if (item.type == "iframe") {
const iframe = document.createElement("iframe");
//iframe.style.height = "150px";
//iframe.style.width = "260px";
iframe.src = item.img1;
imageThumbnailCard.appendChild(iframe);
} else {
const img = document.createElement("img");
//img.style.height = "150px";
//img.style.width = "260px";
img.src = "../wp-content/themes/sample_theme/images/alternative.png";
imageThumbnailCard.appendChild(img);
}
－－－－変更後
const img = document.createElement("img");
if (item.type == "img") {
img.src = item.img1;
} else {
img.src = "../wp-content/themes/sample_theme/images/alternative.png";
}
imageThumbnailCard.appendChild(img);
－－－－

補足

修正ありがとうございます、。
switch ($ext) {} でファイルの種類を分けるコードだと分かっていたのですが、bbs_que_list.php の if (item.type == "img") {} else if 以下略でそれぞれの表示の仕方を指定していることに気が付きませんでした申し訳ありません…

動画5件横スライダーについてお聞きしたいのですが、表示するタイトルの文字数を19桁以降は、"…"で省略したい場合、質問文、質問タイトル、名前と同じ質問掲示板関連のコードとまとめるべきでしょうか？

以前 dell_ok さんから可能な限り処理はまとめたほうが良いとアドバイスを頂いたことがあったので今回は該当するのかアドバイスお願い致します。
コードをまとめる基準として同じ処理を繰り返し書く時だと思うのですが、今回は入力文字数の制限や NG ワード等が必要ないため難しいのではないかと考えております。

※処理をまとめず別途コードを書く場合
// 上位19桁だけを表示する、１9桁以降は、"…"で省略する
<div class="carousel-video-title">'.$row->title->truncate($test_str, 19, "…", true).'</div>

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

回答No.3

dell_OK

無限スクロールに表示されるのは当然だと思います。
無限スクロールには質問の一覧が表示されるのですから。
スライダーにも質問の一覧にも同じものがいくつか表示されるはずです。
もしかして、質問の一覧には表示しない条件がなにかありましたか。

補足

A.回答ありがとうございます。
現在無限スクロールはファイルアップロードされた1番目の画像を表示させ、それがない場合はダミー画像を表示させるという形で作成していると思います。
それに加えてファイルアップロードされたものが動画や pdf である場合にもダミー画像を表示させるようにしたいとお伝えしておくべきでした説明不足で申し訳ありません。
旧コードでは恐らくそのように表示されていたので dell_ok さんにお聞きしなかったです。

回答No.2

dell_OK

・動画の表示に必要なカラムが attach1 だと思うのですが、unique_id を使うのでしょうか？

attach1はひとつめのアップロードファイルのファイル名です。
「動画」専用ではありません。
attach1、attach2、attach3、usericon、すべてにunique_idを使います。
ファイル名の規則は　{質問UUID}_{ファイル番号}.{拡張子}　です。
質問ＵＵＩＤはunique_idです。
ファイル番号は、
attach1、attach2、attach3はそれぞれ「1」「2」「3」になり、
usericonは「usericon」になります。
テーブル構造はint(11)からvarchar(255)に変更してください。

・動画のみで投稿したところそれが無限スクロールにも表示されてしまいます原因は分かりますでしょうか？

テーブル構成を変更して、データを空にして、改めて投稿してみてください。

補足

Q.attach1はひとつめのアップロードファイルのファイル名です。
「動画」専用ではありません。

テーブル構造はint(11)からvarchar(255)に変更してください。
テーブル構成を変更して、データを空にして、改めて投稿してみてください。

A.回答ありがとうございます、勘違いしておりました申し訳ありません。
attach1 はファイルアップロード1でした、テーブル構造を確認してデータも空にしてみたのですが動画が無限スクロールに表示されてしまいます…

※質問一覧表示画面
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://imgur.com/VAsnDox.png

回答No.1

dell_OK

・間違っているところなどありますでしょうか？

ここはもとにもどしてください。
　bbs_que_list.phpの10行目に質問IDを追加するコードをコメントアウトいたしました
　bbs_que_list.phpの19行目に質問UUIDを追加いたしました
$upload_dirはアップロード先のフォルダ名です。
ファイル名ではありませんし、ＵＵＩＤでもありません。
ＵＵＩＤはファイル名$row->attach1に保存するようにします。

ここはＳＱＬ文を記述しているだけで実行されていません。
　functions.phpの141行目に質問UUIDを読み込んで取得するコードを追加いたしました
それにＵＵＩＤは　unique_id　のはずです。
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);
// カラム名 unique_id の質問UUID を一度そのデータを読み込んで取得する
$sql = 'SELECT unique_id FROM sortable WHERE ID = %d';
$query = $wpdb->prepare($sql, $wpdb->insert_id);
$rows = $wpdb->get_results($query);
$unique_id = $rows[0]->unique_id;
// アップロードディレクトリ（パス名）を取得する
$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) { // 比較した時に3＋1以上なら
$n = 'usericon';
} else {
$n = $i + 1;
}
$filenames[$i] = "{$unique_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;
}
－－－－

補足

Q.$upload_dirはアップロード先のフォルダ名です。
ファイル名ではありませんし、ＵＵＩＤでもありません。
ＵＵＩＤはファイル名$row->attach1に保存するようにします。

ここはＳＱＬ文を記述しているだけで実行されていません。
　functions.phpの141行目に質問UUIDを読み込んで取得するコードを追加いたしました
それにＵＵＩＤは　unique_id　のはずです。

A.回答ありがとうございます。
attach1 のカラムに別途 ＵＵＩＤ を設定するのではないかと考えておりました。
動画の表示に必要なカラムが attach1 だと思うのですが、unique_id を使うのでしょうか？

動画のみで投稿したところそれが無限スクロールにも表示されてしまいます原因は分かりますでしょうか？

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

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

※旧コード
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/