今見ている記事の関連記事を表示

by efcl 2011-02-11 [2011/02/11 17:48:10]

my bookmarklet

/*
 * @title 今見ている記事の関連記事を表示
 * @description my bookmarklet
 * @include http://*
 * @license MIT License
 * @require 
 */

// http://d.hatena.ne.jp/Gwzo/20110206/1296996269
// ----------------------------------------------------------------------------
/*
 * 属性を追加する関数、あまり良くないかな・・・
 */
function makeElement(name, attrs){

	// エレメント生成
	var element = document.createElement(name);
	
	// キー／バリューで追加
	for(var key in attrs){
		element[key] = attrs[key];
	}
	return element;
}

// ----------------------------------------------------------------------------
/*
 * コールバック関数。受け取った値をいろいろと処理する
 */
function setElement(res){

	// 初期化
	var data = '<h3 style="padding:3px;background:#f2f2f2">たまに使うといいかもしれない？</h3><br />';
	var r = res.related;
	
	// 受け取った値で、HTMLを作成しちゃう
	for(var i=0 ; i<r.length ; i++){
		data += '<a href="'+r[i].url+'" target="_blank">'+r[i].title+'</a> ('+r[i].count+')<br /><br />';
	}

	dispData(data);
}

// ----------------------------------------------------------------------------
/*
 * 表示する関数。
 */
function dispData(data){

	// エレメント生成
	var d = document.createElement('div');

	// スタイルの設定
	with(d.style){
		position='fixed';
		width = '490px';
		height = '390px';
		fontSize = '12px';
		zIndex = 99999;
	}

	// 属性追加
	d.setAttribute('id','gwzo-similar-post-main');

	// データ追加
	d.innerHTML = data;
	
	// ノード追加
	document.getElementById('gwzo-similar-post').appendChild(d);
}

// ----------------------------------------------------------------------------
/*
 * はてなブックマークAPIやURLの設定、JSONPを使用している
 */
function getBukuma(){

	// ベースURL
	var base_url = 'http://b.hatena.ne.jp/entry/json/';
	
	// 現在のURLの取得
	var target = encodeURI(location.href);
	
	// リクエストURLの整形、コールバック関数も
	var url = base_url+'?url='+target+'&callback=setElement';
	
	// 属性の設定
	var attrs = {src : url, type : 'text/javascript', charset : 'UTF-8'}
	
	// makeElement関数を使い、エレメント取得
	var script = makeElement('script', attrs);
	
	// 子ノードを追加する
	document.getElementsByTagName('head')[0].appendChild(script);
}

// ----------------------------------------------------------------------------
/*
 * 背景のスタイルを透過性のある黒に変更する。
 */
function setBg(){

	// エレメント生成
	var d = document.createElement('div');
	
	// スタイルの設定
	with(d.style){
		position = 'fixed';
		width = '100%';
		height = '100%';
		opacity = '0.9';
		top = '0';
		left = '0';
		padding = '20px';
		backgroundColor = '#000';
		border = '1px solid #ccc';
		zIndex = 9998;
	}
	
	// 属性の追加
	d.setAttribute('onclick','document.body.removeChild(this)');
	d.setAttribute('id','gwzo-similar');
	
	// ノード追加
	document.body.appendChild(d);
	setMainBg();
}

// ----------------------------------------------------------------------------
/*
 * 大事なところを白くする・・・
 */
function setMainBg(){

	// エレメント生成
	var d = document.createElement('div');
	
	// スタイルの設定
	with(d.style){
		position = 'fixed';
		width = '500px';
		height = '400px';
		top = '50%';
		left = '50%';
		margin = '-200px 0 0 -295px';
		padding = '20px';
		fontFamily = 'Arial,Helvetica,sans-serif';
		textAlign = 'center';
		backgroundColor = '#f7f7f7';
		border = '1px solid #ccc';
		zIndex = 9998;
	}
	
	// 属性の追加
	d.setAttribute('onclick','document.body.removeChild(this)');
	d.setAttribute('id','gwzo-similar-post');
	
	// ノード追加
	document.getElementById('gwzo-similar').appendChild(d);
}

// ----------------------------------------------------------------------------
// ここからスタート
// ----------------------------------------------------------------------------

// 背景の変更
setBg();

// はてなブックマークAPIを叩き表示させる
getBukuma();

/* END CODE */

Permalink RAW Packed Userscript LOADER Metadata ?

Permalink

このページへの個別リンクです。

RAW

書かれたコードへの直接のリンクです。

Packed

文字列が圧縮された書かれたコードへのリンクです。

Userscript

Greasemonkey 等で利用する場合の .user.js へのリンクです。

Loader

@require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

Metadata

コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

2011/02/11 17:48:10 - 2011-02-11