ああ、今わかりました。私は embedMaxHeight の目的が、コメントをよりネイティブなスタイルでレンダリングし、スクロールをできるだけ最小限に抑えること（非常に長いスレッドはスクロールが必要ですが）だと思っていました。そのため、15000px に設定していました。少し減らしてみます。
その場合、embedMinHeight が意図した通りに機能していないように思えます。400px に設定しても、埋め込みの高さは少なくとも 600px あり、末尾に小さな隙間が残っています。
「いいね！」 5
こんにちは！
新しくデザインされたコメントフォームは大幅に改善されており、特にモバイルでの体験が格段に良くなりました！ただし、2つの小さな問題を見つけました：
- フォームの幅が画面表示を超えており、意図しない水平スクロールが必要になっています；
- スクロール中に投稿数を示すナビゲーションコンポーネントがフォームの上に重なったままになっています。
「いいね！」 3
その通り！@keegan がそれを主要なユースケースとして構築してくれました。気に入っていただけて嬉しいです。ただし、数時間前にマージしただけなので、ツールバーの折り返し幅や Enter キー送信の動作など、フォローアップ作業は現在進行中です。
「いいね！」 4
このフォームをスレッド内（Discourse上）にも直接表示するのは良いアイデアかもしれません。フォームが開かれている状態の方が、技術に詳しくないユーザーには親しみやすく、使いやすさを感じさせる傾向があります。エンゲージメントが向上するかどうか、一度テストしてみる価値はありそうです。
「いいね！」 3
これは実際にバグでした。ちょうど修正しました。
「いいね！」 2
これは修正されましたので、アップデートをお願いします！
「いいね！」 1
あなたのサイトにもう一つ問題を見つけました。ブログのダークモード/ライトモードのシステムを新しいDiscourseの埋め込みと連携させており、ブログのモードを変更すると埋め込みのモードも自動的に切り替わるようになっています。ただし、この連携はFirefoxとChromeでは正常に動作しますが、Safariでは動作しません。Safariに特有の「アクセスを許可」ポップアップだけでなく、スクロールバーが正しく動作しないという別の問題もSafariでのみ発生しているため、これはDiscourseの問題だと推測しています。
それらはともかくとして、どのようにダークモード/ライトモードの連携を実現したのか興味があります。数年前に埋め込みコメントの自動ダークモードという投稿を行い、そこからpostMessageを使ったスクリプトを作成してもらって、2つのシステムを連携させることができました。しかし、Discourseの新しい完全なコメントシステム埋め込みでは、そのスクリプトが壊れているようです（デフォルトが奇妙なことにDiscourseテーマのダークモードになっています）。そこで質問ですが、以前postMessageスクリプトを作成し、Discourseの新しい埋め込みシステムに合わせて更新しましたか？もしそうであれば（そしてあなたがWordPressを使っているのに対し、私はGhostを使っていますが）、コードを共有していただけますか？あなたのコードと私のコードを比較して、Ghostと私のブログのダークモード設定で動作するように調整してみたいと思います。
あなたのブログと Discourse の両方がシステムに合わせた自動ダークモードを使用している場合、それらは同期された状態になります。
Discourse への自動ダークモードの追加については、Automatic Dark Mode color scheme switching を参照してください。
「いいね！」 2
[quote=“Falco, post:28, topic:400721”]
ブログと Discourse の両方がシステムに連動する自動ダークモードを使用している場合、両者は同期された状態になります。
自動ダークモードによるカラースキームの切り替え で、Discourse に自動ダークモードを追加しました。
[/quote]\n
はい、ただし私が正しく理解し、記憶している限りでは、その機能は Discourse がオペレーティングシステムがダークモードを使用しているかどうかを検知し、それに合わせて自身を調整するものです。私が作成した投稿（これもあなたがリンクした投稿への返信であり、かつその投稿へのリンクも含まれていました）は、オペレーティングシステムのモードに関係なく、ブログのライトモードとダークモードを手動で切り替えるためのブログ上のトグル/ボタンに関するものでした。私の理解は正しいでしょうか（そして、それによって私の以前の質問が再び関連性を持つことになりませんか）？
明確にするために、これは私が誰かに書いてもらったブログ用のスクリプトです。おそらく今、いくつかの調整が必要になるでしょう（おそらくいくつかのクラスを変更するだけで済むかもしれませんが、確信は持てません）。
<style>:root.dark{background: #1D2224}</style>
<script>
const discourseUrl = 'https://ff2f.discourse.group';
const clearDarkModeThrottle = () => window.darkThrottled = false;
window.isDark = false;
window.discourseLoaded = false;
window.setDarkMode = state => {
window.isDark = state;
window.darkThrottled = true;
localStorage.setItem('darkmode-enabled', state);
Array.from(document.getElementsByClassName('dm-input')).forEach(element => element.checked = state);
document.documentElement.classList[state ? 'add' : 'remove']('dark');
setTimeout(clearDarkModeThrottle, 250);
window.discourseLoaded && setIframeStyle();
};
let sub = () => {};
if (localStorage.getItem('darkmode-enabled') === "true") {
document.documentElement.classList.add('dark');
// domContentLoaded の後に要素を更新
sub = () => window.setDarkMode(true);
}
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.getElementsByClassName('darkmode-toggle'))
.forEach(element => element.onchange = darkmodeToggled);
function darkmodeToggled() {
const input = this.querySelector('input');
window.darkThrottled ? (input.checked = !input.checked) : window.setDarkMode(input.checked);
}
sub();
sub = null;
});
const handleMessageListener = (event) => {
var origin = event.origin;
if (origin === discourseUrl) {
setIframeStyle();
window.discourseLoaded = true;
}
};
const setIframeStyle = () => {
const iframe = document.getElementById("discourse-embed-frame");
if (iframe && iframe.contentWindow) {
iframe.contentWindow.postMessage(
window.isDark ? "dark" : "light",
discourseUrl
);
}
};
window.addEventListener("message", handleMessageListener);
</script>
私は Discourse を最新バージョンにアップデートしましたが、2つの問題が発生しています：
- テキストフィールドが壊れています — 入力しても何も表示されません
- モードを Markdown に切り替えると正常に動作します。
- Safari/iOS 上では埋め込みに水平スクロールバーが表示されます。
もちろんです。
以下は、Discourseで使用しているCSSです。
header a.button {
color: #fff;
padding: 6px 8px;
background-color: var(--tertiary);
display: inline-block;
}
.username a.staff {
padding: 2px 5px;
border-radius: 4px;
color: var(--tertiary-hover);
// text-shadow: 0px 0px 14px var(--tertiary-400);
background-color: var(--tertiary-400);
}
@media (prefers-color-scheme: light) {
/* Iframeのメイン背景 */
html, body {
font-family: 'Inter', sans-serif;
}
}
@media (prefers-color-scheme: dark) {
/* Iframeのメイン背景 */
html, body {
background-color: #1e2021 !important; /* --bg */
color: #f7f7f7 !important; /* --body-color */
font-family: 'Inter', sans-serif;
}
header.discourse {
border-bottom: 3px solid rgb(50.82, 50.82, 50.82);
}
article.post {
border-bottom: 1px solid rgb(50.82, 50.82, 50.82);
}
/* メインテキストの色 */
.embedded-posts,
.embedded-posts p,
.embedded-posts h1,
.embedded-posts h2,
.embedded-posts h3 {
color: #f7f7f7 !important;
}
/* ブロックの背景（埋め込みのフッター（返信オプション）など） */
.embedded-footer {
background: #27292b !important; /* --bg-2 */
border-top: 1px solid #27292b !important;
}
/* 境界線の色（明るい境界線が表示されないように） */
.embedded-posts, .embedded-footer {
border-color: #27292b !important;
}
/* リンク/ボタンが正しい色になることを保証 */
// a:link, a:visited, .topic-post .post-action-list button {
// color: #35bcf1 !important; /* --link-color */
// }
}
この場合、モニタリングイベントをトリガーし、タグ全体を発火させない方が正しいアプローチだと考えます。現在の設定は、page_viewイベントをトリガーするため、サイト全体の統計を人為的に膨張させ、アナリティクスを歪めています。
一夜のうちにページビューが急増しましたが、これらの数値は人為的なものであり、商業的な意味を成しません。
さらに言うなら、現在スクリプトの読み込みと処理が重複しています。
**GTM（Google Tag Manager）**の場合、さらに深刻です。GoogleやMetaの広告ピクセル、サードパーティの広告ネットワークスクリプトなど、アカウント内の他のすべてのスクリプトが二重に注入されています。
Discourseのネイティブアナリティクスについては、さらに1つの調整を提案します：埋め込みのトラフィックを独自のカテゴリに分割することです。これにより、コミュニティのトラフィックと埋め込みのトラフィックを別々に確認できるようになります。
「いいね！」 2
その件、本当にありがとうございます。心より感謝しています。ただ、少し混乱してしまいました。Ghost を使った私のブログで、Discourse の埋め込みに対してダークモードのトグルを有効化しようとした際（デフォルトでは機能しなかったため）、最終的には postMessage を使用するコードを実装する必要があると伝えられました（そのコードは誰かに作成してもらい、無事に解決しました）。しかし、あなたが提供してくれたコードには JavaScript が一切含まれておらず、私には理解できませんし、WordPress を使っているからといって、なぜすべてがそのまま機能するのかも分かりません。いずれにせよ、感謝いたします。
皆さん、こんにちは。この件についてすでに調査された方はいらっしゃいますか？
ユーザーから、テキストフィールドの問題によりフォームが全く使用できないとの報告があり、コミュニティの運営に支障をきたす状況になっています。
LucasMiller: 記事下部のコメントインターフェースにバグがあります。投稿するための入力ができません（iPhone と Android/Xiaomi の両方で確認済み）。テキストフィールドをタップして入力しようとしても、入力が反映されません。お時間のある際に調査をお願いいたします！
これは、最初のコメントを投稿する記事でのみ発生しています。
LucasMiller: テキストを入力せずに引用を作成することで、ようやく投稿できました。記事下部ではなくコミュニティインターフェースにリダイレクトされた後で、初めてコメントを入力することができました。
Markdown での回避策は有効ですが、一般ユーザーには理想的ではありません。何かご存知の点や一時的な修正方法があれば、大変助かります。ご協力いただき、ありがとうございます。
cc @Falco
「いいね！」 1
「いいね！」 4
これで修正されるはずです。本日の後半にマージされます。
@renatoさん、ありがとうございます
「いいね！」 4
@renato さん、ありがとうございます。修正されました！
一点だけお知らせですが、モバイル端末ではまだ横スクロールが表示されています。時間のある時に確認していただけると幸いです。
「いいね！」 1
