0

ツイートURLを指定して下記コードを読み込むと、URL指定したツイートがHTMLに埋め込まれるのですが、
https://platform.twitter.com/widgets.js

ツイート内に画像があるときには、画像も一緒に読み込まれます。

この時、画像は上記コード内のどこで読込指定していますか?

下記コードが関係あるかな、と思ったのですが、

isTwimgURL:function(t){return a.test(t)}

aは、下記オブジェクトのことですか?

a = /^http(s?):\/\/(ton|pbs)\.twimg\.com/,

testメソッドはどこに書いてありますか?

3
  • 2
    この疑問が解消すると、質問者さんのどんな課題が解決するのでしょうか。
    – int32_t
    Commented 2023年6月19日 20:31
  • ツイートURLから画像パスを、JavaScriptでどうやって取得しているのか知ることができます
    – re9
    Commented 2023年6月20日 2:00
  • 1
    何かに困っているのではなくて、技術的興味ですか? それならそれでいいと思いますけども、そういうことも質問文に書いていただけると回答しやすいです。
    – int32_t
    Commented 2023年6月20日 3:04

1 件の回答 1

2

WebブラウザのDevToolsで確認できるかと思います。(以下Google Chromeの場合)

Elements タブで画像が表示されている要素を確認すると次のようになっているのが確認できると思います。

<img
  alt="Image"
  draggable="true"
  src="https://pbs.twimg.com/media/Fy9bAcwaIAAw6P_?format=jpg&amp;name=900x900"
  class="css-9pa8cd"
/>

(実際には改行はなく1行)

"読込指定" というのが何を指すのかにもよりますが、 img 要素の src 属性で読み込み指定されている、というのも1つの回答になるかと思います。


Network タブで上記 src に指定されているURLに含まれる文字列 Fy9bAcwaIAAw6P_ を全文検索してみると
https://syndication.twitter.com/srv/timeline-profile/screen-name/[twitterアカウント]?[クエリパラメータ]
というリクエストのレスポンスHTMLに含まれる <script id="__NEXT_DATA__" type="application/json"></script> タグに囲まれたJSONの media_url_https プロパティの値として取得しているのが分かります。

ので、このJSONが読み込み指定しているデータだということもできそうです。


同じように Network タブで media_url_https を全文検索すると、

で参照している可能性がありそうなことが分かります。

あとは Sources タブで上記のファイル中に含まれる media_url_https を参照していそうな箇所に breakpoint を張ってステップ実行していけば冒頭の img 要素を生成している処理にたどり着けそうです。
これも読み込み指定している処理と呼べそうです。
(JSについてあまり詳しくないですが、minifyされたフレームワークコードのように見えるので、この手段で実際に見つけるのは困難ではないかと思われます)


いずれにせよ、

この時、画像は上記コード内のどこで読込指定していますか?

に対しては、上記コード内のどこでもないが、 iframe をロードしている処理が間接的にかかわっている、という回答になるかと考えます。

aは、下記オブジェクトのことですか?
testメソッドはどこに書いてありますか?

これらも Sources タブでステップ実行していくとわかるかと思いますが、前者はその通りで、後者はこちらです。

2
  • なるほど、画像表示している最終的なコードはElementsタブで確認できるのですね。またtestはuser定義メソッドではなく正規表現のメソッドなのですね。大変参考になりました Network タブで上記 src に指定されているURLに含まれる文字列 hoge を全文検索するとInitiator「vender.xxxxxxxx.js」が表示されるのですが、syndication.twitter.com/リクエストのレスポンスHTMLに含まれる <script> タグに囲まれたJSONの media_url_https プロパティの値として取得している、というのはどこで分かりますか? widgets.jsでvenderを検索しても見つからないのですが、ソースコードを読むしかないですか?
    – re9
    Commented 2023年6月20日 2:01
  • 私が試ている環境では vender.xxxxxxxx.js というものは表れていません(具体的に https://platform.twitter.com/widgets.js をどう使っているのか追記してもらえれば説明できることがあるかもしれません)。ただ、 vender.xxxxxxxx.js は拡張子から察するに静的なファイルだと思われるので、特定のツイートに含まれる画像ファイル名のような動的な情報が載っているとは考えづらいです。 Commented 2023年7月26日 18:41

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。