Qiitaの記事をストックした人を表示するBookmarklet

Qiitaの記事をストックした人の内、直近の100人をテーブルとして出力するブックマークレット。以下記事にインスパイアされて作成。

Qiitaに投稿された自分(または他人)の記事の実際のストック数を知る方法 (「いいね」の数じゃなくて・・・「ストック」の数と誰が「ストック」しているかまでわかります！) - Qiita

QiitaやTwitter、facebook等のIDをリンク化して出力するので、
ストックした人の情報を簡単に見に行くことができます。

##Bookmarklet

以下コードをブックマークに登録して使用。
目的のQiita記事で使用すると、ストックした人の情報が記事の末尾にテーブルとして出力される。

bookmarklet

javascript:(function(){var%20e=document.location.pathname,t=e.substring(e.lastIndexOf(%22/%22)+1),a=[{name:%22website_url%22,url:%22%22},{name:%22id%22,url:%22http://qiita.com/%22},{name:%22twitter_screen_name%22,url:%22https://twitter.com/%22},{name:%22facebook_id%22,url:%22https://www.facebook.com/%22},{name:%22linkedin_id%22,url:%22https://www.linkedin.com/in/%22},{name:%22github_login_name%22,url:%22https://github.com/%22}];$.ajax({type:%22GET%22,url:%22https://qiita.com/api/v2/items/%22+t+%22/stockers%3Fper_page=100%26page=1%22,dataType:%22json%22,success:function(e){for(var%20n,r,i,l,o,m,c=document.createElement(%22table%22),d=0,s=e.length;s%3Ed;d++){n=e[d],r=c.insertRow(-1);for(attr%20in%20n){m=document.createTextNode(n[attr]||%22%22),i=r.insertCell(-1),i.classList.add(%22stockTable_%22+attr),o=void%200;for(key%20in%20a)if(a[key].name===attr){o=document.createElement(%22a%22),o.href=a[key].url+n[attr],o.target=%22blank%22,o.appendChild(m);break}%22profile_image_url%22===attr%26%26(o=document.createElement(%22img%22),o.src=n[attr],o.height=32),i.appendChild(o||m)}}l=c.createTHead(),r=l.insertRow(0);for(key%20in%20e[0])i=r.insertCell(-1),i.appendChild(document.createTextNode(key));document.getElementById(%22item-%22+t).appendChild(c),document.getElementsByClassName(%22StockButton__label%22)[0].innerText=e.length+(e.length%3E99%3F%22+%22:%22%22)+%22ストック%22}})})();

ブックマークレットの登録方法 - Qiita

##中身

raw

(function(){
	var p=document.location.pathname;
	var aid=p.substring(p.lastIndexOf('/')+1);
	var sns = [
		{'name':'website_url','url':''},
		{'name':'id','url':'http://qiita.com/'},
		{'name':'twitter_screen_name','url':'https://twitter.com/'},
		{'name':'facebook_id','url':'https://www.facebook.com/'},
		{'name':'linkedin_id','url':'https://www.linkedin.com/in/'},
		{'name':'github_login_name','url':'https://github.com/'}
	];

	$.ajax({
		type: 'GET',
		url: 'https://qiita.com/api/v2/items/'+aid+'/stockers?per_page=100&page=1',
		dataType: 'json',
		success: function(json){
			var table = document.createElement('table');
			var data,row,cell,header,node,text;
			for(var i=0,len=json.length;i<len;i++){
				data = json[i];
				row = table.insertRow(-1);
				for(attr in data){
					text = document.createTextNode(data[attr]||'');
					cell = row.insertCell(-1);
					cell.classList.add('stockTable_'+attr);
					node = undefined;
					for(key in sns){
						if(sns[key].name === attr){
							node = document.createElement('a');
							node.href = sns[key].url + data[attr];
							node.target = 'blank';
							node.appendChild(text);
							break;
						}
					}
					if(attr==='profile_image_url'){
						node = document.createElement('img');
						node.src = data[attr];
						node.height = 32;
					}
					cell.appendChild(node||text);
				}
			}
			header = table.createTHead();
			row = header.insertRow(0);
			for(key in json[0]){
				cell = row.insertCell(-1);
				cell.appendChild(document.createTextNode(key));
			}
			document.getElementById('item-'+aid).appendChild(table);
			document.getElementsByClassName('StockButton__label')[0].innerText = json.length + (json.length>99?'+':'')+'ストック';
		}
    });
})();

##実行結果
記事の末尾にテーブルがくっつきます。

地味ながら、ストック数も表示されます。

##作ってみて
見辛い…。何となくノリと勢いで作って途中で情熱が力尽きました。
改良してくださる方募集中です。