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

カスタマイズ テーマコンポーネント
, ,
55

素晴らしい！@Johani さん、ありがとうございます。すべての 3 つのブラウザで動作することを確認しました。

「いいね！」 4
56

素晴らしいです。これらは確実な改善であり、実現するには多大な労力がかかったことと思います。自己ホスト型の世界で少し厄介な共犯者たちにご耳を傾けていただき、ありがとうございます！

さて、このコンポーネントは S3 アップロードに対応していますか？

「いいね！」 3
57

試したことはありませんが、バケットが正しく設定されていれば動作するはずです。このコンポーネントは PDF を読み込むために リクエスト を発行します。

JavaScript で行われるこのようなリクエストは、オリジンがファイルへのアクセスを許可されていない場合にブロックされます。その結果、CORS エラーが発生します。コンソールを確認すると、おそらく以下のようなメッセージが表示されているはずです。

image

これについてはコンポーネント側でできることはほとんどありません。すべて S3 設定側で処理する必要があります。オリジン（あなたの Discourse ドメイン）がそのようなリクエストを許可されるように設定し、CORS 問題を回避する必要があります。

「いいね！」 9
58

ありがとうございます！すぐに勇気を出して S3 に戻ります。

もう一つの提案：ファイル名の前にスペースがある場合のタブ切り替え

pdf がデフォルトでインライン表示となり、ファイル名にスペースが含まれている場合は新しいタブで開くようにしたいと考えています。これにより、コンポーネント単位ではなく、pdf ごとにインライン表示かタブ表示かを選択できるようになります。

もしかすると、コンポーネントの設定は「デフォルトの動作は何にしますか？」とし、スペースが含まれている場合は別の動作にするのが良いかもしれません。

あるいは、スペースで何を行うか（インライン表示 / タブ表示 / ダウンロード）を指定できるようにする手もあります。

「いいね！」 2
59

ああー！Chrome がまた灰色のボックスしか表示しなくなりました。FF と Safari は問題ありません。

「いいね！」 3
60

このテーマコンポーネントは、PDF を外部のインタープリターに送信していますか？
外部サービスによるファイルの読み込みを回避したいと考えているため、「セキュアメディア」を有効にしています。

「いいね！」 1
61

これは以下のコードが原因であることがわかりました：

<a class="attachment pdf-attachment" href="...pdf">doc.pdf
  <iframe src="blob:... " height="500" loading="lazy" class="pdf-preview">
  </iframe>
</a>

上記のコードを以下に置き換えると動作します：

<a class="attachment pdf-attachment" href="...pdf">doc.pdf</a>
<iframe src="blob:... " height="500" loading="lazy" class="pdf-preview"></iframe>

ただし、既存のコードでこれをどのように修正すればよいかは確信が持てません。

「いいね！」 5
62

@Johani
このエラーは、以下のコードの34行目から41行目に関連しています。

        const setUpPreviewType = (pdf) => {
          if (previewMode === "Inline") {
            const preview = createPreviewElement();
            pdf.classList.add("pdf-attachment");
            pdf.append(preview);

            return preview;
          }
「いいね！」 4
63

このソリューションは、すべてのブラウザで動作しているようです。

「いいね！」 4
64

pdf.parentNode.append(preview); で解決したようですが（複数PDFの場合、プレビューがすべてのリンクの下にではなく、それぞれのリンクの下に表示されないため）

「いいね！」 3
65

ただし、親ノードが段落である場合、リンクと iframe が段落タグ内に含まれるため、この問題は発生しないはずです。

この問題を回避するには、添付ファイルの間に改行を挿入するだけで済みます：

[doc1.pdf|attachment](...)

[doc2.pdf|attachment](...)

これで、あなたの解決策により、Chrome でも PDF プレビューが正しく表示されるようになります。

「いいね！」 3
66

変更をプッシュしました。

確かに、ファイルを無視するよりもその方が理にかなっていますね。アップデート後は以下のように動作します。

  1. 設定を「New Tab（新しいタブ）」にすると、投稿にはプレビューが添付されません。リンクをクリックすると、PDF が新しいタブで開きます。

  2. 設定を「Inline（インライン）」にすると、デフォルトですべての PDF に投稿内にプレビューが添付されます。ファイル名がスペースで始まる場合はプレビューは添付されませんが、リンクをクリックするとダウンロードではなく PDF が新しいタブで開きます。

    すべてのネイティブのブラウザ PDF ビューアにはダウンロードボタンがあるため、必要であればそこからダウンロードできます。

デバッグと詳細情報をありがとうございます @sharewoodsDavid。どうやら <a> タグの中に <iframe> タグが含まれていると、バリデーションが失敗するようです。

iframe 要素は a 要素の子として出現してはなりません

したがって、あなたの修正は完璧です。上記の PR でその変更を行いました。

ある要素の後に別の要素を追加したい場合は、after() を以下のように使用できます。

someElement.after(newElement)

ある要素の前に別の要素を追加したい場合は、insertBefore() を以下のように使用できます。

// parentNode: 挿入先の要素の親
// newNode: 挿入したい要素
// referenceNode: 挿入先の要素

parentNode.insertBefore(newNode, referenceNode)

いいえ、外部サービスは一切関与していません。動作は以下の通りです。

  1. ユーザーが PDF 添付ファイルを含む投稿にアクセスする
  2. ユーザーのブラウザが添付ファイルをリクエストする
  3. サーバーがそれをユーザーのブラウザに送信する
  4. ユーザーのブラウザが組み込みの PDF ビューアを使用して PDF を読み込む

それだけです。

「いいね！」 7
67

完璧です、@Johani さんありがとうございます。Chrome、Firefox、Safari すべてで動作することを確認しました。:+1:

「いいね！」 3
68

これは素晴らしいですね！本当にありがとうございます。インストールして動作させることができました！まさに探していたものです。

「いいね！」 5
69

これは、フォーラムに既に投稿されているPDFにも遡って適用されますか？

「いいね！」 2
70

テストサイトでテストしたところ、HTMLを「再構築」する必要もなく、既存のものにも機能するようです。:+1:

「いいね！」 6
71

先週、ソースでアップデートがあったのを見たので、このコンポーネントは動作していると思いますが、残念ながらどのブラウザでも動作したことがありません。セキュリティ上の「メディア設定」のせいでしょうか？\n私だけがこれを動作させることができないのでしょうか、それともこれは一般的な問題ですか？

「いいね！」 2
72

私にとっても、うまくいったことは一度もありません。

「いいね！」 2
73

コンポーネントは正常に動作しています。どのような問題/エラーが発生していますか？

「いいね！」 3
74

ファイルへの通常のダウンロードリンクしか見つかりませんでした。それほど重要ではなかったため、それ以上深く調べることはしませんでした。あれば嬉しいですが、なくても構いません。そのため、申し訳ありませんが、これ以上詳しく説明することはできません。

編集
もう一度確認しました。前回確認したのはしばらく前です。

DiscourseHub はこれを表示します（iPad）。Discourse のログにエラーはありません。

image
image2048×1536 177 KB

しかし、Safari を使って試したところ、最初のページは表示されましたが、2 ページ目は表示されませんでした。

「いいね！」 1