青春スイーツ RSSフィード

2009-05-23 Sat

[] 携帯百景においてワンクリックでnice!をつけよう

2010/01/21 スクリプト更新しました。id:kiwofusi ありがとう!

2010/02/22 特定の写真一枚のページでも動くように更新しました。

JavaScriptは好きだけど、未だにきちんと理解してないAobaです。勉強せな。

さて、携帯百景においてワンクリックでnice!をつけるためだけに

を作りました。「早速インストールだ!」という方は上記リンクからどうぞ。

ソースは残念な感じなので、モダンJavaScriptに直してTrackbackを頂けたら泣いて喜びます。もういっそ先にお礼を言っておきたい。まだ見ぬそこのJavaScriptギークなあなた!ありがとう!

(Version管理を考えたらCodeReposなどを使うべきか…?)

これを作ってしまった背景

携帯百景で、nice!を1個つけるために2クリックするのがつらかったんだ…」

Twitterユーザーにはおなじみの携帯百景は、かなりユーザー個々の日常に入り込むことに成功しています⇒投稿される写真の数が多い⇒ユーザー数も日々増えている⇒自分が見て「いいなー」と思う写真を撮るユーザーさんもすごい勢いで増えていく⇒自然とFollow数も増えてしまう。

つまり、日を追うごとにnice!をつけるのが大変になっていくのが携帯百景なのだ*1

そして、この情報津波時代、スピードの価値は益々高まっているのだ。

今後の展開予定

なお、携帯百景のサイトでLDRizeを使いたい場合は、ldrize.user.jsの32行目付近にあるSITEINFOの中に、携帯百景向けの設定を書き込んでください。具体的にはこんな感じになります。

const SITEINFO = [
{
name:      '携帯百景',
domain:    '^http://movapic.com/*',
paragraph: '//td[contains(concat(" ",@class," "), " image ")]',
link:      './a',
}
]

Movapic Oneclick Add Nice のソース

// ==UserScript==
// @name           Movapic OneClick Add Nice!
// @namespace      http://d.hatena.ne.jp/Aoba/
// @include        http://movapic.com/*
// @version        1.1
// @description    OneClick de add "nice!" at Movapic
// ==/UserScript==
(function(){
	// 携帯百景に実装されているAutoPagerに対応するためのドキュメント内容監視(こんなやり方しか思いつかなかった)
	var bodyCount = 0;
	var timerId = setInterval(function(){checkBody();}, 500);
	function checkBody() {
		var bodies = document.getElementsByClassName("autopagerize_page_element");
		var targetBody;
		if (bodyCount < bodies.length) {
			targetBody = bodies[bodies.length - 1];
			bodyCount = bodies.length;
		} else if (0 == bodyCount && 0 == bodies.length) {
			targetBody = document.getElementById("content");
			bodyCount = 1;
		}
		if (targetBody) {
			main(targetBody);
			if (window.Minibuffer) {
				// LDRizeを使う場合のみ意味がある処理
				window.setTimeout(function(){window.Minibuffer.execute('LDRize::paragraph-re-collect');}, 10);
			}
		}
	}
	
	function main(doc) {
		var stars = doc.getElementsByClassName('star');
		for(var i = 0, max = stars.length; i < max; i++) {
			var photoId = stars[i].getAttribute("id").match(/^star-(\d+)$/i);
			var photoNum = RegExp.$1;
			var nice = stars[i].getElementsByTagName("a");
			var f = closure(photoNum); // 引数の参照渡しをやめさせる。もっとスマートに実装できる気がする
			
			var elm = document.createElement("input");
			elm.id = "oneclick_add_nice_" + photoNum + "";
			elm.type = "button";
			elm.value = "add nice!";
			elm.addEventListener("click", f, false);
			insertAfter(elm, nice[0]);
		}
	}
	
	function addNice(photoNum) {
		GM_xmlhttpRequest({
			"method" : "POST", 
			"headers" : {"Content-type":"application/x-www-form-urlencoded"},
			"data" : "id=" + photoNum + "",
			"url" : "http://movapic.com/star/add",
			"onload" : function(){getNice(photoNum);}
		});
	}
	
	function getNice(photoNum) {
		GM_xmlhttpRequest({
			"method" : "GET", 
			"data" : "star-" + photoNum + "",
			"url" : "http://movapic.com/star/list/" + photoNum + "",
			"onload" : function(x){writeNice(photoNum, x.responseText)}
		});
	}
	
	function writeNice(photoNum, text){
		var targetDiv = document.getElementById("star-" + photoNum + "");
		targetDiv.innerHTML = text;
	}
	
	function closure(n){
		return function(){addNice(n)}
	}
	
	function insertAfter(newNode, node) {
		return node.parentNode.insertBefore(newNode, node.nextSibling);
	}
})();

余談

そのうち本家が1クリックnice!を実装してくださるような気もしなくもない。

*1:だったらFollowしなきゃいいじゃん…

n-07xin-07xi 2009/05/24 02:55 最初のniceクリック→niceボタンを表示までの間がものすごく重くて ( 結構反応しなかったりするし ) つらかったのだ。ありがとうありがとう><

AobaAoba 2009/05/24 03:10 グリーンスターありがとう。グリーンスターを食べたらグリーンピース的な味に決まってると想像している私は自分がやや心配です。

さて、携帯百景のサーバーから反応が返ってこない場合は、当方のグリモンを使っても「あっれー?動作してなくね?」って感じになります。そういう状況になっても add nice! ボタンを連打するのではなく、放置して次の写真の評価へ進んじゃってくださいね。

AobaAoba 2009/05/24 03:12 動作中を示すGIFアニメの表示をさぼったのです。

teruyastarteruyastar 2009/05/24 10:14 ワンクリック減らすのとか大好きだぜ!

そうか、,携帯百景ってTwetterと凄い相性が良かったのか。
こういうのはなかなか気づかないなあ。

AobaAoba 2009/05/24 15:48 Twitterと相性が良いというのは私の勝手な思い込みです。でも写真をUpしたときに、携帯百景からTwitterにPOSTできるから、たぶん相性は悪くないのだと思う。

kiwofusikiwofusi 2010/01/20 09:54 サイトのマークアップが変更されたみたいですね。checkBody()中のクラス名"body"を"autopagerize_page_element"に変更したら動きました。

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

Connection: close