インラインPDFプレビュー機能

Discourse · 2020 年 7 月 13 日午後 9:18


	概要	インライン PDF プレビューは、デスクトップ専用のテーマコンポーネントで、PDF アタッチメントのプレビューを作成できるようにします。
	プレビュー	Discourse テーマクリエイターでプレビュー（デスクトップのみ）
	リポジトリリンク	https://github.com/discourse/discourse-pdf-previews
	Discourse テーマが初めての方へ？	Discourse テーマの使い方の初心者ガイド

このテーマコンポーネントをインストール

機能

before

after

前述の通り、このコンポーネントはデスクトップでのみ動作します。モバイルでプレビューを表示しても、すべてが非常に小さく読み取りにくくなるため、ほとんどメリットがありません。

このコンポーネントは PDF をレンダリングするためにネイティブのブラウザ実装を使用するため、ブラウザによって表示結果が異なります。

また、Discourse ではデフォルトで PDF のアップロードが許可されていません。ユーザーに PDF ファイルのアップロードを許可したい場合は、すべてのユーザーが PDF をアップロードできるようにするには authorized_extensions に、スタッフメンバーに限定するには authorized_extensions_for_staff にその拡張子を追加する必要があります。

S3 を使用している場合は、CORS ポリシーの更新が必要になる場合があります。以下の投稿をご覧ください：Inline PDF Previews - #106 by JammyDodger

使い方は？

コンポーネントをインストール
PDF アップロードを許可
ページをリフレッシュ
PDF をアップロード

それだけです。残りは自動的に動作します。

設定

名前	説明
プレビューモード	インライン: PDF アタッチメントが投稿内にインラインでレンダリングされます新しいタブ: PDF アタッチメントのリンクは、PDF がレンダリングされる新しいタブを開きます

追加機能

個別の PDF をインラインでレンダリングしたくない場合は、ファイル名の前にスペースを追加するだけです。例えば：

これはインラインで表示されます

[sample-pdf.pdf|attachment](upload://usvbcKiQSWqA3w10gnf5PtydiXR.pdf) (82.9 KB)

これはインラインで表示されません

[ sample-pdf.pdf|attachment](upload://usvbcKiQSWqA3w10gnf5PtydiXR.pdf) (82.9 KB)

当社のホスティングをご利用中ですか？ テーマコンポーネントは、Standard、Business、Enterprise プランでご利用いただけます。

travelvc · 2020 年 7 月 29 日午前 12:01

アップロードと画像を S3 にホストしていますが、プレビューが「CORS ポリシー: ‘Access-Control-Allow-Origin’ ヘッダーが存在しません」というエラーでブロックされています。

以下は Chrome コンソールの出力です:

Access to fetch at 'https://travelmassive-discourse-cdn.s3.dualstack.us-west-1.amazonaws.com/original/2X/b/b578f6364592121964e6a2fd4969e5c1222bd909.pdf' (redirected from 'https://lounge.travelmassive.com/uploads/short-url/pTnA3r043WfhDK8HSdPQrtNn8Lf.pdf') from origin 'https://lounge.travelmassive.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

更新

S3 バケット設定に以下の CORS ポリシーを追加することで、この問題を解決できました。

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://mydiscourse.url/</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
   <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
 </CORSRule>
</CORSConfiguration>

Ed_Bobkov · 2020 年 8 月 4 日午前 8:15

補足すると、エラーメッセージに「from origin ‘https://lounge.travelmassive.com’ has been」と表示され、あなたのドメインの末尾にスラッシュ (/) がない場合は、CORS 設定でも同様に末尾にスラッシュを付けずにドメインを追加する必要があります。

https://mydiscourse.url

Johani · 2020 年 8 月 6 日午前 8:40

アップロードがAWS上にあることに気づきましたので、問題は恐らくCORSに関連していると思われます（私の環境ではコンポーネントがアクティブになっていないため確認できません）。あなたの投稿の下の投稿をご覧ください。

共有ありがとうございます！

なお、この問題はS3などの設定を行ったセルフホスティングユーザーにのみ影響します。S3を使用していないセルフホスティングユーザーはこの問題に直面しません。CDCKがホストしている顧客も、すでに設定が完了しているため心配する必要はありません。

とはいえ、CORS設定は本トピックの範囲外です。アップロード用バケットが自身のドメインへのアクセスを許可していない場合、それによって他の問題も引き起こされる可能性があるため、いずれにせよ修正が必要です。

ここで何が起こったのか少し不明確です。両方のケースとも、私が試すたびに正常に動作しているように見えます。一時的なネットワークの問題と片付けることもできますが、もし再度発生した場合はお知らせください

このコンポーネントに小さな更新を適用しました。これにより、読み込み時の印象が改善されます。デフォルトのブラウザのIframeスタイルの代わりに、テーマカラーに基づくプレースホルダーが表示されるようになりました。これはファイルの読み込み中のみ表示されるため、99%のケースでは気づかないでしょう。

ほとんどのPDFは瞬時に読み込まれるため、ローディングスピナーを追加する価値はないと考えました。

pacharanero · 2020 年 9 月 16 日午前 10:02

PDF プレビューを、ワンボクシングのようにアップロードリンクの前にスペースを付けることで抑制可能にすることは可能でしょうか？文書のリストだけを表示したい場合もあれば、プレビューを表示したい場合もあります。

paulrudy · 2020 年 9 月 23 日午後 8:23

私は MacOS Catalina の Safari を使用しており、ブラウザ内での PDF 表示を無効にする設定は行っていないはずです（例：http://www.orimi.com/pdf-test.pdf は正常に表示されます）。しかし、theme-creator でプレビューを表示すると、「プラグインがブロックされました」というウィンドウやメッセージが表示されます。

Safari の環境設定にあるサイト固有の設定も、他のウェブサイトと同じ設定です。

他の人も同様の現象が発生していますか？

paulrudy · 2020 年 12 月 11 日午後 5:30

MacOS Big SurのSafariではまだ動作しません。ブログプラグインに特別な設定はなく、他のPDFはブラウザで表示されます。

theme-creatorでプレビューページを読み込む際、Safari Web Inspectorから以下のエラーが報告されています。
Unrecognized Content-Security-Policy directive 'worker-src'.
Refused to load blob:https://theme-creator.discourse.org/7b9b62c7-e782-4080-a521-04e3b06aa142 because it does not appear in the object-src directive of the Content Security Policy.

nathank · 2020 年 12 月 12 日午後 9:35

これはこのコンポーネントにとって大きな改善になりますね！それを実現できますか、@Johani？

Freez · 2020 年 12 月 15 日午後 2:21

Firefox でも同様の問題が発生しますが、2 回目の訪問時のみです
この問題に対する回避策はありますか？CSP 設定での手動宣言でしょうか？

よろしくお願いいたします

nathank · 2021 年 2 月 4 日午前 7:29

私のサイトではこの機能が動作しなくなりました。PDF プレビューの代わりに大きな黒いボックスが表示されます：

セーフモードでプラグインを無効にしても違いはなく、他のすべてのテーマコンポーネントを削除しても変わりません。

これは画像やファイルのアップロードを S3 へ移行した後に発生しました。これが原因かもしれません。戻すのが簡単ではないため、そうであってほしくありません。

手がかりが見つかりません。残念なことに、これは素晴らしいコンポーネントです。何かアドバイスはありますか？

keven · 2021 年 3 月 2 日午前 1:26

S3 アップロードを有効にすると、同じ動作が見られます。

Benjamin_D · 2021 年 3 月 2 日午前 6:48

PDFのダウンロードは引き続き可能ですか？
私の環境では問題なく動作しています（s3 + セキュアメディア、CDNなし）

nathank · 2021 年 3 月 2 日午前 8:51

はい、可能です。私も同じ設定を使っています（と思います）。

Benjamin_D · 2021 年 3 月 2 日午前 10:01

メッセージ内のリンクは domain/secure-media-uploads/original/... の形式になっています
しかし、コンソールやネットワークを確認すると、実際のダウンロードはバケットから行われていることがわかります
amz の認証情報はお見えになりますか？

もしそうではないなら、これが役立つかもしれませんか？

また、カテゴリから投稿を移動させようとしたとき（あるいはコピー＆ペーストだったかもしれませんが）、何か奇妙なことが起きていたのを覚えています。ファイルの再アップロードをしたところでようやく動作しました。

reclaimedpress · 2021 年 3 月 4 日午後 3:09

新規の Discourse インストールと新規の PDF 添付ファイルでも、同じ動作が発生しています。

nathank · 2021 年 4 月 8 日午前 5:20

@Benjamin_D さん、ありがとうございます。どうやら「セキュアなアップロード」が有効になっておらず、リンク自体は綺麗に表示され、正常に機能しているようです。例えばこのリンクもそうです：

The HiNZ eHealth Forum - trusted online digital health discussion

そのため、頭が混乱しています。特に、私が運営している 2 つのフォーラムでは機能するのに、別のフォーラムでは機能しない理由がわかりません。唯一の違いは S3 を使用している点です。しかも、あなたの方は S3 でも正常に動作しているとのこと。本当に困惑しています。

hollosch · 2021 年 5 月 1 日午後 9:28

Discourse を最新バージョンに更新した後、PDF 添付ファイルが表示されなくなりました。何が原因でしょうか？

omarfilip · 2021 年 5 月 1 日午後 11:17

他のコンポーネントやテーマとの競合が原因の可能性があります。私の環境では正常に動作しています。まずは他のコンポーネントを無効にし、使用しているテーマがデフォルトと異なる場合はデフォルトテーマに切り替えてみてください。プラグインについても同様です。

nathank · 2021 年 5 月 5 日午後 12:48

わかった、進展がありました。S3 アップロードを無効にすると、新しいアップロードについては問題が解決しました。しかし、その道を選んだ場合、S3 とローカルがごちゃごちゃに混在してしまうという問題が残ります！

もしかすると、私が CDN（CloudFront）を使用していないことが原因で、管理画面に厄介なエラーが表示されているのかもしれません。設定を試してみて、それでうまくいくか確認します。

後でいや、CDN を使っても違いはありませんでした。

さらに後で S3 アップロードを正常に削除しました（多少の苦労はありましたが）。これで問題なく動作しています。

さて、これをさらに改善したいです！スキルを持った賢い方で、挑戦してみたい方はいますか？

thoka · 2021 年 10 月 10 日午前 3:46

PDFを新しいタブで開くことができるプラグインを探しています。
現在の Discourse の動作は、ダウンロードのみを許可するものです。
同様のテーマでそれが可能でしょうか？

トピック		返信	表示
Discourse send PDF inline Plugin	11	1535	2026 年 2 月 17 日
Make PDFs open directly (not via download) by default Feature completed , pdf-previews	18	341	2026 年 2 月 21 日
Add configuration option to serve local PDF uploads inline Feature pdf-previews , completed	3	739	2024 年 9 月 5 日
How to view .docs or .docx as preview or another tab in discourse Support pdf-previews	2	323	2024 年 6 月 7 日
Can I use pdf.js to serve my site pdf uploads Support	1	351	2024 年 3 月 29 日

インラインPDFプレビュー機能

機能

使い方は？

設定

追加機能

これはインラインで表示されます

これはインラインで表示されません

関連トピック