Soundcloud と YouTube の onebox からのサムネイルに関する問題

icaria36 · 2020 年 5 月 24 日午前 10:32

Topic List Previews (legacy) の機能を使って、メインページにタイル表示を実装しています。昨日、TPL とは無関係の理由でインスタンスを再構築する必要がありました。Discourse コアでサムネイル生成バックエンドが変更されたことは把握しており、アップグレードによってサムネイルに問題が生じる可能性も認識していました。それでも、再構築は必須でした。

再構築（Postgres のアップグレードを含む）後、onebox 由来のすべてのサムネイルが消失しました。問題ありません。全投稿を再焼成（rebake）したところ、ほとんどのサムネイルが復活しましたが（良い）、すべてではありませんでした（不可解かつ問題）。念のため数回再焼成しましたが、メインページでサムネイルが表示されない投稿がいくつか残っています。ただし、トピックページでは onebox が問題なくレンダリングされています。

現在、以下の 2 つのパターンが確認されています。

Soundcloud の onebox は問題なくレンダリングされますが、サムネイルは常に欠落しています（「サムネイルを選択」でもサムネイルが表示されません）。HTML の再構築でも解決しません。例えば、https://the.eqlzr.org/t/female-pressure-podcast-episode-60-inverno/89 をご確認ください。
YouTube の onebox における一部のサムネイルがメインページで欠落していました（すべてではなく一部のみ）。しかし、トピックページにアクセスすると、それらが魔法のようにメインページに現れました。ただし…

YouTube の onebox を含むトピックで、サムネイルが生成されないものが 1 つ（最後のもので唯一のもの）あります。理由は不明です：https://the.eqlzr.org/t/look-mom-no-computer-diy-synths/75。

merefield · 2020 年 5 月 24 日午前 10:37

お話しした通り、サムネイル生成のロジックは現在、コアに組み込まれています。

TLP が以前に行っていたことは、もはや大部分不要です。

参考までに、コアの組み込み基準は以下の通りです。

  def extract_images_for_post
    # src 属性を持つすべての画像
    @doc.css("img[src]") -
    # イモージを除外
    @doc.css("img.emoji") -
    # 引用内の画像を除外
    @doc.css(".quote img") -
    # ワンボックスのサイトアイコンを除外
    @doc.css("img.site-icon") -
    # ワンボックスのアバターを除外
    @doc.css("img.onebox-avatar") -
    # 小さなワンボックス画像を除外（大きな画像は .aspect-image-full-size）
    @doc.css(".onebox .aspect-image img")
  end

discourse/lib/cooked_post_processor.rb at main · discourse/discourse · GitHub より

TLP はこれをわずかに変更していますが、条件を緩和するためだけです。可能であれば、このオーバーライドを完全に削除したいと考えています。

  def extract_images_for_post
    # src 属性を持つすべての画像
    @doc.css("img[src]") -
    # イモージを除外
    @doc.css("img.emoji") -
    # 引用内の画像を除外
    @doc.css(".quote img") -
    # ワンボックスのサイトアイコンを除外
    @doc.css("img.site-icon") -
    # ワンボックスのアバターを除外 # コアよりも広範な基準
    @doc.css("img.onebox-avatar")
  end

https://github.com/paviliondev/discourse-topic-previews/blob/master/lib/cooked_post_processor_edits.rb より

ご覧の通り、コアで定義されている小さなワンボックス画像を許可することで、除外対象を減らしています。

これを TLP で維持するのではなく、ユースケース全体で合意と整合性を図ることが重要です。そうすれば、プラグイン内でこれを維持する必要がなくなります。

これは @Arkshine にも関連します。

icaria36 · 2020 年 5 月 24 日午前 10:52

@merefield さん、ありがとうございます。とても有益な情報です。

一点だけ申し上げたいのは、以前 Soundcloud の onebox 用サムネイル生成は素晴らしい結果を出していたことです。音楽に特化した当サイトにとって、この後退は非常に気になります。

YouTube のサムネイルがたまに取得できなくても、それは問題ありません。

今後の展開が気になります。Discourse コア内でサムネイル生成を微調整し、多様な要件や要望の最適なバランスを見つけることが目標であるという点には同意します。この取り組みに携わっていただいている皆様、ありがとうございます。

david · 2020 年 5 月 24 日午前 11:02

一見すると、それは YouTube のoneboxではないと思います。おそらく、投稿に生の YouTube 埋め込みコードが使われているのでしょう。onebox に変換すれば、サムネイルは表示されるはずです。

これは古い TLP プラグインでは機能していましたか？Soundcloud の onebox は iframe なので、選択基準を更新したとしても、そこからサムネイル画像を取得する方法が見当たりません。@merefield さん、TLP には Soundcloud 固有のロジックがどこかにありましたか？

merefield · 2020 年 5 月 24 日午前 11:26

はい、ワンボックスに関連するカスタムロジックが存在しましたが、これは SoundCloud 専用ではありませんでした：

    if @has_oneboxes
      cooked = PrettyText.cook(@post.raw)

      if img
        ## 画像を特定するために、より具体的な情報が必要です
        img_id = img
        src = img.attribute("src").to_s
        img_id = src.split('/').last.split('.').first if src
      end

      prior_oneboxes = []
      Oneboxer.each_onebox_link(cooked) do |url, element|
        if !img || (img && cooked.index(element).to_i < cooked.index(img_id).to_i)
          html = Nokogiri::HTML::fragment(Oneboxer.cached_preview(url))
          prior_oneboxes = html.css('img')
        end
      end

      if prior_oneboxes.any?
        prior_oneboxes = prior_oneboxes.reject do |html|
          class_str = html.attribute('class').to_s
          class_str.include?('site-icon') || class_str.include?('avatar')
        end

        if prior_oneboxes.any? && validate_image_for_previews(prior_oneboxes.first)
          img = prior_oneboxes.first
        end
      end
   end

このロジックは、コアロジックに委譲するよう削除されました。

icaria36 · 2020 年 5 月 24 日午前 11:33

ああ、ソースを確認するとは思いもしませんでした。

確かに onebox でしたが、URL に余分な引数がついていました：

https://www.youtube.com/watch?v=4T6J-K8_yk4&list=PLluPQLh1xzlL2agiCCQFClcsutli90Qnz

これをシンプルな URL に変更しました：

https://www.youtube.com/watch?v=4T6J-K8_yk4

すぐに反映されませんでした。HTML を再構築しても即座に変更はありませんでしたが、Sidekiq を確認すると関連するジョブがスケジュールされているのがわかりました。4 分間辛抱強く待ったところ、サムネイルが利用可能になり、メインページに表示されるようになりました。日曜日にこんなに迅速にお返しいただき、@david さんありがとうございます！

はい、確かに機能していました。残念ながらスクリーンショットは撮っていません。メインページでは、onebox の左側に画像が表示されていました。

david · 2020 年 5 月 24 日午前 11:36

興味深いですね。来週これを調べてみます。余分な引数があっても、まだ動作すると思います。

なるほど、Onebox のプレビューHTML を取得して、そこからサムネイルを抽出しているのですね。SoundCloud の場合は、それでサムネイルが表示されますね

merefield · 2020 年 5 月 24 日午前 11:39

はい、これは @angus 氏の素晴らしいハックに基づいています責任は負いかねますが、よく動作します。

追記：実は嘘をつきました、私の指紋も至る所についています！このコードの一部は私が書いたものですが、あまりに昔のことなので忘れていました。2015 年です！

david · 2020 年 6 月 1 日午前 9:15

これらはどちらも難しい問題です。現時点では、現在の動作を維持する予定です。将来的にいくつかの改善を追加できるかもしれません。進捗を追跡するための #feature トピックをいくつか作成しました。

YouTube の差異については、以下をご覧ください:

SoundCloud の問題については、以下をご覧ください:

Touri · 2020 年 6 月 2 日午後 7:40

私も https://youtu.be/ 形式の YouTube リンクで同じ問題が発生していました。https://www.youtube.com/watch?v= 形式に変更すると、再び動作するようになりました。

codinghorror · 2020 年 6 月 2 日午後 8:27

それは奇妙ですね、その特定のYouTubeリンクをここに共有していただけませんか？どちらの形式でも問題ありません。

Touri · 2020 年 6 月 3 日午後 1:25

もしかしたら、再レンダリングでも問題は解決したかもしれません。
しかし、バージョンにはその痕跡が残っているようです：

リンクを以前のものに戻しましたが、現在はすべて正しくレンダリングされます。これは、beta6 アップデート後のレンダリングエラーに起因していたのだと思います。

david · 2020 年 7 月 3 日午後 1:30

このトピックは最後の返信から30日後に自動的に閉鎖されました。新しい返信は受け付けられていません。

トピック		返信	表示
Issue with Onebox and Youtube Bug onebox	11	1242	2019 年 8 月 21 日
Thumbnails for iframe oneboxes Feature	1	764	2020 年 9 月 14 日
Using onebox images for topic thumbnails Development	27	3136	2022 年 2 月 27 日
Thumbnails are missing for our external embeds when using topic-thumbnails Development pr-welcome	10	1064	2023 年 3 月 31 日
YouTube URIs fail to render thumbnails when oneboxed Bug onebox , composer	12	290	2025 年 11 月 14 日

Soundcloud と YouTube の onebox からのサムネイルに関する問題

関連トピック