livedoor Readerにごほうび画像を表示するwidgetをつくった
ついつい溜めてしまう未読フィードを何とかしたい。
ソースコード
// ==UserScript== // @name LDR widget FlickrBadge // @namespace http://d.hatena.ne.jp/Cherenkov/ // @include http://reader.livedoor.com/reader/ // @require http://coderepos.org/share/export/34607/lang/javascript/Base64/trunk/base64.js // @version 0.0.1 // ==/UserScript== //thanks dankogai(http://blog.livedoor.jp/dankogai/archives/51067688.html) (function(){ GM_addStyle(<><![CDATA[ .flickr_badge iframe{height:260px!important; opacity:0.3;} .flickr_badge iframe:hover{opacity:1;} .item_footer {height:270px!important;} ]]></>); unsafeWindow.register_hook("AFTER_PRINTFEED", function(feed) { var tags = ["sunset","happy","paradise","puppy","beautiful", "nature","science","art","city","structure", "plants","space","make","fish","marine"]; addBadge(tags); }); function addBadge(tag) { var entries = document.evaluate('//div[@class="entry_widgets"][not(child::span[contains(@class,"flickr_badge")])]', document.body, null, 7, null); if(!entries.snapshotLength) return false; for(var i = 0; i < entries.snapshotLength; i++) { var span = document.createElement("span"); span.className = "widget flickr_badge"; var qTag = lot(tag); var dataURI = string2Base64(qTag); var iframe = document.createElement("iframe"); iframe.src = 'data:text/html;charset=utf-8;base64,' + dataURI; iframe.setAttribute("frameborder", 0); span.appendChild(iframe); entries.snapshotItem(i).appendChild(span); } setTimeout(function() { addBadge(tag); }, 1000); } function lot(tag) { var num = Math.floor(Math.random() * tag.length); return tag[num]; } function string2Base64(query) { var source = '<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=1&display=random&size=m&layout=x&source=all_tag&tag=' + query + '"></script>'; return Base64.encode(source); } })();
インストール
これはFirefoxアドオンのGreasemonkey用スクリプトです。
LDR widget FlickrBadge for Greasemonkey
仕組み
- Flickr BadgeのHTML版のコードを利用して任意のタグの中からランダムに画像を貼る。
- プリセットしてあるタグは compfight + a flickr search tool を見ながら選びました。 var tags = ["sunset","happy",の部分を自分の好きなタグに変えて遊んでみてください。
工夫したところ
- XPathによって効率UP。「child::」は省略できる。
- id:dankogaiのbase64.jsを使わせてもらいました。感謝。
- ごほうび画像が目立ち過ぎていたのでopacity調整。
- Flickr Badgeが実はランダムではなくて、ランダム風。タグを増やしてごまかす。
動かなかったコード
- entry_widgets.addにscriptタグを貼ってもロードされなかった。ダメ。
(function(){ GM_addStyle(".item_footer {height:270px!important;}"); var w = (typeof unsafeWindow == 'undefined') ? window : unsafeWindow; w.entry_widgets.add('flickr_badge', function(feed, item){ return [ '<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=1&display=random&size=m&layout=x&source=all_tag&tag=nagasawa masami"></script>' ].join(''); }); })();
- 次にiframeにdataURIを入れる方法でスクリプトの実行には成功したけど、表示するエントリーの数が多い場合に途中でエントリーの読み込みがなぜか止まるのでこの方法は諦めた。
(function(){ GM_addStyle(".item_footer {height:270px!important;}"); var w = (typeof unsafeWindow == 'undefined') ? window : unsafeWindow; w.entry_widgets.add('flickr_badge', function(feed, item){ return [ '<iframe frameborder="0" height="260" src="data:text/html;charset=utf-8;base64,PHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiIHNyYz0iaHR0cDovL3d3dy5mbGlja3IuY29tL2JhZGdlX2NvZGVfdjIuZ25lP2NvdW50PTEmZGlzcGxheT1yYW5kb20mc2l6ZT1tJmxheW91dD14JnNvdXJjZT1hbGxfdGFnJnRhZz1uYWdhc2F3YSBtYXNhbWkiPjwvc2NyaXB0Pg%3D%3D"', '</irame>', ].join(''); }); })();