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

こんにちは、

このコンポーネントをしばらく使用していますが、今日、埋め込みプレビューがページに表示されなくなっていることに気づきました。

2.8.0.beta6

「いいね!」 1

すべてのデスクトップブラウザで問題なく表示されています:

「いいね!」 5

これが iPad の Safari での表示例です:

「いいね!」 4

皆様、ありがとうございます。

再度確認しましたところ、Mac の Safari は問題ありませんが、Edge は正常で、Chrome で失敗しました。興味深いですね。



「いいね!」 4

Mac の Safari でこのプラグインの使用を許可するにはどうすればよいでしょうか?他のブラウザでは問題なく動作しますが、Safari で試すとブロックされてしまいます。設定の「コンテンツブロッカー」や「Web サイト」セクションで無効にしたつもりですが、それでもブロックされます。他にブロッカーをオフにする必要がある場所があるのでしょうか?ご助力いただけますと幸いです。

「いいね!」 1

正直なところ、これは帯域幅の無駄かもしれませんが、Safari は以前から、かなり厳しい CSP ルールやその他のセキュリティ上の理由で問題を起こしてきました。ただ、そうなれば Mac 版だけでなく、すべての Safari バージョンで動作が破綻するはずだと思いますが。

「いいね!」 3

MacのSafariでは問題なく動作します。動作しないのはiPhoneのみです(Safari、Firefox、Chrome)。最近iPadではテストしていません。

「いいね!」 3

iOS/iPadOS のすべての Web ブラウザは、Apple の制限により同じレンダリングエンジン(WebKit)を使用しているため、実際にはそれは問題になりません。

「いいね!」 2

新しい MacBook Air(Safari v. 14.1.1)で表示されている画面です。

どこかの設定が間違っているようです…

「いいね!」 3

Safari を最新バージョンに更新してみてください。

「いいね!」 2

新しいアップデートをプッシュしました。

これで、特定の PDF ファイルのプレビューを無効にできるようになりました。テーマコンポーネント内での実装が少し複雑になるため、onebox と完全に同じ動作をするわけではありませんが、非常に似た挙動です。

PDF をアップロードすると、デフォルトではコンポーザーに以下のように表示されます。

[file.pdf|attachment](upload://2cLML0SIwebGHDjlKRVzZ3VRv0f.pdf) (524.1 KB)

ファイル名の前にスペースを追加するだけで済みます。

[ file.pdf|attachment](upload://2cLML0SIwebGHDjlKRVzZ3VRv0f.pdf) (524.1 KB)

スペースは中括弧の中に入れる必要がある点にご注意ください。ファイルをダウンロードした際のファイル名に影響することはありませんし、投稿内にレンダリングされるファイルの説明にも影響しません。

これを行うと、PDF には加工された投稿にプレビューが添付されなくなります。

今回のアップデートで新しい設定が追加されました。

この設定には 2 つのオプションがあります。

Inline(インライン)と New Tab(新しいタブ)

Inline を選択すると、これまで通り PDF プレビューが投稿内にレンダリングされます。

New Tab を選択すると、コンポーネントはインラインプレビューを作成しません。ただし、添付ファイルのリンクをクリックすると新しいタブが開きます。新しいタブでは、ネイティブのブラウザリーダーで PDF ファイルが表示されます。

また、添付ファイルリンクの隣のアイコンも download から external-link に変更されます。

この設定のデフォルト値は Inline です。つまり、アップデート前にこのコンポーネントをインストールしていたサイトには影響しません。これは、手動で切り替える必要がある新しいオプションを追加するだけです。

Safari や一部の iOS デバイスで動作しないという報告がいくつかありましたが、私はそれを再現できませんでした。今回のアップデートでは、Apple デバイスで非常に扱いが難しいとされる blob ではなく、PDF を base64 URL として読み込むように変更して、この問題の解決を図っています。

コンポーネントを更新してください。また、ブラウザも最新の状態に保つことを確認してください。何らかの理由で Apple デバイスで動作しない場合は、可能であればブラウザのコンソールを確認し、表示される内容をお知らせください。

「いいね!」 10

最新版(2.8.0.beta6 (a1daf9fe53))にアップデートして以来、PDF プレビューの読み込みがわずかに遅くなっているように感じられます。また、少なくとも 1 つのケースでは、投稿内の 3 つの PDF のうち 1 つが Chrome で表示されません。

これはキャッシュの問題ではありません。Chrome のキャッシュをクリアし、PDF を少し変更して保存し、再アップロードしても、プレビューは表示されません。エラーログにエントリはありません。Chrome は最新版にアップデートされています。

コンソール:

「いいね!」 3

バージョン 2.8.0.beta6 を使用しています。PC は Windows 10 です。同様の現象を確認しました。Firefox は少し遅いですが、プレビューは最終的に表示されます。Chrome では表示されず、このグレーのプレースホルダーでフリーズしているようです。

「いいね!」 4

詳細をありがとうございます。その中の 2 つは正常に読み込まれたため、おそらくファイルサイズに関係しているだろうと考えました。そして、実際そうであることがわかりました。

大きな PDF をアップロードすると、Firefox では問題なく動作するものの、Chrome ではエラーが発生します。これについて少し調べてみたところ、Base64 URL の長さ制限はベンダーによって大きく決まるようです。Firefox には制限がありませんが、Chrome は 2MB で制限しています。

つまり、Base64 URL は現実的な選択肢ではなく、Blob URL に戻さざるを得ません。プレビュー要素を <iframe> タグではなく <object> タグにすると、Safari でのサポートが向上するようです。

そのため、この PR ではすべてを Blob URL に戻し、タグを <object> に変更します。これにより、Chrome での大規模ファイルの問題は確実に解決し、Apple デバイスでの問題も :crossed_fingers: 修正されることを願っています。

コンポーネントを再度更新して、まだ問題があるかどうかお知らせください。

「いいね!」 3

投稿にある 3 つの PDF ファイルのサイズは、上から順に 548.3 KB、1.1 MB、1.6 MB です。コンポーネントのみを更新した後、プレビューは表示されるようになりましたが、Chrome ではフル幅で表示されなくなりました:

編集:Firefox は上記の Chrome と同様に表示され、Safari ではプレビューが表示されず、灰色のボックスとして表示されます:

「いいね!」 3

ありがとうございます。サイズに関する問題の修正をプッシュしました。

Safari での問題は解決しない可能性がありますが、お試しください。結果をお知らせください。

「いいね!」 3

はい、Chrome と Firefox は修正済みですが、Safari はグレーのボックスが表示されたままです。

「いいね!」 3

念のため確認ですが、以前は Safari が正常に動作していましたよね?

「いいね!」 3

はい、最近のアップデートまではすべてのデスクトップブラウザが正常に動作していました。Safari がいつまで正常だったかは、毎日使っているブラウザではないためわかりませんが、過去に動作したことは確かです。

「いいね!」 3

このコミットで Safari の問題が解決するはずです。

FIX: previews are still broken on MacOS safari by hnb-ku · Pull Request #5 · discourse/discourse-pdf-previews · GitHub

MacBook でテストしたところ、Safari、Chrome、Firefox すべてで正常に動作しました。

もしこの問題に遭遇した場合

それはコンポーネント自体の問題ではなく、環境設定の問題です。

How to unblock a blocked plug-in to displ… - Apple Community

また、このコンポーネントはモバイル端末(iOS でも Android でも、Discourse の定義するモバイル端末)での PDF プレビューをサポートしていない点にご注意ください。そのため、この動作は想定されたものです。

「いいね!」 7