32nd Diary(2008-04-27)

トップ «前の日記(2008-04-26 (Saturday)) 最新次の日記(2008-04-28 (Monday))» 編集

2008-04-27 (Sunday) [長年日記]

■ hatana_bookmark_anywhere.jsをtDiaryで使ってみた、が

masuidrive on rails - ブログにはてブのコメントを表示するhatana_bookmark_anywhere.jsを使ってみた。

はてなブックマークでコメントされているページをみるとうまく動いて・・・ない！！

表示例: Windowsに保存したパスワードの削除・編集

InternetExplorerとSafariで動作がおかしいです。身の回りにユーザが多いFirefoxとOperaで正常に動作しているし、動作がおかしいとは言っても情報量は同じだとおもうので、これで動かしておくかな。

こんな中途半端ではソースを公開する気にもならないしなぁ。どうしたものか。コールバックが呼ばれるタイミングに依存する実装になっているのがいけないのかにゃん。面倒だが、ハッシュとか真面目に使ってリライトするかね。時間があれば。（ぶ

■ hatana_bookmark_anywhere.jsがtDiaryでうまく動かない件について

現在のhatana_bookmark_anywhere.jsがひとつのページにひとつのブックマーク対象しかないということを前提に作られているのがちょっち苦しいです。

というわけで、中の人降臨によろこびつつ、自分が把握している範囲でうまく動かない理由を書いてみます。

具体的にはパラグラフ単位でPermalinkがあるページではcallbackのタイミングによって変数の値が変わってしまったり、評価される順番が後回しだったりするようです。

結果として、置き換え対象とした最後のノードに固まって評価されたり、リンク先も一番最後のPermalinkとなってしまったりで、InternetExplorerとSafariではうまく動いていません。

ちなみに，ソースは以下のとおりです．

hb_footer4sec_js.rb

hb_footer4sec_js.rbを参考に以下のとおりにdivのidをpermalinkごとに生成するように変更．スタイルシートのことを考え，classにもhatena_bookmark_anywhereを追加してみた．あとhatena-bookmark-anywhere.jsのインクルードは先頭部で一回だけ行い，自発的に__hatena_bookmark_anywhere_loade();をコールしてやることで，Permalinkの数だけ逐次的に呼び出してみた．

# hb_footer4sec_js.rb $Revision 1.0 $
#
# Copyright (c) 2008 SHIBATA Hiroshi <h-sbt@nifty.com>
# You can redistribute it and/or modify it under GPL2.
#
add_header_proc do
	hb_footer4sec_js_insert_code
end

def hb_footer4sec_js_insert_code
        <<-'HTML'
	<script src="hatena-bookmark-anywhere.js" type="text/javascript" charset="utf-8"></script>
        HTML
end

def hb_footer4sec_js_permalink( date, index )
	ymd = date.strftime( "%Y%m%d" )
	uri = @conf.index.dup
	uri[0, 0] = @conf.base_url unless %r|^https?://|i =~ uri
	uri.gsub!( %r|/\./|, '/' )

	uri + anchor( "#{ymd}p%02d" % index )
end

add_section_leave_proc do |date, index|
	if @mode == 'day' and not bot? and not @conf.mobile_agent? then
		<<-SCRIPT
		<div id="hatena_bookmark_anywhere-p#{"%02d" % index}" class="hatena_bookmark_anywhere"></div>
		<script type= "text/javascript">/*<![CDATA[*/
		var hatena_bookmark_anywhere_limit = 10;
		var hatena_bookmark_anywhere_style = true;
		var hatena_bookmark_anywhere_collapse = true;
		var hatena_bookmark_anywhere_url = "#{hb_footer4sec_js_permalink(date, index).gsub('#', '%23')}";
		var hatena_bookmark_anywhere_id = "hatena_bookmark_anywhere-p#{"%02d" % index}";
		__hatena_bookmark_anywhere_loade();
		/*]]>*/</script>
		SCRIPT
	end
end

hatena-bookmark-anywhere.js

呼び出すタイミングを変数宣言の直後にしたので，onloadによる__hatena_bookmark_anywhere_loadeの呼び出しを無効にする．また，divのidが変更されたので，新しくhatena_bookmark_anywhere classを作成し，スタイルシートの変更をしました．最後に，document.bodyにscript elementがぶら下がっているとIEなどがなぜか落ちるようになったので，divのところにぶら下げて評価してもらうことにしました．

/*
どこでもはてブ - Hatena bookmark anywhere
http://blog.masuidrive.jp/index.php/category/hba/

The MIT License
Copyright (c) 2008 Yuichiro MASUI <masui@masuidrive.jp>
 */
var hatena_bookmark_anywhere_style; // falseを設定するとCSSでスタイルの指定が可能になる
var hatena_bookmark_anywhere_limit; // 表示件数
var hatena_bookmark_anywhere_collapse; // trueにすると、コメントの書いてないブクマを表示しない。指定しない場合は、表示件数を超えた場合のみ表示しない
var hatena_bookmark_anywhere_url; // 表示するURL 未指定の場合、このページ

function __hatena_bookmark_anywhere_receiver(json) {
    try {
	var html = "";

	var escapeHTML = function(str) {
	    str = str.replace("&","&amp;");
	    str = str.replace("\"","&quot;");
	    str = str.replace("'","&#039;");
	    str = str.replace("<","&lt;");
	    str = str.replace(">","&gt;");
	    return str;
	}

	// http://juce6ox.blogspot.com/2007/11/cssdom.html
	// by latchet
	var addCSSRule = (document.createStyleSheet)
	    ? (function(sheet){
		    return function(selector, declaration){
			sheet.addRule(selector, declaration);
		    };
		})(document.createStyleSheet())
	    : (function(sheet){
		    return function(selector, declaration){
			sheet.insertRule(selector + '{' + declaration + '}', sheet.cssRules.length);
		    };
		})((function(e){
			    e.appendChild(document.createTextNode(''));
			    (document.getElementsByTagName('head')[0] || (function(h){
				    document.documentElement.insertBefore(h, this.firstChild);
				    return h;
				})(document.createElement('head'))).appendChild(e);
			    return e.sheet;
			})(document.createElement('style')))

	if(hatena_bookmark_anywhere_style!==false) {
	    addCSSRule("div.hatena_bookmark_anywhere", "font-size: 90%; font-family: \"Arial\", sans-serif; color: #000;");
	    addCSSRule("div.hatena_bookmark_anywhere * ", "margin: 0; padding: 0; text-align: left; font-weight: normal; font-family: \"Arial\", sans-serif;");
	    addCSSRule("div.hatena_bookmark_anywhere .hatena_bookmark_anywhere_zero", "background-color:#edf1fd; border-top:1px solid #5279e7; list-style-position: inside; margin:2px 0 0 0;padding: 8px 5px 12px 8px;");
	    addCSSRule("div.hatena_bookmark_anywhere ul", "background-color:#edf1fd; border-top:1px solid #5279e7; list-style-position: inside; margin:2px 0 0 0;padding: 8px 5px 12px 8px;");
	    addCSSRule("div.hatena_bookmark_anywhere ul li", "list-style-type: circle; padding: 1px 0;");
	    addCSSRule("div.hatena_bookmark_anywhere .hatena_bookmark_anywhere_user", "color: #00e; text-decoration: underline; margin: 0 2px;");
	    addCSSRule("div.hatena_bookmark_anywhere .hatena_bookmark_anywhere_tags", "font-size: 90%; color: #66c; margin: 0 4px 0 2px;");
	    addCSSRule("div.hatena_bookmark_anywhere .hatena_bookmark_anywhere_tags a", "text-decoration: none; color: #66c;");
	    addCSSRule("div.hatena_bookmark_anywhere .hatena_bookmark_anywhere_go", "font-size: 90%; color: #66c; text-decoration: none;");
	}

	if(json==null) {
	    html += "このエントリーのはてなブックマーク (0) <a class=\"hatena_bookmark_anywhere_go\" href=\"http://b.hatena.ne.jp/entry/"+escapeHTML(hatena_bookmark_anywhere_url)+"\">はてなブックマークのページへ飛ぶ</a><br/>";
	    html += "<div class=\"hatena_bookmark_anywhere_zero\">";
	    html += "このページはまだブックマークされていません。";
	    html += "</div>";
	}
	else {
	    if((typeof hatena_bookmark_anywhere_limit)!="number") hatena_bookmark_anywhere_limit = 100;
	    if((typeof hatena_bookmark_anywhere_collapse)=="undefined" && json.bookmarks.length>hatena_bookmark_anywhere_limit) hatena_bookmark_anywhere_collapse = true;
	
	    html += "このエントリーのはてなブックマーク ("+json.count+") <a class=\"hatena_bookmark_anywhere_go\" href=\"http://b.hatena.ne.jp/entry/"+escapeHTML(hatena_bookmark_anywhere_url)+"\">はてなブックマークのページへ飛ぶ</a><br/>";
	    html += "<ul id=\"bookmarked_user\">";
	    for(var i=0; i<json.bookmarks.length&&hatena_bookmark_anywhere_limit>0; ++i) {
		var bookmark = json.bookmarks[i];
		var t = bookmark.timestamp.split(" ")[0].split("/");
		var tags = [];
		for(var j=0; j<json.bookmarks[i].tags.length; ++j) {
		    var tag = json.bookmarks[i].tags[j];
		    tags.push("<a href=\"http://b.hatena.ne.jp/"+bookmark.user+"/"+tag+"\">"+escapeHTML(tag)+"</a>");
		}
		if(hatena_bookmark_anywhere_collapse!=true || bookmark.comment!='') {
		    html += "<li><span class=\"__hatena_bookmark_anywhere_timestamp\">"+escapeHTML(t[0])+"年"+escapeHTML(t[1])+"月"+escapeHTML(t[2])+"日</span><img src=\"http://www.hatena.ne.jp/users/"+escapeHTML(bookmark.user.substring(0,2))+"/"+bookmark.user+"/profile_s.gif\" width=\"16\" height=\"16\"><a href=\"http://b.hatena.ne.jp/"+escapeHTML(bookmark.user)+"/"+escapeHTML(t.join(""))+"\" class=\"hatena_bookmark_anywhere_user\">"+escapeHTML(bookmark.user)+"</a><span class=\"hatena_bookmark_anywhere_tags\">"+tags.join(", ")+"</span>"+escapeHTML(bookmark.comment)+"</li>";
		    hatena_bookmark_anywhere_limit--;
		}
	    }
	    html += "</ul>";
	}

	var wrap = document.createElement("div");
	wrap.innerHTML = html;
	document.getElementById(hatena_bookmark_anywhere_id).appendChild(wrap);
    } catch(e) { }
}

function __hatena_bookmark_anywhere_loade() {
    try {
    	var div_node = document.getElementById(hatena_bookmark_anywhere_id);
	if((typeof div_node)!="undefined") {
	    var script = document.createElement("script");
	    script.setAttribute("type","text/javascript");
	    if((typeof hatena_bookmark_anywhere_url)=="undefined") hatena_bookmark_anywhere_url = location.href.replace(/#.*/,"");
	    script.setAttribute("src","http://b.hatena.ne.jp/entry/json/?url="+hatena_bookmark_anywhere_url+"&callback=__hatena_bookmark_anywhere_receiver");
	    // document.body.appendChild(script);
	    div_node.appendChild(script);
	}
    } catch(e) { }
}

/*
try {
    if(window.addEventListener) {
	window.addEventListener("load", __hatena_bookmark_anywhere_loade, false);
    }
    else {
	window.attachEvent("onload", __hatena_bookmark_anywhere_loade);
    }
} catch(e) { }
*/

汚く変更してしまったし，評価順序がどうなっているのか自分にはさっぱりわかりません・・・

複数のPermalinkを保持できるようにurlを配列などにして書きなおそうかなぁ，という感じですが，どうでしょう？＞ @masuidrive

Tags: Hack Diary JavaScript Ruby

■ 今日のつぶやき

04:46 > Radiant CMS のバージョンがあがってる。ちょっといじってみるか。 [jus]
04:53 > update 完了。 passage とかも試してみるかな。 [jus]
04:58 > gem install passenger っと。 [jus]
04:59 > passenger-install-apache2-module っと。 [jus]
05:10 > と。変な挙動になったので無効にした。めんどいので fcgid でいいや。 [jus]
11:18 > IKZOLOGIC ヤリ過ぎ http://www.nicovideo.jp/watch/sm3101468
11:28 > @Kolmo 農家 LOID の活躍がすごい。というか、使い勝手よすぎなリズムｗｗｗｗｗ
15:07 > @masuidrive hatana_bookmark_anywhere.js が tDiary でうまく動かない件について　を書いてみました。 http://tinyurl.com/56h8sg
15:17 > @masuidrive 反応、ありがとうございます。シンプルであることも大切だと思うのでなかなか難しいですね・・・とりあえず、落ちるレベルの不具合はなく、 Fx と Opera で動いているので、ありがたく使わせていただきます〜。
17:45 > Carbon Emacsを4月18日版にアップデート
17:56 > なんか腹立たしいので友だちの部屋に乱入してマリカーでもしようと思う。ピザも食べたい。
18:44 > 20時からカラオケということになった。・・・あれ？マリカーは？・・・まぁ、いっか。
18:50 > twitterのサイトのカラーを変更した。日記と同じ青ベース。