タグ付けする奴作ってみた

タグ付けする奴を作ってみた。

そもそも詳細をお話する前に、自身について少し話す。
自分は会社ではQAエンジニアを名乗らせていただいている。
小生がQAエンジニアを名乗るなど本当に生意気で、
会社ではいつも申し訳ないという気持ちと、
大きな衣装が早く体に合うように大きく成長したいという2つの間で仕事に励んでいる。

ところで自分の会社ではQAグループは出来てまだ日が浅く、
豊富な人材が割り当てられているというわけでもないため、
なかなか本来やりたい業務というものに力を割けずにいる。

そんな中、自分勝手ではあるが、自分にはどうしてもやりたいことがあり、
それは過去の障害の分析を元に、将来の障害を予防するといったものである。

過去の障害を分析することで、自社で起きやすい障害や傾向などをつかむことが出来れば、
そのデータを元に周囲を納得させ改善につなげることが出来るのではないかという想いからである。

さて前置きが長くなったが、そこで件のタグ付けする奴である。
コードは下記

http://www.u--u--u.com/open/mkTag/jqueryUiSample.html

タブが複数あり、そのタブの中には一段粒度の細かいタグが入っている。
タブ自体はjQueryUIのtabsで簡単に表現可能である。
タブの切り替えにより、コンテンツが切り替わる仕組みがこんなに簡単に表現できるとは、
もうDOMを触る上でjQuery無しというのは中々難しい時代になっているなといった具合である。

そして各タブ内のタグはこちらもまたjQueryUIによりdraggableとなっており、
上部にある黄色の枠内にdroppableとなっている。

本来は、ある一つの障害に対してこのUIを提供し、
その障害に当てはまるタグを追加してもらう。
例えば「セキュリティ」というタブには「XSS」や「CSRF」などのタグがあるだろう。
「人的ミス」のタブには「タイポ」や「ファイル上げ漏れ」などのタグがあっても良い。

一つの障害に対し、そういった複数のタグ付けを行うことで、
あとから障害をまとめて整理しやすく、また分析しやすい状態を目指す。

よって、上記のUIはあくまでまだ一端であり、
本来はこれにたいして、ID指定で障害の情報を取ってくる部分を実装したり、
保存でDBに書き込んだりと、サーバサイドもしっかり書かないといけないだろう。

ただ、まぁ不完全ではあるが、
一応当たり前といえば当たり前だが、
障害に対しタグ付けを行う際、あとからタグをとることも考えて、
dropした時に、テンプレートを挿入するように実装している。
draggableはhelper属性を"clone"とすることでかのようなUIを実現し、
テンプレートにはspan要素で「x」という閉じるボタンを実装している。

また同じタグが複数並ぶのを良しとしたくないので、
そこは一度すでに並んでいるタグをパースし、
同じタグがあれば、点滅してすでに存在することを示してやることにした。

足りていない部分としては、
タブとタグの追加機能である。
ブラウザのタブのようなUIでタブの追加を許し、
同様にタグの追加も許したいなと思っている。