ハッカソン合宿制作記③｜気軽に投稿できる匿名チャット「nifchannel」を作りました

2019.01.23Update

今野

はじめに

先日、エンジニア育成の一環としてハッカソン合宿に参加してきました！
詳しくは 2泊3日のハッカソン合宿＠土善旅館に行ってきました！をご覧ください。

この記事では、ハッカソン合宿で作成した匿名チャットサービス「nifchannel」についてご紹介します。
本記事はメンバー4人による共同執筆です。

メンバー紹介

今野（チームリーダー）
フロントエンドとバックエンドを担当。通常業務では開発・運用作業を担当。

勝又（プロダクトオーナー）
バックエンドを担当。通常業務ではコンテンツの開発と運用を担当。

芦田
バックエンドを担当。通常業務では開発・運用作業を担当。

瀬川
バックエンドほか細かい修正周りを担当。通常業務では開発・運用作業を担当。

プロダクトについて

みなさん、会社でお仕事をしているなかで、こう思うことはありませんか？
「こうすればもっとこの会社良くなるんじゃないかなぁ」
「聞きたいことがあるけど、誰に聞くのが適切なのかがわからない・・・」
でも、Slackで自分の名前を出して全社に発信するのはちょっと恥ずかしいですよね。

そこで、私たちが今回作成したのは、社内用匿名チャットツール「nifchannel」です。
匿名で、自分の意見や質問を社内に発信することができます。

使い方

使い方は簡単、聞きたいことや言いたいことを書いて投稿するだけ。
自動的にランダムな文字列のIDが発行され、匿名で投稿されます。

試しに、会社の近くの美味しいラーメン屋さんを聞いてみました。

誰かから返事が来ました！　返す側も、匿名だと返事をしやすいですよね。
会社近くの美味しいラーメン屋さんを2軒も知ることができました。

こだわったところ

今回の開発において、特にこだわったところは以下の2つです。

1. ブラウザの更新ボタンを押さなくても新しい投稿が見られるようにする
2. 投稿にランダムなIDを発行する

順番に説明します。

1. ブラウザのリロードボタンを押さなくても新しい投稿が見られるようにする

画面遷移をせずにHTMLを更新するためにAjaxを使うと、定期的にサーバにアクセスすることになり、リアルタイム性に欠けます。
チャットと言うからにはどうしてもリアルタイム性を重視したく、他の人が投稿したら即時反映させるよう実装しました。
そこで、今回はLaravel BroadcastingとPusherによるWebSocketを使った通信を実装しました。

簡単なシステム構成図は以下の通りです。

① まず、クライアントAがメッセージを投稿します
② アプリケーションがPusher APIを使って、メッセージを送信します
③ Pusherがチャットを閲覧中のクライアントA, Bにメッセージを返します
④ JavaScriptによってHTMLが書き換えられ、新しいメッセージが表示されます

また、JavaScriptコード内でHTMLを書き換えた後に、画面を最下部にスクロールする処理を加えました。
細かいところですが、最新の投稿に気づきやすくなりユーザビリティが向上しました。

チャットの肝とも言えるこの機能を、Pusherのお陰で無事合宿中に完成させることができました。

2. 匿名のIDを発行する

匿名チャットという性質上、投稿にユーザ名は表示されません。
しかし、それでは発言がどのユーザからなのかという区別が付かなくなってしまい、コミュニケーションが取りづらいです。
そこで、各ユーザーにランダムな文字列をIDとして割当て、匿名性を保ちながらユーザの識別が可能となるようにしました。
IDは一定時間が立つと新しいものに置き換えられるようになっています。

合宿を通じた学び

2泊3日と短期間の開発合宿でしたが、多くの学びを得ることができました。
メンバーの意見でも多かったのは「普段の業務と違う経験ができた」事による学びでした。

普段扱わない技術を理解する

今回用いた技術は、開発言語として用いたPHPをはじめLaravelやBootstrap, Pusher, WebSocketと様々ですが、その多くはメンバーにとって普段の業務で扱わないものであり新鮮。
合宿までに受けた講義を思い出しながらひとつのサービスを組み立てることで、それぞれの理解もより深まりました。
また、こういったサービスの要素技術に加えて、改めてgitと向き合ってチーム開発ができたのも大きな学びです。
コンフリクトの経験も、今後の開発業務で大いに役立ちそうです。（笑）

今後に活かせるグループタスクを経験する

チーム開発の難しさは、コンフリクトだけではありませんでした。
急遽結成されたチームで短期間のうちに成果物を作る為には、タスクの管理がとても重要だったと感じたメンバーが多いです。
互いに情報共有しながら、タスクの優先順位をつけて可視化する・・・。短期間だからこそ、なおさらその重要性が際立ちました。

開発の楽しさを感じる

そして何より、集中開発の中で「開発の楽しさ」を感じられたのは大きな学びだったのではないでしょうか。
エンジニアとして働いていたとしても、普段はいくつもある案件の合間を縫って開発を行うものです。
それゆえ、このような機会がないと開発に没頭できることはなかなかありません。
息抜きではありませんが、エンジニアとし仕事をする上で自分にとっての楽しさを見つめ直す意味でも、重要な活動でした。

おわりに

メンバーそれぞれが普段からなんらかの技術に触れており、とても技術力の高いチームだったため、スムーズに作業が進みました。
気づくとあっという間に過ぎてしまった3日間でしたが、密度の高いコミュニケーションを取りながらチーム開発に取り組んだ経験は、とても貴重なものです。

今回の学びを、普段の業務にも活かして繋げていけるよう、今後も取り組んでいきます。