影でこそこそ言うブログ

はてブ with GoogleBookmarkです。　参考、ネタ元サイト：otchy.net

インストール

はてなブックマークをするのと同時にタグを利用してGoogleBookmarkに登録するためのスクリプトです。
※firefox3.0.7 + greasemonkeyで動作確認
スクリプトをインストールすると、はてブの登録時、下の画面のように新たな「追加する(withGB)」ボタンが現れます。

この「追加する(withGB)」ボタンを押す事で、はてなブックマークに登録すると同時に、GoogleBookmarkに対して登録することができます。登録する際にgoogleにログインしている必要があります。

登録する際のラベルは hatenaBookmark>[タグ]　（複数タグがあればその分作ります。タグがない場合、作成を行いません。)
45行目に規定してあるので修正したい方はどうぞ。
(FirefoxアドオンのGmarksにあわせたラベル付けにしてあります)
[Greasemoneky]と[GoogleBookmark]の２つで登録した場合、以下のようになります。

おまけ
はてブ with twitter and googlebookmark インストール
Twitter のポストとgooglebookmarkをはてブと同時にします。
(otchy.netさんのコレに付け加えただけですが)

なお、使用に関しては無保証でよろしくお願いします。また改変は自由です。

問題なのは動作確認を自分の環境でしか確認できてないことです…。
だれか気が向いたら入れて、どうだったか教えてくださいorz

昔作ったコレをjQueryを使って再構築。
(よく見たら以前のも一部のjQuery使ってた。中途半端に)
その際に発言時にページを再読み込みさせないようにした。

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>