読者です 読者をやめる 読者になる 読者になる

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
そこらへんのわかりやすい資料、欲しいですね。

結論

車輪の再発明

*1:ChromeでもFirefoxでも ev.initEvenet("click") で動いたけど、Operaだけ ("click", false, false)じゃないと動かなかったとかそういう