ああ、今わかりました。embedMaxHeight の目的は、コメントをよりネイティブなスタイルで表示し、可能な限りスクロールを最小限に抑えること（スレッドが長大な場合はまだスクロールが必要になりますが）だと誤解していました。そのため、15000px に設定していました。少し減らします。
その場合、embedMinHeight が意図通りに機能していないのではないかと思います。400px に設定していても、埋め込みの高さは少なくとも 600px あり、最後に小さな隙間が残っています。
「いいね！」 5
こんにちは！
新しくデザインされたコメントフォームは、特にモバイル環境において、はるかに優れています！ただし、2 つの小さな問題を確認しました。
- フォームの幅が画面幅を超えており、意図しない水平スクロールが発生しています。
- スクロール中に投稿数を表示するナビゲーション要素が、フォームの上に重なって表示されたままになっています。
「いいね！」 3
その通りです！@keegan が開発したもので、コアユースケースの一つとして作成されました。気に入っていただけて嬉しいです。ただ、数時間前にマージしたばかりなので、ツールバーの幅が崩れる問題や、Enter キーでの送信動作など、フォローアップ作業をまだ進めています。
「いいね！」 4
このフォームをDiscourseのスレッド内にも直接表示するのは良いアイデアではないかと考えています。フォームを開いた状態にしておくことは、非技術的なユーザーにとって、より親しみやすく、使いやすいアプローチです。エンゲージメントの向上につながるかどうか、試してみる価値があるかもしれません。
「いいね！」 3
これは確かにバグでした。以下のプルリクエストで修正しました。
「いいね！」 2
この問題は現在修正済みです。更新してください！
「いいね！」 1
サイト上で別の問題に気づきました。ブログのダークモード/ライトモードシステムを新しい Discourse 埋め込みと連携させ、ブログのモードを変更すると埋め込みのモードも自動的に切り替わるように実装されているようです。Firefox と Chrome では正常に動作しているようですが、Safari では機能していません。これは Discourse 側の問題ではないかと推測しています。なぜなら、「アクセスを許可」のポップアップは Safari のみに表示されるものであり、スクロールバーの動作が正しくないという別の問題も Safari のみに影響しているからです。
それらはさておき、ダークモード/ライトモードの連携がどのように実装されたのか気になっています。数年前に「埋め込みコメントの自動ダークモード」を投稿し、それに基づいて postMessage を使用したスクリプトを作成して、2 つのシステムを連携させることができました。しかし、Discourse の新しいフルコメントシステム埋め込みでは、そのスクリプトが機能しなくなっているようです（デフォルトが奇妙にも Discourse テーマのダークモードになっているため）。そこで質問ですが、以前に postMessage スクリプトを作成し、Discourse の新しい埋め込みシステム用に更新されたのでしょうか？もしそうであれば（WordPress を使用しているのに対し、私は Ghost を使用していますが）、コードを共有していただけませんか？あなたのコードと私のコードを比較して、Ghost とブログのダークモード設定でも動作するように改善できないか試してみたいと考えています。
ブログと Discourse の両方がシステムに連動した自動ダークモードを使用している場合、両者は同期されます。
Discourse に自動ダークモードを追加した詳細は、Automatic Dark Mode color scheme switching をご覧ください。
「いいね！」 2
はい、しかし私の理解と記憶が正しければ、それは 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');
// Update elements after 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 タグマネージャー）**の場合、事態はさらに深刻です。アカウント内の他のすべてのスクリプトが二重に注入されており、Google や Meta の広告ピクセル、サードパーティの広告ネットワークスクリプトなどが含まれます。
Discourse 標準のアナリティクスについては、さらに一つの調整を提案します：埋め込みトラフィックを独自のカテゴリとしてセグメント化することです。これにより、コミュニティのトラフィックと埋め込みコンテンツのトラフィックを個別に確認できるようになります。
「いいね！」 2
ありがとうございます、とても助かりました。ただ、少し混乱しています。Ghost を使っているブログでダークモードのトグルを Discourse 埋め込みと連携させようとした際（デフォルトでは機能しませんでした）、最終的には postMessage を使用するコードを実装する必要があると教えてもらいました（そのコードは誰かに作成してもらい、無事に機能しました）。しかし、あなたが提供してくれたコードには JavaScript が一切含まれておらず、私には理屈がわかりません。WordPress を使っているからといって、なぜそれがそのまま動作するのかが理解できません。とにかく、ともあれありがとうございました。
みなさんこんにちは、この件についてすでに調査された方がいらっしゃるかどうか確認したくて投稿しました。
私のユーザーからは、テキストフィールドの問題によりフォームが全く使えないという報告が寄せられており、コミュニティ運営にとって大きな支障となっています。
LucasMiller: 記事下部のコメントインターフェースにバグがあります。投稿するための入力ができず（iPhone と Android/Xiaomi の両方で確認済み）、テキストフィールドをクリックしても入力を受け付けません。お時間がよろしい際に確認をお願いします！
これは 最初のコメント となる記事でのみ発生しています。
LucasMiller: 引用を作成してテキストを追加せずに投稿することで、ようやく投稿できました。その後、記事下部ではなくコミュニティインターフェースにリダイレクトされてから、実際にコメントを追加することができました。
Markdown での回避策は役立ちますが、一般ユーザーにとっては理想的ではありません。ご助言や一時的な解決策をご教示いただければ幸いです。引き続きご支援いただき、ありがとうございます。
cc @Falco
「いいね！」 1
「いいね！」 4
これで修正されるはずです。本日中にマージされます。
@renato ありがとう
「いいね！」 4
@renato さん、ありがとうございます！修正されました！
一点だけお知らせです：モバイル端末では、ご都合の良いときに確認いただければと思いますが、横スクロールがまだ表示されたままになっています。
「いいね！」 1
