0-知的生産の技術

一人ブレスト時に最適な付箋ツール「Barrett Idea」を作りました

というか完全に自分用ですし、β版の45歩ぐらい手前のバージョンですが。

screenshot

制作はHTML5 + Javascript。つまり単なるウェブページです。ドラッグによる移動はjQueryおよびjQuery UIにて実装しております。

動作説明

操作はビビるほど簡単です。テキストエリアに文字を入力し、

screenshot

タンっ!とリターンキーを押すだけ。

screenshot

すると付箋が一つできます。あとは、もうこれをただひたすら繰り返していくだけです。

画面上の付箋は、ドラッグで移動可能。本当に、機能はこれだけです。

簡単な使い方

使い方としては、まず付箋を大量に作る。頭の中を出し切る感じで付箋を作る。テキストを入力してリターン、テキストを入力してリターンと、シンジくんのようにぶつぶつ言いながら付箋を生み出していきます。

screenshot

で、出し終えたら、それらをドラッグして並び替え、近しいものを集めていったり、階層を作ったりします。

screenshot

以上。

とにもかくにも付箋を作るときの操作をシンプルにするように努めました。アイデア出しを行う際は、一手間や二手間が非常に邪魔になってきます。それをシンプルにそぎ落とした付箋ツールです。

あまりにシンプルなので、作った付箋を削除することもできません。邪魔な付箋はページの下に移動させるぐらいしか打つ手無しです。ちなみに、ページをリロードすると、すべての付箋が消え去ります。諸行無常です。

ダウンロード

こんな貧相なものでよろしければ、以下からダウンロードください。

BarrettIdea.zip

zip解凍後のHTMLを開いてもらえばOKです。ウェブブラウザさえあれば動きます。もちろん、ウェブブラウザ上で動きます。

ただし、MacのFirefoxにしか最適化していないので(私の環境です)、それ以外のブラウザとかWindowsでどうなのかはわかりませんのであしからず。

基本的に青色は正義ですが、こんな付箋の色はいやじゃい、という方はhtmlファイルのCSS指定を変えてください。

screenshot

background-colorのカラーコードを変えれば付箋の色が変わります。

さいごに

もう少し機能を増やすとすれば、

・付箋の色を選択できるようにする
・ゴミ箱の設置
・まとめたものをテキストで出力

というところでしょうか。

アルゴリズムは思いつきますが、実装する時間が……。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です