仕事においてSlackやTeamsといったコミュニーケーションツールはMUSTアイテムで、必ず使っているものです。
しかし、リモートワークで顔を合わせて会話することが少なくなってからSlackやTeamsではかゆいところに手が届かず、仲間の進捗や状況を把握するのが難しくなりました。

そこで、リーダーがチームの状況把握や議論の活性化できることを目的にしたチャットサービスのQnQTreeをリリースしました。
みなさんもチーム開発で使ってみてください！

#teamsやslackの不満
teamsやslackでもグループを作ってチーム内チャットする機能はあります。
しかし、それだけでは開発はうまくいかず、不満が生じることが多いです。
では何が不満なのでしょうか。

teams/slackの不満点は下記3つに集約されると思っています。

グループチャットは話題がすぐ流れてしまい複数の話題管理に向かない
個別チャットを使いがちになりチーム内に情報共有がされなくなる
自分から目的をもって話しかけた内容にしか情報収集できない

###話題がすぐ流れてしまう
開発メンバー3~4名の少数グループチャットであっても、それぞれの担当している業務範囲は異なるため複数の問題や議題を扱うことが開発の常です。
そのため、チーム内で個別メンションしても、タスク解決前に別の緊急な話題が入ってスレッドがすぐに流れてしまいます。誰に何のアクションが振られていて、その状況がどうだったかがわからなくなってしまいます。

さらに、大企業のteams/slackあるあるなのですが、実際に手を動かして開発してる実働メンバーは3~4名なのに、いつのまにか開発グループチャットの所属メンバーには課長まで入って10~20名まで膨らんでいることがあります。
開発だけでも話題は複数にのぼるのに、開発以外の話題も入るとグループチャットはカオスとなりがちです。。。
逆に、人数が膨らんだことで萎縮してまったく話さなくなるグループチャットもあります。。

###個別チャットに頼ってチームに情報共有されない
話題が流れてしまったり、関係ない人々で膨らんだグループチャットは機能しないため、結局は個別チャットで１対１で問題や議題をやりとりすることになります。
リモートワークで個別チャットで業務確認を行うと情報はチームには共有されずに、チーム内の認識の齟齬や情報格差が生じていきます。何を優先してどこに向かって開発しているのかの認識がずれていきます。

###自分から話しかけた内容しか情報を得られない
チャットだから聞いた内容に答えてもらうのが当たり前だと思うかもしれませんが、出社して物理距離が近いオフィスでは、周りの人が開発中に悩んでいることやリーダと担当が話している内容はそれとなく耳に入ってきたり、視界に入ってきたりします。
直接「今、あの案件はどうなっているの？」と聞かなくても、物理距離が近いことで雰囲気で周囲の席のチームメンバーが何をやっているかがわかったし、そこから新たな議論やユニークなアイデアが生まれていました。しかし、リモートワーク＋teams/slackではその雰囲気という情報は欠落してしまいます。

###だからといって毎日出社にするのも違う！！
ご年配たちはこれらの課題から完全出社に戻したがってますが、私は違うと思います。
teams/slackのコミュニーケーション課題は、テクノロジーで解決すべきなのです。
つまり、新たなコミュニーケーションツールを作ればよいのです

#QnQTreeとは
チームリーダのための進捗把握や仲間とフセンを貼る感覚でコミュニーケーションを行うためのサービスです。QnQTreeのコンセプトは「個別の議論はslackやteamsで。チーム全体の状況把握や雑談はQnQTreeで。」です。
込み入った個別の議論は従来のチャット(slack/teams)でやればよく、チーム全体の開発管理や議論を行うことを目的に設計しています。
機能をかんたんに説明するとコミュニケーション機能向けカスタマイズをしたマインドツリーです。

###2次元だから話題は流れない
QnQTreeはマインドツリーのような2次元ツリーUIです。このため各お題がフセンとして残るので、返信がなかったら流れるということはありません。

###情報が目に付く
QnQTreeは無用なマネジメント職をチームに入れずに、チームリーダが実際に開発している2~4人まで程度で使用する想定です。ツリーUIで周囲の状況が自然と目につくのでオフィスで周囲の人が何をやっているかと同じように、開発メンバーが何をやっているかの雰囲気を掴むことができます。

###自発的に議題が生まれる
QnQTreeはAさん→Bさんへのチャットといった目的をもって話かけずに、ツイートのように自分でもくもくと進捗をフセンで重ねていくことができます。それを横目にみていた仲間が技術的な問題に気づいたり、優先順位の間違いに気づいたりすることができます。

上記のように、実際に手を動かしているチームメンバーたちのコミュニーケーションを円滑化することに特化して作ったツールとなります。

##サービスTOP

UIのイメージがわかるようなTOPにしています。スマホでも動作しますが２次元のフセンUIなので画面が小さいと見づらいと思います。

##チームの作成・管理

任意のチームを作成することができます。

ヘッダーの右端のアイコンをクリック
「チームの作成」でチーム名をきめて「作成する」をクリック
チームの管理でGmailで外部ユーザを招待してチームに追加
チームメンバーにはowner権限とmember権限を割り振ることができます。ownerはチームメンバーの追加、編集、削除が可能です。

##ツリー作成

Treeの作成はHeaderの「+」ボタンかサイドバーの「Treeを作成」ボタンから作成できます

Tree名の選択
Treeを立てるチームの選択
POSTをクリック
個人開発のDailyのもくもく会で使っているTreeの例です。
各チームメンバーが自分の名前を記載して、その下に自分の開発進捗を記載しています。
チームのフセンから他メンバーの進捗が見れて、何やってるかの雰囲気が把握できるし、
他のメンバーのフセンにチャットすることもできるので広がりが生まれます。

teams/slackの１次元チャットと違って、
・　自分のブランチを作れば、自身の進捗を独り言としてつぶやきやすい
・　複数の話題を並行して議論できるので問題が流れない
・　チームの今何してるかの雰囲気が把握できて雑談や相乗効果が生まれる
点が強みだと思います。

##QnQTreeはどんなサービス？
業務やプライベートのチーム開発で使うことを目的としたタスク管理＋コミュニケーションツールです。
チームは最大で4人くらいまでを想定しており、実際に手を動かしている実担当メンバーたちで組む形です。
teams/slackで私が感じていた課題

グループチャットは話題がすぐ流れてしまい複数の話題管理に向かない
個別チャットを使いがちになりチーム内に情報共有がされなくなる
自分から目的をもって話しかけた内容にしか情報収集できない
を解決することを目的にしており、
２次元UIで複数の話題が並行して議論できる
チーム全体の進捗を把握できる
個々の進捗を書きやすくする
を実現することで課題解決を狙いました。

#実装について

##実装環境 -- すべて無料枠
・ Vue.js
・ Bulma.css + original css
・ Firebase　（本番x1, テストx1)
・ Authentication (認証・認可）
・ Cloud Firestore （Data保存）
・ Storage (Profile保存）
・ Functions (Event発火用）
・ SendGrid (メール送信用）
・ Google Analytics (解析用)

外部ライブラリ

・ browser-image-compression:画像圧縮
・ link-prevue:httpからプレビュー画像URL取得
・ vue-infinite-loading:ロードのアイコン生成
・ vue-youtube":Youtubeの埋め込み

##QnQTreeの弱点
・小さい画面には向かない（二次元UIで横幅を取るため）
・ 5名以上の大人数チームにはあまり向かない（二次元UIで横幅を取るため）
・込み入った議論には向かない
QnQTreeのコンセプトは「個別の議論はslackやteamsで。チーム全体の状況把握や雑談はQnQTreeで。」の通り、込み入った話題はteams/slackの方がよいです。さらに言えば、込み入った話題は、音声通話や対面などを駆使して１対１でやり取りするほうが早いです。

##おわりに
開発リーダーがチームの状況把握や議論の活性化できることを目的にしたチャットサービスのQnQTreeをリリースしました。
・リモートワークで周りが何をしているかわからない..
・グループチャットは話題がすぐ流れて相談できない...
・雑談や相談できる環境が減って不安だ...
といった課題意識を持っている方はぜひ使ってみてください！