どのようなブックマークレット？

ツイッターで、ある文字列を含むツイートを抽出したりいいねの数でソートして遊んでいて思いついた。
ツイッターを某掲示板のスレッド形式にすれば読みやすくなるのではないかと。

ツイッターをスクレイピングして別ウィンドウを作ってスレッド形式で出力するブックマークレットを作ってみた。
読みやすくするつもりで作ったが本当に読みやすくなったかは使ってみないとわからない。

なぜなら作りたてだからだ。
１年も使用すれば読みやすくなったかわかるが１年後にはQiitaに投稿する熱意が忘れ去られている。

ツイッターはバックグラウンドでXHRを投げまくっている。
これは使用者の利便性を向上させているが少し重い感じがする。
スレッド形式は何の処理も動いていないので非常に軽い。

GitHubで公開中。
https://github.com/querykuma/snippets/blob/master/twitter/twitter2thread.js

動作環境

Chromeで動作する。
Firefoxでも動作するが about:config へ行って security.csp.enable の値を false にして Firefox を再起動する必要がある。

工夫した点

目立たせる

テキストが目立つようにテキスト以外は文字を小さく文字色も薄くした。

連番

スレッド形式はツイートに連番が振ってあるおかげで読みやすい。

HTML解析

ツイッターの非常に複雑なHTMLを解析した。
その結果、ツイッターのリンクをクリックしたとき中央にオーバーレイでツイートが重なって表示される場合とオーバーレイがない場合の２つのパターンに分けられることがわかった。

オーバーレイの処理

  function caseOuter() {
    document.querySelectorAll(".tweet").forEach(t => {
      writeTweet(t);
    });
  }

  function caseOverlay(po) {
    po.querySelectorAll(".tweet").forEach(t => {
      writeTweet(t);
    });
  }

  po = document.getElementById("permalink-overlay");
  if (po.style.display !== "none" && po.querySelector(".tweet")) {
    caseOverlay(po);
  } else {
    caseOuter();
  }

オーバーレイのときcaseOverlay()を呼び、そうでないときcaseOuter()を呼んでいる。

次のようにcaseOverlay()とcaseOuter()を１つにまとめることが可能。

処理をまとめる

  po = document.getElementById("permalink-overlay");
  if (po.style.display === "none" || !po.querySelector(".tweet")) po = document;
  po.querySelectorAll(".tweet").forEach(t => {
    writeTweet(t);
  });

暗号のようなスクリプトになってしまった。
これではスクリプトから元のアイデアを抽出することが難しい。
処理をまとめないスクリプトのほうが読みやすい。

返信

オーバーレイのときスレッド形式における返信を字下げして読みやすくした。

別のウィンドウに書き出す

別のウィンドウを作ってスレッド形式のHTMLを書き出す。
この技を使用すればツイッター側に影響がないようにできる。

新しいタブを作る

  wdoc = window.open().document;
  wdoc.write(html_head);
  wdoc.close();

window.open('','_blank').documentのほうがいいかもしれない。

タイムゾーン処理

パソコンでツイッターの時間を見ると時差で時間がずれている。

new Date("日時 PDT")とやって時差を直した。

リツイートを非表示

リツイートを見たくないというときがある。

リツイートのスタイルシート

.retweet {
    display: none;
    display: inline-block;
}

開発ツールを開いてdisplay: inline-block;のチェックを外すとリツイートを非表示にできるようにした。

動画

動画があるという情報が失われてしまったので動画があるときvideoと文字を出すようにした。

対応できなかった点¹

動画のURLが不明で動画の再生を再現できなかった。

Chromeはabout:blankページを名前をつけて保存から保存できなかった。

https://www.quora.com/How-can-I-save-about-blank-pages-on-Chrome

Quoraの質問にあるように開発ツールを開いてElementsをコピーする手間をかけなければならないようだ。

Firefoxはabout:blankページを保存できた。

引用記事のツイートはXHRを投げて遅延読み込みしているようで引用記事が表示されない。
代わりにURLを表示するようにした。
遅延読み込みされた後は引用記事も表示する。

mobileのページが未対応。

あるいは対応しなかった点。 ↩

Twitterをスレッド化して読みやすくするブックマークレット