WordPressの質問（q10245849）の続

質問

回答が遅れてしまい申し訳ありません、こちらが最新の質問になります。
質問入力画面に画像をアップロードした場合と動画をアップロードした場合で大きさが変わってしまうのですが、統一することは可能でしょうか？

こちらは以前 dell_ok さんにお聞きした覚えがあり難しいとアドバイスを頂いた記憶があるのですが…
質問入力画面にファイルをアップロードする場合クリックして選択する方法だけでなくドラッグ＆ドロップも追加することは可能でしょうか？

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

回答No.35

dell_OK

・ajaxを使う方法とIntersection Observer (IEでは動作しない)を使う方法の2つを見つけたのですが、どちらがよいと思われますでしょうか？

どちらでもいいような気はしますが、
後者の参考サイトはＰＨＰとのやりとりが書かれていないので、
参考にするのは難しいと思います。

私は詳しくないので、質問者さまが実装されてどうなるかです。
エラーになればコードをいただいて私の環境で試してなにかしらを判断することはできるとは思います。

どちらも非同期通信をするはずですが、
間にWordPressがあるので以前やった方法を参考にＰＨＰ側は実装してみてください。

回答No.34

dell_OK

・全体に1つ div を設定するために foreach ($rows as $row) {} のループの外に echo '<div>'; echo '</div>'; を追加しております。
ＨＴＭＬは下記のようにすることに致しました。

実行して期待通りになったのならそれでいいと思います。

私は実行していませんが、こうなると予想しています。
<div>
<div>がぞう</div>
<div>たいとる</div>
<div>がぞう</div>
<div>たいとる</div>
<div>がぞう</div>
<div>たいとる</div>
<div>がぞう</div>
<div>たいとる</div>
<div>がぞう</div>
<div>たいとる</div>
</div>

無限スクロールを実装される予定のようなので、ＰＨＰのここの処理はまったく不要になりますが、
JavaScriptで実装するにしても、手書きのＨＴＭＬは重要ですので、
上記のイメージが正しいのかどうか考えてみてください。

補足

回答ありがとうございます、上記のイメージ通りになります。

回答No.33

dell_OK

・以前記事の方に設定した際とは異なり記事のIDがないため実行できるのか不安です。

以前のコードがどうなっていたかわからないのですが ID は関係ないような気がしています。
関係あるとしても sortable にも ID はあるので使えるのではないでしょうか。

補足

回答ありがとうございます。
ページネーションについて調べたところ、最近では無限スクロール型を採用しているサイトが多いようで、PC 以外でサイトを閲覧している方が見やすいようになっているようです。

デメリットとして Javascript で作成するため SEO に認知されないようですが、メイン記事でしっかり集客すれば問題ないとの理由で流行しているとのことでした。

上記の理由から無限スクロールで作成しようと考えております。
ajaxを使う方法とIntersection Observer (IEでは動作しない)を使う方法の2つを見つけたのですが、どちらがよいと思われますでしょうか？

初めは ajax を使う方法で作成したいと考えていたのですが、<input type="hidden" id="count" value=0>が使われており// コンテンツ件数 $count = $_POST["count"]; を取得する方法が送信？となっているようで、どのような流れで作られているのか分からず、Intersection Observer の方が良いのではないかと考えております。

※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/

※Intersection Observerで無限スクロール
https://weblasts.com/javascript/intersection-observer

回答No.32

dell_OK

・名前と画像全体に1つだけ div を設定する方法が分からず

まずは出力したいＨＴＭＬを手書きしてみてください。
それをＰＨＰ出力に変えるといいと思います。

ところで、一部コメントにされていますが、
タグをコメントにする場合は対になるものもコメントにしておいた方がいいと思います。
でないと、階層がずれて想定外の出力になるからです。
とは言え、不思議なことにブラウザがいい感じにそろえてくれたりして、
コードミスに気付かなかったりもします。

echo '<div>';
//echo '<div><a href="'.$url.'">'.$row->unique_id;
echo '<div>'.$row->namae.'</div>';
echo '<div>'.$view.'</div>';
echo '<div>'.mb_strimwidth($row->message, 0, 38, '･･･').'</div>';
ここもコメント　//echo '</a></div>';
echo '</div>';

上記のコードをもとにすると、ＨＴＭＬはこんな感じになると思います。
<div>
<div>なまえ</div>
<div>がぞう</div>
<div>しつもん</div>
</div>

名前と画像全体に div を設定するとこうなります。
<div>
<div>
<div>なまえ</div>
<div>がぞう</div>
</div>
<div>しつもん</div>
</div>

増えた div の部分をＰＨＰで出力してください。

補足

Q.ところで、一部コメントにされていますが、
タグをコメントにする場合は対になるものもコメントにしておいた方がいいと思います。
でないと、階層がずれて想定外の出力になるからです。

A.アドバイスありがとうございます。コメントアウトにする場合は対になるものも考えるように致します。
全体に1つ div を設定するために foreach ($rows as $row) {} のループの外に echo '<div>'; echo '</div>'; を追加しております。

ＨＴＭＬは下記のようにすることに致しました。
<div>
<div>がぞう</div>
<div>たいとる</div>
</div>

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

回答No.31

dell_OK

・クラスを削除することがセキュリティ上問題ないか少し心配になりました。

そうでしたか。
セキュリティについてはわからないので私からははっきりしたことは言えませんが、
クラスとセキュリティはあまり関係ない気がします。

・以前のコードに戻すと clear ボタンを押すとアップロードしたものが消えてしまうのではないかと思い、 .style.display にしておりました。

指摘はしましたが、どちらの方法でも構いません。
どちらも同じことをしているようなものなので、
viewer[i].style.display に合わせた方が直接的でわかりやすいかもしれません。
いずれにしても、選択またはドロップしたファイルが消えることはありません。

補足

回答ありがとうございます、質問してみたところセキュリティ上は問題ないようでした。
質問画面は終了したので、bbs_que_list.php 質問一覧表示画面を作成していきたいのですが、参考サイトのコードを見ながら書いてみたところ個別に div が設定されてしまい、名前と画像全体に1つだけ div を設定する方法が分からずアドバイスお願い致します。
現在のサイトの背景が青で質問一覧表示の背景のみ白を設定することでユーザーから分かりやすくしたいと考えております。

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

※参考サイト
https://q-az.net/php-function-html-output/

上記とは別にお聞きしたいことがあります。
質問一覧表示する際に1ページ60コンテンツで考えていて、それを超過した場合はページナビを設定したいのですが、以前記事の方に設定した際とは異なり記事のIDがないため実行できるのか不安です。
Wordpress の機能を頼らずページナビを作成することは可能でしょうか？

※質問一覧表示画面の配置イメージ
https://www.bilibili.com/

回答No.30

dell_OK

・usericon-uploads についてお聞きしたいのですが、アップロード前に表示しておいてアップロード後にクラスを削除することは問題ないでしょうか？

どのクラスを削除することでしょうか。
どのような問題があると想定していますか。

最新コードを見てみました。
指摘１。
changeImgの処理に戻っています。
　changeImg[i].classList.add('hideItems'); // もともとの画像を消す
　changeImg[i].classList.remove('hideItems');
なぜ戻したのでしょうか。
これはfileAreaで処理することになったので戻さなくてよかったです。
指摘２。
fileAreaまで.style.displayの処理にしたのはなぜでしょうか。
　.classList.add('hideItems')
　.classList.remove('hideItems')
のままでよかったと思います。
指摘３。
viewerの初期非表示がありません。
　<div class="viewer" style="display: none;"></div>

補足

Q.どのクラスを削除することでしょうか。
どのような問題があると想定していますか。

A.回答ありがとうございますクラスを削除することがセキュリティ上問題ないか少し心配になりました。

Q.指摘１。
changeImgの処理に戻っています。
　changeImg[i].classList.add('hideItems'); // もともとの画像を消す
　changeImg[i].classList.remove('hideItems');
なぜ戻したのでしょうか。
これはfileAreaで処理することになったので戻さなくてよかったです。

A.回答ありがとうございます、申し訳ありません削除するのを見落としておりました。

Q.指摘２。
fileAreaまで.style.displayの処理にしたのはなぜでしょうか。
　.classList.add('hideItems')
　.classList.remove('hideItems')
のままでよかったと思います。

A.回答ありがとうございます。
以前のコードに戻すと clear ボタンを押すとアップロードしたものが消えてしまうのではないかと思い、 .style.display にしておりました。

Q.指摘３。
viewerの初期非表示がありません。
　<div class="viewer" style="display: none;"></div>

A.回答ありがとうございます、ファイルが無効な場合にはviewerは非表示とアドバイス頂いたので HTML で非表示にする必要はないと勘違いしておりました申し訳ありません。

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

回答No.29

dell_OK

・どのように切り替えれば良いのでしょうか…？

以前回答と同じで※の位置に追加するだけです。

ファイルが有効な場合に表示。
分岐が不要なのはファイルが無効な場合にはviewerは非表示のままなのでなにもする必要がないからです。
－－－－
if (child !== null) {
child.style.height = height;
child.style.width = width;
child.src = blobUrl[i];
//戻り値は追加した子要素 viewer[i]
viewer[i].appendChild(child);
※viewer[i].style.display = "block";
//旧コード
fileArea[i].classList.add('hideItems'); // もともとの画像を消す
}
－－－－

クリアの時に非表示。
－－－－
clear[i].addEventListener('click', () => {
blobType[i] = "";
blobUrl[i] = "";
attach[i].value = "";
viewer[i].innerHTML = "";
※viewer[i].style.display = "none";
fileArea[i].classList.remove('hideItems');
});
－－－－

補足

Q.分岐が不要なのはファイルが無効な場合にはviewerは非表示のままなのでなにもする必要がないからです。

A.修正ありがとうございます。ファイルが無効な場合にはviewerは非表示のままなんですね…　クリアボタンが押された場合の処理だと思っておりました。

usericon-uploads についてお聞きしたいのですが、アップロード前に表示しておいてアップロード後にクラスを削除することは問題ないでしょうか？
どちらにも CSS が設定されているためアップロード後に viewer を表示することで2重にスペースが追加されてしまうため、usericon-uploads のクラスも削除する必要がありそうです。

下記のコードを bbs_quest_input.php の278行目と297行目に追加いたしました。

fileArea[i].style.display = "none";
fileArea[i].style.display = "block";

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

回答No.28

dell_OK

・クラスの分岐は下記のような形で良いのでしょうか？

分岐の処理は不要です。

補足

回答ありがとうございます。参考サイトを見てコードを考えたのですが、分岐処理がない場合 viewer[i].style.display = 'block'; で表示、viewer[i].style.display = 'none'; で非表示としてどのように切り替えれば良いのでしょうか…？

※参考サイト
※JavaScriptで「display:none」を設定して表示・非表示を切り替える方法
https://musclecoding.com/javascript-display-none/

回答No.27

dell_OK

そうですね。
～.style.display = '～';
でいいと思います。

これは不要です。
const element = document.querySelectorAll('viewer');
それと、
　element.style.display
は、
　viewer[i].style.display
にしてみてください。

前回の回答でうまくいかなくてすみませんでした。
上記の方法でうまくいけると思いますので、
蛇足ですが、
直接記述した、
style="display: none;"
が、クラス（hideItems）の追加と削除で消えると思っていたのですが、
よくよく考えたら消えるはずもなく。
直接記述せず、
viewer[i].classList.add('hideItems');
を最初に実行すればよかっただけでした。

補足

アドバイスありがとうございます。viewer[i] を直接設定する方法は頭にありませんでした覚えておきます。
クラスの分岐は下記のような形で良いのでしょうか？
else if (changeImg !== true) {} の部分があっているのか心配しておりました。

　　　　　 if (child !== null) {
child.style.height = height;
child.style.width = width;
child.src = blobUrl[i];
//戻り値は追加した子要素 viewer[i]
viewer[i].appendChild(child);
//旧コード
fileArea[i].classList.add('hideItems'); // もともとの画像を消す
viewer[i].style.display = 'block';
}

　　　　　 else if (changeImg !== true) {
const divUsericonDragoverArea = document.createElement("div"); // div (子)を生成
divUsericonDragoverArea.classList.add("usericon-dragover-area"); // classの追加
lavel.appendChild(document.createTextNode(divUsericonDragoverArea)); //子要素として Text ノードを生成
viewer[i].style.display = 'none';
}

回答No.26

dell_OK

表示非表示の切り替えは※の行を追加してください。

//戻り値は追加した子要素 viewer[i]
viewer[i].appendChild(child);
※viewer[i].classList.remove('hideItems');
//旧コード
fileArea[i].classList.add('hideItems'); // もともとの画像を消す

viewer[i].innerHTML = "";
※viewer[i].classList.add('hideItems');
fileArea[i].classList.remove('hideItems');

お礼

申し訳ありません参考サイトを書き忘れておりました。

※JavaScriptで「display:none」を設定して表示・非表示を切り替える方法
https://musclecoding.com/javascript-display-none/

※比較演算子の使い方
https://www.sejuku.net/blog/23942

補足

修正ありがとうございます。試してみたところアップロードするとファイル又は画像が消えてしまいます。
if (child !== null) {} は要素がない場合のコードだと思ったので、
※viewer[i].classList.remove('hideItems');と※viewer[i].classList.add('hideItems');の add と remove を逆にしてみたのですが駄目でした。

自分なりにコードを考えてみました。<div class="viewer"></div> は非表示にせずに CSS で表示非表示を切り替える方法になります。
アップロードされていない場合は非表示、アップロードされた場合は表示。

// 要素を取得
const element = document.querySelectorAll('viewer');

if (child !== null) {
child.style.height = height;
child.style.width = width;
child.src = blobUrl[i];
//戻り値は追加した子要素 viewer[i]
viewer[i].appendChild(child);
//旧コード
fileArea[i].classList.add('hideItems'); // もともとの画像を消す
element.style.display = 'block';
}

　　　　　 else if (changeImg !== true) {
const divUsericonDragoverArea = document.createElement("div"); // div (子)を生成
divUsericonDragoverArea.classList.add("usericon-dragover-area"); // classの追加
lavel.appendChild(document.createTextNode(divUsericonDragoverArea)); //子要素として Text ノードを生成
element.style.display = 'none';
}