作業メモ(play on tumblr for tumblr v4)

なんにもまとめてないです。作業メモの転載

play on tumblr はV4対応するのかしら…、ってか、したらとてもうれしい。

Twitter / jinon: @taizooo の play on tumblr は...

http://coderepos.org/share/log/lang/javascript/userscripts/playontumblr.user.js?

// ==UserScript==
// @name           play on tumblr
// @namespace      tag:mattn.jp@gmail.com,2008-04-03:/coderepos.org
// @description    play current image or vide on tumblr dashboard with 'ENTER' key. if won't work, pray on tumblr!
// @include        http://www.tumblr.com/dashboard*
// @include        http://www.tumblr.com/show/*
// ==/UserScript==

if (typeof window.Minibuffer != 'undefined') with (window.Minibuffer) {
	var click = function(n) {
		var e = document.createEvent('MouseEvents');
		e.initMouseEvent("click",true,true,unsafeWindow,1,10,50,10,50,0,0,0,0,1,n);
		n.dispatchEvent(e);
	};

	addShortcutkey({
		key: "RET",
		description: 'tumblr.play',
		command: function() {
			try { execute( 'tumblr.play', execute('current-node')); } catch (e) { }
		}});

	addShortcutkey({
		key: "h",
		description: 'tumblr.reblogcount',
		command: function() {
			try { execute( 'tumblr.reblogcount', execute('current-node')); } catch (e) { }
		}});

	addCommand({
		name: 'tumblr.play',
		command: function(stdin) {
			try {
				if (!stdin.length) stdin = execute('current-node');
				var img = $X('.//a[img[contains(concat(" ",@class," ")," image ")]]', stdin[0]);
				for (var n = 0; n < img.length; n++) {
					if (img[n].style.display != 'none') {
						click(img[n]);
						return stdin;
					}
				}
				var mov = $X('.//div[contains(@id,"watch_") and .//a]', stdin[0]);
				for (var n = 0; n < mov.length; n++) {
					if (mov[n].style.display != 'none') {
						click($X('.//a', mov[n])[0]);
						return stdin;
					}
				}
			} catch (e) { }
			return stdin;
		}});

	addCommand({
		name: 'tumblr.reblogcount',
		command: function(stdin) {
			try {
				if (!stdin.length) stdin = execute('current-node');
				var count = $X('.//a[contains(concat(" ",@class," "), " reblog_count ")]', stdin[0]);
				for (var n = 0; n < count.length; n++) {
					click(count[n]);
					return stdin;
				}
			} catch (e) { }
			return stdin;
		}});
}

http://coderepos.org/share/browser/lang/javascript/userscripts/playontumblr.user.js?rev=10424

Tumblr(dashboard)

name:      'Tumblr - dashboard',
domain:    'http://[^.]+.tumblr(?:-beta)?.com/(?:dashboard|show|group)',
paragraph: '//ol[@id="posts"]/li[@id]',
link:      './/a[@title="Permalink"]',
height:    0,

silog - script/LDRize/siteinfo

というのをどう書き換えれば良いのか? どうもムービーの方を参考にすればよさそう。

				var mov = $X('.//div[contains(@id,"watch_") and .//a]', stdin[0]);
				for (var n = 0; n < mov.length; n++) {
					if (mov[n].style.display != 'none') {
						click($X('.//a', mov[n])[0]);
						return stdin;
					}
				}

ムービーの方はそのまま有効だな

フォトが小さいとき

<a onclick="Element.hide('thumbnail_photo_47634965'); Element.show('highres_photo_47634965'); return false;" href="#">
  <img id="thumbnail_photo_47634965" class="image_thumbnail" width="100" height="140" src="http://media.tumblr.com/vicErPwd7d5lq47xMupRYt5b_100.jpg" alt="" style=""/>
</a>
<div id="highres_photo_47634965" style="margin-bottom: 20px; display: none;">
  <a onclick="Element.show('thumbnail_photo_47634965'); Element.hide('highres_photo_47634965'); return false;" href="#">
  <img class="image" width="500" height="700" src="http://media.tumblr.com/vicErPwd7d5lq47xMupRYt5b_500.jpg" alt=""/>
</a>
  ...snip...
</div>

フォトが大きいとき

<a onclick="Element.hide('thumbnail_photo_47634965'); Element.show('highres_photo_47634965'); return false;" href="#">
  <img id="thumbnail_photo_47634965" class="image_thumbnail" width="100" height="140" src="http://media.tumblr.com/vicErPwd7d5lq47xMupRYt5b_100.jpg" alt="" style="display: none;"/>
</a>
<div id="highres_photo_47634965" style="margin-bottom: 20px;">
  <a onclick="Element.show('thumbnail_photo_47634965'); Element.hide('highres_photo_47634965'); return false;" href="#">
  <img class="image" width="500" height="700" src="http://media.tumblr.com/vicErPwd7d5lq47xMupRYt5b_500.jpg" alt=""/>
</a>
  ...snip...
</div>

まずは、http://gist.github.com/7648 に置いてみた。

ページのXPath解析

フォトが小さいときクリックするリンク

./a[img[@class="image_thumbnail"]]

/div[starts-with(@id, "highres_photo")]を基準にして言いかえると

./div[starts-with(@id, "highres_photo")]/preceding-sibling::a[1]

フォトが小さいときにdisplay noneされている要素

./div[starts-with(@id, "highres_photo")]

フォトが大きいときにクリックするリンク

./div[starts-with(@id, "highres_photo")]/a

フォトが大きいときにdisplay noneされている要素

./a/img[@class="image_thumbnail"]

完成?