スペースの一覧表示カスタマイズについて

[solgina]

スペースで、1つのスレッドを選択すると、
1投稿に対しての返信は表示せず、スレッドの投稿の一行目をタイトルとして、『タイトル』『発信日』『発信者』の3つの情報のみを表示して一覧で表示させたいです。
タイトルをクリックすると、返信も表示させるうような動きにしたいです。

こういったことはカスタマイズで実現可能でしょうか。

[udcxx (だいちゃん / udcxx)]

solginaさん、こんにちは。

返信の領域には .ocean-ui-comments-post-child というClassが与えられているようなので、カスタマイズで該当Classを非表示にすることで、ご希望の表示も可能と考えられます。

※ 動作確認したところ、投稿済みの返信だけでなく、返信を入力する領域も表示されなくなるようでした。

なお、DOM操作になるので、kintone側のアップデートで利用できなくなる可能性もあります。ご留意ください。

[solgina]

だいちゃんさん、こんにちは

ご丁寧に回答頂き、ありがとうございます。

返信を入力する領域は、タイトルをクリックしても表示されない動作になってしまうということでしょうか。

[udcxx (だいちゃん / udcxx)]

solgina さん、回答を確認いただきありがとうございます。

そして、申し訳ございません。ご質問中の以下の文言を見落としていました。

タイトルをクリックすると、返信も表示させるうような動きにしたいです

ご認識の通り、私の回答した .ocean-ui-comments-post-child を非表示にする処理だけでは、タイトルをクリックするなどの操作を行っても、返信を入力する領域は非表示のままとなります。

そのため、ご希望の動作とするには以下のような処理を作る必要があると考えられます。

1. 当該スペースを表示した際に、.ocean-ui-comments-post-child をすべて非表示にする
   • すでにご認識と存じますが、この イベントを活用することで実現できそうです。
2. タイトル部分をクリックした際に、子要素中の .ocean-ui-comments-post-child のみ再表示させる
   • クリックイベント と この メソッドが使えそうです

実際に検証しておらず恐縮ですが、上記を参考に、処理を作成することを検討いただければ幸いです。

[solgina]

だいちゃんさん

ご回答頂き、ありがとうございます。
教えて頂いた内容を参考にさせて頂き、実装してみます。

この度は、ありがとうございました！

[udcxx (だいちゃん / udcxx)]

solgina さん

度々申し訳ございません。
検証したところ、私の回答では不十分だとわかったので改めて回答させてください。

スレッドではスペースのトップ画面を表示した後のイベントが発火しないので、URLや画面の状況から、カスタマイズ発火のタイミングを自分で見計らう必要がありました。

上記を踏まえ、以下のようなカスタマイズでご希望に近い処理となりそうです：

/** 要素が表示されるまで待機する関数 */
const waitForElementVisible = (className, timeoutMs = 5000) => {
    return new Promise((resolve, reject) => {
        const startTime = Date.now();

        // 要素を確認する関数
        function checkElement() {
            const element = document.querySelector('.' + className);

            // 要素が存在し、表示されている場合
            if (element && element.offsetParent !== null) {
                resolve(element);
                return;
            }

            // タイムアウトチェック
            if (Date.now() - startTime >= timeoutMs) {
                reject(new Error(`Timeout waiting for element with class ${className}`));
                return;
            }

            // 要素が見つからない場合は再試行
            requestAnimationFrame(checkElement);
        }

        checkElement();
    });
}

if (location.href.includes('thread')) {
    waitForElementVisible('ocean-ui-comments-commentcomponent')
        .then(() => {
            const commentAreas = document.querySelectorAll('.ocean-ui-comments-post-child');
            commentAreas.forEach((commentArea) => {
                commentArea.style.display = 'none';
            });
    
            const replyButtons = document.querySelectorAll('.ocean-ui-comments-commentbase-comment');
            replyButtons.forEach((replyButton) => {
                replyButton.innerText = '返信を表示';
                replyButton.addEventListener('click', (e) => {
                    const el = e.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
                    el.querySelector('.ocean-ui-comments-post-child').style.display = 'block';
                });
            })
        })
}

取り急ぎ検証した結果なので不具合があるかもしれませんが、ご参考までに…。