Tech Sketch Bucket of Technical Chips by TIS Inc.

ブレインストーミングをするためのWebアプリケーション「Brain Hacker」の企画・設計・開発

Pocket

TIS株式会社 戦略技術センターの新人研修としてチーム開発演習を行いました。

本記事は中山・稲本チームによるチーム開発演習の成果報告を中心とした記事です。

新人研修概要

 今年度の戦略技術センターの新人研修は以下のような内容でした。

  • Python基礎(個人)
    • Pythonを用いた基礎的なプログラム開発
  • Webアプリケーション開発(個人)
    • PythonのWebアプリケーションフレームワークDjangoを用いて日報webアプリケーションを開発
  • チーム開発演習(1チーム2名)
    • 「リモートで働くために有用なWebサービス/ツール」というテーマで、新人二名でチームを組み一連の開発工程(提案・設計・開発・テスト)を行う
    • 開発環境(インフラ等)の選定準備も新人が行う
    • スケジュール
      • 開発前半(6/1~7/9):アイディアだし、一連の開発工程、Ver1.0リリース、中間成果発表会
      • 開発後半(7/10~7/31):PullRequest送受信、新機能作成、Ver1.1リリース、最終成果発表会
  • その他
    • デザインパターン輪講
    • 各種講義
    • 週次報告会

チーム開発演習で何を作ったか

ブレインストーミング(以下ブレスト)をするための Webアプリケーション
名前は「Brain Hacker」です。
イメージ
(利用イメージ図)

開発目的

 Brain Hackerは「リモートでスマートかつ気持ちよくブレストを行う」という目的で作られました。対象ユーザはリモートでブレストを行いたい人、ブレストに慣れていない人、アイディアを出すのが苦手な人達です。

対象ユーザの課題

 我々が今回の研修のアイディアだしを行う時に実際にブレストを行ったところ、対象ユーザがスマートかつ気持ちよくブレストを行うためには課題が2つあると考えました。

1つ目はブレストを行う時、相手に変に思われたくないために、アイディアを出すのをためらうという、気持ちの問題。2つ目はアイディアが出てこなくなり、どのようにアイディアを出せばいいかわからなくなるという考え方の問題。この2つの課題を解決する必要があります。

Brain Hacker の特徴

 Brain Hackerでは、web上で提供されている基本的なブレスト環境に加えて、特徴が2つあります。この特徴を実現するために我々はAIを導入しました。

褒める

 出したアイディアに対してAI、そして他者から褒められます。
褒めることでアイディアに対して自信を持たせ、アイディアを出しやすい雰囲気を作ることができます。

思考支援

 出したアイディアに対してAIが発想の転換を促してくれます。
AIがアイディアの方向性を示すことで、アイディアを出すきっかけを作ることができます。

アプリケーション画面

AI_image2

AI以外の特徴や機能

  • 画面上の付箋の動きがリアルタイムで同期
  • テキストチャット
  • AI機能のON/OFF
  • ブレスト画面の拡大・縮小
  • 付箋の色が変更可能
  • ブレスト画面のキャプチャ

開発時の工夫点

 チーム開発演習の前半は約1ヶ月(6/1~7/9)で、ver1.0のリリースを行わなければなりませんでした。この前半では、アイディアだしに時間がかかり、1週間ほど遅れた開発スタートとなりました。加えて、開発するにあたって未知のことが多い、両者のプログラミング技術の差といった問題がありました。
このため以下の3点に対して工夫を行いました。

1.開発体制

 互いに話し合う時間がないくらいに開発開始が遅れていました。
そこで私たちは、話し合いの時間を代償として、スピーディな意思決定を行うために、開発の序盤は以下のような開発体制をとりました。

  • 意思決定はPythonでの開発経験が豊富な中山が行う
  • しばらくの間のやることは…
    • (中山) コードを書く
    • (稲本) 書かれたコードを読む等して学習する
  • 中山はわかったことをWikiに書いて共有、稲本はそれを読んで学習

 これにより、お互いに開発と学習に集中して取り組むことが可能となり、短期間でスケジュールの遅れを取り戻すことができました。
遅れを取り戻した後は、互いに別機能の実装を行う体制に移行しました。

話し合いの時間を減らしたことで、アプリケーションの開発時間を多くとることができました。しかし、お互いの意見交換などのコミュニケーションは疎かになってしまいました。

2.技術検証

 作成するアプリケーションの性質上、リアルタイムで画面を同期する必要がありました。この性質を満たすために、未知のことに多く触れる必要がありました。
例えば、今までの研修で使っていたDjangoは、リアルタイムで画面を同期する実装に時間がかかりそうでした。そのため、使用するWebアプリケーションフレームワークを新たにTornadoに変更しました。以下の図はTornadoとDjangoで、どれだけ未知のことがあるかを比較した図です

違いについて
 多くの未知のことに対しては、必ず最小限の機能を作り技術検証を行いました。検証の結果、使えそうだとわかったら工数を見積り、短期間で実装可能ならば作業を開始するという工夫を行いました。

3.開発

 効率的に開発を進めるために、コードが複雑になると、その都度リファクタリングを行いました。継続したリファクタリングは読みやすく、簡潔なコードを維持することができ、生産性の向上につながりました。

チーム振り返り

 今回のチーム開発でよかったことは、調査事項や問題点をwiki上にまとめるなどこまめに文書化を行うことです。こまめにwiki上に文書化することでチーム内の知識・問題共有が容易に行うことができました。さらに、お互いに文書を読むことが、お互いに技術面での質問回数を減らすことにつながり、コーディングに集中することができました。

 改善すべき点は、前半の開発体制です。片方が優先的に意思決定を行っていたことで、意思決定を行う側の負担が大きくなり、作業量のバランスが取れていませんでした。また意思決定による変更がソースや文書化されたものを読むことでもう片方が知るというケースが何度かあり、コミュニケーションの不足を感じました。
そのため、言葉によるコミュニケーションをもう少し増やすべきだったと思います。

稲本振り返り

Tornado、javascript、WebSocket等々、今まで触れたことのないものに触れることで、技術面において楽しく成長することができました。さらに、自分以外のソースコードを読む機会が多く、モジュールの分け方や名前の付け方など学ぶべきことが多くありました。

技術以外では、1日の細かいスケジュールを決めて学習時間や実装時間を短くするといった効率的な作業ができなかったという問題点を認識できました。今後は効率的な作業を意識しながら成長していきたいです。

中山振り返り

 作業面の工夫として締切効果を意識して作業を行いました。この方法は一時間のうち50分を作業、10分を休憩と区切り、休憩中に次の50分の戦略を立てるというサイクルで作業を行います。50分という短時間で結果を出すことを意識して作業することで、生産性が高まりました。

 機能実装に関しては、機能はなるべく自分で実装しないようにしました。機能を実装したいときにはまず必要なものがあるかを検索し、あれば使うというスタンスで開発を進めました。

改善点としてはOJTの先輩、相方に相談せずに一人で決める場面が多かったこと、口頭でのコミュニケーションが少なく、なぜこうしたのかの意図を伝えきれなかったことがあげられます。

最後に

 約2か月という短期間ですが、自分たちではよいものができたと自負しているので、ぜひ一度Brain Hackerを触ってみてください。

エンジニア採用中!私たちと一緒に働いてみませんか?