Subscribed unsubscribe Subscribe Subscribe

HTMLでドラッグできる2Dメモ帳的なもの

Wiki に対する不満の1つとして、位置記憶を使えないという点がよく指摘される。まあ、言葉で
そう指摘される事はないが反応をみて私はそう感じる。位置記憶というのは、人間は形や位置で記憶してるよね、という話である。マインドマップは位置記憶をうまく利用した記述法の1つではないかと思う。

Wikiは位置記憶(2D)を行指向(1D)に変換してしまっていて、これだとDiffもとれるしすごく有効だともうのだけれど、どうも一般の人はそれに慣れなくて戸惑うっぽい。逆にExcelをLoveするひとは、実にうまくこの位置記憶を扱っているようにも見える。みんな 2D 大好きなのね。

HTMLにも最近は(10年前くらいから)、CSSという便利な道具が入っていて、position:absolute とやると2Dで自由な場所にエレメントをピクセル指定で置く事ができる。さらに jQuery-ui などの優れたライブラリによって、それをドラッグで動かすコーディングもとても簡単になった。

で、ちょっとつくってみたサンプルがこれ
http://github.com/kawaguti/petastick/tree/master/trunk/

index.htmlをローカルに保存して起動すると、テキストが4枚はってあって、ドラッグで動かせる。クリックすると入力ボックスが開き、内容を編集できる(Enterで終了)。

要素の追加とかはまだ作ってない。

Webkit系ブラウザ(Chome/Safari)でしかうごかないかも。