Facebookの過去の記事・コメントをすべてぶっこ抜くjavascript(DeveloperTools活用版) #JavaScript

想定読者

Facebookグループの過去記事を読むのにいちいちスクロール読み込みをするのが面倒たと感じている人
過去記事が多くてFacebookアプリだと読みづらいのでPDFReaderで読みたい人
「続きを読む」とか「コメントを表示」をいちいちクリックするのが面倒な人
過去の記事を一括で閲覧できるようにPDF化してグループメンバーに配布したいFacebookグループ管理人

経緯

とある技術系Facebookグループに参加したのだがなかなか議論が活発でたくさんの投稿があるのだが、Facebookに投稿されただけで過去記事はスレッドから流れてしまい検索しにくい・閲覧しにくい状態だった

Facebookページアプリで過去を追いやすくしたり、外部サイト（ブログなど）で過去記事をまとめたりすることを提案しようとも考えたが、自分が管理人のグループでもないので取り急ぎ自分が読みやすい形でFacebookページをぶっこ抜くことにした。

問題点（やりたいこと）

Facebookのスクロール読み込みが面倒だから自動で読み込みたい
「続きを読む」とか「コメントを表示」でたたまれてるので自動で展開したい
上記畳まれた箇所にさらに「コメントを表示」などが含まれてる場合がある（ネストしてる場合がある）のでそれも表示
外部サイトのURLはリンクとしてぶっこ抜きたい（毎度URLコピペするとか面倒くさいので）

アプローチ

以上を解決するために、一番最初まで自動でスクロール読み込みして、隠れている箇所は自動で展開するjavascriptを書き、出来上がった超縦長ページをPDFとしてエクスポートする

具体的にはChromeで対象のFacebookページを開いてDeveloperTools(F12)を開く

まずは一番最初の記事まで読み込み続けるためにDeveloperToolsのConsoleにて以下コードを実行する。以下コードでは十分大きいY座標までスクロールさせることで結果的にページの一番下までスクロールさせている。スクロール後に再帰的にscrollBottom()を呼び出すことで１秒ごとに画面最下にスクロールするようになる。このままだと無限ループなので、読み込めるページがなくなったらDeveloperToolsのConsoleでstop = 0を実行し、ループを完了させる。

setTimeout( scrollBottom = function(){
    document.body.scrollTop = 99999999;
    if( stop ){
        setTimeout(scrollBottom, 1000);
    }
}, 1000);

次に畳まれた箇所を展開する。
畳まれるパターンは記事本文、コメント、コメントへの返信の３パターン
対応するClassはそれぞれ　a._5v47.fss, .see_more_link, .UFIPagerLink

これらの要素をクリックするために以下を実行する
投稿数が多いと結構時間がかかるし操作がブロッキングされるので暫く待つ。
クリック処理が完了すると「続きを読む」などの箇所が展開される。

function triggerEvent(element, event) {
       var evt = document.createEvent("HTMLEvents");
       evt.initEvent(event, true, true ); // event type, bubbling, cancelable
       return element.dispatchEvent(evt);
}

var more = document.querySelectorAll( "a._5v47.fss, .see_more_link, .UFIPagerLink, span.UFIReplySocialSentenceLinkText" );
for(var i = 0; i < more.length; i++){
  triggerEvent(more[i], 'click');
}

上記だとネストした「コメントを表示」などは展開されないので２～３回繰り返す

var more = document.querySelectorAll( "a._5v47.fss, .see_more_link, .UFIPagerLink" );
for(var i = 0; i < more.length; i++){
  triggerEvent(more[i], 'click');
}

最後にCtrl+Pで印刷プレビューを表示し、表示に問題がなければPDFとして保存する。PDFなのでURLはリンクの形で埋め込まれるし、テキストの選択なども可能。

PDF化するときに邪魔な要素はDeveloperToolsで邪魔なDOMを手動Deleteしてやると幸せになれるかもしれない。

感想

PDFをiPadに入れて読んでるけど想像以上に快適
Facebook側でPDFとして出力を実装して欲しいくらい