SmallStyle

_ FEEDBRINGERのスタイル変更Bookmarklet

昨日はuserContent.cssでFEEDBRINGERの見た目を変えてみましたが，Bookmarkletでもできるんじゃないの？って思って試しにやってみたらあっさりできた．これならIEでも使えるのかもとか思ったのですが，うちの環境(WindowsXP SP2)ではうまく動きません…．

フィードの見るだけなら画面遷移はないので，それなりに使えるかも．ちょっとだけどんな見た目か試して見たい方はどうぞ．動作確認はFirefox DP2でのみ行っています．(Bookmarkに登録して使ってください)

javascript:(function(){var newSS, styles='#logo-container {background: #E7E3D0 !important;}#tool {display: none !important;}#nav {color: #fff !important;background: #5E766B !important;}#nav a {padding-left: 0.3em !important;padding-right: 0.3em !important;}#nav a {color: #fff !important;border-bottom: none !important;}#nav a:hover {border-bottom: none !important;color: #FFD264 !important;background-color: transparent !important;}#nav .border {border-top: none !important;border-bottom: solid 1px #333 !important;}#container {padding: 0 !important;height: 80% !important;border-bottom: solid 1px #333 !important;}#side {position: static !important;height: 100% !important;overflow: scroll !important;float: left !important;border-right: solid 1px #333 !important;}#main-container {margin: 0 !important;padding-left: 1em !important;padding-right: 1em !important;background: #E7E3D0 !important;overflow: scroll !important;height: 100% !important;}#main .feed, #popular .feed {background: #fff !important;}#main .feed-title, #popular .feed-title {color: #666 !important;background: transparent !important;}#main .feed-entry-title {background-color: #757575 !important;color: #fff !important;}#main a:hover.feed-title,#popular a:hover.feed-title,#main a:hover.feed-entry-title {color: #fff !important;background: #5E766B !important;}#main .feed-entry-information, #main .clip-information {border: 1px solid #757575 !important;}#main-help {color: #000 !important;background: #fff !important;}#main-padding {display: none !important;}'; if(document.createStyleSheet) { document.createStyleSheet(%22javascript:'%22+styles+%22'%22); } else { newSS=document.createElement('link'); newSS.rel='stylesheet'; newSS.href='data:text/css,'+escape(styles); document.documentElement.childNodes[0].appendChild(newSS); } })();

_ FEEDBRINGERを@-moz-documentを使って改良

WebベースのRSSリーダーといえば，Bloglinesが有名ですが，先日FEEDBRINGERという新しいWebベースのRSSリーダーが登場したようです．Bloglinesはここのところよくメンテナンス状態になってしまうし，なんだかレスポンスも以前に比べて悪くなったような気がします．そんなわけで，他に何かいいWebベースのRSSリーダーはないかなと思っていたところでした．

ざっと使ってみた感じは，Ajaxを使っていてさくさくと動いてくれます．さっそくBloglinesのデータをエクスポートして，FEEDBRINGERにインポート．そうすると，リストが多いとBloglinesとは異なりフレームを使っていないから画面全体のスクロール量が増えることに気づく．…使いづらいぞ．ただのにっきでもあげられていますが，未読のfeedをクリックするとページのトップに飛んで，またスクロールして…っていうのは結構面倒．ということで，やはり同じ思いを抱く人はいるようで，greasemonkeyを使って対処されている方がいました．

私もFirefoxを利用しているのですが，最近はTrunkを利用しているためgreasemonkeyが使えません．そこでuserContent.cssを利用してFEEDBRINGERをユーザースタイルシートでいじることにしました．ここでサイト別にCSSルールを適用させる@-moz-documentが使えます．これ自体はGecko/1.8a3くらいから有効らしいです．ちなみに私の利用しているFirefoxのGeckoのバージョンはGecko/1.8b4なのでこのルールが利用できるのですが，URIidという拡張を使っても，似たようなことができるようです．

で，実際に作成したCSSは以下．とりあえずざっと作ってみた感じですが，それなりに使い勝手は向上したような気がします．ついでにデザインも多少変更．とりあえずフィードの部分のみ適用．（@-moz-document url-prefixを利用すればURLの先頭がマッチするものに対して有効になる）

@-moz-document url-prefix(http://feedbringer.net/feed) {
#logo-container {
background: #E7E3D0 !important;
}

#tool {
display: none !important;
}

#nav {
color: #fff !important;
background: #5E766B !important;
}

#nav a {
padding-left: 0.3em !important;
padding-right: 0.3em !important;
}

#nav a {
color: #fff !important;
border-bottom: none !important;
}

#nav a:hover {
border-bottom: none !important;
color: #FFD264 !important;
background-color: transparent !important;
}

#nav .border {
border-top: none !important;
border-bottom: solid 1px #333 !important;
}

#container {
padding: 0 !important;
height: 80% !important;
border-bottom: solid 1px #333 !important;
}

#side {
position: static !important;
height: 100% !important;
overflow: scroll !important;
float: left !important;
border-right: solid 1px #333 !important;
}

#main-container {
margin: 0 !important;
padding-left: 1em !important;
padding-right: 1em !important;
background: #E7E3D0 !important;
overflow: scroll !important;
height: 100% !important;
}

#main .feed, #popular .feed {
background: #fff !important;
}

#main .feed-title, #popular .feed-title {
color: #666 !important;
background: transparent !important;
}

#main .feed-entry-title {
background-color: #757575 !important;
color: #fff !important;
}

#main a:hover.feed-title,
#popular a:hover.feed-title,
#main a:hover.feed-entry-title {
color: #fff !important;
background: #5E766B !important;
}

#main .feed-entry-information, #main .clip-information {
border: 1px solid #757575 !important;
}

#main-help {
color: #000;
background: #fff;
}

#main-padding {
display: none;
}
}

@-moz-documentについてはoutsider reflexで簡単な説明がされています．

ちなみにスタイルシートをテストする際にはいくつかのBookmarkletが活躍しました．JavaScript::Bookmarkletの「スタイルをテスト」と「CSS解除」，それからページの構造を調べるためにMouseover DOM Inspectorを利用しました．

2005-08-26追記：標準で擬似フレームを用いたインターフェースを利用できるようになりました．上記コードは現在そのままではりようできません．

_ 怪奇現象!?

どうも最近おかしい…．先日は生まれて始めて幽体離脱っぽい体験はするし，昨晩はふと目覚めると枕元に大勢のお婆さんの姿が…．何かの予兆か!?

もともと霊感とかそんなのにはまったく無縁な人なのですが，今回ばかりは少々びびり気味です．