こちらの続き。
Perl + Net::Twitter + OAuth で自分のリスト内の人を別アカウントで全部followしちゃうよ - XXXannex
複数アカウントの設定ができたのはいいけど、このアカウントを一元管理できるクライアントはあるのか？という課題が。tweenは開発者のポリシーとして複数アカウントに対応する気はないようなので、別クライアントを探さねば。
しかし、世に出回ってる大半のクライアントはモバイル端末みたいなカワイイUIで仕事中に使いづらいし、複数アカウントが管理できる！という触れ込みのクライアントもアカウントを手で切り替えて*1TLを取得しなおさないといけない。
・・・と色々探して見つけたのがTweetWenty。
http://www.geocities.jp/tweetwenty/
フォルダー分けして複数アカウントを管理できるし、UI部分は javascript + HTML でカスタマイズ自由。これはすばらしい。難を言うならドキュメントが無いので使い方がよく分からないところ・・・。
これまた試行錯誤して、ようやく期待通りのカスタマイズができました。
javascriptの編集
内部の tweetwenty.js というスクリプトがデータ取得とHTMLへのデータの受け渡しを担当しているらしい。最初はHTMLテンプレートをいじればOKかなーとお気軽に考えてたのだけど、どうやらjavascriptをカスタマイズしないとダメっぽい部分もあるらしい。
名前フォーマット変更
どちらかと言うと名前よりもcreen_nameで固体識別してる*2ので、両方表示させたい。のでこんな感じに。
TweetEntry.prototype.setAuthor = function (name, url) { if (this.name) { // var displayname = this.jsonData.user.name; // if (!displayname) displayname = this.jsonData.user.screen_name; var displayname = this.jsonData.user.screen_name; if (this.jsonData.user.name) displayname += " / " + this.jsonData.user.name; this.name.firstChild.nodeValue = displayname; this.name.setAttribute("href", "http://twitter.com/" + this.jsonData.user.screen_name); } }
日付フォーマット
toLocaleString()だと 「○月○日」みたいな日本語になって鬱陶しい。strftime的な物を使えばいいでしょ、って思ってたら、どうやらjavascriptには日付フォーマット変換の機能が用意されてないっぽい？何それホントにモダンな言語なの？
twitterのブログパーツはフォーマットされてるじゃん、って思ってたら、内部的に年月日のデータを切り出してまとめてる、という泥臭すぎるコーディングになってるし。何それ・・・。
仕方がないので外部ライブラリーを探す。javascriptは全然分からないので、ぐぐって最初に出てきたこちらのライブラリーを使わせていただくことに。
あとついでに、日付のリンクとしてステータスのURLを入れておきたかったのでhref属性を追加してます。
TweetEntry.prototype.setDate = function (pdate) { this.date = pdate; if (this.dateSpan) { var now = new Date(); var spanMilli = now.getTime() - pdate.getTime(); // var outPutDate; // if (spanMilli < 1000 * 60 * 30) { // var minutes = Math.round(spanMilli / (1000 * 60)); // if (minutes == 0) minutes = 1; // outPutDate = minutes + "分前"; // } else { // outPutDate = pdate.toLocaleString(); outPutDate = DateFormatter.format(pdate, "m-d H:i:s"); // } this.dateSpan.firstChild.nodeValue = outPutDate; this.dateSpan.setAttribute("href", "http://twitter.com/" + this.jsonData.user.screen_name + "/status/" + this.id); } };
HTMLの編集
これはソース読めば分かるでしょ、って感じ。結局HTMLのカスタマイズはほとんどしなくて、アイコンや背景画像などの不要なタグを削除したり、未読のboxに色をつけたりしました。
before:
after:
こんなもんかな！
