// ==UserScript==
// @name           Keyword to Technorati
// @namespace      http://anond.hatelabo.jp/
// @include        http://d.hatena.ne.jp/*
// ==/UserScript==
var keywords = document.getElementsByClassName("keyword");
for(var i=0; i<keywords.length; i++){
    keywords.item(i).href = "http://www.technorati.jp/search/" + keywords.item(i).textContent;
}

これではてダ以外の記事も見れて、ちょっと世界が広がるかも！

でも、これもちょっと不便です。キーワードリンクで、そのキーワードの意味を知りたい時もあるからです。

はてなキーワードの素晴らしいところは、キーワードを含む日記とキーワードの意味、どちらも一つのページで確認できる事です！まぁキーワードの説明とWikipedia、どっちか片方でも良いような気もしますがf(^ ^;)

そこで、テクノラティのキーワード検索結果ページにも、そのキーワードの意味が表示されれば便利です。

（余談ですけど、Wikipediaの記事があるなら、Wikipediaの記事だけ表示すれば十分かなぁとか思っちゃったり？概してWikipediaの記述の方が優れてるし…）

というわけで、これもユーザースクリプトで実現してみます。

// ==UserScript==
// @name           Technorati with Wikipedia or ?keyword
// @namespace      http://anond.hatelabo.jp/
// @description    Add Wikipedia in Technorati search page
// @include        http://www.technorati.jp/search/*
// ==/UserScript==

var keyword = (decodeURIComponent(document.URL).split("?")[0]+" ").slice("http://www.technorati.jp/search/".length, -1);

function appendKeyword(title,body,url){
    var div = document.createElement("div");
    div.style.border = "inset gray thin";
    div.style.padding = "5px 14px";
    
    var h2 = document.createElement("h2");
    h2.innerHTML = title.link(url);
    h2.style.fontSize = "2em";
    div.appendChild(h2);
    
    var content = document.createElement("div");
    content.innerHTML = body;
    div.appendChild(content);
    
    div.appendChild(document.createElement("hr"));
    
    var foot = document.createElement("div");
    foot.innerHTML = "["+decodeURIComponent(url).link(url)+"]";
    foot.style.textAlign = "right";
    div.appendChild(foot);
    
    //document.getElementById("main").insertBefore(div, document.getElementById("main").firstChild);
    document.getElementById("extra").insertBefore(div, document.getElementById("extra").firstChild);
}

GM_xmlhttpRequest({
    method: "GET",
    url: "http://wikipedia.simpleapi.net/api?output=json&amp;keyword="+keyword,
    onload: function(response){
        var wp = eval(response.responseText);
        if(wp){
            appendKeyword(wp[0].title, wp[0].body, "http://ja.wikipedia.org/wiki/"+encodeURIComponent(wp[0].title));
        }else{
            GM_xmlhttpRequest({
                method: "GET",
                url: "http://d.hatena.ne.jp/keyword?mode=rss&amp;ie=utf8&amp;word="+encodeURIComponent(keyword),
                onload: function(response){
                    var hk = (new DOMParser).parseFromString(response.responseText, "text/xml");
                    appendKeyword(keyword,
                        hk.getElementsByTagName("description").item(1).textContent,
                        "http://d.hatena.ne.jp/keyword/"+keyword
                    );
                }
            });
        }
    }
});

これで、はてダのキーワードリンクで飛んだ先に、その単語の説明とはてな以外も含めたブログ記事が表示されます。やったね＼(＾o＾)／

追記

用語の説明は、検索結果の上に表示するより、サイドバー（広告が表示されてる）にあった方が便利かなーとか思ったので、コードをちょぴっと変更しました。既にインスコしちゃってた人、ごめんね！

ところでテクノラティ検索結果のAutopagerize、なんか１頁目ばっかり継ぎ足される気がするけど、ボクだけかな？

Permalink | トラックバック(0) | 00:31

2008-09-05

■Google chrome でブロック レベル要素の高さを揃える話

自分用にメモ。

padding-bottom: 32768px;
margin-bottom: -32768px;

これで高さ揃えるってのが去年の10月頃に出てたと思うんだけど、これやるとGoogle Chrome で背景画像が正しく出ない。

下のページ見てもらうと分かるんだけど、サイドバーの背景が出てないんだよね。

http://www.linkthink.co.jp/contact/

試してみたら、色なら出ることがわかった。

背景「画像」がダメなんだ。背景「色」なら敷ける。

仕事で使ったこと無くて良かった。

Permalink | トラックバック(3) | 11:31

2008-08-10

■Firefoxをテキストブラウザ化するcss作った【黒画面】【コンソール】

2008.9.28　12：53　追記

★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

公式サイトを開設しました。
デモ動画、マニュアル付きダウンロード・パッケージをご用意しております。
当エントリより下記の公式ページより情報を得られる事を強く推奨いたします。
- http://zamamin.org/labs/black-out

★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★

_________________ここから下は古い情報▼__________________________________________________

今、自分のブログをスクラッチしているので、こちらで。→2008/9/28　スクラッチ完了！BLACK-OUT.CSS公式ページ

作りました

【black-out.css】

2008.9.13　23：30　追記

wmtg.net ドメイン失効に伴い、zamamin.comに変更

2008.8.10　22：29　追記

bookmarkletを作りました！！Firefox以外でも手軽にお試し頂けます。
- 　http://anond.hatelabo.jp/20080810224028

当エントリは、下記の方におすすめの情報でございます。

Firefox ユーザーである（※他ブラウザでもいけます。が、当エントリでは導入方法を紹介していません。追記したbookmarkletだとoperaやsafariなどのブラウザでもすぐにお試しできます）
Firefoxのアドオン「stylish」を入れている。もしくは必要なら入れてもいいって人。
（mixiをPCで使っている場合）右に出てくる鬱陶しいバナーにうんざりしていたり、日記とコミュにしか興味がない人。
お気に入りのブログが、情報源の質には満足しているが左右のアフィリが鬱陶しい点を残念に思ってる人
コンソール（CUI）が好きな人、シンプルなのが好きな人、ぶっちゃけ文字以外用がないのに飾りの画像とかWEBにいらねーよと思ってる人
カラム、２カラムのレイアウトのせいで、目線が左右に移動しないといけないのがイラっとくる人、コードは上から下だけでいいだろって思っている人
- wikipediaも段組みやめてくれよサイドバーうざいよ、デフォルトの白背景色は目が痛いって思ってる人とか特に
リンクテキスト探しがきらいな人、どこがリンクがすぐに知りたい人
背景色が明るいのが目が疲れる人、壁紙も黒にしちゃってるような人、長時間ネットしまくりなんで目が疲れにくいのがいい人
サイトによって極端に読みにくいサイズや色のテキストがあることに普段からイラっときている人

要は、Lynxのようなシンプル Webに世界がなればいいのになと思っている方。

そして、どんなサイトでも目線は左右に動かしたくない！スクロールは上下だけで済ませたい！

と、強く考えておられる方むけの情報です。

何を作ったの？

私はテキストブラウザのLynxを時々使っているのですが、これでサイトを見るとシンプルに見れるのですごく良いんですよね。

ただ、LynxはFlashとか画像が見れないし、マウスが使えないのはいざって時にちょっと不便。

で、Firefoxをテキストブラウザ化できないかなあと、ふと思いまして、思いつきで作ってしまいました。

私めもwebデザイナーやっとるんですが、上記のように、昨今のweb デザインなんて普段はなくていいって思っている奴でして。

仕事じゃ3カラムのサイトとか作りますが自分はそんなん好きじゃないです。色がサイトごとに違うってのも理解できない。

必要なのは情報であってデザイナーのデザインなんてどうでもいいんですよ。

だから2chのシンプル画面とか大好きです。

そんな訳で、どんなサイトでもテキストブラウザ状態で閲覧できるFirefox用の拡張 cssを作りました（やっつけだけど）。

ただ、ニュースサイトで画像が見れないと困る時もあるので、普段は小さなサムネイルで、カーソルを合わせた時だけ大きく表示されるようにしています。

＠このcssはコンセプト実証モデルです。思いつきで作ってるのでちょっと問題もあります。フィードバックとか意見など頂けると嬉しいかも。

＠将来的には、グリモンでjsも組み合わせてもっとコンソールのような感覚でブラウジングできるようにしたい

＠（参考用）私のよく見るサイト・・・ニコ動、wikipedia、スラッシュドットジャパン、2nn.jp（2ch）、mixi、はてなでホッテントリに上がっているブログ各種

ちなみに、こんなん使うな、既にこんないいのあるわいってのをご存知の方は教えてくれると嬉しいです。

それなりに探したのだけど、見当たらなくて・・・だから自作したので。

導入方法について

Firefoxのアドオン「stylish」をインストールします。→　https://addons.mozilla.org/ja/firefox/addon/2108
インストール後、stylishの管理画面を開きます。（Firefox ウィンドウの右下にあるメモ帳っぽいアイコンで右クリック→スタイルの管理）
「スタイルの管理」で「書く」を選択、タイトルはblack-outとかテキトーに入れてください。で、下記のコードを貼付けて保存してください。
どんなサイトでも同じデザイン（コンソールのような画面）になります。なお、いつでもstylishdのメニューでcssの有効／無効は切り替えられますのでご安心を。
テストとして、wikipediaを見てみられると雰囲気が掴めると思います。

/*
 * ----------------------------
 * black-out.css
 * author zamamin.com
 * build 2008.8.09 15:03
 * version 0.0.31
 *  fix @namespaceを書いてなかったので追加
 * ----------------------------
 *
 */

@namespace url(http://www.w3.org/1999/xhtml);

/* 全てのエレメントをリセット */
body,body * {
background-image:none !important;
background-color:#000 !important;
border-color:#333 !important;
text-decoration:none !important;
color:#aaa !important;              /*<- テキスト色 */
font-size:16px !important;          /*<- 文字サイズ */
font-weight:normal !important;
padding:0.15em !important;
margin:0 !important;
line-height:1.25em !important;
text-align:left !important;
text-indent:0 !important;
font-family:Arial,Helvetica,Verdana,'ヒラギノ角ゴPro W3','Hiragino Kaku Gothic Pro',Osaka,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important; 
float:none !important;
clear:both !important;
position:relative !important;
width:auto  !important;
height:auto  !important;

}

body {
background-color:#000 !important;
padding:0.5em !important;
}

body * p, body * div,
body * h1, body * h2, body * h3, body * h4, body * h5, body * h6{
margin-bottom:0.3em !important;
float:left !important;
clear:both !important;
}


/* リンク色 */
body * a,
body * a *{
color:#a50 !important;
}

/* アクセス済みのリンク色 */
body * a:visited{
color:#a50 !important;
}

/* カーソルを合わせた時のリンク色 */
body * a:hover,
body * a:hover *{
color:#0aa !important;
background-color:#609 !important;
}


/* 画像は普段は小さくサムネイル表示。鬱陶しいので薄く表示 */
body * img{
opacity:0.3 !important;
height:15px !important;
width:15px !important;
}

/* 画像はマウスカーソルもっていけば原寸サイズになる */
body * img:hover{
opacity:0.9 !important;
height:auto !important;
width:auto !important;
}


button,
input,
select,
option,
textarea{
 color:#f00 !important;
 padding:0.05em !important;
 height:auto !important;
}

/* テーブルのスタイル */
table{
border:none;
}

table td,
table th{
border:none;
border-right:1px dashed #999 !important;
border-bottom:1px dashed #999 !important;
}



/* for 2ch（暫定） */
body * dt{
font-weight:bold !important;
}


/* 二コ動 */
embed#flvplayer{
height:540px !important;
width:952px !important;
}

既知の問題点というか仕様

ごちゃごちゃしたサイトに出くわした時に、必要に応じて使う、というのを想定しています。どんな時でも使える万能cssではないです
mixiの日記投稿のように、文字入力に関してはあまりメリットはないです。view専用のcssと考えられるとよいかと。
windowsではメイリオの入っているvista機やxp機がおすすめです。macは、まぁとりあえずこのフォントでいいかなとテキトーにやっています（一応、macとwin両方で閲覧テスト済み）
objectやembedタグのあるサイトでは、objectやembed部分が変になるかも。今後の課題。ニコ動だけ特別対応させています。
リンクカラーがオレンジなのは映画イノセンスのオレンジ色の画面が好きだったから
スタイルを何もかも破壊するのでfirebugもおかしくなります

update

2008.8.10 21:05
- @namespaceを書いていなかったので追記。ありがとうございました。 -> http://pc11.2ch.net/test/read.cgi/software/1216790587/553

Permalink | トラックバック(1) | 11:36

2008-06-06

■ちょとｓYレならんしょこれは・・？

<ul id="menu">
	<li><a href="#">だらだら</a></li>
	<li><a href="#">だらだら</a></li>
	<li><a href="#">だらだら</a><ul><li>だらだら</li><li>だらだらだらだらだらだら</ul></li>
	<li><a href="#">ゆっくり</a><ul><li>していってね！</li></ul></li>
</ul>

こんな感じのリストに

#menu li{
	display:block;
	float:left;
	margin-left:0;
	padding-left:0;
	margin-right:1em;
	border:1px dashed red;
}
#menu li ul{
	position:absolute;
	display:block;
	margin-left:0;
	padding-left:0;
	border:1px dashed black;
}
#menu li li{
	list-style:none;
	border:0 none;
	float:none;
	width:auto;
}

こんな感じのスタイル書いて

window.onload=function(){
	var li=document.getElementById("menu").childNodes;
	for(var i=0;i<li.length;i++){
		if(li[i].childNodes[1]){
			var submenu=li[i].childNodes[1];
			li[i].onmouseover=function(){
				this.childNodes[1].style.display="block";
			}
			li[i].onmouseout=function(){
				this.childNodes[1].style.display="none";
			}
		}
	}
};

みたいなスクリプト書いたときのIEの挙動がおかしい！助けて！

Permalink | トラックバック(1) | 20:46

2008-02-19

■はてなブックマークを2ちゃんねるっぽくするユーザー スタイルシート

インスパイヤ元 - http://anond.hatelabo.jp/20080219145538

@-moz-document domain("b.hatena.ne.jp") {
  ul#bookmarked_user{
    font-size: 105%;
  }
  #bookmarked_user li{
    list-style-type: decimal;
  }
  #bookmarked_user li:before{
    content: '\FF1A';
  }
  #bookmarked_user .timestamp:before{
    content: '\756A\7D44\306E\9014\4E2D\3067\3059\304C\306F\3066\306A\3067\3059\FF1A ';
    font-size: 110%;
    font-weight: bold;
    color: #008000;
  }
  #bookmarked_user img.hatena-id-icon,
  #bookmarked_user .user-tag,
  #bookmarked_user .hatena-star-comment-container,
  #bookmarked_user .hatena-star-star-container{
    display: none;
  }
  #bookmarked_user a[href*='bookmark-']:before{
    content: 'ID:';
  }
  #bookmarked_user a[href*='bookmark-']:link,
  #bookmarked_user a[href*='bookmark-']:hover{
    color: black;
    text-decoration: none;
  }
  #bookmarked_user a[href*='bookmark-']:hover{
    color: blue;
    text-decoration: underline;
  }
  #bookmarked_user span.comment{
   display: block;
   padding: 8px 1em;
   margin-left: 1.5em;
  }
}

曜日の表記と「2008年02月19日」を「2008/02/19」にしたかったが、方法が分からなかった。あ、あと投稿時間も。Greasemonkey じゃないと無理か？

追記

転載・改変は自由なので、再利用したいとかここを変えた方がより良い、という方は好きに使って結構です。

追記2

→ はてブちゃんねる

はてなブックマークを2ちゃんねる風に見せるサービス ktkr！

「はてブちゃんねる」を作った - mayokara memo

Permalink | トラックバック(2) | 17:13

2007-09-28

■http://anond.hatelabo.jp/20070928140929

たまにLLでページをつくったりするのだけどデザインがものすごくめんどくさい。

というよりたぶん性にあわないのだとおもう。

一応外部よみこみのcssは読み込む。

が、別にそのサイトのために書いたものではないので、いらないものもゴソっとついている。

レイアウトは、まずまっさきにテーブルで書く。

colspan,rowspanなんてあたりまえだ。

思った位置になんとか表示されているのを確認する。

ちょっと見てくれ悪いなーとおもったら、タグに直接スタイルシートを書き込む。

主にmargin,padding。

修正も大変かもしれないが、０から書くのもめんどくさい。

だれかデザインだけやってくれる人いないかな…。

デザイン外注っていくらぐらいするんだろう。

Permalink | トラックバック(0) | 15:05

2007-07-20

■うがぁ

http://anond.hatelabo.jp/20070720072141

将来の拡張用にPADDING領域は作らなくて大丈夫？ってマジで心配する

これやっぱ他でもそうなのか！

Permalink | トラックバック(0) | 08:26

■よくあるパターン

http://anond.hatelabo.jp/20070719172216

・二人の船頭

　要望を吸い上げるために打ち合わせをしてると、相手方の担当者二人がいつも細かい部分で言い争ってて、なかなか方向が決まらない。

・古株と新米

　そして、その二人が古株と新米である事もよくある事。

　古株は業務知識に長けているが、技術的な知識がCOBOL全盛期から進歩してない（たとえば、将来の拡張用にPADDING領域は作らなくて大丈夫？ってマジで心配する）ので、そこらへんでトンチンカンな意見を言う。

　新米は最新技術に長けていても、業務知識が欠けているので、そこらへんでトンチンカンな意見を言う。

　仲が良ければちょうど補完し合えていいのに、大抵仲が悪かったりする。

・会議室と現場

　会議室で打ち合わせされて決まる仕様は、上司の理想。

　現場でヒアリングされて決まる仕様は、ユーザの現実。

・普通の人にとって、Excelシートはただの清書ツール

　素人さんの作ったExcelシートは、一見、行×列に分けて綺麗に項目が整理されているように見えても、それはワナである。

　このままデータベースのフィールド・レコードとして対応できると思ったら大間違い。

　実際の運用ではイレギュラーなパターンが発生するたびに、その行だけ、普段使っている数式を消して手動で編集したりなんてことはザラ。

　それも、「普段こんなシートを使ってる」と渡されたExcelシートには、決まってそのイレギュラーパターンが存在しなかったりするので、そういう運用の存在自体に気付かなかったりするもの。

　上司ですら気付かなかったりするから、現場で一列一列確認する必要があったりする。なお、現場の担当者ですら全部の例外運用パターンをすぐ思い出せるわけではないのが、また困りもの。とにかく根気強く聞き出すしかない。

Permalink | トラックバック(1) | 07:21

2007-07-19

■

/* Ten */
if (typeof(Ten) == 'undefined') {
    Ten = {};
}
Ten.NAME = 'Ten';
Ten.VERSION = 0.06;

/* Ten.Class */
Ten.Class = function(klass, prototype) {
    if (klass && klass.initialize) {
	var c = klass.initialize;
    } else if(klass && klass.base) {
        var c = function() { return klass.base[0].apply(this, arguments) };
    } else {
	var c = function() {};
    }
    c.prototype = prototype || {};
    c.prototype.constructor = c;
    Ten.Class.inherit(c, klass);
    if (klass && klass.base) {
        for (var i = 0;  i < klass.base.length; i++) {
	    var parent = klass.base[i];
            if (i == 0) {
                c.SUPER = parent;
                c.prototype.SUPER = parent.prototype;
            }
            Ten.Class.inherit(c, parent);
            Ten.Class.inherit(c.prototype, parent.prototype);
        }
    }
    return c;
}
Ten.Class.inherit = function(child,parent) {
    for (var prop in parent) {
        if (typeof(child[prop]) != 'undefined' || prop == 'initialize') continue;
        child[prop] = parent[prop];
    }
}

/*
// Basic Ten Classes
**/

/* Ten.JSONP */
Ten.JSONP = new Ten.Class({
    initialize: function(uri,obj,method) {
        if (Ten.JSONP.Callbacks.length) {
            setTimeout(function() {new Ten.JSONP(uri,obj,method)}, 500);
            return;
        }
        var del = uri.match(/\?/) ? '&' : '?';
        uri += del + 'callback=Ten.JSONP.callback';
        if (!uri.match(/timestamp=/)) {
            uri += '&' + encodeURI(new Date());
        }
        if (obj && method) Ten.JSONP.addCallback(obj,method);
        this.script = document.createElement('script');
        this.script.src = uri;
        this.script.type = 'text/javascript';
        document.getElementsByTagName('head')[0].appendChild(this.script);
    },
    addCallback: function(obj,method) {
        Ten.JSONP.Callbacks.push({object: obj, method: method});
    },
    callback: function(args) {
        // alert('callback called');
        var cbs = Ten.JSONP.Callbacks;
        for (var i = 0; i < cbs.length; i++) {
            var cb = cbs[i];
            cb.object[cb.method].call(cb.object, args);
        }
        Ten.JSONP.Callbacks = [];
    },
    MaxBytes: 8000,
    Callbacks: []
});

/* Ten.XHR */
Ten.XHR = new Ten.Class({
    initialize: function(uri,opts,obj,method) {
        if (!uri) return;
        this.request = Ten.XHR.getXMLHttpRequest();
        this.callback = {object: obj, method: method};
        var xhr = this;
        var prc = this.processReqChange;
        this.request.onreadystatechange = function() {
            prc.apply(xhr, arguments);
        }
        var method = opts.method || 'GET';
        this.request.open(method, uri, true);
        if (method == 'POST') {
            this.request.setRequestHeader('Content-Type',
                                          'application/x-www-form-urlencoded');
        }
        var data = opts.data ? Ten.XHR.makePostData(opts.data) : null;
        this.request.send(data);
    },
    getXMLHttpRequest: function() {
        var xhr;
        var tryThese = [
            function () { return new XMLHttpRequest(); },
            function () { return new ActiveXObject('Msxml2.XMLHTTP'); },
            function () { return new ActiveXObject('Microsoft.XMLHTTP'); },
            function () { return new ActiveXObject('Msxml2.XMLHTTP.4.0'); },
        ];
        for (var i = 0; i < tryThese.length; i++) {
            var func = tryThese[i];
            try {
                xhr = func;
                return func();
            } catch (e) {
                //alert(e);
            }
        }
        return xhr;
    },
    makePostData: function(data) {
        var pairs = [];
        var regexp = /%20/g;
        for (var k in data) {
            var v = data[k].toString();
            var pair = encodeURIComponent(k).replace(regexp,'+') + '=' +
                encodeURIComponent(v).replace(regexp,'+');
            pairs.push(pair);
        }
        return pairs.join('&');
    }
},{
    processReqChange: function() {
        var req = this.request;
        if (req.readyState == 4) {
            if (req.status == 200) {
                var cb = this.callback;
                cb.object[cb.method].call(cb.object, req);
            } else {
                alert("There was a problem retrieving the XML data:\n" +
                      req.statusText);
            }
        }
    }
});

/* Ten.Observer */
Ten.Observer = new Ten.Class({
    initialize: function(element,event,obj,method) {
        var func = obj;
        if (typeof(method) == 'string') {
            func = obj[method];
        }
        this.element = element;
        this.event = event;
        this.listener = function(event) {
            return func.call(obj, new Ten.Event(event || window.event));
        }
        if (this.element.addEventListener) {
            if (this.event.match(/^on(.+)$/)) {
                this.event = RegExp.$1;
            }
            this.element.addEventListener(this.event, this.listener, false);
        } else if (this.element.attachEvent) {
            this.element.attachEvent(this.event, this.listener);
        }
    }
},{
    stop: function() {
        if (this.element.removeEventListener) {
            this.element.removeEventListener(this.event,this.listener,false);
        } else if (this.element.detachEvent) {
            this.element.detachEvent(this.event,this.listener);
        }
    }
});

/* Ten.Event */
Ten.Event = new Ten.Class({
    initialize: function(event) {
        this.event = event;
    },
    keyMap: {
        8:"backspace", 9:"tab", 13:"enter", 19:"pause", 27:"escape", 32:"space",
        33:"pageup", 34:"pagedown", 35:"end", 36:"home", 37:"left", 38:"up",
        39:"right", 40:"down", 44:"printscreen", 45:"insert", 46:"delete",
        112:"f1", 113:"f2", 114:"f3", 115:"f4", 116:"f5", 117:"f6", 118:"f7",
        119:"f8", 120:"f9", 121:"f10", 122:"f11", 123:"f12",
        144:"numlock", 145:"scrolllock"
    }
},{
    mousePosition: function() {
        if (!this.event.clientX) return;
        return Ten.Geometry.getMousePosition(this.event);
    },
    isKey: function(name) {
        var ecode = this.event.keyCode;
        if (!ecode) return;
        var ename = Ten.Event.keyMap[ecode];
        if (!ename) return;
        return (ename == name);
    },
    targetIsFormElements: function() {
        var target = this.event.target;
        if (!target) return;
        var T = (target.tagName || '').toUpperCase();
        return (T == 'INPUT' || T == 'SELECT' || T == 'OPTION' ||
                T == 'BUTTON' || T == 'TEXTAREA');
    },
    stop: function() {
        var e = this.event;
        if (e.stopPropagation) {
            e.stopPropagation();
            e.preventDefault();
        } else {
            e.cancelBubble = true;
            e.returnValue = false;
        }
    }
});

/* Ten.DOM */
Ten.DOM = new Ten.Class({
    getElementsByTagAndClassName: function(tagName, className, parent) {
        if (typeof(parent) == 'undefined') {
            parent = document;
        }
        var children = parent.getElementsByTagName(tagName);
        if (className) { 
            var elements = [];
            for (var i = 0; i < children.length; i++) {
                var child = children[i];
                var cls = child.className;
                if (!cls) {
                    continue;
                }
                var classNames = cls.split(' ');
                for (var j = 0; j < classNames.length; j++) {
                    if (classNames[j] == className) {
                        elements.push(child);
                        break;
                    }
                }
            }
            return elements;
        } else {
            return children;
        }
    },
    removeEmptyTextNodes: function(element) {
        var nodes = element.childNodes;
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
                node.parentNode.removeChild(node);
            }
        }
    },
    nextElement: function(elem) {
        do {
            elem = elem.nextSibling;
        } while (elem && elem.nodeType != 1);
        return elem;
    },
    prevElement: function(elem) {
        do {
            elem = elem.previousSibling;
        } while (elem && elem.nodeType != 1);
        return elem;
    },
    scrapeText: function(node) {
        var rval = [];
        (function (node) {
            var cn = node.childNodes;
            if (cn) {
                for (var i = 0; i < cn.length; i++) {
                    arguments.callee.call(this, cn[i]);
                }
            }
            var nodeValue = node.nodeValue;
            if (typeof(nodeValue) == 'string') {
                rval.push(nodeValue);
            }
        })(node);
        return rval.join('');
    },
    onLoadFunctions: [],
    loaded: false,
    timer: null,
    addEventListener: function(event,func) {
        if (event != 'load') return;
        Ten.DOM.onLoadFunctions.push(func);
        Ten.DOM.checkLoaded();
    },
    checkLoaded: function() {
        var c = Ten.DOM;
        if (c.loaded) return true;
        if (document && document.getElementsByTagName &&
            document.getElementById && document.body) {
            if (c.timer) {
                clearInterval(c.timer);
                c.timer = null;
            }
            for (var i = 0; i < c.onLoadFunctions.length; i++) {
                    c.onLoadFunctions[i]();
            }
            c.onLoadFunctions = [];
            c.loaded = true;
        } else {
            c.timer = setInterval(c.checkLoaded, 13);
        }
    }
});

/* Ten.Style */
Ten.Style = new Ten.Class({
    applyStyle: function(elem, style) {
        for (prop in style) {
            elem.style[prop] = style[prop];
        }
    }
});

/* Ten.Geometry */
Ten.Geometry = new Ten.Class({
    initialize: function() {
        if (Ten.Geometry._initialized) return;
        var func = Ten.Geometry._functions;
        var de = document.documentElement;
        if (window.innerWidth) {
            func.getWindowWidth = function() { return window.innerWidth; }
            func.getWindowHeight = function() { return window.innerHeight; }
            func.getXScroll = function() { return window.pageXOffset; }
            func.getYScroll = function() { return window.pageYOffset; }
        } else if (de && de.clientWidth) {
            func.getWindowWidth = function() { return de.clientWidth; }
            func.getWindowHeight = function() { return de.clientHeight; }
            func.getXScroll = function() { return de.scrollLeft; }
            func.getYScroll = function() { return de.scrollTop; }
        } else if (document.body.clientWidth) {
            func.getWindowWidth = function() { return document.body.clientWidth; }
            func.getWindowHeight = function() { return document.body.clientHeight; }
            func.getXScroll = function() { return document.body.scrollLeft; }
            func.getYScroll = function() { return document.body.scrollTop; }
        }
        Ten.Geometry._initialized = true;
    },
    _initialized: false,
    _functions: {},
    getScroll: function() {
        if (!Ten.Geometry._initialized) new Ten.Geometry;
        return {
            x: Ten.Geometry._functions.getXScroll(),
            y: Ten.Geometry._functions.getYScroll()
        };
    },
    getMousePosition: function(pos) {
        // pos should have clientX, clientY same as mouse event
        if ((navigator.userAgent.indexOf('Safari') > -1) &&
            (navigator.userAgent.indexOf('Version/') < 0)) {
            return {
                x: pos.clientX,
                y: pos.clientY
            };
        } else {
            var scroll = Ten.Geometry.getScroll();
            return {
                x: pos.clientX + scroll.x,
                y: pos.clientY + scroll.y
            };
        }
    },
    getElementPosition: function(e) {
        return {
            x: e.offsetLeft,
            y: e.offsetTop
        };
    },
    getWindowSize: function() {
        if (!Ten.Geometry._initialized) new Ten.Geometry;
        return {
            w: Ten.Geometry._functions.getWindowWidth(),
            h: Ten.Geometry._functions.getWindowHeight()
        };
    }
});

/* Ten.Position */
Ten.Position = new Ten.Class({
    initialize: function(x,y) {
        this.x = x;
        this.y = y;
    },
    subtract: function(a,b) {
        return new Ten.Position(a.x - b.x, a.y - b.y);
    }
});

/*
// require Ten.js
**/

/* Ten.SubWindow */
Ten.SubWindow = new Ten.Class({
    initialize: function() {
        var c = this.constructor;
        if (c.singleton && c._cache) {
            return c._cache;
        }
        var div = document.createElement('div');
        Ten.Style.applyStyle(div, Ten.SubWindow._baseStyle);
        Ten.Style.applyStyle(div, c.style);
        this.window = div;
        this.addContainerAndCloseButton();
        document.body.appendChild(div);
        if (c.draggable) {
            this._draggable = new Ten.Draggable(div, this.handle);
        }
        if (c.singleton) c._cache = this;
        return this;
    },
    _baseStyle: {
        color: '#000',
        position: 'absolute',
        display: 'none',
        zIndex: 2,
        left: 0,
        top: 0,
        backgroundColor: '#fff',
        border: '1px solid #bbb'
    },
    style: {
        padding: '2px',
        textAlign: 'center',
        borderRadius: '6px',
        MozBorderRadius: '6px',
        width: '100px',
        height: '100px'
    },
    handleStyle: {
        position: 'absolute',
        top: '0px',
        left: '0px',
        backgroundColor: '#f3f3f3',
        borderBottom: '1px solid #bbb',
        width: '100%',
        height: '30px'
    },
    containerStyle: {
        margin: '32px 0 0 0',
        padding: '0 10px'
    },
    // closeButton: 'close.gif',
    closeButton: 'http://s.hatena.com/images/close.gif',
    closeButtonStyle: {
        position: 'absolute',
        top: '8px',
        right: '10px',
        cursor: 'pointer'
    },
    _baseScreenStyle: {
        position: 'absolute',
        top: '0px',
        left: '0px',
        display: 'none',
        zIndex: 1,
        overflow: 'hidden',
        width: '100%',
        height: '100%'
    },
    screenStyle: {},
    showScreen: true,
    singleton: true,
    draggable: true,
    _cache: null
},{
    screen: null,
    windowObserver: null,
    visible: false,
    addContainerAndCloseButton: function() {
        var win = this.window;
        var c = this.constructor;
        var div = document.createElement('div');
        win.appendChild(div);
        Ten.Style.applyStyle(div, c.containerStyle);
        this.container = div;
        if (c.handleStyle) {
            var handle = document.createElement('div');
            Ten.Style.applyStyle(handle, c.handleStyle);
            win.appendChild(handle);
            this.handle = handle;
        }
        if (c.closeButton) {
	    var btn = document.createElement('img');
            btn.src = c.closeButton;
            btn.alt = 'close';
            Ten.Style.applyStyle(btn, c.closeButtonStyle);
            win.appendChild(btn);
            new Ten.Observer(btn, 'onclick', this, 'hide');
            this.closeButton = btn;
        }
        if (c.showScreen) {
            var screen = document.createElement('div');
            Ten.Style.applyStyle(screen, Ten.SubWindow._baseScreenStyle);
            Ten.Style.applyStyle(screen, c.screenStyle);
            document.body.appendChild(screen);
            this.screen = screen;
            new Ten.Observer(screen, 'onclick', this, 'hide');
        }
    },
    show: function(pos) {
        pos = (pos.x && pos.y) ? pos : {x:0, y:0};
        with (this.window.style) {
            display = 'block';
            left = pos.x + 'px';
            top = pos.y + 'px';
        }
        if (this.screen) {
            with (this.screen.style) {
                display = 'block';
                left = Ten.Geometry.getScroll().x + 'px';
                top = Ten.Geometry.getScroll().y + 'px';
            }
        }
        this.windowObserver = new Ten.Observer(document.body, 'onkeypress', this, 'handleEscape');
        this.visible = true;
    },
    handleEscape: function(e) {
        if (!e.isKey('escape')) return;
        this.hide();
    },
    hide: function() {
        if (this._draggable) this._draggable.endDrag();
        this.window.style.display = 'none';
        if (this.screen) this.screen.style.display = 'none';
        if (this.windowObserver) this.windowObserver.stop();
        this.visible = false;
    }
});

/* Ten.Draggable */
Ten.Draggable = new Ten.Class({
    initialize: function(element,handle) {
        this.element = element;
        this.handle = handle || element;
        this.startObserver = new Ten.Observer(this.handle, 'onmousedown', this, 'startDrag');
        this.handlers = [];
    }
},{
    startDrag: function(e) {
        if (e.targetIsFormElements()) return;
        this.delta = Ten.Position.subtract(
            e.mousePosition(),
            Ten.Geometry.getElementPosition(this.element)
        );
        this.handlers = [
            new Ten.Observer(document, 'onmousemove', this, 'drag'),
            new Ten.Observer(document, 'onmouseup', this, 'endDrag'),
            new Ten.Observer(this.element, 'onlosecapture', this, 'endDrag')
        ];
        e.stop();
    },
    drag: function(e) {
        var pos = Ten.Position.subtract(e.mousePosition(), this.delta);
        Ten.Style.applyStyle(this.element, {
            left: pos.x + 'px',
            top: pos.y + 'px'
        });
        e.stop();
    },
    endDrag: function(e) {
        for (var i = 0; i < this.handlers.length; i++) {
            this.handlers[i].stop();
        }
        if(e) e.stop();
    }
});

/* Hatena */
if (typeof(Hatena) == 'undefined') {
    Hatena = {};
}

/* Hatena.User */
Hatena.User = new Ten.Class({
    initialize: function(name) {
        this.name = name;
    },
    getProfileIcon: function(name) {
        if (!name) name = 'user';
        var pre = name.match(/^[\w-]{2}/)[0];
        var img = document.createElement('img');
        img.src = 'http://www.hatena.ne.jp/users/' + pre + '/' + name + '/profile_s.gif';
        img.alt = name;
        img.setAttribute('class', 'profile-icon');
        img.setAttribute('width','16px');
        img.setAttribute('height','16px');
        with (img.style) {
            margin = '0 3px';
            border = 'none';
            verticalAlign = 'middle';
        }
        return img;
    }
}, {
    profileIcon: function() {
        return Hatena.User.getProfileIcon(this.name);
    }
});

/* Hatena.Star */
if (typeof(Hatena.Star) == 'undefined') {
    Hatena.Star = {};
}

/*
// Hatena.Star.* classes //
**/
if (window.location && window.location.host.match(/hatena\.com/)) {
    Hatena.Star.BaseURL = 'http://s.hatena.com/';
} else {
    Hatena.Star.BaseURL = 'http://s.hatena.ne.jp/';
}
Hatena.Star.Token = null;

/* Hatena.Star.User */
Hatena.Star.User = new Ten.Class({
    base: [Hatena.User],
    initialize: function(name) {
        if (Hatena.Star.User._cache[name]) {
            return Hatena.Star.User._cache[name];
        } else {
            this.name = name;
            Hatena.Star.User._cache[name] = this;
            return this;
        }
    },
    _cache: {}
},{
    userPage: function() {
        return Hatena.Star.BaseURL + this.name + '/';
    }
});

/* Hatena.Star.Entry */
Hatena.Star.Entry = new Ten.Class({
    initialize: function(e) {
        this.entry = e;
        this.uri = e.uri;
        this.title = e.title;
        this.star_container = e.star_container;
        this.comment_container = e.comment_container;
        this.stars = [];
        this.comments = [];
    },
    maxStarCount: 11
},{
    flushStars: function() {
        this.stars = [];
        this.star_container.innerHTML = '';
    },
    bindStarEntry: function(se) {
        this.starEntry = se;
        for (var i = 0; i < se.stars.length; i++) {
            if (typeof(se.stars[i]) == 'number') {
                this.stars.push(new Hatena.Star.InnerCount(se.stars[i],this));
            } else {
                this.stars.push(new Hatena.Star.Star(se.stars[i]));
            }
        }
        if (se.comments && !this.comments.length) {
            for (var i = 0; i < se.comments.length; i++) {
                this.comments.push(new Hatena.Star.Comment(se.comments[i]));
            }
        }
        this.can_comment = se.can_comment;
    },
    setCanComment: function(v) {
        this.can_comment = v;
    },
    showButtons: function() {
        this.addAddButton();
        this.addCommentButton();
    },
    addAddButton: function() {
        if (this.star_container) {
            this.addButton = new Hatena.Star.AddButton(this);
            this.star_container.appendChild(this.addButton);
        }
    },
    addCommentButton: function() {
        if (this.comment_container) {
            this.commentButton = new Hatena.Star.CommentButton(this);
            this.comment_container.appendChild(this.commentButton.img);
        }
    },
    showStars: function() {
        var klass = this.constructor;
        // if (this.stars.length > klass.maxStarCount) {
        //     var ic = new Hatena.Star.InnerCount(this.stars.slice(1,this.stars.length));
        //     this.star_container.appendChild(this.stars[0]);
        //     this.star_container.appendChild(ic);
        //     this.star_container.appendChild(this.stars[this.stars.length - 1]);
        // } else {
        for (var i = 0; i < this.stars.length; i++) {
            this.star_container.appendChild(this.stars[i]);
        }
    },
    showCommentButton: function() {
        if (this.can_comment) {
            this.commentButton.show();
            if (this.comments.length) this.commentButton.activate();
        } else {
            // this.commentButton.hide();
        }
    },
    addStar: function(star) {
        this.stars.push(star);
        this.star_container.appendChild(star);
    },
    addComment: function(com) {
        if (!this.comments) this.comments = [];
        if (this.comments.length == 0) {
            this.commentButton.activate();
        }
        this.comments.push(com);
    },
    showCommentCount: function() {
        this.comment_container.innerHTML += this.comments.length;
    }
});

/* Hatena.Star.Button */
Hatena.Star.Button = new Ten.Class({
    createButton: function(args) {
        var img = document.createElement('img');
        img.src = args.src;
        img.alt = img.title = args.alt;
        with (img.style) {
	    cursor = 'pointer';
	    margin = '0 3px';
            padding = '0';
            border = 'none';
            verticalAlign = 'middle';
        }
        return img;
    }
});

/* Hatena.Star.AddButton */
Hatena.Star.AddButton = new Ten.Class({
    base: ['Hatena.Star.Button'],
    initialize: function(entry) {
        this.entry = entry;
        this.lastPosition = null;
        var img = Hatena.Star.Button.createButton({
            src: Hatena.Star.AddButton.ImgSrc,
            alt: 'Add Star'
        });
        this.observer = new Ten.Observer(img,'onclick',this,'addStar');
        this.img = img;
        return img;
    },
    ImgSrc: Hatena.Star.BaseURL + 'images/add.gif'
},{
    addStar: function(e) {
        this.lastPosition = e.mousePosition();
        var uri = Hatena.Star.BaseURL + 'star.add.json?uri=' + encodeURIComponent(this.entry.uri) +
            '&title=' + encodeURIComponent(this.entry.title);
        if (Hatena.Star.Token) {
            uri += '&token=' + Hatena.Star.Token;
        }
        new Ten.JSONP(uri, this, 'receiveResult');
    },
    receiveResult: function(args) {
        var name = args ? args.name : null;
        if (name) {
            this.entry.addStar(new Hatena.Star.Star({name: name}));
            //alert('Succeeded in Adding Star ' + args);
        } else if (args.errors) {
            var pos = this.lastPosition;
            pos.x -= 10;
            pos.y += 25;
            var scroll = Ten.Geometry.getScroll();
            var scr = new Hatena.Star.AlertScreen();
            var alert = args.errors[0];
            scr.showAlert(alert, pos);
        }
    }
});

/* Hatena.Star.CommentButton */
Hatena.Star.CommentButton = new Ten.Class({
    base: ['Hatena.Star.Button'],
    initialize: function(entry) {
        this.entry = entry;
        this.lastPosition = null;
        var img = Hatena.Star.Button.createButton({
            src: Hatena.Star.CommentButton.ImgSrc,
            alt: 'Comments'
        });
        img.style.display = 'none';
        this.observer = new Ten.Observer(img,'onclick',this,'showComments');
        this.img = img;
    },
    ImgSrc: Hatena.Star.BaseURL + 'images/comment.gif',
    ImgSrcActive: Hatena.Star.BaseURL + 'images/comment_active.gif'
},{
    showComments: function(e) {
        if (!this.screen) this.screen = new Hatena.Star.CommentScreen();
        this.screen.bindEntry(this.entry);
        var pos = e.mousePosition();
        pos.y += 25;
        this.screen.showComments(this.entry, pos);
    },
    hide: function() {
        this.img.style.display = 'none';
    },
    show: function() {
        this.img.style.display = 'inline';
    },
    activate: function() {
        this.show();
        this.img.src = Hatena.Star.CommentButton.ImgSrcActive;
    }
});

/* Hatena.Star.Star */
Hatena.Star.Star = new Ten.Class({
    initialize: function(args) {
        if (args.img) {
            this.img = args.img;
            this.name = this.img.getAttribute('alt');
        } else {
            this.name = args.name;
            var img = document.createElement('img');
            img.src = Hatena.Star.Star.ImgSrc;
            img.alt = this.name;
            with (img.style) {
                padding = '0';
                border = 'none';
            }
            this.img = img;
        }
	new Ten.Observer(this.img,'onmouseover',this,'showName');
	new Ten.Observer(this.img,'onmouseout',this,'hideName');
	if (this.name) {
            this.user = new Hatena.Star.User(this.name);
            this.img.style.cursor = 'pointer';
            new Ten.Observer(this.img,'onclick',this,'goToUserPage');
        }
        if (args.count && args.count > 1) {
            var c = document.createElement('span');
            c.setAttribute('class', 'hatena-star-inner-count');
            Ten.Style.applyStyle(c, Hatena.Star.InnerCount.style);
            c.innerHTML = args.count;
            var s = document.createElement('span');
            s.appendChild(img);
            s.appendChild(c);
            return s;
        } else {
            return this.img;
        }
    },
    ImgSrc: Hatena.Star.BaseURL + 'images/star.gif'
},{
    showName: function(e) {
        if (!this.screen) this.screen = new Hatena.Star.NameScreen();
        var pos = e.mousePosition();
        pos.x += 10;
        pos.y += 25;
        this.screen.showName(this.name, pos);
    },
    hideName: function() {
        if (!this.screen) return;
        this.screen.hide();
    },
    goToUserPage: function() {
        window.location = this.user.userPage();
    }
});

/* Hatena.Star.InnerCount */
Hatena.Star.InnerCount = new Ten.Class({
    initialize: function(count, e) {
        this.count = count;
        this.entry = e;
        var c = document.createElement('span');
        c.setAttribute('class', 'hatena-star-inner-count');
        Ten.Style.applyStyle(c, Hatena.Star.InnerCount.style);
        c.style.cursor = 'pointer';
        c.innerHTML = count;
        new Ten.Observer(c,'onclick',this,'showInnerStars');
        this.container = c;
        return c;
    },
    style: {
        color: '#f4b128',
        fontWeight: 'bold',
        fontSize: '80%',
        fontFamily: '"arial", sans-serif',
        margin: '0 2px'
    }
},{
    showInnerStars: function() {
        var url = Hatena.Star.BaseURL + 'entry.json?uri=' +
        encodeURIComponent(this.entry.uri);
        new Ten.JSONP(url, this, 'receiveStarEntry');
    },
    receiveStarEntry: function(res) {
        var se = res.entries[0];
        var e = this.entry;
        if (encodeURIComponent(se.uri) != encodeURIComponent(e.uri)) return;
        e.flushStars();
        e.bindStarEntry(se);
        e.addAddButton();
        e.showStars();
    }
});

/* Hatena.Star.Comment */
Hatena.Star.Comment = new Ten.Class({
    initialize: function(args) {
        this.name = args.name;
        this.body = args.body;
    }
},{
    asElement: function() {
        var div = document.createElement('div');
        with (div.style) {
            margin = '0px 0';
            padding = '5px 0';
            borderBottom = '1px solid #ddd';
        }
        var ico = Hatena.User.getProfileIcon(this.name);
        div.appendChild(ico);
        var span = document.createElement('span');
        with(span.style) {
            fontSize = '90%';
        }
        span.innerHTML = this.body;
        div.appendChild(span);
        return div;
    }
});

/* Hatena.Star.NameScreen */
Hatena.Star.NameScreen = new Ten.Class({
    base: [Ten.SubWindow],
    style: {
        padding: '2px',
        textAlign: 'center'
    },
    containerStyle: {
        margin: 0,
        padding: 0
    },
    handleStyle: null,
    showScreen: false,
    closeButton: null,
    draggable: false
},{
    showName: function(name, pos) {
        this.container.innerHTML = '';
        this.container.appendChild(Hatena.User.getProfileIcon(name));
        this.container.appendChild(document.createTextNode(name));
        this.show(pos);
    }
});

/* Hatena.Star.AlertScreen */
Hatena.Star.AlertScreen = new Ten.Class({
    base: [Ten.SubWindow],
    style: {
        padding: '2px',
        textAlign: 'center',
        borderRadius: '6px',
        MozBorderRadius: '6px',
        width: '240px',
        height: '120px'
    },
    handleStyle: {
        position: 'absolute',
        top: '0px',
        left: '0px',
        backgroundColor: '#f3f3f3',
        borderBottom: '1px solid #bbb',
        width: '100%',
        height: '30px',
        borderRadius: '6px 6px 0 0',
        MozBorderRadius: '6px 6px 0 0'
    }
},{
    showAlert: function(msg, pos) {
        this.container.innerHTML = msg;
        var win = Ten.Geometry.getWindowSize();
        var scr = Ten.Geometry.getScroll();
        var w = parseInt(this.constructor.style.width) + 20;
        if (pos.x + w > scr.x + win.w) pos.x = win.w + scr.x - w;
        this.show(pos);
    }
});

/* Hatena.Star.CommentScreen */
Hatena.Star.CommentScreen = new Ten.Class({
    base: [Ten.SubWindow],
    initialize: function() {
        var self = this.constructor.SUPER.call(this);
        if (!self.commentsContainer) self.addCommentsContainer();
        return self;
    },
    style: {
        width: '280px',
        height: '280px',
        overflowY: 'auto',
        padding: '2px',
        textAlign: 'center',
        borderRadius: '6px',
        MozBorderRadius: '6px'
    },
    handleStyle: {
        position: 'absolute',
        top: '0px',
        left: '0px',
        backgroundColor: '#f3f3f3',
        borderBottom: '1px solid #bbb',
        width: '100%',
        height: '30px',
        borderRadius: '6px 6px 0 0',
        MozBorderRadius: '6px 6px 0 0'
    },
    containerStyle: {
        margin: '32px 0 0 0',
        textAlign: 'left',
        padding: '0 10px'
    },
    getLoadImage: function() {
        var img = document.createElement('img');
        img.src = Hatena.Star.BaseURL + 'images/load.gif';
        img.setAttribute('alt', 'Loading');
        with (img.style) {
            verticalAlign = 'middle';
            margin = '0 2px';
        }
        return img;
    }
},{
    addCommentsContainer: function() {
        var div = document.createElement('div');
        with (div.style) {
            marginTop = '-3px';
        }
        this.container.appendChild(div);
        this.commentsContainer = div;
    },
    showComments: function(e, pos) {
        var comments = e.comments;
        if (!comments) comments = [];
        this.commentsContainer.innerHTML = '';
        for (var i=0; i<comments.length; i++) {
            this.commentsContainer.appendChild(comments[i].asElement());
        }
        if (e.starEntry && !e.can_comment) {
            this.hideCommentForm();
        } else {
            this.addCommentForm();
        }
        var win = Ten.Geometry.getWindowSize();
        var scr = Ten.Geometry.getScroll();
        var w = parseInt(this.constructor.style.width) + 20;
        if (pos.x + w > scr.x + win.w) pos.x = win.w + scr.x - w;
        this.show(pos);
    },
    bindEntry: function(e) {
        this.entry = e;
    },
    sendComment: function(e) {
        if (!e.isKey('enter')) return;
        var body = this.commentInput.value;
        if (!body) return;
        this.commentInput.disabled = 'true';
        this.showLoadImage();
        var url = Hatena.Star.BaseURL + 'comment.add.json?body=' + encodeURIComponent(body) +
            '&uri=' + encodeURIComponent(this.entry.uri) +
            '&title=' + encodeURIComponent(this.entry.title);
        new Ten.JSONP(url, this, 'receiveResult');
    },
    receiveResult: function(args) {
        if (!args.name || !args.body) return;
        this.commentInput.value = ''; 
        this.commentInput.disabled = '';
        this.hideLoadImage();
        var com = new Hatena.Star.Comment(args);
        this.entry.addComment(com);
        this.commentsContainer.appendChild(com.asElement());
    },
    showLoadImage: function() {
        if (!this.loadImage) return; 
        this.loadImage.style.display = 'inline';
    },
    hideLoadImage: function() {
        if (!this.loadImage) return; 
        this.loadImage.style.display = 'none';
    },
    hideCommentForm: function() {
        if (!this.commentForm) return;
        this.commentForm.style.display = 'none';
    },
    addCommentForm: function() {
        if (this.commentForm) {
            this.commentForm.style.display = 'block';
            return;
        }
        var form = document.createElement('div');
        this.container.appendChild(form);
        this.commentForm = form;
        with (form.style) {
            margin = '0px 0';
            padding = '5px 0';
            // borderTop = '1px solid #ddd';
        }
        //if (Hatena.Visitor) {
        //    form.appendChild(Hatena.Visitor.profileIcon());
        //} else {
        //    form.appendChild(Hatena.User.getProfileIcon());
        //}
        var input = document.createElement('input');
        input.type = 'text';
        with (input.style) {
            width = '215px';
	    border = '1px solid #bbb';
            padding = '3px';
        }
        form.appendChild(input);
        this.commentInput = input;
        var img = this.constructor.getLoadImage();
        this.loadImage = img;
        this.hideLoadImage();
        form.appendChild(img);
        new Ten.Observer(input,'onkeypress',this,'sendComment');
    }
});

/* Hatena.Star.EntryLoader */
Hatena.Star.EntryLoader = new Ten.Class({
    initialize: function() {
        var entries = Hatena.Star.EntryLoader.loadEntries();
        this.entries = [];
        for (var i = 0; i < entries.length; i++) {
            var e = new Hatena.Star.Entry(entries[i]);
            e.showButtons();
            this.entries.push(e);
        }
        this.getStarEntries();
    },
    createStarContainer: function() {
        var sc = document.createElement('span');
        sc.setAttribute('class', 'hatena-star-star-container');
        sc.style.marginLeft = '1px';
        return sc;
    },
    createCommentContainer: function() {
        var cc = document.createElement('span');
        cc.setAttribute('class', 'hatena-star-comment-container');
        cc.style.marginLeft = '1px';
        return cc;
    },
    scrapeTitle: function(node) {
        var rval = [];
        (function (node) {
            if (node.tagName == 'SPAN' &&
                (node.className == 'sanchor' ||
                 node.className == 'timestamp')) {
                     return;
            } else if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
                return;
            }
            var cn = node.childNodes;
            if (cn) {
                for (var i = 0; i < cn.length; i++) {
                    arguments.callee.call(this, cn[i]);
                }
            }
            var nodeValue = node.nodeValue;
            if (typeof(nodeValue) == 'string') {
                rval.push(nodeValue);
            }
        })(node);
        return rval.join('');
    },
    headerTagAndClassName: ['h3',null],
    getHeaders: function() {
        var t = Hatena.Star.EntryLoader.headerTagAndClassName;
        return Ten.DOM.getElementsByTagAndClassName(t[0],t[1],document);
    },
    loadEntries: function() {
        var entries = [];
        //var headers = document.getElementsByTagName('h3');
        var c = Hatena.Star.EntryLoader;
        var headers = c.getHeaders();
        for (var i = 0; i < headers.length; i++) {
            var header = headers[i];
            var a = header.getElementsByTagName('a')[0];
            if (!a) continue;
            var uri = a.href;
            var title = '';
            // Ten.DOM.removeEmptyTextNodes(header);
            var cns = header.childNodes;
            title = c.scrapeTitle(header);
            var cc = c.createCommentContainer();
            header.appendChild(cc);
            var sc = c.createStarContainer();
            header.appendChild(sc);
            entries.push({
                uri: uri,
                title: title,
                star_container: sc,
                comment_container: cc
            });
        }
        return entries;
    }
},{
    getStarEntries: function() {
        var url = Hatena.Star.BaseURL + 'entries.json?';
        for (var i = 0; i < this.entries.length; i++) {
            if (url.length > Ten.JSONP.MaxBytes) {
                new Ten.JSONP(url, this, 'receiveStarEntries');
                url = Hatena.Star.BaseURL + 'entries.json?';
            }
            url += 'uri=' + encodeURIComponent(this.entries[i].uri) + '&';
        }
        new Ten.JSONP(url, this, 'receiveStarEntries');
    },
    receiveStarEntries: function(res) {
        var entries = res.entries;
        if (!entries) entries = [];
        for (var i = 0; i < this.entries.length; i++) {
            var e = this.entries[i];
            for (var j = 0; j < entries.length; j++) {
                var se = entries[j];
                if (!se.uri) continue;
                if (encodeURIComponent(se.uri) == encodeURIComponent(e.uri)) {
                    e.bindStarEntry(se);
                    entries.splice(j,1);
                    break;
                }
            }
            if (typeof(e.can_comment) == 'undefined') {
                e.setCanComment(res.can_comment);
            }
            e.showStars();
            e.showCommentButton();
        }
    }
});

/* Hatena.Star.WindowObserver */
Hatena.Star.WindowObserver = new Ten.Class({
    initialize: funct

  
  Permalink | トラックバック(1) | 17:30

2007-03-17

■ちょっとつくってみた。

http://anond.hatelabo.jp/20070317135224

一部MUAのように引用領域の左端にタテ傍線がつくとかもじら表示系のように単にインデントされるとか

あるいは気の利いたサイトのCSSのように引用を思わせる背景画像がつくとか

そういうことがあれば引用記法を喜んで使うかもしれない

そんな君のためのスタイルシート

<style type="text/css">
blockquote {
border:none;
padding-left:20px;
background-image:url(/images/common/icon-arrow.gif); /*なんか＞な画像*/
background-repeat:repeat-y;
}
</style>

あれ、もしかしてここに書けば効く様になるのかな？

てすとてすと。

Permalink | トラックバック(0) | 17:40

2007-02-22

■実装ではなく趣旨を理解しよう

*{ margin : 0 }はもう古い！？ | Emotional Web

はてなブックマーク - *{ margin : 0 }はもう古い！？ | Emotional Web

はてなが酷い。

はじめに

base.cssとかcommon.cssとかを書いて読み込ませるのは、何のためだったか考えてみよう。古い新しいの問題じゃないと気づくだろうか。少なくとも、レンダリング時間なんて完全に後付けだと洞察できるはずだ（あなたたちはjs大好きだよね）。

さて、真っ新なとこからCSS書いてくとき、どんなデザインにしろほぼ毎回指定する要素が出てくる。a img{border:none;}とかhtml,body{margin:0; padding:0;}とかだ。それなら始めにa img{border:none;}とかを羅列したファイルを用意しておけば、余計な手間が省けるじゃないか。たぶん根本の動機はこんなとこだろう。

それがいつの間にかデフォルトで適用されるスタイルをキャンセルするっていう方向へ迷走し、*{margin:0; padding:0;}なんて表現が生まれた。この指定は言うまでもなく有害で、著名なのはフォームのボタンが縮こまったり、liのネストが判別できないなどの副作用が生まれる。あまりにもすべてがキャンセルされるため、わざわざひとつずつ要素のスタイルを定義しなければならなくなって、ファイルサイズは増え可読性は下がり、冒頭で言うようにレンダリングにも時間が掛かるようになる。FireBugがない時代、この要素のスタイルはどのファイルのどの部分で指定されてるのか調べるのは本当に大変だった。*.cssをgrepしたとしても、単にul li{}とか書かれてるのがカスケーディングしてたらお手上げ。

これらのデメリットを認識したとき、はて*{margin:0; padding:0;}のメリットはなんだろうと考える。あ、特にないよね。じゃあやめよ。←いまここ

こんなのは実際にCSSを書いてたら気づくことだ。海外とか時代とか関係ない。元記事の趣旨は「*{margin:0;}は古い」じゃなくて「どんなCSSが効率的か Part2」だ。レンダリング重いから*{margin:0;}やめようなんてコピペ脳丸出しじゃ、いつまで経っても効率的なCSSなんぞ書けんよ。

＊原理主義者が「（例えば数十年後にリリースされた）UAがどんなスタイルを適用するかわからないので、最初にリセットするのは永続性完全性の観点から意味がある」と言うけども、未知のUA（というかデフォルトスタイル）まで考えてCSSを書くのはあまりに大変だ。それに、そんなことになれば、たぶん、compat.user.cssみたいなのが流行るはず。デフォルトスタイルに頼った表現がしょせん実装依存なのは認めるけど、ちょっと非現実的すぎるので、考慮から外させてもらう。俺はいま実務の話をしたいんだ。

じゃあどんなのがいいんだよ

で、元記事では、じゃあどんなCSSがいいのかって点がついで程度にしか触れられていないので、俺なりに考えてみた。

a img{border:none;}

これは外せない。aの中のimgにborder付けたいってほうがイレギュラーなので、わざわざa.logo img{border:1px solid #333;}なんて書き直すのも苦にならない。例外には手作業でもって対応すべき。

html,body{margin:0; padding:0;}

ほとんどの場合、隙間を空けたいよりも隙間を空けたくない。キャンパスはフルに使いたい。

印刷時にはそうでもないので、@media print {body{padding:1cm;}}なんてのがあってもいいけど、それはまた別の話。あとそういうのは印刷するユーザー側で指定すべきだとも思う。理想論だけど。

*{font-style:normal;}

lang="ja"な文章において斜体は不要。どうせあなたはemとかaddressとかにfont-style:normal;付けるんだから。

pre,code{font-family:monospace; white-space:pre;}

preやcodeがsans-serifだとイラっと来ますよね。

これは絶対やるな

やられるとイラっとくるもの。個人的。

body{font-family: "MS Pゴシック";}など

俺はページをメイリオやヒラギノやM+ FONTやVLゴシックで見たいんだよ！　お前の趣味を押しつけんな！　あと最後に一般名（sans-serifとか）くらい書け！

でもpre.2ch-ascii-art{font-family: "MS Pゴシック";}なんてのはやさしさが溢れていてとても好ましいと思う。部分的にfont-family指定するのは別にいいけど、全体のデフォルトフォントをいじられるのは不愉快でしかない。

pre{overflow:auto;/* or scroll */}

まあ仕方ないのはわかる。解決法も知らない。けどホイールでスクロールしてるとき興味のないサンプルコードで引っかかるのはとてもムカつくんだ。俺は君のサイトが崩れてるかどうかより、いつも通りのスクロールに関心がある。

pre以外にグラフィック目的でoverflow:auto;を指定するのは論外。

まとめ。そうねえ。

「CSSは個々人のスタイルを反映してるということでしかないんじゃないの」

「そうですね」

Permalink | トラックバック(2) | 21:46

2007-02-14

■[CSS]スタイルシート ソース理解クイズに関して

スタイルシートソース理解クイズ - ［ホームページ作成］All About

まあ「仕様書で規定されていない部分については、IEおよびFirefoxの実装に従うものとします」などといった注意書きをもっとしっかりつけてくれれば大体は間違ってない。

しかし、Q7に関しては明らかに間違っている。選択肢の中に正解がない。

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + scrollbar width (if any) = width of containing block

CSS 2.1では通常フローにあるブロックレベル非置換要素の幅の算出に上の等式が使われる。しかし、問題の例では、この等式の左辺のすべての項がauto以外の算出値を持っている。この状態を「制約しすぎ」（over-constrained）であるといい、（包含ブロックのdirectionプロパティの値がltrならば）margin-rightプロパティの指定値が無視され、上の等式を基にmargin-rightの値が再計算される。よって正解は「包含ブロックの幅に等しいピクセル数」だ。

それから、Q9にも大きな不備がある。「同じ位置」「移動する」と回答中にあるが、これらが何に対してなのかが明言されていないのだ。固定配置の要素はスクリーンメディアにおいて、表示領域に対しては同じ位置にあるが、通常フローの要素に対してはスクロールに応じて移動するといえるので、このままでは正解をひとつに絞りきれない。

Permalink | トラックバック(0) | 02:36

- 転職ならen
- 派遣ならen

「padding」を含む日記

■はてなブックマークのエントリーページ新UIを見やすくするユーザCSS

■stylishで新UIはてブエントリーページのサイドバーを下に持ってくる

二版

■2chまとめブログ2008冬～2009春、新参サイトまとめ

■みんないじめてるけど、はてなキーワードはすごいんだよ！

■Google chrome でブロックレベル要素の高さを揃える話

■Firefoxをテキストブラウザ化するcss作った【黒画面】【コンソール】

2008.9.28 12：53 追記

2008.9.13 23：30 追記

2008.8.10 22：29 追記