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

dell_OK

動画の隙間について調べてみました。

スライドの外枠の幅は「50%」です。
.carousel-area {
width: 50%;

この50%は何に対してかと言うと、
親要素である「inline-player」で、
その幅は「1140px」です。
.inline-player {
width: 1140px;

つまりスライドの幅は単純計算で「570px」になります。

ですが、スライドのラッパーの幅を「555px」にしているため、
.carousel-video-area { /*スライド1枚のラッパに当たるので width, height を px 指定 */
position: relative;
width: 555px;

570と555の差分が隙間になっているようです。
試しに、ラッパーの幅を570にすると隙間がなくなりました。

お礼

marvel のリンクに間違いがあったようです申し訳ありません。
下記のリンクからお願い致します。

※marvel のワイヤーフレームで回答ページのイメージを作成してみました
https://marvelapp.com/whiteboard/urN35BK2SNIqAd9D5XwO

補足

回答ありがとうございます。
inline-player の横幅は全く考慮しておりませんでした、勉強になります。
修正したところ隙間なく表示できました。

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

質問一覧表示画面が完成したので回答画面を作成していく予定です。

※marvel のワイヤーフレームで回答ページのイメージを作成してみました
https://marvelapp.com/whiteboard/hcbF9QZAu5I7SfLhSAuT

回答No.14

dell_OK

私の方でも少しずれて表示されています。
原因はスタイルシートのファイル「style.css」にあるようです。
質問者さまのサイトから直接ダウンロードして内容を見てみました。
添付画像と合わせてみてください。
1590行目、1595行目、1601行目のインデントにあやしい文字があるようです。
わかりづらいかもしれませんが選択ハイライトさせている部分です。
ここには、Unicode「U+00A0」の見えない文字があります。
この文字のせいでスタイルシートが正しく動作していないことが考えられます。
この行のインデントを一度削除して、半角スペースにしてみてください。
私の方ではそれで改善されました。
ただ、動画と動画の間に隙間が少しあります。

お礼

こちらが最新の質問になります。
回答画面のコードについてお聞きしたいのですが、入力画面の機能からスタンプを除いて同じものを回答画面にも書きたい場合共通部分をまとめることは可能でしょうか？
旧 bbs-que_list.php コードを参考にしており、入力画面でアップロードされたコンテンツを一番上に配置してその下に回答投稿機能、一番下に投稿済みの回答一覧が表示されるデザインで考えています。

上記とは別にアップロードされたファイルを表示するコードについてお聞きしたいのですが、attach1,attach2,attach3 すべて表示したい場合テーブルを一括で選択する方法はありますでしょうか？

bbs_que_answer.php の43行目 echo '<div>' . $view . '</div>'; では画像が呼び出されているので、こちらをアップロードされたファイルに変更したいのですが、echo '<div>' .$row->attach.'</div>'; ではテーブル名が存在しない為どうすべきか悩んでおります。

※回答画面コード（bbs_que_answer.php）
https://wandbox.org/permlink/Us5PvZ8nCZHW1QKK

※回答画面のデザインを変更いたしました。
https://marvelapp.com/whiteboard/urN35BK2SNIqAd9D5XwO

※回答画面配置

※入力画面に投稿されたもの
タイトル　　　スタンプ
アップロードファイル×3　メッセージ
アイコン画像　名前
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

※回答機能
アイコン画像　名前
　　　　　　　回答
ファイルアップロード×3
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

※回答一覧
ア　　　　　　名前　○日前
ッ　　　　　　回答
プ　　　　　　アイコン画像　返信ボタン
ロ　　　　　　○件の返信
｜
ド
フ
ァ
イ
ル

補足

回答ありがとうございます、修正したところ上手く表示されました。
dell_ok さんが言われるように動画と動画に間隔が空いているようですね…原因を調べてみます。

回答No.13

dell_OK

・5分割で表示され

全体が表示されてしまっているようですね。
動的な設定は、
500%（スライドが５個固定）だったのを、
－－－－
.carousel {
width: 500%;
－－－－
例えば、２個の場合は、
－－－－
.carousel {
width: 200%;
－－－－
にする目的なので、
スクリプトはこうじゃないでしょうか。
－－－－
var width = totalSlides * 100;
$("#carousel").css({"--w":width+"%"});
－－－－

補足

回答ありがとうございます。
修正してみたのですが、どうしても上手く表示されません。
スライド１枚目の領域に２枚目が表示されてしまうようです…　原因を探しております。

※表示されている動画横スクロール
https://imgur.com/ZXQfuwY.gif

回答No.12

dell_OK

なるほど、スクリプトでスタイルを上書きする感じですね。
実装されてみて、期待通りに動いておりますでしょうか。

補足

回答ありがとうございます。
実装してみたところ初めは5分割で表示され、スライドするたびに減っていき5件→4件→3件→2件→1件でスクロールされております。
スクロールが減っていく原因は分かりますでしょうか？

※動画横スクロール
https://imgur.com/0KaigQL.png
↓
https://imgur.com/oxdzD9H.png
↓
https://imgur.com/CxzCYia.png
↓
https://imgur.com/i2seNC8.png
↓
https://imgur.com/BFfGq2O.png

※質問一覧表示画面
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.11

dell_OK

あと、もしかすると、スタイルシートにも、
動画数　5　や　20%　の値やそれに基づく値があるようでしたら、
対応する必要があるような気がします。
スタイルシートに動的に要素数を判断できる方法があるといいですね。

補足

A.アドバイスありがとうございます。
スタイルシートで動的に要素数を判断する方法を調べたところCSS だけではできないという記事を見つけました。
JavaScript を使えば可能という事だったので、JavaScript で計算して CSS に反映するコードを考えました。
bbs_que_list.php の 70行目と style.css の 15行目にコードを追加いたしました。

動画5件固定の時にスライダーと動画のサイズが合わずアドバイスを頂いた際に、要素数に応じて変化させる必要がありそうなスタイルシートについて確認した為そちらを元にしております。
carousel-video-area がスライド1枚のラッパに当たるので width, height を px 指定して、その他の要素には width: 100%; height: 100%; を指定することでエラーは解決すると思われます。

※頂いたアドバイス
スライダー の div 要素がネストしているのでスライド1枚のラッパに当たる要素があり、その要素のサイズをスライダーのサイズに合わせておいて、その中で動画等を配置するようにしておけば、余白の部分は余白として表示されるようになるでしょう。
親要素に対して適切に寸法指定がなされていない場合には予期しない表示になることがあります。

※スライダーと動画のサイズが合わない原因
https://teratail.com/questions/mrywdnuasgy3by

※要素数からパラメータ値を算出し、カスタムパラメータとして設定する
https://qiita.com/kumazo/items/d492383c89b02c4b835e

※参考コード
https://codepen.io/kumazo/pen/EoxYvb

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

回答No.10

dell_OK

・要素数が変化しても横幅が 20% で統一されているため、スライド１枚目の領域に２枚目が表示されているのではないかと考えました。

確かに、そうですね。
そのために要素数ごとの処理にわけたのですね。
この処理はコードが見にくくなりバグのもとになりやすいので直した方がよさそうです。

例えば、ここの　if　ですが、
if (currentSlide == 1) {
// 表示するためのCSS（全体の 1/1 右に移動）
slide.style.transform = `translateX(-${currentSlide * 100}%)`;
} else if (currentSlide == 2) {
// 表示するためのCSS（全体の 1/2 右に移動）
slide.style.transform = `translateX(-${currentSlide * 50}%)`;

currentSlide　は現在のスライド番号ですので、
書くとしたら、要素数を示す　totalSlides　ですね。
if (totalSlides == 1) {
　　　～
} else if (totalSlides == 2) {
　　　～

でも、こんなに難しくしなくてもいい方法があります。
変化させたいのはスライドさせるパーセントの値ですから、
先にそれを求めてしまいます。
－－－－
// インジケーターの要素数
const totalSlides = lists.length;
// スライドのパーセント
const slidePercent = 100 / totalSlides;
// 初期の要素数を0にする
let currentSlide = 0;
－－－－

スライドのパーセントは、
要素数　totalSlides　が　1　ならば　100　になりますし、
2　ならば　50、
3　ならば　33.33...、
4　ならば　25、
5　ならば　20　です。

それから　20　固定のところを　slidePercent　にします。
－－－－
slide.style.transform = `translateX(-${currentSlide * slidePercent}%)`;
－－－－

これだけで要素ごとに処理をわけなくてもよくなります。

補足

A.解説ありがとうございます。
左右の切り替えボタン（ prev / next ）とインジケーター（ indicator ）を考えると現在のスライド番号ではなく要素数の方が正解ですね勘違いしておりました。
スライドさせるパーセントの値に着目してそれを先に求めてしまうことは視野にありませんでした勉強になります。
先に計算して translateX を求める方が簡潔だと思いました。

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

回答No.9

dell_OK

最新コードを見ました。

その１。
<script>の終了タグであるべき</script>が不正です。
<div class="carousel-video-title"><script>document.write(truncate("'.$row->title.'",19));<script></div>
こうしてください。
<div class="carousel-video-title"><script>document.write(truncate("'.$row->title.'",19));</script></div>

その２。
truncateの定義位置が不正です。
<script>タグ付きで<div id="feed4-layout">の前にお願いしました。
－－－－
<script>
function truncate(str, len) {
return str.length <= len ? str : (str.substr(0, len) + "...");
};
</script>
<div id="feed4-layout">
－－－－

補足

Q.その２。
truncateの定義位置が不正です。
<script>タグ付きで<div id="feed4-layout">の前にお願いしました。
－－－－
<script>
function truncate(str, len) {
return str.length <= len ? str : (str.substr(0, len) + "...");
};
</script>
<div id="feed4-layout">
－－－－

A.回答ありがとうございます。
<script></script> の終了タグについては github の使用上の問題で Javascript の閉じタグを使えない事になります。
タグを閉じてしまうとコードがエラーになってしまうため意図的に閉じないようにしております。

その２について勝手に定義位置をずらしてしまいました申し訳ありません…
Javascript がそれぞれ別の場所に２回読み込まれているのは不自然かと思い、スライダーの CSS について質問する際に移動したものをそのまま書いておりました。
dell_ok さんに先にお聞きしておくべきでした。

Javascript について調べたところ原因として要素数が変化しても横幅が 20% で統一されているため、スライド１枚目の領域に２枚目が表示されているのではないかと考えました。
動画1件からスライダーをエラーの起こる前の5件にしてみたところ変わらずエラーが起きているので不思議です。
HTML 構造を旧コードと比較してみたのですが変わらないので、ランダムにしたことで横幅の％が順番ではなくばらばらになっているのではないかと思いました。

スライド数に応じて横幅を分岐するように修正いたしました。
count1 の時は横スライダーの Javascript 自体必要ないと思うのですが、if でスライド数が1以外の時に実行するように囲うのは変ではないかと思い、修正コードのように書いております。
dell_ok さんから過去アドバイス頂いたことから考えるとスライド数が1の場合は何も書かないのが正解ではないかと迷っております。

※修正コード
https://wandbox.org/permlink/a0blgSFw3jEMnTsX

回答No.8

dell_OK

・動画を5件固定からアップロード数に応じて表示する方法に変更したことで

どのように変更したのか見てみないと判断できません。

・順番までばらばらになっている

ランダムに取得しているので順番はばらばらなものです。

補足

回答ありがとうございます、申し訳ありませんランダムで取得しているという前提を忘れておりました。

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

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

回答No.7

dell_OK

ブルートフォース攻撃のことでしょうか。
あらゆるパスワードでログインしようとするもののようなので、
掲示板とは関係ない気がします。

補足

回答ありがとうございます関係ないということで覚えておきます。
動画5件スライダーについてつまずいているのですが、動画を5件固定からアップロード数に応じて表示する方法に変更したことで、スクロール数のカウントがおかしくなり順番までばらばらになっているように見えます。
コードを調べながら原因を探しているのですが、スクロールの数ごとに処理を分けるべきでしょうか？

※現在のスクロール
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.6

dell_OK

・何故簡単に呼べないのか教えて頂きたいです…

試してすぐにできなかっただけです。
こんな感じでできました。
－－－－
<div class="carousel-video-title"><script>document.write(truncate("'.$row->title.'",19));</script></div>
－－－－

それから、これが出力されるよりも前に truncate() を定義するよう移動してください。
出力場所はここですので、
－－－－
<?php echo implode('', $carousel_list); ?>
－－－－

このあたりにしましょうか。
上記２か所の間がわかるように広めに載せますが、
追加している<script>～</script>が
－－－－
<div class="carousel-video-title"><script>document.write(truncate("'.$row->title.'",19));</script></div>
</a>
</div>
</div>';
$indicator_list[] = '<li class="list"></li>';
}
?>
<script>
function truncate(str, len) {
return str.length <= len ? str : (str.substr(0, len) + "...");
};
</script>
<div id="feed4-layout">
<div class="inline-player">
<!-- スライドの外枠 -->
<div class="carousel-area">
<!-- スライド（コンテンツ） -->
<div id="carousel" class="carousel">
<?php echo implode('', $carousel_list); ?>
－－－－

お礼

こちらが最新の回答になります Github のリンクが無効になっているようでした申し訳ありません。

1つ新たにアドバイスを頂いたのですが、１秒間に複数回の機械的なアクセスは負荷を掛ける可能性がある為、対策をした方がよいのではないかとのことでした。
恐らく掲示板へのブルーフォース攻撃に対してだと思うのですが、具体的な対策方法が reCAPTCHA を導入することしか思い浮かばず悩んでおります。
dell_ok さんが対策をするとしたらどのようなことが考えられますでしょうか？

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

補足

Q.試してすぐにできなかっただけです。
こんな感じでできました。
－－－－
<div class="carousel-video-title"><script>document.write(truncate("'.$row->title.'",19));</script></div>
－－－－

A.修正ありがとうございます、Javascript でも表示することが出来るんですね覚えておきます。

Q.それから、これが出力されるよりも前に truncate() を定義するよう移動してください。
出力場所はここですので、

A.回答ありがとうございます、修正いたしました。

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