livedoor Readerにごほうび画像を表示するwidgetをつくった

greasemonkey

ついつい溜めてしまう未読フィードを何とかしたい。

そこで考えたのは

エントリー毎にランダムな画像を挿入して、ごほうびを演出する。
素敵な画像に出会えたという成功体験を繰り返すことによってフィード消化の習慣化を狙う。


ソースコード

// ==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('');
});
})();

感想

果たしてこのスクリプトは効果があるのか、画像をエサに報酬系を刺激できるのか実験。結果報告とおすすめタグを募集。

参考

関連