JAMADAM.COM

ついったーのタイムラインが放っておくと超長くなってブラウザが重くなるので、タイムラインのサイズを一定に保つグリモンスクリプトを作った。60件より古いtweetをjQueryでremoveしている。内部的にデータがどうなってるのか分からないので効果は不明だけどDOMが減るので軽くなるだろうという憶測。

これをインストール

// ==UserScript==
// @name           tweetReduce
// @namespace      http://jamadam.com/
// @description    Avoid Twitter Timeline size get too long
// @include        http://twitter.com/*
// ==/UserScript==

(function() {

    var $;
    var jversion = '1.2.6';
    var jexist = (typeof unsafeWindow.jQuery != 'undefined');
    var conflict = (jexist && unsafeWindow.jQuery.fn.jquery != jversion);
    // Add jQuery if not loaded
    if (! jexist || conflict) {
        var GM_JQ = document.createElement('script');
        GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/' + jversion + '/jquery.js';
        GM_JQ.type = 'text/javascript';
        document.getElementsByTagName('body')[0].appendChild(GM_JQ);
    }

    GM_wait();

    // Check if jQuery's loaded
    function GM_wait() {
        if (typeof unsafeWindow.jQuery == 'undefined' || unsafeWindow.jQuery.fn.jquery != jversion) {
            window.setTimeout(GM_wait,100);
        } else {
            if (conflict) {
                $ = unsafeWindow.jQuery.noConflict(true);
            } else {
                $ = unsafeWindow.jQuery;
            }
            letsJQuery();
        }
    }

    // All your GM code must be inside this function
    function letsJQuery() {
        var topid = $('#timeline li').eq(0).attr('id');
        window.setInterval(reduce, 5000);
        function reduce() {
            var newid = $('#timeline li').eq(0).attr('id');
            if (topid != newid) {
                topid = newid;
                console.log($('#timeline li').length);
                while ($('#timeline li').length > 60) {
                    $('#timeline li').eq(60).remove();
                }
            }
        }
    }
})();

[2010.01.15追記] 無駄な処理が多かったのでソースを少し整理した。

恥ずかしながら、commons markerというサービスを最近まで知らなかった。前々から出来たらいいなと思っていたことにすごく近いので使い始めてみた。

ところで、はてなブックマークのFirefoxアドオンはとても便利で、とくにGoogle検索の結果にブクマ件数が表示されるのは、クリックすべきリンクのアタリをつけるのに大変便利なのですが、同じ発想でcommons markerの件数も参考データとして意味があるかもしれないと思い、早速グリモンスクリプトで実現してみた。

googleResultWithMarker.user.jsをインストール

// ==UserScript==
// @name           googleResultWithMarker
// @namespace      http://jamadam.com/blog/
// @description    googleResultWithMarker
// @include        http://*.google.co.jp/search*
// ==/UserScript==


(function() {

    var $;
    var jversion = '1.3.2';
    var jexist = (typeof unsafeWindow.jQuery != 'undefined');
    var conflict = (jexist && unsafeWindow.jQuery.fn.jquery != jversion);
    // Add jQuery if not loaded
    if (! jexist || conflict) {
        var GM_JQ = document.createElement('script');
        GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/' + jversion + '/jquery.js';
        GM_JQ.type = 'text/javascript';
        document.getElementsByTagName('body')[0].appendChild(GM_JQ);
    }

    GM_wait();

    // Check if jQuery's loaded
    function GM_wait() {
        if (typeof unsafeWindow.jQuery == 'undefined' || unsafeWindow.jQuery.fn.jquery != jversion) {
            window.setTimeout(GM_wait,100);
        } else {
            if (conflict) {
                $ = unsafeWindow.jQuery.noConflict(true);
            } else {
                $ = unsafeWindow.jQuery;
            }
            letsJQuery();
        }
    }

    // All your GM code must be inside this function
    function letsJQuery() {

        var array = $('#res li.g');
        var procExist = false;
        var i = 0;
        var loop = function() {
            if (i < array.length) {
                if (procExist) {return;}
                procExist = true;
                var href = array.eq(i).find('h3 a').attr("href");
                var pos = array.eq(i).find('span.gl');
                var url = encodeURIComponent(href);
                var jsurl = "http://commonsmarker.com/tools/latest_info?url=" + url;
                unsafeWindow["__jsonp__aD3jHjaf27mZQxt"] = function(a) {
                    if (! a || ! a.marks || ! a.marks.length) {
                        return;
                    }
                    $("<a>" + a.marks.length + " markers</a>")
                        .attr('href', "http://commonsmarker.com/page/" + href)
                        .css({
                            backgroundColor:"#f5d0d0",
                            color:"#ff0000",
                            fontFamily:"arial,sans-serif",
                            fontWeight:"bold",
                            marginLeft:"4px",
                            padding:"1px",
                            fontSize:"85%"
                        })
                        .insertAfter(pos);
                }
                $.ajax({
                    type: "GET",
                    url: jsurl,
                    dataType: "script",
                    complete: function() {
                        i++;
                        procExist = false;
                        loop();
                    }
                });
            }
        }
        loop();
    }
})();

commons markerの公式のインターフェースはまだ機能不足なため他のユーザーの動向がよく掴めなかったんだけど、こうしてスクリプトで簡単に件数を把握できるようにしてみて分かったことは、「全然利用されてない」ということでした。予想はしていたけど。

なお、commons markerはこの手の外部スクリプトへのインターフェースや仕様を一切公開していません。今回のスクリプトはとても強引な処理と憶測で実装しているので、サーバーの仕様が変わって動かなくなることが大いに予想されます。

昨日のつづき。

グリモンスクリプトでjQueryを使うとき、他のスクリプトでロードされたjQueryの別バージョンとのコンフリクトを避けるためのテンプレート。

(function() {
        
    var $;
    var jversion = '1.3';
    var jexist = (typeof unsafeWindow.jQuery != 'undefined');
    var conflict = (jexist && unsafeWindow.jQuery.fn.jquery != jversion);
    
    // Add jQuery if not loaded
    if (! jexist || conflict) {
        var GM_JQ = document.createElement('script');
        GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/' + jversion + '/jquery.js';
        GM_JQ.type = 'text/javascript';
        document.getElementsByTagName('body')[0].appendChild(GM_JQ);
    }
    
    GM_wait();
    
    // Check if jQuery's loaded
    function GM_wait() {
        if (typeof unsafeWindow.jQuery == 'undefined' || unsafeWindow.jQuery.fn.jquery != jversion) {
            window.setTimeout(GM_wait,100);
        } else {
            if (conflict) {
                $ = unsafeWindow.jQuery.noConflict(true);
            } else {
                $ = unsafeWindow.jQuery;
            }
            letsJQuery();
        }
    }
    
    // All your GM code must be inside this function
    function letsJQuery() {
    
    }
})();

a

jQuery & Greasemonkey

Twitterの公式ページに適用するためのGreasemonkeyスクリプトにjQueryを使おうと思ったら、しばらくうまく行かなかった。原因は、TwitterページがすでにjQueryの旧バージョンをロードしていたというだけ。今回はたまたま自分のスクリプトがバージョンに依存しない内容だったので、if文でjQueryの存在確認をしてからロードすることで解決した。

(function() {

    // Add jQuery if not loaded
    if (typeof unsafeWindow.jQuery == 'undefined') {
        var GM_JQ = document.createElement('script');
        GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js';
        GM_JQ.type = 'text/javascript';
        document.getElementsByTagName('body')[0].appendChild(GM_JQ);
    }
    
    // Check if jQuery's loaded
    function GM_wait() {
        if (typeof unsafeWindow.jQuery == 'undefined') {
            window.setTimeout(GM_wait,100);
        } else {
            jQuery = unsafeWindow.jQuery;
            letsJQuery();
        }
    }
    GM_wait();

    // All your GM code must be inside this function
    function letsJQuery() {
        
    }
})();

縮.jp。7月に作って放置してたら10月になって話題になった。人生で一番集客した。そんな訳で、ネタを必要以上に膨らませるべく、システムを改修しました。見た目的にはあまり変化ありませんが、中身はほぼ丸々変わってます。特筆すべき変化は。。

待望の「縮AGAIN」ボタンを搭載

生成された短縮URLが気に入らなかった場合、このボタンを押すと別のURLを生成してくれます。なお、縮AGAINした場合、古いURLはしばらくして解放されます。

既設の短縮URLがあれば、短い順にご提案

今までは湯水のように新規作成してましたが、縮ボタンを押した際、まずは既設の短縮URLを提示するようになりました。縮AGEINすると短い順に既設URLが表示され、なくなれば新規作成されます。

転送時、末尾のゴミを可能な限り取り除く

Twitterでhttp://縮.jp/上これすげーみたいなつぶやきが多発していたので、こういう場合はhttp://縮.jp/上を検知して転送します。Perlでいうと、

$id =~ s/¥P{Han}.*//; 

となっています。漢字を表す正規表現なんて初めて知りました。

ちなみに、ファイルベースからPostgresqlに移行

パフォーマンスいいかなと思って、1件1ファイルなどというデータ管理をしてたんですが、IDがシーケンシャルに固定されるとか、逆引きできないとか、色々問題あったのでPostgresqlにしました。なお、ファイルベースのキャッシュの仕組みを導入したので転送時のパフォーマンスは以前と変わらない。はず。

APIにも変更あり

offsetというパラメータが新設されました。これは前述の既設URLの再利用と関連するもので、任意の既設URLを取り出すためのパラメータです。offsetを十分に大きくすると自動的に新規作成されます。通常は指定しないでください。

既知の問題

• 元URLがbit.ly等ですでに短縮済みだった場合、iPhoneで転送されない。確かソフトバンクの仕様でiPhoneで多段リダイレクトできない。
• Twitter用のいくつかのGreaseMonkeyスクリプトやアドオンで縮.jpへ飛べない。FirefoxのJavascriptのバグっぽい挙動が原因と思われる。対処法はこちら
• Twitter周辺サービスで日本語ドメインが誤ってパーセントエンコードされているケースも見かけます。サーバサイドでの処理に問題があるのではないか(憶測)。
• iPhoneの多くのアプリで開けない。おそらくアプリからwebkitだかのAPI的なものに渡すURLをpunycode変換してないのではないか(憶測)。対処法はこちらの12月15日の記事くらいしか見当たらなかった。

今後の予定

1. 任意のIDを指定可能に
2. 不人気文字を避ける仕組み
3. 元URLがすでに短縮URLだった場合に展開してから短縮
4. スパム対策

縮.jpがFirefoxのGreaseMonkyスクリプト「pbtweet」のv1.4.10 GreaseMonkey 005810で動作しなかったので、pbtweet側を直してみた。

pbtweet_revamped.user.js

[2009.10.12追記] 本家に取り込んで頂いたのでこちらから最新版をDLするといいと思います。ちなみに、同様の現象はTwitter本家の検索結果でも起きていて、pbtweetの最新版を使うとこれを回避できます。

231-236行に下記を追加。

//jamadam added below
var links = 
    entry[i]
        .getElementsByClassName('entry-content')[0]
        .getElementsByTagName('a');
for (var cnt = 0; cnt < links.length; cnt++) {
    links[cnt].href=decodeURI(links[cnt].href);
}
// jamadam added above

うちだけの問題かもしれないけど、Mac版Firefox3.5.3のJavascriptでinnerHTMLを取得した場合、子要素のaタグのhref属性が、パーセントエンコードされてしまっている。上記ではこの現象をキャンセルしている。

HTML

<body id="main">
<a title="縮" href="http://縮.jp/">http://縮.jp/</a>
</body>

Javascript

var hoge1 = document.getElementById('main').innerHTML;
var hoge2 = document.getElementById('main').getElementByTagName('a')[0].href;
alert(hoge1);
alert(hoge2);

Firefoxの場合

<a title="縮" href="http://%E7%B8%AE.jp/">http://縮.jp/</a>
http://縮.jp/

Safariの場合

<a title="縮" href="http://縮.jp/">http://縮.jp/</a> 
http://縮.jp/

以前にこんなエントリ書いたり、こんなjQueryプラグイン作ったりしたけど、それってCSSだけでできるんじゃん！

http://www5e.biglobe.ne.jp/~access_r/hp/css/css_text_019.html

text-overflow
テキストがオーバーフロー（領域を超えてしまう事）する際にオーバーフローしたテキストを「...」で省略することが出来ます。

しかも属性名と値などのキーワードも思い描いたまんまじゃん。ただし、省略記号を有効にする指定はtext-overflow: ellipsis;だ。以前にもちゃんとググったつもりだったけど、英語の情報無視してたかなあ。

ただしFirefoxは未対応なので依然としてJavascriptでのハックは必要。また、text-overflowはIEのみの対応のようで、SafariやOperaはそれぞれの拡張属性を併記して対応できる。

a.width-limited {
    display:block;
    overflow: hidden;
    white-space:nowrap;
    -webkit-text-overflow: ellipsis; // Safari
    -o-text-overflow: ellipsis; // Opera
    text-overflow: ellipsis; // IE
}

• 目覚まし漢字
• Kahuaメモその3　継続ベースで快感Webプログラミング
• Android上で動作するスクリプティング環境「Android Scripting Environment」
• iPhone 3GS買い方メモ
• ソースがダウンロードできるFlashエフェクト集 | DesignWalker
• オブジェクト指向っぽい話が分かるかもしれないJavaScript講座　その2
• 拡張現実を使ってゴリラのショートムービーを作れる『Livng SASQUATCH』
• 実践! iPhoneアプリ開発
• Adobe，Flex基盤を用いたRIA開発ツールのベータ版を公開
• どこでも手に入る乾電池。緊急時に大きな安心

検索とタグクラウドもノースクリプトで利用できるようにした。ページナビゲーションはまだない。

JS用に用意した部品のDOMをNoscriptな人に見せないために、最初は<script></script>内に書けばいいのかと思ったら失敗。<script>タグは<noscript>タグのnotでは全然なかったのだ。考えたこともなかったけど、<script>タグ内にはスクリプトしか書いちゃいけない、とのこと。今さらながら。

スクリプト用のDOMはスクリプトで書くしかないのかと思い、document.writeの列挙が頭をよぎったものの、メンテナンス性に配慮してjQueryのappendだのprependだののDOM操作で何とかする。それでも、文字のエスケープの問題もあるし、本来HTMLで書くべきものをJavascriptで書き出すのはやはり手間がかかる。でもまあいいか。

と思っていたのが昨日の話で、今日、あっけない結論に達する。まあ、ここに書くまでもないことかも。

<div class="dom_for_script" style="display:none"></div>
<script type="text/javascript">
//<![CDATA[
$(".dom_for_script").show();
//]]>
</script>

Javascriptオフ対策、第一弾。エントリーウィジェット毎のタブ表示はJavascriptオフの人には非表示とし、代わりに最低限のサブコンテンツをベタに並べた。これで、少しだけ静的リンクでの自由度が広がった。

もともと非AJAXなブログだったのでサーバーサイドは変更の必要はないんだけど、クライアントサイドの帳尻合わせが大変。