このガイドでは、Discourse の「許可された埋め込みセレクター」設定の構成方法について説明します。この設定は、外部サイトから Discourse に投稿を公開する場合や、JavaScript を使用して外部サイトに Discourse のコメントを埋め込む場合に重要です。
必要なユーザーレベル：管理者
高度な利用には、ある程度の CSS の知識が必要です
外部サイトから Discourse に投稿を公開したり、外部サイトに Discourse のコメントを埋め込んだりする際、「全文を表示」ボタンが正しいコンテンツを取得できない問題に直面することがあります。このガイドでは、「許可された埋め込みセレクター」設定を構成してこの問題を解決する方法を説明します。
問題の理解
ユーザーが「全文を表示」ボタンをクリックすると、Discourse が外部サイトから正しい投稿コンテンツを取得できない場合があります。ここで「許可された埋め込みセレクター」設定が重要な役割を果たします。
設定の場所
「許可された埋め込みセレクター」設定は、以下の 2 つの場所で見つけることができます。
- サイト設定ページで「allowed embed selectors」を検索します。
- 管理者 > カスタマイズ > 埋め込み に移動し、クローラータブを選択します。
正しい CSS セレクターの特定
適切な CSS セレクターを見つけるには、以下の手順に従ってください。
- Discourse に公開した外部サイトの投稿に移動します。
- ブラウザのウェブインスペクターを開き、投稿の HTML 構造を確認します。
- メインの投稿コンテンツを直接囲んでいる HTML 要素を特定します。
例えば、一般的な WordPress の投稿では、コンテンツは article タグ内の .entry-content div にあることが多いです。この場合、CSS セレクターとして article .entry-content を使用できます。
設定の構成
外部サイトからさまざまな種類のコンテンツを取得するには、複数のセレクターを追加する必要がある場合があります。例えば：
article .entry-content img, article .entry-content p, article .entry-content ul
この例は、記事の本文内にある画像、段落、および順序なしリストを対象としています。
テストとトラブルシューティング
正しいセレクターを見つけるには、試行錯誤が必要になることがあります。以下の点に注意してください。
- Discourse は外部投稿のコンテンツを 10 分間キャッシュするため、変更がすぐに反映されない場合があります。
- この問題を回避するには、複数の投稿でテストするか、Rails コンソールで
Rails.cache.clearを実行して開発サイトのキャッシュをクリアします。
画像の処理
ウェブサイトから画像を取得できない場合は、CSS セレクターに適切な画像要素が含まれていることを確認してください。例えば：
article .entry-content img
このセレクターは、記事の本文内にある画像を対象としています。
その他の考慮事項
- 「許可された埋め込みセレクター」設定は、API を介して公開された投稿と、Discourse 埋め込みスクリプトで取得された投稿の両方に適用されます。
- 特定のウェブサイトの構造やコンテンツの種類に応じて、セレクターを調整する必要がある場合があります。
- 設定を更新した後、変更を保存することを忘れないでください。
