Google Calendarを使って二次元タスクリストを作ってみる

概要

TIME HACKS!」の中で、タスクを 二次元で一覧して管理する手法が述べられています。 この方法は、面白いと考えて、Google CalendarとYUIのpanel機能を 用いてWEBブラウザー上で、表現できないかと思い作成してみました。

また、Google Calendarの使い道をちょっと模索しているのもあります。

ついでに、YUIのpanelは、下記を参照のこと。

http://developer.yahoo.com/yui/container/panel/

ファイル

下記のファイルをYUIのパスが合うように置いてください。

動作ページ

以下の様な画面になります。

2jigen.PNG

ここで、各タスクをクリックすると、 Google Calendarに明記されている、タイトル、期限、 重要度、進捗、説明などが表示されます。

また、タイトルをクリックすると、Google Calendarに 飛び、修正が可能です。

実際に動くページは、下記にあります。

http://www.mizuao.com/yui_2.2.0.a/examples/container/panel/solution_0_1_5.html

ついで、上記で表示しているカレンダーは、以下の物です。

動作に関して補足

重要度は、1〜5までの半角で。進捗も1〜5間での半角で、説明に記入 してください。順番は関係ありませんが、最後はリターンして置いてください。 複数書いた場合は、最後に書いたものが優先されます。

Google Calendarに 入れるイベントは、終日に。また、終了の日しかチェックしていないため、 開始日は、使っていません。

進捗に5を入れると、タスクリストには表示されません。

また、上記サンプルは、定期的にイベントを入れないと、そのうち 表示されなくなります。2007/4/15にこの説明を 書いていますが、もし、私がカレンダーのメンテナンスを怠ると、 上記のサンプルは、赤いグラデーションしか表示されなくなるでしょう。

(メンテナンスをするかどうか、私のやる気次第です。 まぁ、つくってポイしちゃうかも可能性を否定できません...)

改造するポイント

上記スクリプトを修正して使用して見たいと思った奇特な方へのアドバイスです。

カレンダーを変更する

自分のカレンダーのイベントを入れたい場合は、solution_0_1_4.htmlの 228行目にある、

<script type=...〜...</script>

を修正してください。これは、Google CalendarのカレンダーのアドレスのXMLから取得 してください。

もっと広くしたい...

ブログに掲載するために、450x450(ブログの幅が450px)で一覧 できるようにしていますが、もっと広い画面で確認したいと思っている方も いるでしょう。その場合は、任意の画像を配置にしてみてください。

(背景の絵は、あせらせるために、赤色でグラデーションをかけています)

また、広くした場合には、タスクを置く箇所を変更する必要があります。 上記サンプルは、横軸を1週間にしているため、日々の設定も十分に 可能ですし、縦軸を5段階にしていますが、10段階などにして見るのも 良いかも知れません。

この辺りは、posix,posiyの値を設定しているところを改造してみてください。

ついでに、YUIのpanelは、どうも上下10px、左右10px前後は指定できなさそうです。 あらかじめ余白を取って置く事をお勧めします。

進捗を...

進捗データを入れている割には、「進捗=5>非表示」にしか使っていません。 この辺りをもう少し、画面上で確認できると良いかも知れませんね。

もっと説明を...

もし、もっと説明やアドバイス等が必要でしたら、下記にコメント 頂ければ、できるだけ対応させていただきます。

もしくは、ブログにコメントや

mailto:kiyoshi.sakurakichi@gmail.com

までメールを頂ければ、できる範囲で対応させていただきます。

ブログ

書きかけ中...


コメントどうぞ



添付ファイル: filesolution_0_1_5.zip 327件 [詳細] file2jigen.PNG 536件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2010-03-15 (月) 21:38:49 (138d)