Yaneu Labs --- はてふ --- はてな付箋リリースしました

*[hatefu:labs.yaneu.com/20090309/] はてふ --- はてな付箋リリースしました

Webで技術的な調べ物をしていると、記事の間違いを目にすることが良くある。例えば、次の記事だ。

# 記事の誤り
[img:bad1.png]
第10回　CSSで画面を構成する際の最重要タグ「div」の使い方を知る
http://itpro.nikkeibp.co.jp/article/COLUMN/20080311/295932/?ST=swd-design&P=5

この赤の下線部は私が引いた。言うまでもなくここは、誤りである。positionは指定しなければstatic扱いで、staticだと親要素になれないだけのことである。だからabsoluteでもrelativeでもfixedでも指定すれば親要素になれ、position:absoluteはその親要素相対になる。

最重要タグ「div」の使い方を知るという記事のなかで、その最重要タグの説明を間違えてあるのだから、何とも皮肉なものだ。

もう一つ例を出そう。JavaScriptの達人として有名なid:amachang氏のThink ITの連載に、以下のものがある。

# 古くなって動かないサンプルプログラム
JavaScriptを洗練させるPrototype.js
http://www.thinkit.co.jp/free/article/0702/15/1/

こんな達人の記事に私のような門外漢が突っ込むのもどうかと思うが、氏のこの最後の回のサンプルがIE7ではうまく表示されないのだ。(→ http://www.thinkit.co.jp/cert/article/0702/15/7/2.htm )

この一連の連載は、prototype.jsを用いれば(最終回のサンプルプログラムは)こんなに簡単に書けますよ、というのを見せたいがために書いてあるようなものなのだと思うのだが、その肝心の最終回のサンプルプログラムが最大のブラウザシェアを誇るIEで動かないとは、これまた皮肉なものだ。

原因は、以下の部分である。

>>
// 要素の見た目を作る
this.elem.setStyle({
  'width': this.opts.width + 'px',
  'height': this.opts.width + 'px',
  'background-color': this.opts.color,
  'opacity': this.opts.opacity,
  'position': 'absolute'
})
<<

ここは、'background-color'ではなく'backgroundColor'と書く必要がある。(CSSのプロパティ名では'background-color'なのだが、DOMのプロパティ名では'backgroundColor'が正しいのだと思う。どうも、prototype.jsの1.5では動いていたらしいのだが1.6になってから動かなくなったようだ。私はWeb系は門外漢なものでよくは知らないが。)

上の記事の日付を見ると2年前の記事であって、最新版のprototype.jsにしたら動かないだとか、内容に誤りがあるだとか言っても当時の状況的には致し方ない。また、そんな昔の記事まで本人が正確性を維持するのは現実的には不可能である。

我々は決してそんなことを望んではならない。

彼らの古い記事をメンテナンスするのにかける時間は、新しい技術を紹介する時間に費やされるべきだ。

しかし検索エンジンで検索して飛んでくる人は、ソースを自分のソースにコピペ参考にしようとしたときに、こういうミスがあるとそこで結構な時間のロスが発生する。次の犠牲者が出るのは可哀想だから、こういう時、私はコメント欄があればコメントを残すが、コメント欄がない場合は、古い記事にメールをもらっても本人としても迷惑だと思うので、「まあいいか…」とそのままブラウザを閉じる。


Web全体で見ると、このように記事にコメントをつける機能がないばかりに次々と犠牲者が出ているのが現状である。かと言ってコメント欄を用意すれば解決する問題でもない。コメント欄はスパムなどで荒らされて、コメント欄として機能しなくなるからである。コメントをつけるためにユーザー認証する仕組みが必要である。

* はてふというソリューション

とは言っても、個人が、わざわざ記事を一つ公開するだけのためにそこまでの仕組みを用意するのは大変すぎる。個人サイトでユーザー認証の仕組みなんかつけても会員登録すらしてもらえない。はてなブックマークは、そういう意味では私の望むものに非常に近いのだが、記事の該当箇所にコメントがつけられないので、少し物足りない。

はてブには大きな長所がある。どこのページに対してもつけられるということと、あとで本人が自分のコメントを編集できるということだ。ブログや掲示板への投稿は、ふつうは投稿後には編集できないが、あとで修正の利くはてブはこの意味において、通常の投稿より価値は高く、S/N比は上がると考えられる。

ならば、このはてブをベースに付箋のようなものを実装するのが理にかなっている。私が思うに、はてブで元記事の引用をしたとき、その引用箇所に付箋を貼り付ける機能があればいいのだ。これはJavaScriptを使えば簡単に書ける。「はてな付箋」略して「はてふ」である。

** 使い方

はてブで、「AAA:BBB」という書式でコメントを書く。
>>
AAA ＝「引用したい部分の文字列」
BBB ＝「コメントしたい内容」
<<
である。

例えば、はてブで、「思考実験:期待してます」とコメントをつけると、「思考実験」という文字列に「期待してます」というはてな付箋が付く。(下図)

[img:sample.png]

他の人がすでに付箋をつけている箇所には付箋をつけることが出来ないので注意。

* はてふスクリプトの配布

はてふのスクリプトを以下に配布します。

# はてふスクリプト
はてふスクリプト
http://labs.yaneu.com/20090309/hatefu.js

私の作ったhatefu.gifのアイコンは、右クリックして「名前をつけて画像を保存」してください。

ご利用に当たっては、jkl-dumper.js が別途必要になります。

# jkl-dumper.js
jkl-dumper.js
http://www.kawa.net/works/js/jkl/dumper.html

私が書いたプログラムに関しては何の権利も主張しないので、ご自由に改造してお使いください。

言うまでもなく、「はてふ」は、私が開発したもので、株式会社はてな様とは何ら関係ありません。(はてなブックマークのデータをJavaScriptで取りに行っていますが)


* はてふスクリプトの使い方

** 使い方

>>
<script language="JavaScript" type="text/javascript" src="jkl-dumper.js"></script>

<script language="JavaScript" type="text/javascript" src="hatefu.js"></script>


<script language="JavaScript" type="text/javascript">

function hatefu()
{
    Hatefu('ttp://labs.yaneu.com/');
    // ここに設置するurlを書く。
}

window.addEventListener ?
  window.addEventListener('load', hatefu, false) :
  window.attachEvent('onload',  hatefu );

</script>
<<

** 特定の部分にのみ、はてふ可能に

上のようにscriptブロックに書けば、divのclass = 'hatefu'が指定されている領域にのみ、はてふ可能になります。

** はてふ対応ページ用アイコン

はてふ対応のページは、のアイコンを貼り付けて、(使い方のわからない人のために)次のようにこのページにリンクしておくと良いかも知れません。(強制ではありません)

また、はてふアイコンは、このページへのリンクになっていますが、お好きなように改造してお使いください。

** 表示スタイル

表示スタイルはCSSで指定できます。

>>
.hatefu_head {
	color: black;
	font-weight : bold;
	background-color : lightgreen;
}

.hatefu_body {
	color: black;
	background-color : lightblue;
}
<<

* 更新履歴

2009.04.25 autoblogでページを書き直し。
2009.03.25 こっそりバージョンアップ。divのcss classで'hatefu'を指定すればいいように変更。
2009.03.09 公開