つらい・・・

返信機能のツリー構造の深さをライブドアブログのように無限にすることは可能でしょうか？

解決済

質問者：初心者サイト作成
質問日時：2024/09/02 23:23
回答数：6件

Q&A掲示板を質問→回答→返信で作成したいと考えているのですが、ネストが4段階以上深くなった段階で返信ボタンが出なくなるなどの不具合が発生する可能性があるとアドバイス頂きました。
テーブル構成と方法を変えることでネストを更に深くすることは出来ないでしょうか？

※テーブル構成
ID (質問番号)・・・・識別用のカラム
TS (投稿日時)・・・・公開期間終了後に質問を cron で削除するため？、回答の日時を把握する（〇日前）
question (内容)・・・・質問、回答の投稿文
title (タイトル)・・・・質問タイトル
namae (名前)・・・・質問、回答者名
stamp (リアクションスタンプ)・・・・質問スタンプ
unique_id (質問UUID)・・・・アップロードされたファイル名の改名に使用
ip (IPアドレス)・・・・セキュリティ保護のために保存
attach1 (アップロードされたファイル)・・・・1、2、3で分けているのは1つ目の画像を一覧表示＆1つ目の動画を横スクロールで表示するため
attach2 (IPアドレス)・・・・略
attach3 (IPアドレス)・・・・略
usericon (アイコン画像)・・・・質問、回答のアイコン画像
comment_id (回答に対する返信のID)・・・・返信 ID

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.6ベストアンサー

回答者： artoo
回答日時：2024/09/03 23:48

> 10段までは段下げするが11段以降は段下げ幅を0にするというのは11段以降はどうなるのでしょうか？

この質問が出てくる意味が分かりません。
「段下げ幅を0にする」と書いたのですが？

もしかして「段下げ幅」という言葉の意味が分からないと言うことなのでしょうか？であればそのように聞いて下さい。
「段下げ幅を0にする」というのは「段下げをしない」という意味です。実装をイメージして「段下げ幅を0にする」という書き方をしました。

> あるいは、10段までは段下げするが11段以降は段下げ幅を0にするとかで、要件を満たせるならそれでもいいし。
と、書いたとおりで、「10段までは段下げするが11段以降は段下げをしない」ことでも要件を満たせる場合に限ってですが。

- 2
- 件

通報する

この回答へのお礼

回答ありがとうございます。理解することが出来ました、質問が分かりにくく申し訳ありません。
階層を条件で区切るか、無限のどちらかということですね。

通報する

お礼日時：2024/09/04 00:13

No.5

回答者： yambejp
回答日時：2024/09/03 22:04

#3

＞申し訳ありません今後の掲示板の軸になるので、どうしても回答が知りたくてマルチポストしてしまいました。

いえ、厳密には責めているというよりは、技術系の板でせっかくテクニカルな回答をもらえているのですから、そこで掘り下げていくほうがより確実な解決につながるのになぁ・・・という感想です。向こうで質問を続けられないほど特に炎上しているわけでもなかったと思いますし、なぜこんなコミュニケーションサイトに出張ってくるのかなぁ・・・と。
私もteratailでそこそこ頑張っているつもりですが、書き込みのメインは実はこちらの方ですし、ここのサイトの仕組み上あまり技術的な質問には向かないのはよくわかっているつもりなので。

- 1
- 件

通報する

この回答へのお礼

回答ありがとうございます。
以前からテラテイルとgoo質問を交互に質問させて頂いているのですが、goo質問では具体的なコードやテーブルについての修正点などのヒントをもらえる為、利用させて頂いております。

テラテイルでは方法を教えて頂き、それについて自分で考えて分からなかった場合はgoo質問で聞くというパターンが以前幾度となくありましたので…

同時に質問してマルチポストになるのは避けるべきでした申し訳ありません。

通報する

お礼日時：2024/09/03 22:25

No.4

回答者： artoo
回答日時：2024/09/03 21:24

> 段下げを無限の幅にせずに実装することは可能でしょうか？

簡単な数学ですが、段下げ幅が0でなければ、無限を掛ければ掛け算の結果は無限です。

段下げをしないでうまく見えるデザインを考えるしかないでしょう。
あるいは、10段までは段下げするが11段以降は段下げ幅を0にするとかで、要件を満たせるならそれでもいいし。

- 1
- 件

通報する

この回答へのお礼

アドバイスありがとうございます。
10段までは段下げするが11段以降は段下げ幅を0にするというのは11段以降はどうなるのでしょうか？

通報する

お礼日時：2024/09/03 21:37

No.3

回答者： yambejp
回答日時：2024/09/03 20:13

https://teratail.com/questions/nzq61t2fhxomzs

わざわざ技術系のサイトでテクニカルなアドバイスをもらっていながら、あえて教えてgooのようなコミュニティサイトにマルチポストしてもいいことなにもないですよ。

- 1
- 件

通報する

この回答へのお礼

申し訳ありません今後の掲示板の軸になるので、どうしても回答が知りたくてマルチポストしてしまいました。

通報する

お礼日時：2024/09/03 21:39

参考程度に

No.2

回答者： fujillin
回答日時：2024/09/03 16:36

こんにちは

＞返信ボタンが出なくなるなどの不具合が発生する可能性～
単に、画面から見切れてしまって表示されないという意味なのか、そもそも出力がされないという意味なのか不明ですが・・・

ボタンが出力されないのなら、それは出力側のプログラムの問題です。
表示が見切れてしまうのなら、横スクロールで対応するとかにしておけば良いのではないでしょうか？
（折り返しでも良ければ、非表示になるような設定をしていない限りは、レイアウトはともかくブラウザは極力表示しようとしてくれるはずです。）
すでに指摘があるように、データ構成と表示は直接関係はありません。

最終的にどのようなHTMLにしているのかも不明ですけれど、インデントがネストしても必ず表示できるようにしたいのなら、項目欄にmin-widthを設定しておくことで項目の最低幅を確保できるようになるので、合計が画面幅を超えればブラウザは横スクロールで対応するようになります。
（親要素に overflow: hidden 等を設定していればスクロールしませんけれど）
あるいは、ネストが深くなったら、一旦キャンセルするという方法もあるかも知れませんが、関係性の視認しやすさに一工夫が必要になりそうですね。

以下は、簡単な一例です。
※ すぐに見切れるように、わざとインデント幅を大きくしてあります。
※ 見切れない場合は、ブラウザ幅を小さくしてみてください。
（fx、chromeで確認）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#wrap ul { list-style-type: none; }
#wrap ul ul { padding-left: 8em; }
#wrap ul li { min-width: 30em; }
#wrap ul ul li:before { content: "┗ "; }
#wrap ul ul li:has(> ul):before { content: none; }

/* 以下おまけ */
#wrap ul li:after {
content: "返信";
font-size: 0.8em;
vertical-align: top;
margin-left: 1.5em;
padding: 0 .5em;
background-color: #DDD;
border: 2px solid gray;
border-width: 0 2px 2px 0;
border-radius: 0.3em;
}
#wrap ul li:has(> ul):after { content: none; }
</style>
</head>
<body>
<div id="wrap">
<ul>
<li>項目1</li>
<li><ul>
<li>項目1-1</li>
<li><ul>
<li>項目1-1-1</li>
<li><ul>
<li>項目1-1-1-1</li>
<li><ul>
<li>項目1-1-1-1-1</li>
<li><ul>
<li>項目1-1-1-1-1-1</li>
</ul></li>
<li><ul>
<li>項目1-1-1-1-1-2</li>
</ul></li>
<li>項目1-1-1-1-2</li>
<li><ul>
<li>項目1-1-1-1-2-1</li>
</ul></li>
</ul></li>
</ul></li>
</ul></li>
</ul></li>
<li>項目2</li>
<li><ul>
<li>項目2-1</li>
</ul></li>
</ul>
</div>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

Q.返信ボタンが出なくなるなどの不具合が発生する可能性～
単に、画面から見切れてしまって表示されないという意味なのか、そもそも出力がされないという意味なのか不明ですが・・・

A.回答ありがとうございます、恐らく前者になります。

Q.表示が見切れてしまうのなら、横スクロールで対応するとかにしておけば良いのではないでしょうか？
（折り返しでも良ければ、非表示になるような設定をしていない限りは、レイアウトはともかくブラウザは極力表示しようとしてくれるはずです。）
すでに指摘があるように、データ構成と表示は直接関係はありません。

A.アドバイスありがとうございます、横に広げるという発想はなかったですが返信できる深さの上限を決めておく場合は有効そうですね。
覚えておきます。

Q.最終的にどのようなHTMLにしているのかも不明ですけれど、インデントがネストしても必ず表示できるようにしたいのなら、項目欄にmin-widthを設定しておくことで項目の最低幅を確保できるようになるので、合計が画面幅を超えればブラウザは横スクロールで対応するようになります。
（親要素に overflow: hidden 等を設定していればスクロールしませんけれど）
あるいは、ネストが深くなったら、一旦キャンセルするという方法もあるかも知れませんが、関係性の視認しやすさに一工夫が必要になりそうですね。

A.参考コードありがとうございます。min-widthを設定して画面幅を超えればブラウザは横スクロールという考えはなかったですが、確かに横スクロールさせてしまえば表示されなくなる心配もなさそうです勉強になりました。