Togetter を読みやすくする(ような気がする)スクリプト

firefox greasemonkey

この頃よく Togetter を見るんだけど、普通のサイトを読むより1.6倍くらい疲れるような気がするので、自分で読みやすいフォーマットに書き換えるスクリプトを書いた。
具体的には、同一人物の連続した tweet を一まとめにして、それぞれの tweet がパラグラフのように見えるようにした。
使ってみたところ、効果は微妙だけど一応公開しとく。要 firefox & greasemonkey。

// ==UserScript==
// @name           merge_tweet_on_togetter
// @namespace      http://d.hatena.ne.jp/t-sat/
// @description    連続する同一人物のtweetをひとまとめにする。
// @include        http://togetter.com/li/*
// ==/UserScript==

/* tweet_box DOM 操作関連 */
function getTweet(entry, material){
	var tweet = document.evaluate(".//div[@id]", entry, null, 9, material);
	return tweet.singleNodeValue;
}

function getAuthor(entry, material){
    var author = document.evaluate("string(.//img[@class='twttrimg']/@alt)", entry, null, 2, material);
	return author.stringValue;
}

function mergeItem(capital, county, material){
	var message = getTweet(county);
	
	county.parentNode.removeChild(county);
	capital.appendChild(message);
}

function group(entries, index){
	var entry = function(index){
		return entries.snapshotItem(index);
	}
	try{
		var i = 1;
		while(getAuthor(entry(index)) == getAuthor(entry(index + i))){
			mergeItem(entry(index), entry(index + i));
			i++;
		}
		return index + i;
	}catch(e){
		return null;
	}
}

function relocation(contentBox){
	var i = 0;
	do{
		var i = group(contentBox, i);
		i = i;
	}while(i);
}

/*tweet_box stylesheet 関連 */
var T_BOX_STYLE = "\
.list_body{float:right !important}\
.list_body .tweet a[href^='http://twitter.com']{opacity: .2 !important}\
.list_body:last-child .status{display:block !important}\
.list_body .status{display:none !important}\
.list_body:hover .status{display: block !important}"

function setMyStyle(){
	var styleElem = document.createElement("style");
	styleElem.id = "tweetBoxStyle";
	styleElem.textContent = T_BOX_STYLE;
	document.body.appendChild(styleElem);
}

function resetMyStyle(){
	var styleElem = document.getElementById("tweetBoxStyle");
	document.body.removeChild(styleElem);
}

/*UI 関連 */
var UI_STYLE ="\
#UISpace{\
	background: rgba(255,255,100,0.6) ;\
	border-left: 5px solid #FFF;\
	height: 5em ;\
	width: 5em ;\
	top: 40% ;\
	right: -3.5em ;\
	position: fixed ;\
}\
#UISpace:hover{\
	background: #FFA ;\
	right: 0em ;\
}"

var UIStyle = document.createElement("style");
UIStyle.textContent = UI_STYLE;
UIStyle.id = "UIStyle";
document.body.appendChild(UIStyle);

var UISpace = document.createElement("div");
UISpace.id = "UISpace"
UISpace.textContent = "Switch!";
UISpace.addEventListener("click", switchState, false);
document.body.appendChild(UISpace);


var list_boxes = document.evaluate('//div[@class="tweet_box"]//div[@class="list_box"]',document,null,7,null);
var originalTree;
var modifiedTree;
var modified = false;

function switchState(){
	if(!originalTree){
		originalTree = document.evaluate("//div[@class='tweet_box']/ul", document,null,9,null).singleNodeValue.cloneNode(true);
		relocation(list_boxes);
		modifiedTree = document.evaluate("//div[@class='tweet_box']/ul", document,null,9,null).singleNodeValue.cloneNode(true);
		setMyStyle();
	}else{
		var ul = document.evaluate("//div[@class='tweet_box']/ul", document,null,9,null).singleNodeValue;
		var ul_mama = ul.parentNode;
		ul_mama.removeChild(ul);
		if(modified){
			ul_mama.appendChild(originalTree);
			resetMyStyle();
		}else{
			ul_mama.appendChild(modifiedTree);
			setMyStyle();
		}
	}
	modified = !modified;
}

使用前の注意

greasemonkeyスクリプトを書く上での作法をよく分かってないので(無名関数で囲うってのは、もうやらなくて良いんだよね?)、何か悪さをするかも知れない。あとウチでは普段JavaScriptを切っているので、動的な要素と順番が入れ替わったりするかもしれないけど、そこら辺の確認もよくしていない。
現在分かっている変な挙動はfacebookの「いいね！」ボタンの場所が変わってしまうというのがあるけど、私にとって何の問題も無いので原因は調べていない。

使用方法

インストールした後 Togetter に行くと、下の画像内の1のように窓の右側に黄色っぽい四角形が表示される。その四角形にマウスポインタを重ねると四角形が飛び出してくるので、その上でクリック。tweet の表示方式が変わる。もう1度クリックすると元に戻る。

具体的に変更される点は:

  1. 同一人物の連続する tweet を一つのエントリにまとめる(=間に横線が入らない)。
  2. 同一人物の連続する tweet の先頭のみにアイコンを表示。
  3. 同一人物の連続する tweet の末尾のみに元 tweet へのリンクを表示。
  4. エントリ内の twitter.com で始まるリンクの文字色を薄くする。

これらの変更でベストケースでは、結構読みやすくなる。
1,2はリストの構造を根本的にぶっ壊してるので、アイコンの下にあるボタンでリプライとかリツイートできなくなってるんじゃないかと思うが試していない。3は表示されてないけど隠れてるだけなので、見たい tweet の上にマウスポインタを重ねると、元 tweet へのリンクが現れる。上の画像内2の状態(キャプチャの過程でマウスポインタが消えちゃったけど、本当は重なってる)。4は@付きの文字が先頭にあると、読み進めるのにうるさいのでそうしたけど、文脈上重要な情報が読み取りづらくなってる可能性もあり微妙。気に入らないようなら各自で調整、という事で。

作ってみた感想

XPath って便利。でも document.evaluate() の第5引数は鬼門だと思った。