Hatena::Groupptech

ぷちてく RSSフィード

Archive
 
ProfileProfile

2012-04-23

カラースターでもはてなスターを全部展開するブックマークレット

03:29

どーもこんちわ。はてなスターGreasemonkey Scriptでプロフィールアイコンに置き換えてるんだけど、人気のはてダとかみてるといちいちはてなスタークリックして展開するのがめんどくさい!

我慢してたけどめんどくさい度マキシマムになった。で、FirefoxChromeだけ考えてJavaScript 1.5とかJavaScript 1.6使ってかっくいいことしたい!

な気分になったから久しぶりにHatena::Letブックマークレット書いてみた

大抵カラースター対応してない

スタープログラマのひとたちがスター関連のコード書いてたのはだいたい2008年頃で、似たようなことしてるエントリもチラホラ見るんだけど、大抵もう動かなくなってる。

この2008年てのはWebの世界で色々転換期になってて中々面白いんだけど、それはまた別の機会にポエムでも。

コレで動く

エントリが長くなるクセがあるからなるべく先にモノをだそうと心がけてるんだけど、ここまででもう 11 lines もつかっちゃってる!やばいもうポエム化してる

http://let.hatelabo.jp/noromanba/let/gYC-xdvknZG4MA

これでカラースターでもだいじょうび。で、コード見るとコメントが異常にながかったり色々アヘアヘなんで、その辺をこっから

元ネタ

id:os0x さんのコレを試したかったけどうまく動かなくなってた。

元のコードはこんなかんじ。Beautify かました

Hatena.Star.EntryLoader.entries.forEach(function (e) {
    if (e.stars[1] && e.stars[1].showInnerStars) e.stars[1].showInnerStars();
});
http://os0x.g.hatena.ne.jp/os0x/20080502/1209724672

で、なんでか少し考えたらこれはノーマルスターしかない時代だったから動いてんじゃないかって気づいた。

今はカラースターあるから折りたたみ位置が必ずしもstars[1]の位置じゃないんで、取れなくなってるんかなーと

関連してるかもしれない

もう一個試したかったけどローカルでうまく動かなかったのが、id:secondlife さんのグリモン。あ、Firefox + Greasemonkey の標準環境だとうごくよ。

中身は Gistなんだけどちょっと長いからリンクだけにしておく。チラっとしか読んでないんだけど、たぶんマウスイベントをキャプチャーするタイプ

クアドラプルクリック*1でプロフィールアイコンと名前全部展開するタイプ。

ただ、カラーのせいだけなのかは見てないからちょっと保留。むかしのはてなスターの実装知らないけど、古いスクリプト読んでるとかなり変わってそうな気配が

書いたコード

の解説というかいいわけというかなぞかけ。たくさんrevがあるけどほとんどは挙動とかデバッグコード付けはずしとかコメント変更。

コードに直接関係ないコメントブロックは取っ払ってるので直接見に行ってちょうらい

1stコミット

これでもう出来てるっちゃできてる。ただ、2回目実行すると展開されたスター全部見ていくからすごい無駄なのが気になってた。

stars[1]決め打ち継続 x スター色数ぶん見る でもできるとおもう。ただ index*2直で折り畳み位置に仕様変更あると弱い とか 直感的じゃない とかであんまりしたくなかった

(function(Hatena) {
    if (typeof Hatena === 'undefined') return;

    Hatena.Star.EntryLoader.entries.forEach(function (entry) {
        entry.stars.some(function (star) {
            if(star && star.showInnerStars) {
                star.showInnerStars();
                return true; // rustic
            }
        });
    });
})(window.Hatena);
http://let.hatelabo.jp/noromanba/let/gYC-xdvknZG4MA/rev/gYC-xdvknZKUMQ

はじめinner loopのstars回すとこでもArray.forEach()使ってて、「あり・・break;*3とかjQuery.eachreturn false;とかないや」とおもったら、

また id:os0x さんのとこにヒントあった ううっ4年後に通る道・・すごいなー

[1,2,3,4,5].some(function(v,i){
  console.log(v,i);
  return v > 2;
});
/*
1 0
2 1
3 2
*/
配列を走査するときに、途中でループを抜けるにはsomeが使える - os0x.blog

憧れのsomeきた!Array.some()っといてreturn 評価式でループ止めるとかかっこいい! ⇒ つかってみたんだけど、かっこわるい事になった*4

最新版

現状の。ダサいけど 7 rev. も重ねてパフォーマンス測定とかに時間かけてた。その辺が見たいひとはこのrev.が一番デバッグコード入ってていいとおもう

//console.time('*runtime');
(function(Hatena) {
    if (typeof Hatena === 'undefined') return;

    Hatena.Star.EntryLoader.entries.forEach(function (entry) {
        var expander = entry.star_container.querySelector('span.hatena-star-inner-count');
        if (expander && expander.textContent) {
            entry.stars.some(function (star) {
                if (star && star.count && star.showInnerStars) {
                    star.showInnerStars();
                    return true; // rustic
                }
            });
        }
    });
})(window.Hatena);
//console.timeEnd('*runtime');
http://let.hatelabo.jp/noromanba/let/gYC-xdvknZG4MA

どこが変わってるかわかりにくい?実際ほぼかわってない><

多重実行対策

普通こんなのであんまり考えなくてもいいっちゃいいんだけど。ページングしてもちゃんとはてなスター表示し続ける環境だと*5ブックマークレットだと何回もポチポチするのが考えられるから、1stの全スター操作はちょっとやばそう 重そう ダサそう。

ましてやそれを人気ブログの /archive ページでやると・・うん、ね。塵も積もればうひー

こういう場合

Ten.Hatena.Starとかから

ってのが一番よさげなんだけど、時間かけてもAPIとかいい方法見つからなかったよ・・しくしく

DOMで制限

仕方ないからやらないよりマシなDOMアクセスで制限することに。DOM走査はしろーと目で見てもコストが怖ひ。から、その辺はちゃんと測定した。

さっきと同じコードもう一回貼って、最低なコメントの使い方で解説してみる

//console.time('*runtime'); // 実行時間測定スタト
(function(Hatena) {
    if (typeof Hatena === 'undefined') return;

    Hatena.Star.EntryLoader.entries.forEach(function (entry) { // ここのコールバック内で展開済みか判定したい
        var expander = entry.star_container.querySelector('span.hatena-star-inner-count'); // 仕方ないからDOMで未展開フラグ取る
        if (expander && expander.textContent) { // expander は nullable で expandable なら 折り畳み数が string で取れる
            entry.stars.some(function (star) { // キャー someさーん
                if (star && star.count && star.showInnerStars) { // 一応 star.count も見るように
                    star.showInnerStars(); // 展開
                    return true; // マジ rustic・・イモい
                }
            });
        }
    });
})(window.Hatena);
//console.timeEnd('*runtime'); // 実行時間測定オワタ
http://let.hatelabo.jp/noromanba/let/gYC-xdvknZG4MA

いいコメントのアンチパターンになった。こんなコードあったら殴りにいきそう。で、大体目的は達成してこれ以上やるとハゲそうだったからとりあえず止めた

困ってるところ

イモいところ、someさんのcallback。「callbackでtrue返したらtrue返して止まる」って理解なんだけど、この場合どうすりゃいいんだろ。

メソッドが単純に成功したことをtrueするうまいイディオムがわからないってことで

サルヂエ

一見こうやってやればおk?とか思ったけど意図した動きにならなかった。ちょっとボーっとしてきて何が意図しなかったのかおぼろげなんだけど、展開後もスター見ちゃう気が

entry.stars.some(function (star) {
    return (star && star.count && star.showInnerStars && star.showInnerStars());
});

最後のstar.showInnerStars()undefined返すからこれじゃだめなんだろうけど、結局こうしか浮かばない

entry.stars.some(function (star) {
    return (star && star.count && star.showInnerStars && function () { // むだラップ
        star.showInnerStars(); // => 'undefined'
        return true; // ダサさかわらず
    });
});

これだと可読性落ちるだけだもんねぇ。

entry.stars.some(function (star) {
    return (star && star.count && star.showInnerStars && !star.showInnerStars());
});

こうすりゃワンライナーになるけど、読んだ人わかるか怪しいのとstar.showInnerStars()が何か値返すともう動かなくなっちゃうね

パフォーマンス

コード見に行ったひとはわかるけど、このセクションが一番でかくてでかくて、でかすぎて笑える。

でー 色々やったけど DOM触ってもまぁまぁ平気そうだからあぁしといた。ハゲたくないからかっこ悪いけどとりあえずいい

測定には すーぱーじゃばすくりぷたー id:amachang さんのサイトを使わせてモロタ。特に アーカイブページで実行すると笑える。まぁやってみるかへっぽこ英語もどき読んでくだしあ

なんでこんなん書いてるかってーと、スカンクワークス用のベースに書いたから

Disable heavy Greasemonkey Script (star icon change to profile)

これ系のスクリプトなんだけど、これもまた乱立してるしGitHub時代以前のCodeReposとかにも散らばっててマジカオス。そのうち書きたいのでまぁいつかあげる。

今使ってるのは id:Nikola さんのこれ。重いページの測定で入れてたらタイミングが悪かったらしく、*runtime: 18000ms over とか叩き出してわらった

これ系のはそれぞれ一長一短だから、ベースにするくらいで多分スクラッチする・・って言っちゃった!スカンクすかしっ屁した!今のなし!!何もなかった

ながくなっちゃった・・

もう少しやろうとおもったやつあったんだけど、また次の機会にする。想定の3倍かかた ダルダルダルビッシュ

はっ 時間が・・しししーゆー

*1:4連打クリック。Quadruple Click だとおもうけど、Quadrupleは「4拍」のニュアンスが強くてあんまピンとこなかった

*2:ちゃんというなら[]の数字はたしかプロパティ名だよ。ほんとは

*3:ダサいけど

*4:return true; // rustic

*5:ウチはそー

eebbixturveebbixturv2014/06/04 01:43ifzjlqufdi, <a href="http://www.ghswcgbzej.com/">jhwzntlicn</a> , [url=http://www.tzkzjlzebx.com/]biaexdekgw[/url], http://www.ljqogdxgkj.com/ jhwzntlicn

トラックバック - http://ptech.g.hatena.ne.jp/noromanba/20120423