閲覧しているページのはてブコメント一覧を、フローティングウインドウで表示する様なブックマークレットはありませんでしょうか?

現在、chromeでのextensionを用いていますが、代替で利用したく思っています。

もし、無ければ自作を考えているのですが、どの辺りの書籍やサイトを参考にして勉強をすれば良いでしょうか? (当方、ほぼプログラム素人です)

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/01/10 13:26:43
  • 終了:2012/01/10 15:53:14

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/01/10 15:12:17

ポイント500pt

はてなブックマークコメントビューワでググればいろいろでてきます。

まず、ブックマークレットは毎回クリックしないと実行できないので、本当に作りたいものは拡張やユーザスクリプトではないでしょうか?
拡張とユーザスクリプトでは作る手間が結構違います。コメントビューア程度のものならばユーザスクリプトのほうが適していると思います。


適当なユーザスクリプトを見つけたので書いておきます。
worris’ works - Greasemonkey - はてなブックマークコメントビューワ
この「はてなブックマークコメントビューワ 0.22 (20090824)」のコードを読んで気に入るまで改造してみるのはどうでしょう。

chromeだとそのままでは動かなかったので以下のように修正すれば動きます。

インストール方法は上記のサイトからuser.jsを「名前を付けてリンク先を保存」からダウンロードして、以下のソースコードを上書きして、そのファイルをchromeのウィンドウにドラッグアンドドロップしてインストールしてください。ウィンドウの下にボタンが表示されます。(その際ウィンドウの幅を広くしておくこと。また、user.jsをクリックするとgreasemonkey installerなるものが表示されるが現時点では正しく動作せず、実体のJSファイルがプロファイルの奥に格納されるのでソース書き換えが面倒。)


アンインストールは拡張と同じように行えます。

// ==UserScript==
// @name          Hatena Bookmark Comments Viewer
// @namespace     http://worris.sakura.ne.jp/hbcview.html
// @description	  Show Hatena Bookmark's comments at the bottom of your browser.
// @include       http://*
// @exclude       http://reader.livedoor.com/*
// @exclude       http://www.google.co.jp/*
// @exclude       http://twitter.com/
// @exclude       http://www.tumblr.com/dashboard
// @exclude       http://b.hatena.ne.jp/hotentry*
// @exclude       http://b.hatena.ne.jp/entrylist*
// @version       0.22.20090824
// ==/UserScript==


var hbcv = function() {

var w = typeof unsafeWindow != 'undefined' ? unsafeWindow : window;

(function() {
	if (self.location.href!=top.location.href) return;
	var uri=top.location.href;
	var script= document.createElement('script');
	script.type= 'application/javascript';
	script.charset= 'UTF-8';
	script.src= 'http://b.hatena.ne.jp/entry/jsonlite/?url='+escape(uri)+'&callback=showBM';
	document.getElementsByTagName('head')[0].appendChild(script);
})();

w.showBM=function(item){

if(item.count!='0'){
	var kil_link = document.createElement('div');
	kil_link.setAttribute('id', 'kill');
	text="<a href='http://b.hatena.ne.jp/entry/"+item.url.replace('#','%23')+"' target='_blank' style='color:red;background-color:#ffcccc;font-weight:bold;font-size:80%;font-family:sans-serif;'>"+item.count+" user"+(parseInt(item.count)>1 ? 's' : '')+"</a> ";
	text+="<a href='javascript:(function(){document.getElementById(\"kill\").style.display=\"none\";document.getElementById(\"hatenabm\").style.display=\"none\";})()' style='text-decoration:none;color:white;background-color:indianred;font-weight:bold;font-size:small;border-style:solid;border-width:1px;border-color:crimson;font-family:sans-serif;'>X</a>";
	kil_link.innerHTML=text;

	var comment='';
	for (var n = 0; n < item.bookmarks.length; n++) {
		if (item.bookmarks[n].comment) {
			comment += "<span style='color:blue;text-decoration:underline;'>"+item.bookmarks[n].user+"</span>: "+item.bookmarks[n].comment+"<br />";
		}
	}
	if(comment!=''){
		var spl_link = document.createElement('div');
		spl_link.setAttribute('id', 'hatenabm');
		spl_link.setAttribute('style','position:fixed;bottom:0px;left:0px;padding-left:5px;padding-top:2px;border-width:0px;background-color:#C9D5F8;filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;z-index:9;overflow:auto;width:100%;height:60px;text-align:left;');
		spl_link.innerHTML="<div id='comment' style='color:black;font-size:80%;line-height:normal;font-family:sans-serif;'>"+comment+"</div>";
		document.body.appendChild(spl_link);
		kil_link.setAttribute('style','position:fixed;bottom:62px;right:0px;font-size:80%;border-width:0px;z-index:9;');

	}else{
		kil_link.setAttribute('style','position:fixed;bottom:0px;right:0px;font-size:80%;border-width:0px;z-index:9;');
	}

	document.body.appendChild(kil_link);


}
}

};

function evalInPage(fun) {
  location.href = "javascript:void (" + fun + ")()";
}
evalInPage(hbcv);

ページを書き換えたりする技術はjavascript,dom,html,cssあたりがキーワードになります。
javascriptとdomはMozillaのオンラインリファレンスが最良です。

とくにDOM document、DOM element、DOM window あたりが重要です。

開発者ツールはFirefox + Firebugが一番オススメです。Firebugを眺めているだけでDOMの仕組みが分かってきます。
(Chromeの開発者ツールはまだまだ貧弱)


chrome拡張の作り方は公式のドキュメントを参照。
ユーザスクリプトは、user script,greasemonkey あたりでぐぐってください。
greasemonkeyは元々Firefox拡張ですが、chrome本体にも取り込まれているので簡単なコードなら互換性があります。しかし機能がいろいろ削られているのでそれを補う拡張(NinjaKit - 0xFF)もあります。

id:netti

試してみたら実現出来ました、丁寧にありがとうございます。
ニュアンスは近いのですが、常時表示で無くマウスジェスチャー割り当てでon offが出来ればと思ったものですが、良く良く考えたらそもそもはてブのコメントページに飛ぶ様な設定でウインドウを新しく開いて、それを閉じるで良い様な気がしてきました。
考えがまとまらないウチに質問をしてしまって申し訳ありませんが、上記のスクリプトを見たり色々観ているウチに考えがまとまりました、ありがとうございます

2012/01/10 15:52:07

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/01/10 15:12:17ここでベストアンサー

ポイント500pt

はてなブックマークコメントビューワでググればいろいろでてきます。

まず、ブックマークレットは毎回クリックしないと実行できないので、本当に作りたいものは拡張やユーザスクリプトではないでしょうか?
拡張とユーザスクリプトでは作る手間が結構違います。コメントビューア程度のものならばユーザスクリプトのほうが適していると思います。


適当なユーザスクリプトを見つけたので書いておきます。
worris’ works - Greasemonkey - はてなブックマークコメントビューワ
この「はてなブックマークコメントビューワ 0.22 (20090824)」のコードを読んで気に入るまで改造してみるのはどうでしょう。

chromeだとそのままでは動かなかったので以下のように修正すれば動きます。

インストール方法は上記のサイトからuser.jsを「名前を付けてリンク先を保存」からダウンロードして、以下のソースコードを上書きして、そのファイルをchromeのウィンドウにドラッグアンドドロップしてインストールしてください。ウィンドウの下にボタンが表示されます。(その際ウィンドウの幅を広くしておくこと。また、user.jsをクリックするとgreasemonkey installerなるものが表示されるが現時点では正しく動作せず、実体のJSファイルがプロファイルの奥に格納されるのでソース書き換えが面倒。)


アンインストールは拡張と同じように行えます。

// ==UserScript==
// @name          Hatena Bookmark Comments Viewer
// @namespace     http://worris.sakura.ne.jp/hbcview.html
// @description	  Show Hatena Bookmark's comments at the bottom of your browser.
// @include       http://*
// @exclude       http://reader.livedoor.com/*
// @exclude       http://www.google.co.jp/*
// @exclude       http://twitter.com/
// @exclude       http://www.tumblr.com/dashboard
// @exclude       http://b.hatena.ne.jp/hotentry*
// @exclude       http://b.hatena.ne.jp/entrylist*
// @version       0.22.20090824
// ==/UserScript==


var hbcv = function() {

var w = typeof unsafeWindow != 'undefined' ? unsafeWindow : window;

(function() {
	if (self.location.href!=top.location.href) return;
	var uri=top.location.href;
	var script= document.createElement('script');
	script.type= 'application/javascript';
	script.charset= 'UTF-8';
	script.src= 'http://b.hatena.ne.jp/entry/jsonlite/?url='+escape(uri)+'&callback=showBM';
	document.getElementsByTagName('head')[0].appendChild(script);
})();

w.showBM=function(item){

if(item.count!='0'){
	var kil_link = document.createElement('div');
	kil_link.setAttribute('id', 'kill');
	text="<a href='http://b.hatena.ne.jp/entry/"+item.url.replace('#','%23')+"' target='_blank' style='color:red;background-color:#ffcccc;font-weight:bold;font-size:80%;font-family:sans-serif;'>"+item.count+" user"+(parseInt(item.count)>1 ? 's' : '')+"</a> ";
	text+="<a href='javascript:(function(){document.getElementById(\"kill\").style.display=\"none\";document.getElementById(\"hatenabm\").style.display=\"none\";})()' style='text-decoration:none;color:white;background-color:indianred;font-weight:bold;font-size:small;border-style:solid;border-width:1px;border-color:crimson;font-family:sans-serif;'>X</a>";
	kil_link.innerHTML=text;

	var comment='';
	for (var n = 0; n < item.bookmarks.length; n++) {
		if (item.bookmarks[n].comment) {
			comment += "<span style='color:blue;text-decoration:underline;'>"+item.bookmarks[n].user+"</span>: "+item.bookmarks[n].comment+"<br />";
		}
	}
	if(comment!=''){
		var spl_link = document.createElement('div');
		spl_link.setAttribute('id', 'hatenabm');
		spl_link.setAttribute('style','position:fixed;bottom:0px;left:0px;padding-left:5px;padding-top:2px;border-width:0px;background-color:#C9D5F8;filter:alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;z-index:9;overflow:auto;width:100%;height:60px;text-align:left;');
		spl_link.innerHTML="<div id='comment' style='color:black;font-size:80%;line-height:normal;font-family:sans-serif;'>"+comment+"</div>";
		document.body.appendChild(spl_link);
		kil_link.setAttribute('style','position:fixed;bottom:62px;right:0px;font-size:80%;border-width:0px;z-index:9;');

	}else{
		kil_link.setAttribute('style','position:fixed;bottom:0px;right:0px;font-size:80%;border-width:0px;z-index:9;');
	}

	document.body.appendChild(kil_link);


}
}

};

function evalInPage(fun) {
  location.href = "javascript:void (" + fun + ")()";
}
evalInPage(hbcv);

ページを書き換えたりする技術はjavascript,dom,html,cssあたりがキーワードになります。
javascriptとdomはMozillaのオンラインリファレンスが最良です。

とくにDOM document、DOM element、DOM window あたりが重要です。

開発者ツールはFirefox + Firebugが一番オススメです。Firebugを眺めているだけでDOMの仕組みが分かってきます。
(Chromeの開発者ツールはまだまだ貧弱)


chrome拡張の作り方は公式のドキュメントを参照。
ユーザスクリプトは、user script,greasemonkey あたりでぐぐってください。
greasemonkeyは元々Firefox拡張ですが、chrome本体にも取り込まれているので簡単なコードなら互換性があります。しかし機能がいろいろ削られているのでそれを補う拡張(NinjaKit - 0xFF)もあります。

id:netti

試してみたら実現出来ました、丁寧にありがとうございます。
ニュアンスは近いのですが、常時表示で無くマウスジェスチャー割り当てでon offが出来ればと思ったものですが、良く良く考えたらそもそもはてブのコメントページに飛ぶ様な設定でウインドウを新しく開いて、それを閉じるで良い様な気がしてきました。
考えがまとまらないウチに質問をしてしまって申し訳ありませんが、上記のスクリプトを見たり色々観ているウチに考えがまとまりました、ありがとうございます

2012/01/10 15:52:07
id:taknt No.2

きゃづみぃ回答回数13539ベストアンサー獲得回数11982012/01/10 15:33:19

ポイント250pt

Greasemonkeyは、Firefox用のスクリプトなので、それ以外のブラウザを用いるには
Trixie を使用したらいいですね。

http://paro2day.blog122.fc2.com/blog-entry-628.html

id:netti

メインブラウザがchromeなのですし、上の方にも経緯を書きましたが、今後の何かの参考にさせて頂きます。
ありがとうございます。

2012/01/10 15:52:50

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません