janetterカスタマイズメモ

ツイタマで機能的にはほぼ不満無かったんだけど、AIRの不安定さプチフリーズがどうしても我慢出来なくなったのでJanetterに乗り換えました。
このツイッタークライアント、中身はWebKitで見た目をhtmlで自由に書き換えることが可能。色々弄った結果を記録します。

スキンは http://dl.dropbox.com/u/37073935/Janetter2/pages/index.html のBlackVisに入れ替え。
その上でスクリプトをちょいちょいと変更。

URLを展開

ツイッターのタイムラインには四種類のURLがある。
https://www.google.co.jp/search?q=%E5%AE%89%E8%97%A4%E3%82%B1%E3%83%B3%E3%82%B5%E3%82%AF とツイート欄に入力して投稿したら、大体この四種類のどれかが表示される。

普通は上の三種類で、ちょっと気の利いたクライアントは最後の一つも表示してくれる。
3つ目のt.toは不親切だけどまだ分かる。ツイッターから受診したデータをそのまま使ってるんだね。
1つ目のURLは、ユーザーが入力したURLをそのまま表示してくれる。気の分かるヤツだ。
4つ目のURLは、URLエンコードされてる部分をきちんと日本語に直してくれる。素晴らしい。
だ！が！２つ目のURL、これはダメ。そのままコピペする事も出来ないし、ホスト名しかロクにわからない。
モバイル用ならまだ分かるよ。限られたモバイル端末の画面でURLを全部表示する訳にはいかないもんな。でも完全に非表示だとセキュリティ上の問題があるからホスト名だけを表示するのは有効だ。
しかしデスクトップアプリでこれはしないでください。マジで。

と、熱くなってしまったが、つまり４つ目のURLの表示形式にしたい訳だ。
素晴らしいことにJanetterはデバッグモードをonにすると、chromeのデベロッパーツールを出すことが出来る。
そこで確認した結果、htmlタグ上には4つ目のURLが入ってるんだよね。
そこで以下のコードを jsファイルとして保存。
ハイライトされている所が自分で書いた箇所です。
4～8行目の部分がURLの表示を書き換えて、17行目でデフォルトの処理を潰してます。
17行目でJanetterの機能を潰してるので、7行目をご自由に入れ替えて下さい。

(function($,jn){
    var origin_onGetTimelines = jn.onGetTimelines;
    jn.onGetTimelines = function (success, data) {
        var objs;
        objs=document.querySelectorAll("p.text a[href][expanded]");
        for(var i=0;i<objs.length;i++){
            objs[i].innerText=objs[i].getAttribute("expanded");
        }
    };
    // URL展開イベント
    jn.expandUrl = function(a){
        // 展開先URLを取得
        jn.expandurl({
            url: a.attr('expanded') || a.attr('href'),
            done: function(success, url){
                if(success){
//          a.attr('expanded', url).attr('title', url.decodeURI());
            }
                // tweet-content内の場合にのみサムネイル展開する
                var tweet_content = a.parents('div.tweet-content:first');
                if(tweet_content.length > 0 && !a.prop('thumnailed') && tweet_content.janetterThumbnail)
                    tweet_content.janetterThumbnail(url.htmlEncode(true), true);<br /><br />                a.trigger('mouseover');
            }
        });
    }
})(jQuery,janet);

日時を絶対時間として表示する

やはり日時は秒まで、曜日付きで表示したい派です。
そこでtweet.tplの該当箇所を変更します。フォーマットは以下のとおり

{$retweeted_status.created_at|date_format:'%G/%m/%e ('}
{$retweeted_status.created_at|date_format:'%u'|replace:"1":"月"|
replace:"2":"火"|replace:"3":"水"|replace:"4":"木"|replace:"5":"金"|
replace:"6":"土"|replace:"7":"日"}
{$retweeted_status.created_at|date_format:') %H:%M:%S'}

これで 2012/06/12 (水) 00:00:00 と表示されます。

これを一行にする。

日時にマウスオーバーした時のアクション停止

日時にマウスオーバーするとtime-detailに切り替わってしまう。そのアクションを停止します。

.from > a:hover > .time,
.retweetedBy > a:hover > .time {
/*  display: none; */
}
.from > a:hover > .time-detail,
.retweetedBy > a:hover > .time-detail {
/*  display: inline; */
}

参考にしたurl

しかし、プチフリ以外は　例えば任意のキーワードだけで新規ウインドウにするとかが出来ないんだよな。
時刻の秒表示もデフォでやってくれるし。URLはダメだけど。
ツイタマの更新が再開してくれればいいのに