Demo

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
jQueryUIがすばらしいのと、jquery.hotkeys.jsもかなり使い勝手がよかった。

機能としてはひとまずシンプルに
　・メッセージの書込みができる。
　・メッセージの移動・削除ができる。

技術的なところでは
　・ページ遷移させずに書込みを表示
　・Ctrl+zでモードの切り替え
　・付箋化する要素を指定できる。

いろいろ拡張はできそうだけど、とりあえず雛形としておいとこうと思った。
他人の書込みも遷移なしで反映できると面白そうなんだけどそのへんはまあいいか。

そんな感じで。

使い方。

1. http://jquery.com/からjQuery(1.3.2)をダウンロード
2. http://jqueryui.com/downloadからui.draggable.jsをダウンロード（含んでるjsファイルなら何でもいいはず)
3.google codeからjquery.hotkeys.js(0.7.8)をダウンロード(キーバインド使用しないならはずしてもいい)

4.ここから付箋用js/cssをダウンロード

htmlで1-4の順番で読み込む。

<script type="text/javascript">
	$(document).ready(function(){
		$("#husen").husen();　//付箋化したい要素の親要素を指定
	});
</script>

Demoではこんな感じ。

<ul id=”husen”>
<li husenid=”100″ style=”position: absolute;top:44px;left:49px;”><span class=”text”>aaaaa</span></li>
<li husenid=”101″ style=”position: absolute;top:144px;left:59px;”><span class=”text”>bbbbbb</span></li>
<li husenid=”102″ style=”position: absolute;top:244px;left:109px;”><span class=”text”>ccccccc</span></li>
<li husenid=”103″ style=”position: absolute;top:344px;left:200px;”><span class=”text”>dddddd</span></li>
</ul>

フォームを設置したい場合、付箋化したい要素のIDにhusenformを追加する。
　//フォーム
　<li id=”husenform”>
　　<textarea id=”husen_note”></textarea>　//必須
　　<input type=”submit” value=”送”>　//必須
　　<input type=”hidden” value=”0″ id=”husen_x” name=”husen_x”>　//必須
　　<input type=”hidden” value=”0″ id=”husen_y” name=”husen_y”>　//必須
　</li>

AJAXモードをしないと、フォームから付箋の追加/移動をしても、更新すると元に戻ります。
AJAXモードにすると移動/作成/削除時に指定したアドレスへhusenID,x座標,y座標データがPOSTされます。
//というかこのあたり使わないと、ただ単にdraggable()すればいいだけという話

<script type="text/javascript">
	$(document).ready(function(){
		$("#husen").husen({ajax: 1});　//AJAX利用版
	});
</script>

まずはアドオンでXpathCheckerをインストール。
ここでXPathつかったのはアマゾンのhtmlがひどかったから。web1.0っていうの？アレ。
<font size=”-2″>とか懐かしくて涙出てきた。

発売日を取得しようとしたんだけど、アマゾンでは発売日付近のhtmlは以下のようになってる。

<ul>
<li><b>なんか：</b>ああああ</li>
<li><b>なんか：</b>いいいい</li>
<li><b>発売日：</b>YYYY-mm-dd</li>
<li><b>なんか：</b>うううう</li>
</ul>

こんなかんじ。発売日の順番が商品によって違うので、
Xpathは
/html/body/table[1]/tbody/tr/td/div/ul[1]/li
でリストを配列で取得して走査。

ただこの状態だと
<b>発売日：</b>YYYY-mm-dd　を取ってきてしまう。

YYYY-mm-dd部分のだけ取る方法ねーかなー正規表現で抜くかなーと悩んでたら
こんな感じでとれるよーとotchyさんに教えてもらた。

/html/body/table[1]/tbody/tr/td/div/ul[1]/li/child::node()[2]

child::node()はnode()でもおｋ

lists = $a(“/html/body/table[1]/tbody/tr/td/div/ul[1]/li/node()[2]“);
for(var i in lists){
var t = Date.parse(lists[i].nodeValue);
if(!isNaN(t)){
releaseDate = t;
}
}

node()[1]で前の部分が取れる。 最初テキストinnerHTMLで取ろうとしたら取れなかった…。(おそらくXMLだから?よくわからんけど。)
nodeNameをみたら#textだったのでnodeValueにしたら取れた。
$a はここの使ってる

なるほどねー。XPath初めて使ったけどコレは便利。
今回は習作として、今後ちょっといろいろ作ってみようと思った次第でした。