Ruby勉強会&忘年会を開催しました(2015#12)

12月になり、今年最後の勉強会を開催しました。
いつもの通り旧人はそれぞれのアプリ開発、若手チームはRuby認定試験のGold取得に向けた学習を行ってもらいました。

グループウェアの方は「スケジュール機能」を除き、そこそこできてきましたので、リファクタリングというかこれまで勢いで作ってきてしまったコードやフロント周りの見直しを行いました。

今回はメッセージを送信する際の宛先選択のダイアログです。
これがまた地味な機能なのですが、いざ作るとなると難しいというか、使いやすいUIにするためにどうするのが良いか悩んだりします。

今日まで他の機能を優先してきてしまいましたが、ユーザを選択する機能は様々な機能で利用するためUIを見直しすることにしました。
ユーザ選択機能のUIには

• メンバの絞り込み（グループに依るフィルタ機能）
• 宛先の指定（TO,CC,BCCなど分類）
• 選択時の一括チェック、解除
• 個別の選択解除 …etc.

など、細々とした機能が必要になります。このような細部に使い勝手の差が表れてくるのかとは思いますが、作り込みはなかなか大変ですね。

機能が豊富な分いろいろ詰め込まなくてはなりませんが、これが常時画面に表示されると見た目がごちゃごちゃして不快感極まりないので、良くあるアコーディオン機能を利用し、必要な時に表示させるようにしていました。
しかし、アコーディオンが開くと、画面全体がスクロールするなどユーザが予測しづらい動きになって違和感を感じていました。
そこで、今回モーダルダイアログ化することとしました。

結果の画面しかなく、恐縮ですが次のようなダイアログに落ち着きました。

選択結果はタブで切り替えて確認できますが、タブに送信の分類（TO,BCC,CC）の人数のバッジを表示し、人数だけはタブを切り替えなくても認識できます。
使い勝手も良い感じになりました。 手を加えたのはReact.jsのrender部分（JSXで記述する箇所）と、CSSフレームワークであるUIkitのモーダルダイアログを利用するようにした程度でしたが、あらためてソースコード見返すとリファクタリングが必要と感じていおり、今後しばらくはセルフレビューになりそうです。

さて、またタイトルにある通り今年最後の勉強会となりましたので、近所のイタリアンレストランの4000円の料理9品＋飲み放題コースで忘年会を開催しました。
10名が参加しましたが、鳥の丸焼きが2つ。その後にピザ、パスタ2種類などかなりのボリュームでしたが、きれいに残さずいただきました。
今年1年お疲れ様でした。来年は更にレベルアップを図りましょう！