Togetterの「続きを読む」を自動的に展開して、さらに非公式RTの表示を薄くするUserScript
Togetterの「続きを読む」を自動的に展開するUserScritpt
// ==UserScript== // @name auto page more load for toggeter // @description Togetterの続きを読むを自動的に表示する // @include http://togetter.com/li/* // @namespace http://twitter.com/atasatamatara // @author atasataamtara // @version 0.0.1 // ==/UserScript== (function(){ //「続きを読む」の要素を取ってくる //var ele = document.getElementsByClassName("comment_btn")[1]; var ele = document.querySelectorAll(".comment_btn[onclick^='tgtr.more']")[0]; //MouseEventを作る var ev = document.createEvent("MouseEvents"); //clickで初期化 ev.initEvent("click", false, false); //Eventの実行 ele.dispatchEvent(ev); })();
と、自分で作ってから先人が同じ内容のスクリプトを公開していたんですね……。なのでそれを参考にquerySelectorAllしました
参考::Togetterの「続きを読む」ボタンを自動でクリック(したことに)するUserScript - おおにしあきらの日記
Togetherの非公式RTでの RT : 以後の表示を薄くするUserScript
もともとこれを使っていました
参考::Togetter で「RT」以降の文字を薄くするGreasemonkeyスクリプト - 超自己満足プログラミング
ただ、Togetter側のHTMLがちょくちょく更新されていた部分を修正しました。あと上記の「続きを読む」を自動展開するUserScriptと連携させるために無理やり更新をかけてみました。
// ==UserScript== // @name RT obscure for toggeter // @description RT/QT 以降の文字色を薄くするスクリプト // @include http://togetter.com/li/* // @namespace http://d.hatena.ne.jp/favril// // @author favril, atasatamatara // @version 0.1.1 // ==/UserScript== setInterval( function(){ //var tweets = document.evaluate('//div[@class="tweet_box"]/ul/li//div[@class="list_body"]/h4', document, null, 7, null); //var tweets = document.evaluate('//div[@class="tweet_box"]/ul/li//div[@class="list_body"]//div[@class="tweet"]', document, null, 7, null); var tweets = document.evaluate('//div[@class="tweet"]', document, null, 7, null); if (!tweets.snapshotLength) return; for (var i=0, len=tweets.snapshotLength; i<len; i++) { var t = tweets.snapshotItem(i); var rt_idx = t.innerHTML.search(/[RQ]T[ ::]+/); if (rt_idx != -1) { t.innerHTML = t.innerHTML.substring(0, rt_idx) + '<span style="color:#999">' + t.innerHTML.substring(rt_idx) + '</span>'; } } } ,5*1000);
これでTogetterの全文を取得して非公式RTの表示を薄くすることができましたね!
以下愚痴
XPathとかquerySelectorとか覚えるの難しい
いや、簡単なサンプルでちょっとしたのをとってくるのはできるんですよ?でも querySelectorAll(".comment_btn[onclick^='tgtr.more']") の部分なんか、よくわからんわ。 .commentでclassはわかるとして、 onclick属性取ってくるし、それで演算子が ^= ってなんだそれ?で、 tgtr.more の部分だけ新たにクオートで囲まなきゃならない。よくわからんよ。これからjQueryで要素とってくるのも不安やわ……
DOM Event Level 2 まわりのことがよくわからない
具体的には
var ev = document.createEvent("MouseEvents"); //clickで初期化 ev.initEvent("click", false, false); //Eventの実行 ele.dispatchEvent(ev);
これでイベントの作成はいいとして、initEvenetのドキュメント*1とかdispatchEventのドキュメントとかMDNしかなくてよくわかんなかったり、英語の資料みてもわかんなかったり。 結局@edvakf さんが昔作ってた(そして今でも愛用している)Hit-a-Hintのソース読んでみよう見まねで作った。
参考::Hit-a-Hintブックマークレット2.0をリリースしたよ - by edvakf in hatena
そこらへんのわかりやすい資料、欲しいですね。