ツイッターってどうやってツイートを表示しているのか疑問に思ったので少し調べてみます。

１．ソースコードを見る

ツイート自体はソースコードにはない。

jsがたくさん参照されているためjsで行っていそう。

とりあえず右クリックから名前を付けて保存してみた。

それを開いてみると

黒い設定マークの歯車を背景にバニーガールが2人いるというホラー画像が出てきました。
トレンドの画面を保存したのですが、よく見てみるとトレンドの文字列が確認できました。
この保存したサイトのソースを見てみると

<h1>JavaScriptを使用できません。</h1>
<p>このブラウザではJavaScriptが無効になっています。引き続きtwitter.comを利用するため、JavaScriptを有効にするか、サポートされているブラウザに切り替えてください。

とか書いてあったり、下の方にあるめちゃくちゃ1行が横に長い部分にはトレンドなどの文字列がありました。
やはりjsを使って表示していることがわかりましたが、Twitterの中身の文字列が直接埋め込まれていてびっくりしました。
保存する前のソースコードと比べると、やはり保存する前にはトレンド等の単語は埋め込まれていませんでした。
そのためその部分を見てみると、
<svg>と<path d=M23.643 4.937~~~>などの数字が羅列されたものがありました。
これはsvgというベクター画像のデータで、この部分だけ保存して開くと真っ黒なツイッターのマークでした。
そのあとには
<form action="" method="GET">
とあり、formタグでGETメソッドを送っていることがわかりましたが、""となっており、どこに送ったのかわかりません。
さらにあとには
<script type="text/javascript" charset="utf-8" nonce=~~~>window.__INITIAL_STATE__={"~~~
とjsが続き、自分のアカウントのプロフィールの文字列などがありました。
あと
"account_country_setting_countries_whitelist":{"value":["ad","ae","af",～～～～～～～
この項目はひたすら国を表すアルファベットが並んでいました。
後は長すぎるので見てません。
GETメソッドはどこに送ったんですかね。
分からないです。


２．Devtoolsでみる

ネットワークにツイートの内容が書かれたファイルがあるかと思ったら見つけられない。

ツイートの本文のDOMのプロパティをみると、innerHTMLで挿入されているらしい。

そのinnerHTMLはどのjsに書かれているのか調べようとしたけどしぬほどjsがあって難読化もめちゃくちゃあってわからぬ。


やっとみつけた。

いつもネットワークはプレビューしか見ておらず、時々ヘッダーやペイロードを見る感じでした。

それでclient_event.jsonファイルのペイロードをちらっと見るとありました。

https://api.twitter.com/1.1/jot/client_event.json

apiとあるためwebapiを利用しているのだろうか。

直接アクセスしても何も表示されない。

ブラウザだとツイッターAPIの申請をしなくてもツイートが見れるのだから、ブラウザと同じ機能を果たせれば同じことができるはず。

もっとwebについて勉強しなければ。

右クリックから　コピー＞cURL(cmd)としてコピー　してcurlで実行するとなんかエラーが出ましたが、なんかめちゃくちゃ長いコマンドが何個も打ち込まれていました。

curlでもこんなめんどくさいなら無理っぽいですね。

ブラウザおそるべし。


３．pythonライブラリのソースコードを見る

twitterをAPIを使わずスクレイピングするpythonのライブラリがあるらしい。

そのライブラリのソースコードはgithubにある。

そのコードを読めばツイッターの仕組みがわかるかもしれない。


・twint

これにはtwintの使い方が書いてある。

cという変数にいろいろ情報を入れて

twint.run.Search(c)

これでスクレイピングが始まるらしい。

これを参考にtwintのソースコードを読んでみる。

run.pyのsearch関数を見るとrunという関数が呼ばれている。

run関数をみるとtwint.mainが呼ばれている。

次はtwintクラスのrun。

ツイートの内容はtweets()っぽい。

そこではfeed()でjsonを受け取るっぽい。

get.RequestUrlでjsonを受け取ってるっぽいため、get.pyのRequestUrl()をみる。

そこではRequest()でリクエストを受け取っている。

Request()ではaiohttp.ClientSession()の中でResponse()を呼んでいる。

Response()では.get()して.text()でテキストデータを得ているっぽい。


ということはセッションがこのソースコードを理解するための鍵っぽい。

セッションという単語は何となくしか知らないためぜんぜんさっぱりこーどがわかりませんでした。

そのためセッションについて勉強しようと思います。


ところでgithubは自作関数をクリックするだけで参照できるため便利ですね。

てかYouTubeはソースコードに動画のURLが埋め込んであるくらいなのにTwitterはツイート本文の文字の場所すらjsでいろいろしていてびっくりしました。

あとtwintは使っていないので今も使えるかは知りません。






https://github.com/taspinar/twitterscraper

https://github.com/twintproject/twint

https://github.com/markowanga/stweet