95302


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

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

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

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

[code]

    isTwimgURL:function(t){return a.test(t)}
    
[/code]

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

[code]

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

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


CC BY-SA 4.0
2023-06-19T14:15:46.840
95301
2023-06-19T19:15:38.380
7886
question
javascript
「https://platform.twitter.com/widgets.js」コード内のどこで画像URLを取得しているのですか？


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

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

[code]

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

(実際には改行はなく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` を全文検索すると、

  * <https://platform.twitter.com/_next/static/chunks/3.dc446a58e72d99fbbc5e.js>
  * <https://platform.twitter.com/_next/static/chunks/loaders.card.DefaultCard.62f0b5bedf79f4020932.js>

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

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

* * *

いずれにせよ、

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

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

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

これらも **Sources**
タブでステップ実行していくとわかるかと思いますが、前者はその通りで、後者は[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test)です。


CC BY-SA 4.0
2023-06-19T19:15:38.380
95302
2023-06-19T19:15:38.380
2808
95301
answer