DjangoでTODOリスト作成
作成したもの
Djangoを用いたTODOリスト作成のためのWebアプリ。TODOリストに追加した内容をグラフ上に配置し、軸を設定したグラフ上をドラッグして配置することで、TODOの中でも優先度を自分の中で整理・可視化できるようなもの。
使用例
動機
動機はTwitterで見かけた下記の投稿。
リスト管理が苦手過ぎて、タスクは「やりたい〜やりたくない」と「かんたん〜たいへん」の二軸だけにした。優先度とか得意不得意とか、なんとなく感覚で分けられて楽になった。 pic.twitter.com/01w4JGkNV6
— Somelu (@Somelu01) 2019年1月11日
面白いと思ったし、これなら作れそうとも思ったので、練習もかねて作ってみた。
内容
Django
参考サイトまんま。GitHubで公開されていたのでブランチ切って作った方がよかったのかもしれない。
JavaScript
canvasを用いて、グラフの描画、登録したTODOリストをグラフ上に描画しドラッグ可能にする、軸名の設定等を行なっている。
下記のように、prototypeで描画とクリックされたかどうかの当たり判定を用意している。このように実装しないと、複数のオブジェクトを個別に動かしたり描画するのが面倒だった為。また、グラフ上に描画する際にはTODOリストの内容と一緒に同じ大きさの枠も作成している。
// TODOリストのコンストラクタ設定 var Todo = function(cv, text){ this.cv = cv this.text = text; this.x = cv.width/2; // 初期位置は真ん中で固定 this.y = cv.height/2; this.dragging = false; } // TODOリストのprototype設定 Todo.prototype = { //TODOの描画 draw: function() { ctx = this.cv.getContext('2d'); text = this.text; ctx.font = "30px serif"; metrics = ctx.measureText(text); ctx.strokeRect(this.x, this.y+5, metrics.width, -30); ctx.fillText(text, this.x, this.y); }, // 当たり判定 isTouched: function(cx, cy){ metrics = this.cv.getContext('2d').measureText(this.text); // キャンバスの左上端の座標を取得 var offsetX = this.cv.getBoundingClientRect().left; var offsetY = this.cv.getBoundingClientRect().top; x = cx - offsetX; y = cy - offsetY; return (this.x < x && (this.x + metrics.width) > x && (this.y-24) < y && this.y > y); } }
工夫した点
canvasで複数のオブジェクトを描画し、個別にドラッグ移動可能にした点。
まとめ
Djangoで作ったけれども、あんまりDjangoである必要はなかった気がする。これも突発的に作りたくなったので作った。バグは気が向いたら修正する。
