カレンダー

11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

広告



最近の記事

カテゴリー

DATE: CATEGORY:DEV


TODO管理系のサービスは他にもいっぱいあるので、
あまりニーズはないと思いますが、諸事情により
タスク管理用のTodoListサービスを作ってみました。

Listoda

「使うだけなら出来るだけシンプルに」
をコンセプトに作ってみました。

Photo:road trip journal By:lecates
Photo:road trip journal By lecates

Listodaを使い始める


Twitterアカウントがあれば、利用出来ます。

まずは、Twt2mailのページでTwitter認証でログインします。

Twt2mail

ログインしたら、Twt2mailのトップページが表示されるので、
メニュー右の「Listoda」のリンクにアクセスします。

Photo:2013-04-06 20.01 のイメージ By:onetohihi
Photo:2013-04-06 20.01 のイメージ By onetohihi

これがトップページ。Twitterで使っている背景をベースに
タスクリストページが表示されます。
(最初はなんのタスクもないと思います。)

Photo:2013-04-06 14.49 のイメージ By:onetohihi
Photo:2013-04-06 14.49 のイメージ By onetohihi

タスクを管理する


とりあえず、まずはメインの機能のタスク管理の手順。

タスクを追加する

ログインしたら表示トップに入力フォームがあるので、
「タスク内容」、「期限」、「グループ」の
情報を入力して「Add」ボタンを押下するだけ。
Photo:2013-04-06 19.19 のイメージ By:onetohihi
Photo:2013-04-06 19.19 のイメージ By onetohihi

基本はこれだけですが、一応補足の情報とかを追記
出来るように詳細メモも追記出来るようにしています。

作成したタスクの横に▼印があるので、押すと出てきます。
赤色の入力フォームにメモが出来ます。

Photo:2013-04-06 19.20 のイメージ By:onetohihi
Photo:2013-04-06 19.20 のイメージ By onetohihi

タスクを編集する

追加したタスクはもちろん編集出来ます。
例として、タスク内容の編集をしてみます。

というわけで、タスク内容の文字をダブルクリック。

Photo:2013-04-06 19.47 のイメージ By:onetohihi
Photo:2013-04-06 19.47 のイメージ By onetohihi

すると、編集フォームに変わるので修正をしたら、
フォーカスアウトすれば、修正完了。

Photo:2013-04-06 19.52 のイメージ By:onetohihi
Photo:2013-04-06 19.52 のイメージ By onetohihi

タスクを完了させる

追加したタスクが完了したら、完了させます。
これもシンプルでチェックボックスにチェックを入れます。

これだけ。
Photo:2013-04-06 20.22 のイメージ By:onetohihi
Photo:2013-04-06 20.22 のイメージ By onetohihi

タスクを削除する

完了したタスクは不要になったら削除します。
完了の代わりに削除してしまっても良いです。

Photo:2013-04-06 20.26 のイメージ By:onetohihi
Photo:2013-04-06 20.26 のイメージ By onetohihi

削除をしたらリストからなくなります。

グループを管理する


タスク管理の機能だけのつもりでしたが、自分の用途的に、
少しグループで管理をしたかったので作成してみました。

各種タスクをグループ管理出来るようになっています。
最初にタスク追加時に好きなグループ名をフリーフォームで
入力出来るのですが、このままだとただ追加されてるだけなので、
グループ単位でタスク管理出来るようにしてみます。

まず、サンプルとしてこんなタスク一覧があるとして
グループ管理をしてみます。

Photo:2013-04-06 21.23 のイメージ By:onetohihi
Photo:2013-04-06 21.23 のイメージ By onetohihi

グループを追加する

タスク追加時に「TEST」と「TEST2」のグループを
作成しているので、管理用にグループを作成してみます。

左メニューの「Setting」ページへ。

Photo:2013-04-06 20.59 のイメージ By:onetohihi
Photo:2013-04-06 20.59 のイメージ By onetohihi

ここで「TEST」と「TEST2」という名前のグループを
追加します。グループ名に記入して「Create」を押すだけ。

Photo:2013-04-06 21.02 のイメージ By:onetohihi
Photo:2013-04-06 21.02 のイメージ By onetohihi

そしたら、左メニューからTodoListに戻ります。

グループ単位毎にタスクを表示

TodoListページに戻るとグループ一覧にさきほど
追加したグループが増えています。
(完了していないタスクの数も一緒に表示されています)

Photo:2013-04-06 21.03 のイメージ By:onetohihi
Photo:2013-04-06 21.03 のイメージ By onetohihi

ここで、TEST2を選択してみるとタスク一覧が
TEST2のタスクのみの表示に切り替わります。

Photo:2013-04-06 21.04 のイメージ By:onetohihi
Photo:2013-04-06 21.04 のイメージ By onetohihi

グループ情報の編集

グループ作り直せば良いだけなので、
とりあえず、ボタンは作ったんですが、
まだ実装してません。

削除

もしグループが必要なくなったら削除します。

これもシンプルでSettingメニューでDeleteするだけ。

Photo:2013-04-06 21.46 のイメージ By:onetohihi
Photo:2013-04-06 21.46 のイメージ By onetohihi

モバイル向けにも作りました


Bootswatch、とってもいいんですがtableを使ってると
スマホで見ると大きく画面をはみ出してしまっていたので、
スマホでアクセスしたときはモバイル向けのページが
表示されているようにしています。

詳細な説明は省きますが、画面イメージだけ。

Photo:IMG_1487 By:onetohihi
Photo:IMG_1487 By onetohihi
Photo:IMG_1488 By:onetohihi
Photo:IMG_1488 By onetohihi

とりあえず、「シンプル」の方針はそのままに、
少しずつ改善していきたいと思います。

タグ : todolist タスク 管理

Comment

コメントの投稿

管理者にだけ表示を許可する


トラックバック


この記事にトラックバックする



copyright © なんとなしの日記 all rights reserved.
内職☆在宅ワークの最強は?アフィリエイト!. 初心者だってカッコ良いホームページ作るぅ!
Powered by FC2ブログ
Related Posts Plugin for WordPress, Blogger...