【jQuery UI】超シンプルタスク管理を作ってみる。

 

タスク管理。皆さんやってますか?
「社会人たるもの、当たり前」って方もいらっしゃるかとは思いますが、
実はのらくら、タスク管理を視覚的に行うのって非常に苦手だったりします。
頭の中にはあるし、管理が出来ずに炎上。なんて経験はないのですが、
たまに上司への報告とか、タスクの棚卸をする時とか、パっと出てこないときもあったり・・・。

これではダメだと分かっていても中々出来ない。
ということで、自分で作ったからには使う!というのを目指して

「超シンプルに1日のタスク管理が出来るWebページ~jQuery UIを使って~」

に取り組んでみました。

 

今回の目標

のらくらのように、タスク管理を視覚的に行うのが苦手な人でも、なんとか管理が出来るページを作ること。
とりあえず目指すは、「ド!シンプル!
最初に画像で出していますが、ここでも出しておきます。

EasyTask

EasyTask

 

こんな感じで、本当に機能を絞って作ります。
機能付けるのがめんどくさいからじゃないですよ?

 

見た目違いますが、動かせるページを作成しました。

実際に動かしてみたい方は、こちらへどうぞ。

EasyTask

 

早速レイアウトから

何はともあれ、さっそくレイアウトから。

firsthtml

firsthtml

 

とりあえずこんな感じ。
cssとjsは別ファイルにしたいので、とりあえず中身空で作って上の通りheadには書いておきます。
あと、動きをつけたい所とレイアウト指定したい所にidとclassを振っておきます。
で、とりあえずどうなってるか見てみると。

 

とりあえず

とりあえず

 

はい、ほぼ出来た!!
後は見た目をちょっと弄って、動きつければオッケーっぽいですね。

ということで、CSS書いていきます。
こんな感じかな。

css

css

 

まあ、シンプルを目指しているので。
色とか幅とか、だいたいそのへんしか書いてません。

ただ、次への布石として「elem」と「on_tasks」ってクラスのCSS書いてるとこだけは注意ですね!
これは次で説明していきます。

いったんここまででどうなっているか見ておくと。こんな感じ。
見た目は完成ですね。

 

見た目完成

見た目完成

 




jQueryUIの導入

今回は、タスク管理ということで、
左のBOXから右のBOXにドラッグ&ドロップでリストの要素を移動させる。
という実装をしていきます。
左のBOXが未完了タスク
右のBOXが完了タスク
って感じですね。

 

Listの移動

Listの移動

 

 

ドラッグ&ドロップ・・・独自で実装はしんどいですね。
そこで、「jQuery UI」の登場です!これを使えば超簡単に実装出来ちゃいます。
さっそく導入していきますよー。って言ってもこれも超簡単。
HTMLファイルのheadタグ内に下の赤枠内のように追加すればオッケーですね。

jQueryUI導入

jQueryUI導入

何をやっているかというと、単純です。
まず、jQueryを読み込む → jQuery UIを読み込む → ついでにjQuery UIのスタイルシートを読み込む
そんだけ。jQueryを一番上に書かないとダメだよって所だけ注意して下さい。

 

 

動きを付けていく

それでは、ドラッグ&ドロップを実装していきます。
と、その前に!リストに要素を追加出来るようにしておかないと、動きを確かめることも出来ないですね・・・。
なので、
1、追加ボタンの実装
2、ドラッグ&ドロップの実装
の流れでやっていきます。

【追加ボタンの実装】
これは、まあ
「追加ボタンおした時に、テキストボックスの値をValueとしたli要素を追加する。」
という感じでいいでしょう。
jQueryで書いてもjavascriptで書いてもどちらでも。
ちなみに のらくら 、jQueryもjavascriptもあんまり書いたことない。
こっから先、もっと良い書き方あるよって方はぜひコメント下さい。
お願い致します。切実に。勉強しなきゃ。
それでは、まずjavascriptから

listaddjs

listaddjs

 

 

続いてjQuery。

listaddjq

listaddjq

 

 

HTMLの追加ボタンにはonclickに上のfunctionを追記しておきます。
onclick=”listadd();”

javascriptにしろ、jQueryにしろ、
単純にまあli要素を作って左のボックス(ul要素)に突っ込んでるだけなので。
そんなに難しくはないですね。
追加するli要素には、elemクラスを付けてます。CSSでelemのデザイン作ってたのはここですね。
追加するタスクをいい感じのデザインにするために付けてました。

これで「1、追加ボタンの実装」は終わり。
「2、ドラッグ&ドロップの実装」にいきましょう。

drag&drop

drag&drop

 

 

はい終わり。
ドラッグ&ドロップに関しては、即時関数でreadyで書いておきます。
HTML読み込んだ最初にイベントはっつけとくって感じかな。たぶん。
connectWithで移動する元と先のクラス名。
placeholderで移動した後の要素につけるクラス名。
って感じだと解釈してます。(違ってたらごめんなさい。)
まあ、ソースの内容に関してはごめんなさい。ググったら詳しいのいっぱいあるのでそちらで。
ということで動作確認してみます。

 

動作確認

動作確認

 

 

よし、出来てる!

 

おまけ(取込と保存機能)

いちいち画面からタスクを入力していくのめんどくさいな・・・。
ってことでテキストファイルを取り込んでタスクを表示してみます。
ソースはこんな感じ。改行コードで分割してタスクを分けてます。

readtext

readtext

 

ついでに保存も。
保存に関しては、ブラウザ依存の部分があるっぽいので、(のらくらはよくわかってない・・・。)
今回はchromeのみ対応にしておきました。
ソースはこんな感じ。

save

save

 

まとめ

タスク管理。これまで苦手だったり、やったことなかったりする方。
いきなり時間単位でとか、複雑な管理をするのはハードルが高い場合もあると思います。
そんなときに、本当にタスクを一覧化するだけ。終わったら右に動かすだけ。
そんな管理から初めてみるのもいいのではないでしょうか。
私のらくら、とりあえずここからタスク管理ってものを初めていきます。
慣れてきたら、しっかり時間も決めたり。週単位での管理だったり。
進化させていこうと思います。

 

実際に動かせるページはこちら。

EasyTask

 

 

以上。
のらくら でした!

1 Comment

コメントを残す

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