twicli(のようなページ)のuserスタイルシートの作り方

By mattz, 2011/03/08

「twicli スタイルシート」みたいなフレーズで検索をしてくる人が結構多くて、特に何も考えずに、参考になればいいねぇ、とか思ってたんだけど、ふと 気づいた。

twicliは、ほとんどの要素をJavaScriptで描画しているので、普通に「ソースを見る」ってやっても、今見えている画面のどの部分がなんていう名前(要素 名とかclassとかidとか)なのか分からないから、そういう事を知りたいのかなぁって。

検索しても実際のCSSのサンプルはたくさん出てくるけど、↑みたいなことがまとまってるところはあまり見かけません。

最近はTwitterもそうですけど、そういうサイト増えてます。その手のサイトのuserスタイルシートをどうやって書くのか書いときますね。

実は難しいことは何も無いです。OperaだったらDragonflyとか、FirefoxだったらFirebugとか、Chromeだったらデベロッパーコンソールとか、IEだったら開発者ツールとか使いましょう。

それぞれのツールの使い方はご自分で調べてください。

終わり。

タグ

twicli用のRTを省略表示するplugin作った。

By mattz, 2010/04/30

野良retweetは元々嫌いで、以前にお見せしたようにNGワードとしてフィルタリングしていたのですが、Togetter用のJSを作っている過程で、引用部分さえ見えなくなればさほど不快でもないことに気がつき、であれ ば同じ手法で隠してしまえれば、見えなくするほどのことはないんじゃなかろうかという結論に達したので、プラグインにしてみた。

http://mattz.sakura.ne.jp/hideretweet.js

twicliの「+」タブの「Preferences」の「Plugins:」の一番最後にでも上のURLを追加していただければOKです。不安な方はいったんダウンロードして中身 を確認した上で、ご自分の管理下のwebサーバに置いて使っていただければよいと思います。

ご利用はご自由に。コピーして使おうが改変しようがあなたの勝手です。パブリックドメインって言っておけばいいんですか？

追記

getElementsByClassNameとか使っているため、IEだとブラウザによっては動かないですね。
http://www.html5.jp/library/dom_getElementsByClassName.html
これも組み込んじゃえば動くかも。

また追記(2010/06/07)

うかつなことを口走ったらふぁぼってプレッシャーをかけられたので対応した。別に難しい話でもなかったんですけど、調べるのがめんどくさかったんです。

2010/09/17の追記

今まで省略された文字列を確認するには、"[RT to @hoge]"の"@hoge"の部分をマウスでポイント、だったのですが、"[RT to @hoge]"のどこでもできるよう にした(要するにtitle attributeを付ける場所を変えました)のと、省略されない部分にURLがあるときにリンクされなくなっちゃってたのを修正しました。

あと、RTで始まるtweet(公式RTもそうなります)を表示しなくていい人は、
http://mattz.sakura.ne.jp/hideretweet2.js
ってのを使ってください。違いは「RTで始まるtweetを表示しない」ってだけです。

タグ

私のtwicliの設定

By mattz, 2010/03/12

「twitter NG」とか「twitter フィルタ」とかで検索してくる人が結構多いので、自分のtwicli設定晒し。NGにするパターンはお好きなように。他のクライアントの事なんか知らんがな。

Pickup Pattern

NG::RT/article:1
retweetなんて見なくていい。WPなブログにありがちなarticleは除外。いわゆる公式RTはフォローする時に非表示に設定するので、考慮しない。
NG::QT:1
QTなんて見なくていい。
NG::^\.:1
postの先頭に「.」があったらNG。知らん人宛のreplyなんて見なくていい。
NG::.+@:1
postの先頭以外に@があったらNG。知らん人宛のreplyなんて見なくていい。自分宛はちゃんと「Re」タブに入るから見えなくなっても気にしない。
NG::B!:1
TL上では他人のブックマークなんて見なくていい。
NG::tumblr\.com:1
TL上では他人のtumblrなんか見なくていい。
NG::nicovideo\.jp:1
NG::nico\.ms:1
ニコニコ嫌い。
NG::ったー:1
そんなに嫌いってわけでもないんだけど、流行ったときにそればっかりになるのが嫌い。

「NG」でPuckupしといて、user stylesheetで見えなくする。

他にもいくつかのbot系を別タブに隔離したりはしている。

user stylesheet:


/* フォント設定
   お好みでお好きなようにどうぞ */
*{font-size:9pt !important;font-family:"メイリオ" !important;}
/* 不要なものを非表示にするスタイル設定 */
a#pickup-NG, /* NGワード的なもの。PickupPatternとの組合せで */
.uname       /* TLにはScreenNameだけでいいので */
{display:none !important;}
/* アイコンの表示サイズが大きすぎるので小さく */
img.uicon
{width:16px;height:16px;}
/* 入力欄を最初から広げとく。
   Auto-resize fieldとPost length counterはオフが前提 */
#fst
{height:55px !important;font-size:smaller;}
/* それに合わせてTLの表示開始位置を下げる。
   環境に合わせて要微調整。 */
#menu
{top:55px !important;}
#tw,#re,#tw2
{top:79px !important;}
/* 自分のpostとか自分宛のpostの背景色濃すぎる */
.fromme
{background:#ddffee;}
.tome
{background:#eeeeff;}
/* 大きすぎる */
.status{font-size:smaller;}

少しでも参考になれば幸いです。

タグ

twicli用NGワードプラグイン作った

By mattz, 2008/11/05

2009/11/25追記

未だにここにアクセスがあるので一応追記。現行のtwicliはNGワード機能は装備されているので、こんなものを使う必要はありません。

現行のtwicliでNGワード的なことをやるには、Pickup Patternのところに

NG::NG|ワード:1

などと書きます。これだけだと別タブに表示されてしまうだけなので、user stylesheetのところに

#pickup-NG{display:none;}

これでNGワード発言は目に入らなくなります。

2009/02/06追記

twicliを使わなくなってしまったので、最新バージョンでの動作確認などはしていません。もし動かなかったら、ローカルにでも保存してもらって適当 に編集したりしてみてください。やってることは至極単純ですので何とかなると思います。保証もしませんけど。

twicliってのはhttp://www.geocities.jp/twicli/を見れば分かるけど、Webブラウザーベースのtwitterクライアント。軽くて、Operaのパネルで動いてくれるので、愛用している。

プラグインとしてscriptを作るとかすると、機能を追加したりできるのだけど、まぁよく分からんので、ふーんそうなんだぁ、って感じでいた。

なんでまた、NGワードプラグインなんぞを作ろうと思い至ったかというと、あまりにもネガティブな発言しかしないヤツがいました。@ogochanが最近書いたことだったりもするんだけど、あ まりにも繰り返されるとこっちが滅入ってくるんですよね。まぁさっさとremove、というかblockしてしまったんでこれでOK、とか思ったら、そいつと俺と の共通のfollowerによるそいつを励ますようなreplyは目に入ってきちゃうんですよね。もうそれだけで「またネガティブ発言か」とか思って不愉快になる 。なので、そいつのID自体目に入らないようにしたいとか思った訳です。

２ちゃんねるの専用ブラウザなんかではNGワード機能なんてのがあります。twicliにはプラグインがあり、NGワードプラグインなんてのもうあるんじゃ ね？とか思ったけど見つからなかったので結局自分で作った、と。

「http://w-mattz.xii.jp/ngw/NGワード」の「NGワード」の部分を好きな単語(とかID)に変えて、twicliの「+」タブのPlugins:欄に追記して、Saveして、読み込みしなおせば適用されます。されなかったらごめんなさいですけど。

※Tweenの振り分け機能とやらでNGワード的なことは実現できるというのは調べてて分かったけど、クライアントを変える気はなかった。

ちょっと追記

「http://w-mattz.xii.jp/ngw/(NG|ワード)」等とやれば「NG」または「ワード」がNGワードになります。

2008/12/01追記

動かない。というか読み込まれない。困ったね。

2008/12/12追記

momizineバージョンのかつ旧版を利用することで復活させられた。マジでいめったーうざい。

タグ