Webデザインと私: TODOリストツール作ったよ

純粋に個人的に使いたいがために、TODOリストツールを自作しました。

prototype.jsベースのJavascriptとCakePHP1.2で動いてます。

※ちゃんと動作検証やりつくしていないのですが、とりあえず、FirefoxとSafariでは、ほぼ問題なく動いている気がします。肝心のIEがいちばんあやしい…。完成度を上げるべく、ひきつづき努力が必要そうです。

新規ユーザー登録した後ログインすると、最初に「新規プロジェクト」というのが自動的に作成された画面が表示されます。
このツールは、「プロジェクト」という器をまず作成し、その中にひとつひとつの「タスク」を追加していく構造になっています。最初はプロジェクトがひとつもないので、自動的に作成されるようにしてあるわけです。

あとはまあ、勘でいじっていただければなんとなくわかるんじゃないかと思いますが…。
「タスクを追加」ボタンでタスクを作成し、文言を編集し、ドラッグで並べ替える、というのが基本操作です。
操作されるたびにAjaxでサーバーに送信し、保存しているので、特に意識してセーブする必要はありません。

このツールの特徴は、タスクを階層化できるところです。
いくつかタスクを作成した後、2番目以降のタスクの「>」アイコンをクリックしてください。そのタスクが、ひとつ上のタスクの子階層になります。
この「階層化」の機能がどうしても欲しかったがゆえに、わざわざこのツールを自作したといえます。それくらいこの「階層化」はこだわりポイントです。

以下、Javascriptの話。

僕はいままで、昔ながらの初歩的なJavascriptしか書いたことがなく、オブジェクト指向言語として整理されてきた最近のJavascriptはまったく疎い人間でした。今回これを作るにあたって、あわせてそこから勉強し直した感じです。

JavascriptにはClassという概念がないので、個人的にはどうやってオブジェクト指向的に作ればいいのかピンと来ていなかったのですが、prototype.jsにClass.create()というのがあって、擬似的にClassっぽいものが実現されていたので、あたかもClassという概念が存在するかのような感覚で書けました。

しかしまあ、なにしろ初めてだらけのことを試行錯誤しながらやっているので、ソースを見られると突っ込みどころ満載だと思いますが…。もしJavascript得意な方がソースをご覧になった場合は、どうか小学生を諭すようなやさしさでアドバイスいただけたらと思います。

ところで、このツールを実現する上でいちばん肝だったのが、階層化されたタスクをドラッグで並べ替える仕組みを実現できるかどうか、でした。
が、結果的には、prototype.jsベースのメジャーライブラリであるscript.aculo.usの「Sortable」という機能によって、何の苦労もなく実現できてしまいました。script.aculo.usサマサマです。

ちなみにその他のライブラリとしては、「ModalBox」というのも使っています。これは、プロジェクトやタスクを削除しようとしたときに確認ダイアログ（上からにょきっと生えてくるやつ）を出すのに使っています。

まだいろいろ不備はあると思いますが、もしよろしかったらためしに使ってみてください。で、ご意見＆不具合報告などをいただけたら幸いです。