2019-12-25

Instagram で自分がフォローしているユーザ一覧を取得したい

Instagram で自分がフォローしているユーザ一覧を取得したく、色々調べてみた。

Instagram はスクレイピングが難しく、ページ内の CSS クラス名もデタラメで分かりづらい。Selenium 的なツールでログインからフォロー一覧表示まで遷移するのは面倒臭くて諦めてしまった。

そこで次に考えたのは、フォロー一覧ページを開いている状態で、ブラウザの開発者ツールから JavaScript を実行し、データ収集を試みるという方法。

フォロー一覧ページの URL はこのようになっている。

https://www.instagram.com/【自分の ID】/following/

このページに遷移し、F12 で開発者ツールを開く。

CSS クラス .isgrP という要素が、フォローユーザをスクロール表示している領域なので、この要素に対して scrollTo() 関数を使ってスクロールしていけば、ユーザを確認していける。

このユーザ一覧は、スクロールの最下部に到達すると、ページャ的な要領で続きのユーザを動的に取得し、スクロールの下部に付与してくれる。現状バーチャルスクロールは使われていないので、

最下部にスクロール → ユーザ一覧の続きを読み込ませる → 最下部にスクロール → ユーザ一覧の続きを読み込ませる

を繰り返していけば、ページ内に全ユーザ情報の DOM が蓄えられるというワケ。

そんなワケで、こんな風にスクリプトを書いてみた。

var timerId = setInterval(() => {
  document.querySelector('.isgrP').scrollTo(0, 20000 * 10);
  console.log('Scroll');
}, 400);

scrollTo() に大きな値を渡して、常に最下部にスクロールし続けるよう、setInterval() でループしている。コレを開発者ツールのコンソールにコピペして実行すると、

最下部にスクロール → ユーザ一覧の続きを読み込む

という動きが始まる。コレをこのまましばらく放置する。

自分が試した限りだと、2400ユーザくらいまでは取得できるようなので、ひととおりの取得が終わったら、次のコードを叩いて setInterval() のループを止める。

clearInterval(timerId);

あとは取得したデータをコピペできれば良いだろう。

自分が調べたところ、ページ内の HTML 構造は以下のようになっている。

.isgrP
└ .jSC57._6xe7A
   └ .PZuss
      └ .wo9IH
         └ .uu6c_ : 1ユーザのくくり
            └ .t2ksc : アイコン・ID・名前
               └ .RR-M-.h5uC0.SAvC5 : アイコン
                  └ .enpQJ : ID・名前
                     ├ .d7ByH : ID
                     │ └ a.FPmhX.notranslate._0imsa : リンク
                     └ .wFPL8 : 名前

なので、取得できたユーザの数を知るには以下のように見れば良い。

document.querySelectorAll('.enpQJ').length;

最終結果。ユーザ ID とユーザ名を取得し、クリップボードにコピーするには、以下のコードを流す。

var users = [];
document.querySelectorAll('.enpQJ').forEach((elem) => {
  users.push(elem.querySelector('.FPmhX').textContent + ' : ' + elem.querySelector('.wFPL8').textContent);
});
copy(JSON.stringify(users));

copy() 関数は、開発者コンソールでのみ使える関数で、引数に渡した文字列をクリップボードにコピーしてくれる。

このコードを実行したらクリップボードにデータが入っているので、テキストエディタにでもペーストして、あとはよしなに加工すれば良いだろう。