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

[Discourse]

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

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

これは Discourse チームによってメンテナンスされている official テーマコンポーネントですので、#support、#bug、#ux、#feature のリクエストは、Meta のそれぞれのカテゴリで、適切なテーマコンポーネントタグを付けて投稿してください。下のリンクをクリックして、トピックを作成しましょう。:＋1:

 サポート  バグ  UX  機能

機能

before

after

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

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

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

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

使い方は？

1. コンポーネントをインストール
2. PDF アップロードを許可
3. ページをリフレッシュ
4. 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 (Ian C)]

I’m hosting my uploads and images on S3, and the preview is blocked by a “CORS policy: No ‘Access-Control-Allow-Origin’ header is present”.

Below is what Chrome console says:

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.

Update

I was able to fix this by adding the following CORS policy in my S3 bucket configuration.

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

[Ed_Bobkov (Ed)]

@travelvc

<AllowedOrigin>https://mydiscourse.url/</AllowedOrigin>

It’s necessary to add, that if you see this text in the error message from origin 'https://lounge.travelmassive.com' has been where your domain is without slash / at the end, then in the CORS configuration you should also add your domain without slash at the end like this:
https://mydiscourse.url

[Johani (Joe)]

@Jeremie_Leroy

could it be a conflict with other plugins ?

I noticed that your uploads are on AWS so, the issue is probably CORS related (the component is not active on your site for me to confirm). See the post below yours.

@travelvc

I was able to fix this by adding the following CORS policy in my S3 bucket configuration.

@Ed_Bobkov

It’s necessary to add, that if you see this text in the error message from origin 'https://lounge.travelmassive.com' has been where your domain is without slash / at the end

thanks for sharing that!

Please note that this issue will only affect self-hosters that have set up something like S3. Self-hosters that are not using S3 will not run into this issue. Customers hosted by CDCK will also not need to worry about that since they already have that set up.

That said, CORS configuration is a bit outside of the scope of this topic. If your uploads bucket does not allow your own domain access, then that needs to be fixed regardless since there might be some other issues caused by that.

@rishabh

I’m seeing the same problem

I’m a little bit unsure what happened here. Both cases seem to be working for me everytime I try. We can just chalk it up to a transitory network issue but please let me know if you see it again

I pushed a tiny update to this component that should improve the loading perception, there’s now a theme-color based placeholder instead of the default browser Iframe styles. It only shows up while the file is loading so 99% of the time, you won’t even notice it.

Given that most PDFs will load instantly I didn’t feel like adding a spinner would be worth it.

[pacharanero (Marcus Baw)]

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

[paulrudy]

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

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

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

[paulrudy]

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 (Nathan Kershaw)]

@pacharanero

アップロードリンクの先頭にスペースを付加することで（oneboxing と同様に）、PDF プレビューを抑制することは可能でしょうか？

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

[Freez (Damien Lecan)]

@paulrudy

Safari Web Inspector は、theme-creator でプレビューページを読み込む際に、以下のエラーを報告しています：
'worker-src' という Content-Security-Policy ディレクティブは認識されません。
blob:https://theme-creator.discourse.org/7b9b62c7-e782-4080-a521-04e3b06aa142 の読み込みが拒否されました。Content Security Policy の object-src ディレクティブにこのリソースが含まれていないためです。

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

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

[nathank (Nathan Kershaw)]

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

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

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

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

[keven]

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

[Benjamin_D (Benjamin Decotte)]

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

[nathank (Nathan Kershaw)]

@Benjamin_D

PDFをまだダウンロードできますか？

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

[Benjamin_D (Benjamin Decotte)]

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

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

@martin

すべてのアップロードを遡って分析し、必要に応じてセキュアとしてマークしたい場合は、uploads:secure_upload_analyse_and_update rake タスクを実行してください。

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

[reclaimedpress]

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

[nathank (Nathan Kershaw)]

@Benjamin_D

もしかしたらこれが役立つかもしれませんか？

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

The HiNZ eHealth Forum - trusted online digital health discussion

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

[hollosch]

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

[omarfilip]

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

[nathank (Nathan Kershaw)]

@nathank

だから私は行き詰まっています。特に、私が運営する 2 つのフォーラムでは動作するのに、他のフォーラムでは動作しない理由がわかりません。S3 のみが違いです。しかも、あなた方は S3 と共に動作させているとのこと。本当に混乱しています。

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

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

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

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

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

@pacharanero

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

[thoka (Thomas Kalka)]

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