# Facebook風トピックモーダル - これは良い？
**URL:** https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565
**Category:** Development
**Created:** [2026 年 7 月 27 日午前 1:09 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565 "2026-07-27T01:09:55Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [2026 年 7 月 27 日午前 1:09 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/1 "2026-07-27T01:09:55Z")
他のサイトとは異なる外観を目指して試行錯誤し、Facebook風のトピックモーダルを作成しました。私には読み込みが速く感じられ、デスクトップ環境でもよりスムーズに動作するようです。
ご意見をお聞かせください。
テスト用リンクは [https://www.carptalk-online.co.uk/](https://www.carptalk-online.co.uk/) です（デスクトップのみ対応）
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2026 年 7 月 27 日午前 1:28 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/2 "2026-07-27T01:28:24Z")
上手にできました！Facebookユーザーではない私でも、かなり気に入りました。あなたのサイト、かっこいいですね。🤩
あと、カープ（大きな魚）がこんなに巨大になるなんて知りませんでした！🎣
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2026 年 7 月 27 日午後 3:02 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/3 "2026-07-27T15:02:45Z")
すごくクール！返信が20件以上のトピックでテストしましたか？スクロールすると投稿のさらに多くの「ページ」を読み込むのがそのタイミングで、私の経験では、この種の代替ビューの最大の複雑さの一つです
---
### Author:  [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [2026 年 7 月 27 日午後 5:11 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/4 "2026-07-27T17:11:12Z")
いいえ、今これをしてから報告します
---
### Author:  [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [2026 年 7 月 27 日午後 5:15 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/5 "2026-07-27T17:15:08Z")
問題なく動作します - URL 削除済み
---
### Author:  [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [2026 年 7 月 27 日午後 5:15 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/6 "2026-07-27T17:15:58Z")
ページが読み込まれる様子はあなたのおっしゃる通りに見えますが、期待通りに動作しています
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2026 年 7 月 27 日午後 5:43 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/7 "2026-07-27T17:43:41Z")
ダイレクトリンクをクリックしても、トピックはモーダルウィンドウに表示されません。ただし、トピックリストからは正常に動作します。
---
### Author:  [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [2026 年 7 月 27 日午後 5:50 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/8 "2026-07-27T17:50:52Z")
ああ、それは次に調べないといけないことだけど、ずっと考えてたんだ。それって重要なの？ Facebookの動作と同じだよ。直接リンクをクリックすると実際の投稿に飛び、ブラウジング中にクリックするとモーダルが開く。
---
### Author:  [@nicolsdennis](https://meta.discourse.org/u/nicolsdennis)
#### Post date: [2026 年 7 月 27 日午後 11:45 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/10 "2026-07-27T23:45:04Z")
面白い概念ですね。古いメッセージを読み込みながら、新しいメッセージのためにメッセージバスとの接続を安定して維持できますか？
---
### Author:  [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [2026 年 7 月 28 日午前 12:16 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/11 "2026-07-28T00:16:33Z")
はい、その通りです。モーダルはトピックのカスタムコピーをレンダリングするのではなく、iframe内に通常のDiscourseトピックアプリケーションを読み込むためです。iframeは独自のMessageBus接続を確立し、Discourseは古い投稿の読み込みや新規投稿の受信を含む投稿ストリームを通常通り処理し続けます。
また、親ページもその背後でアクティブな状態を維持するため、技術的にはモーダルが開いている間、2つのDiscourseインスタンスと2つのMessageBus接続が存在することになります。これは機能しますが、完全にネイティブな実装に比べて少しリソース消費が大きくなります。モーダルを閉じると、iframeとその接続が削除されます。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2026 年 7 月 28 日午前 11:02 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/12 "2026-07-28T11:02:17Z")
> [@Damian\_Boon](#):
>
> Yeah thats the next thing i need to look into but i have been pondering over this, does it matter? That’s the same as Facebook behaves
それが問題になるかどうかはわかりませんが、私はFacebookを使っていません 😛
ただ、リンクをクリックしてもトピックがモーダルで表示されないことに少し驚きました。ちょうどモーダルで動作することを実証するために投稿されたはずなのにです。
---
### Author:  [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [2026 年 7 月 28 日午前 11:49 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/13 "2026-07-28T11:49:11Z")
私の最初の投稿はホームページへのリンクでしたよ。クリスにトピックをテストしてもらうための私の返信をクリックしました？haha。ところで、どうしていますか？しばらく会っていませんね
---
### Author:  [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [2026 年 7 月 29 日午前 11:48 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/14 "2026-07-29T11:48:10Z")
モバイル版の作成が完了し、動作に満足しています。次は、より良い方法を見つけてロード速度を改善する必要があります。何かアドバイスはありますか？
---
### Author:  [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [2026 年 7 月 29 日午後 12:56 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/15 "2026-07-29T12:56:46Z")
より多くのテストを行った結果、Googleが認識する非JavaScript版を使用しました。これにより、モーダル内での読み込みが瞬時に行われます。もしそのコンテンツを何らかの方法で活用できれば、この処理はさらに高速化できるでしょう。
---
### Author:  [@kddkd](https://meta.discourse.org/u/kddkd)
#### Post date: [2026 年 7 月 29 日午後 1:02 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/16 "2026-07-29T13:02:04Z")
PC版では非常に美しく見えます。
モバイル版の読み込み速度がやや遅く、クリックするとコンテンツのないページと右上隅の閉じるボタンしか表示されず、空白の画面を長時間待つ必要があるようです。
---
### Author:  [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [2026 年 7 月 29 日午後 1:08 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/17 "2026-07-29T13:08:43Z")
これが今取り組んでいることです 🙂 現時点では、まだ現実化させたいコンセプトに過ぎません。ただし、私のデバイスでは、Discourseのスピナーローディングアイコンが表示されながら、モバイルで2秒で読み込まれるので、何が起こっているのかよくわかりません。おそらく、サーバーがロンドン（英国）にあり、CDNがまだ設定されていないためでしょう。
---
### Author:  [@kddkd](https://meta.discourse.org/u/kddkd)
#### Post date: [2026 年 7 月 29 日午後 1:22 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/18 "2026-07-29T13:22:10Z")
> [@Damian\_Boon](#):
>
> サーバーはロンドン（イギリス）にあるからです
確かに距離が遠すぎるので、ネットワークの伝送には時間がかかります
---
### Author:  [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [2026 年 7 月 29 日午後 1:33 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/19 "2026-07-29T13:33:41Z")
これでモーダル内でのトピックの読み込みが即座に完了するようになりました。次は、返信などで最初の Discourse 読み込みインスタンスを使用する方法を見つける必要があります（これはテストサーバー上です）。
---
### Author:  [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [2026 年 7 月 29 日午後 10:31 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/20 "2026-07-29T22:31:59Z")
メインサイトでこの機能をオフにしました。現在、ユーザーが登録するトラフィックが増えているため、テストサーバーに移動しました。モーダルに興味のある方がいる場合、8月中旬までに完了する予定です。
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2026 年 8 月 5 日午前 12:16 UTC](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565/21 "2026-08-05T00:16:42Z")
こんにちは 👋
@Damian_Boon のアプローチとは少し異なります：iframe を使用せず、すべてを Discourse 独自の `Post`/post-stream メカニズムを再利用するネイティブな Glimmer コンポーネントとして実行します。スレッドでいくつかの具体的な質問が上がったので、それぞれをどのように解決したかをご紹介します。
* * *
**iframe を使用しない理由**
iframe はこれを達成する最も速い方法です。フルなトピックルート、コンポーザー、モデレーション機能がすべて「無料」で提供されます。@nicolsdennis の MessageBus に関する質問が指摘しているコストとは、ページ上に 2 つのライブ Discourse インスタンスが存在することです。つまり、2 つの post-stream、2 つの MessageBus 接続、2 つのコンポーザーが同時に動作することになります。
私は逆のアプローチを取りました。モーダルは `DModal` で、`store.createRecord("topic", …)` から構築された `postStream` に対して、本物の `Post`/`PostSmallAction` コンポーネントをレンダリングします。同じアプリ、同じ MessageBus 接続、同じコンポーザーが使用されます。つまり、モーダルが開いている間、いくつかのコアなシングルトンサービス（`modal`、`bookmarkApi`、`DiscourseURL.routeTo`、環境変数の `controller:topic`）をモーダルのトピックに向けなければなりません：
```js
// コアコンポーネント（例：PostBookmarkManager）は controller:topic から topic.bookmarks を読み書きします。
// モーダルが開いている間、これを私たちの topicModel に向けます。
this.topicController = getOwner(this).lookup("controller:topic");
if (this.topicController) {
this.originalTopicControllerModel = this.topicController.model;
}
```
すべてのパッチは、クローズ、破棄、またはナビゲーション移動時に、冪等な `restoreServicePatches()` によって元に戻されるため、モーダルが消えた後、アプリの他の部分に何らかの漏れが生じることはありません。
* * *
**ダイレクトリンクと内部ルーティング**
2 つの要素があります。まず、モーダルは常に投稿 1 からではなく、読者が実際に中断した場所から開く必要があります：
```js
const lastRead = this.topic.last_read_post_number ?? 0;
const highestPostNumber = this.topic.highest_post_number ?? 1;
const initialPostNumber = Math.max(
1,
Math.min(lastRead + 1, highestPostNumber)
);
```
次に、同じトピック内を指す投稿内のリンクは、モーダルを抜け出してはいけません。`DiscourseURL.routeTo` は、モーダルが開いている間パッチされます：
```js
this.originalRouteTo = DiscourseURL.routeTo.bind(DiscourseURL);
DiscourseURL.routeTo = (path, opts) => {
if (typeof path === "string") {
const match = path.match(/^\/t\/(?:[^/]+\/)?(\d+)(?:\/(\d+))?/);
if (match && parseInt(match[1], 10) === this.topicId) {
this.jumpToPost(match[2] ? parseInt(match[2], 10) : 1);
return Promise.resolve();
}
}
this.restoreServicePatches();
return this.originalRouteTo(path, opts);
};
```
他の場所を指すものは、まずパッチを復元し、通常のナビゲーションにフォールバックするため、モーダルを離れても古いルーティングが残ることはありません。
* * *
**返信ケース（20 件以上の返信）**
下方向への無限スクロールは、センチネルと `IntersectionObserver` を通じて行われ、上方向には対称的な「より古い投稿を読み込む」機能（プレビューはスレッドの途中から開く可能性があります）があり、どちらも本物のトピックルートで使用される正確な `postStream.appendMore()` / `prependMore()` を駆動します：
```js
sentinel = modifier((element) => {
const obs = new IntersectionObserver(
(entries) => {
if (entries.some((e) => e.isIntersecting)) {
this.loadBelow();
}
},
{
root: document.querySelector(".topic-preview-modal .d-modal__body"),
rootMargin: "200px",
}
);
obs.observe(element);
return () => obs.disconnect();
});
```
* * *
**最初のペイント**
スケルトン（アバターとラインプレースホルダー、しめら）がスピナーの代わりに最初のペイントを埋め、投稿リスト自体は一度にすべてではなく段階的にレンダリングされます。まずターゲット投稿に到達するのに十分な数の投稿をレンダリングし、その後 `requestIdleCallback` を介して 5 つずつ残りを追いつかせます：
```js
const renderRemainingPosts = () => {
const totalPosts = this.postStream?.posts?.length || 0;
if (this.renderLimit < totalPosts) {
this.renderLimit = Math.min(this.renderLimit + 5, totalPosts);
if (this.renderLimit < totalPosts) {
if (window.requestIdleCallback) {
window.requestIdleCallback(renderRemainingPosts, { timeout: 300 });
} else {
setTimeout(renderRemainingPosts, 30);
}
return;
}
}
this.renderLimit = Number.MAX_SAFE_INTEGER;
};
```
各投稿ラッパーには `content-visibility: auto` と大まかな `contain-intrinsic-size` も設定されるため、ブラウザは画面外の投稿のレイアウトを完全にスキップします：
```scss
.topic-post {
contain: layout;
content-visibility: auto;
contain-intrinsic-size: 1px 180px;
}
```
* * *
> [@Damian\_Boon](#):
>
> 最初に読み込まれた Discourse インスタンスを使用する方法を見つける
これは私が最も強く推したい部分です。クリック後にインスタンスを再利用するのではなく、クリック_前_にプリフェッチします。各トピックリストの行は、自身の可視性を監視し、高速スクロールで多数のリクエストが発火しないように 200ms デバウンスし、最大 2 つの同時フェッチに制限された小さな共有キューに引き渡します：
```js
function createTopicPrefetchQueue(maxConcurrent) {
const pending = [];
const activeIds = new Set();
function drain() {
while (activeIds.size < maxConcurrent && pending.length) {
const { id, task } = pending.shift();
activeIds.add(id);
Promise.resolve()
.then(task)
.finally(() => {
activeIds.delete(id);
drain();
});
}
}
return {
schedule(id, task) {
if (activeIds.has(id) || pending.some((item) => item.id === id)) {
return;
}
pending.push({ id, task });
drain();
},
cancel(id) {
const index = pending.findIndex((item) => item.id === id);
if (index !== -1) {
pending.splice(index, 1);
}
},
};
}
```
プリフェッチはプライベートな `PreloadStore` キーの下に保存され、故意にコアの `topic_${id}` キーとは異なります。そこに書き込むと、`last_read+1` スコープの部分的な JSON が本物のフルトピックナビゲーションに漏れてしまいます。実際のクリック時、モーダルのローダーが期待するキーに昇格されます：
```js
promoteTopicPrefetch(topic) {
if (!topic?.id) {
return;
}
try {
const key = this.prefetchStoreKey(topic.id);
const prefetched = PreloadStore.get?.(key);
if (prefetched != null) {
PreloadStore.remove?.(key);
PreloadStore.store(`topic_${topic.id}`, prefetched);
}
} catch {
// ベストエフォート - モーダルは新しい読み込みにフォールバック
}
}
```
行がクリックされる前に画面外にスクロールアウトした場合、保留中のフェッチはキャンセルされ、キャッシュされた結果は破棄されるため、現在画面上にあるトピックのデータのみを保持します。
* * *
**もう一つ、スレッドではまだ提起されていない：ネストされたモーダル**
いくつかのモーダルフロー（明示的なコールバックプロップを介して `showSubModal()` に配線されるのではなく、コアが独自に開くもの）は、`modal` サービスを直接呼び出します。それらが読者の下から_プレビュー_モーダルを閉じさせないよう、`modal.show()` は、プレビューが開いている間、ターゲットとなるモーダルを小さなローカルサブモーダルスロットに選択的にリダイレクトするようにパッチされます：
```js
this.originalModalShow = this.modal.show.bind(this.modal);
this.modal.show = (component, opts = {}) => {
return this.showSubModal(component, opts.model);
};
```
これにより、それらのターゲットフローはプレビューを置き換えるのではなく、その上にレイヤーされます。同時に、読み取り追跡（`/topics/timings`）は、`IntersectionObserver` で追跡された可視投稿番号のセットの定期的なフラッシュを介して、通常のトピック訪問と同じように、閉じた後も未読カウントが正しいまま裏で実行されます。
* * *
これはモーダル、トピックリストトリガー、およびスタイリング全体にわたるかなりのコード量（合計約 1700 行）であり、そのうちの約 3 分の 1 をカバーしています。最もトリッキーな部分は、サービスパッチと、画像の読み込み完了後に投稿の高さが変更された後に `content-visibility` を動作させることでした。興味があれば、いずれかについてさらに詳細に説明したり、オープンソース化したりできます。
[Next page](https://meta.discourse.org/t/facebook-style-topic-modal-is-it-better/408565.md?page=2)