匿名チャットサービス「Lively」を新卒研修で開発しました【GMOテクノロジーブートキャンプ参加レポート】
皆さんはじめまして、新卒のK.Fです。初めてのブログ投稿になります。これからよろしくお願いいたします。
5月中にGMOインターネットグループの技術職の新卒に向けた技術研修「GMO Technology Boot Camp (GTB)」が開催されました。 プログラミングの基礎から、セキュリティ、インフラ・Webアプリ開発など幅広い分野を学習することができました。 最後の一週間では、チームに別れてGTBで学んだことの集大成、アウトプット開発を行いました。
新卒技術研修 GMOテクノロジーブートキャンプ2021を実施しました【前編】
https://developers.gmo.jp/9088/
本稿では、実際にGTB期間に作成したアプリケーションの概要について説明していきます。
匿名チャットサービス「Lively」の概要
なぜこのアプリを作ろうと考えたか
コロナ禍という状況の中、GTBでも完全オンラインで研修が進みました。しかし、オンラインにおいて講義を行う発表者と講義に参加するリスナー間で円滑にコミュニケーションをとる難しさを実感しました。特に、発表者は「リスナーの反応がわかりずらい、質問がなかなか来ない…」、リスナーは「名前が分かるとなかなか質問がしずらい」といった課題を抱えていることが分かりました。そこで、それらの課題を解決するために、オンライン発表者・リスナーのための匿名チャットサービス「Lively」を開発しました。匿名のチャットにより発言を活発化することで、双方向でのコミュニケーションが生まれ、主体的に参加しやすくなるとった目的があります。
機能
「Lively」の主な機能は以下の通りです。- 匿名でのチャット
- 質問をわかりやすく固定表示
- 飛ぶスタンプ
- 約800語のNGワードを除外
- 簡単！QRコードでルームに入室
工夫したポイント
リアルタイムチャット
リアルタイムチャットを実現するために、以下のシステムを構築しました。全てdockerコンテナ上で動き、フロントエンドはNuxt.jsを、バックエンドはLaravelを用いました。
リアルタイムにチャットをするには、ユーザが送信したコメントを同じルームに参加する全ユーザに通知し、ユーザの画面を更新する必要があります。そこで、ブラウザとサーバの双方向で通信が可能なWeb Socket通信を用います。チャットの仕組みは以下の手順で行われます。
- コメントを送信するユーザは、ブラウザでUIを操作し、NginxをベースとしたWeb ServerにHTTP(S) requestを送信します。
- Nginxは受け取ったrequestをリバースプロキシし、App Serverにrequestを転送します。
- App Serverは、API Serverにrequestを送り、DB（MySQL）にコメントを保存します。ここで、コメントを保存するのは、後からルームに入ってきたユーザにチャットを表示するためです。
- API Serverでは、Redis Databaseのpub/sub通信機能を用いて、App Serverにコメント追加のイベントを通知します。
- イベントを受け取ったApp ServerはNginxのリバースプロキシを通して、Web Socket通信でコメントを受信するユーザのブラウザにコメント送信します。
形態素解析をしてNGワード判定
匿名ならではの誹謗中傷を防ぐために、自然言語処理を用いたNGワード判定機能を実装しました。入力されたコメントをMeCabで形態素解析を行い単語ごとに分解し、名詞と動詞を抽出します。抽出した名詞と動詞がNGワードリストに含まれると送信が失敗するようにするといったものです。形態素解析で単語ごとに分割するのは、例えば、「バカ」をNGワードとして弾きたいのに、NGワードでない「バカンス」も弾いてしまうのを防ぐためです。開発の進め方
Github の Project と Issue の活用
チーム開発が始まる際に、完全オンラインで開発を進めることが決定したので、チームメンバーで取り組んでいることや進捗状況をいかに共有するかが大切だと話し合っていました。そこで、GitHubのProjectとIssueを活用して進めていくことになりました。Projectでは、チームメンバーが何をしているかを細かいタスクに分割して、記述していきます。作業中のタスクはProjectからIssueに変換して、チームメンバーに何をしているのかを一目でわかる形で残します。メンバーごとに得意な領域が異なり、フロントエンド、バックエンド、デザイン、サーバ設定の役割に別れて作業を行ったのですが、バラバラに開発した機能を一つのシステムに組み上げるときに時間をかけないようにするため、初めに、共通言語を設定しました。例えば、発表者のことをPresenterとよび、参加者のことをListenerと呼ぼうなどです。この共通言語に基づいて、APIやDBの設計を行う際の変数の名前をつけていきます。
また、困ったことは長い時間悩まずにすぐに共有することを心がけていました。案外、困っていることを他人に共有するために、言語化している間に解決策が思いつくこともあります。
最後に
最終的に、先輩パートナーの方々にレビューしていただき、その点数に基づいて順位が発表されました。その結果、最優秀賞をいただくことができました。オンラインでもGitHubなどのツールを使って密にコミュニケーションを取ることで、各メンバーが最大限に自分の力を発揮できた結果だと思います。次世代システム研究室では、 Web アプリケーション開発を行うアーキテクトを募集しています。募集職種一覧 からご応募をお待ちしています。
