はじめに

初めまして！私たちはソフトウェア開発研修の新人研修チーム「ASザシアン」です。

2022年の6-7月に、ソフトウェア技術部主導の新人研修でオンラインコミュニケーションアプリのチーム開発を行いました。

今回は、私たちが２ヶ月間の研修で作成した社内マッチングツール「OfficeRing」について紹介したいと思います！

チームメンバー

今回の研修にはKDDI社内複数部署、およびKDDIグループ3社の新人エンジニアが参加しました。その中で、私達のチームはKDDIの各部門から1名の計6名のメンバーで構成されました。

開発したアプリケーション

OfficeRing

概要

じぶんらしく、つながれる、OfficeRing

OfficeRingってどんなアプリ？

コロナ禍で他チームとの接点がないそこのあなた！

このアプリでは他チームの人の趣味・スキルがわかるため、気軽に接点を増やすことができます。みんなの趣味・スキルがわかるのは楽しいですね。

また、社内限定にしてあるため、安心して使うことができます。

背景

今回対象としたペルソナは以下のような問題を抱えていました。

• チーム以外の先輩や同期と話す機会が少ない

• 雑談を意図的にいれないと、同じチーム以外の人と話せない

そこで私達のチームでは、

• すでに知っている人とも、面識のない人とも、もっとコミュニケーションをとりたい

• スキルアップしながらもプライベートの時間を充実させたい

という方針のもとコミュニケーション機会を創出するツールOfficeRingの開発に着手しました。

ユーザーストーリーは以下のようになっています。

ハイブリッドな働き方により、チームのメンバーと出社日が違うことも多くなりました。それにより、気軽に話せる同期・先輩がいない、いても話しかけるタイミングがわからなくなりましたよね。

ランチ・休み時間などに人に話しかけたい...そんな時に気軽に話しかけられるきっかけを提供するのが今回開発したOfficeRingです。

OfficeRingは出社日の違う面識のない人とも接点をつくり、さらにBotやChatを用いることでコミュニケーションの活性化・コミュニティの拡大に繋げ、プライベートの充実を図るアプリです。

開発機能

• 新規登録/ログイン機能

メールアドレスとパスワードでログインできるように実装を行いました。新規登録画面とログイン画面の二つに分かれています。パスワードにはバリデーションをつけました。

• プロフィール登録

新規登録後にプロフィール登録を行います。名前・所属・勤務内容などの基本情報のほか、趣味やスキルなど気の合う人が見つけやすくなるような情報も入力できるようにしました。必須の情報は入力されていないと次のページへ進むボタンが押せないような工夫もしました。

• ユーザー一覧閲覧

ユーザー一覧画面では自分以外の各ユーザーのステータスを確認することができます。このステータスによって、相手が出社orリモートなのか、休憩中or仕事中なのかがわかるようになっています。自分のステータスはヘッダーの右上にある自分のアイコンをクリックすることで、どのページからでも編集することが可能です。

また、マッチングアルゴリズムを作成し、マッチング度の高い順からユーザーが並ぶようにしました。これにより、趣味やスキルが同じ人、勤務地が同じ人が探しやすくなります。

各ユーザーのカードの下にはボタンを二つ作成し、その人とのチャットや友達登録を手軽にできるようにしています。

• プロフィール詳細の閲覧

プロフィール詳細画面では選択したユーザーの詳細な情報を確認できます。一覧ページでは表示されない情報もここで確認することができます。

また、ユーザー一覧ページと同じように、ページ下部にボタンを二つ作成し、チャットや友達登録を手軽にできるようにしています。

• プロフィール編集

プロフィール編集画面では、自分のプロフィールを編集することができます。入力欄には現在データベースに保存されている自分のプロフィール情報がデフォルトで入力されており、その内容を自由に編集することができます。

プロフィール登録画面と同じように、必須の情報は入力されていないと次のページへ進むボタンが押せないような工夫もしました。

• チャット送受信

チャット送受信画面ではページをリロードしなくても、リアルタイムにチャット内容が更新されるように実装しました。また、送信時間の表示、左の名前の下に最新のチャット内容の表示など、細かい部分も工夫しながら実装を行いました。

• グループ一覧の閲覧

グループ一覧画面では、さまざまなグループが表示され、ユーザーが自分が参加したいグループを閲覧できるようにしました。各カードの右下には参加しているユーザーのアイコンが表示されています。このカードをクリックすることで、そのグループのチャット画面に遷移するような仕組みになっています。

今回はアルゴリズムの実装が間に合わなかったのですが、グループごとに各ユーザーに対するマッチング度を実装する予定です。また、新しいグループを作成できるようにもしたいと考えていました。

使用技術

【アプリ開発・インフラ構築】

• HTML/CSS/JS

• Node.js

• JQuery

• AWS

【デザイン】

• miro

• prott

【動作確認】

• postman

【エディター/コード管理】

• GHE

• VSCode(Live Share/Live Server)

• iTerm2

【計画会議/タスク管理/レビュー】

• miro

• confluence

• JIRA

• Hatjitsu

【ビデオ会議/情報共有】

• Discode

• Slack

【CI/CD】

• Github Actions

【デザインアイデア創出・コミュニケーション強化】

• ピクトセンス

• ボードゲームアリーナ

• Gartic Phone

• 飲み会

インフラ構成

今回、API GatewayとLambdaを用いたサーバレス構成をとっています。 画像中央のS3はWebページのファイルを保存しています。バックエンドの処理はAPI Gatewayとlambdaを用いてDBや画像を保存するS3と連携しています。DBにはユーザー基本情報、趣味、スキル、チャット内容、グループ情報を保存しています。IPアドレス制限機能によってwebページのアクセスを制限しています。また、cognitoを用いてユーザー認証を管理しています。

感想

チームメンバーから一言

Kさん「わからないことだらけでしたが、楽しく学ぶことができてよかったです！知識を生かして、業務効率化に取り組みたいと思います。」

Nさん「開発に必要な知識を学ぶことができました。この経験を業務に活かしたいです。」

Hさん「初めてのチーム開発は非常に楽しくて、多くの学びがありました。この経験を生かして、周囲を巻き込む協調性をもって業務に取り組みたいです。」

Yさん「ユーザーシナリオ作成から開発までペルソナが使うことを考え取り組めました。ユーザー視点を忘れずに業務にも取り組みます。」

Yさん「触れたことのないAWSサービスにたくさん触れることができ、より詳しくなれました。開発はやっぱり楽しい。最高のメンバーでした！」

Wさん「AWS未経験からたくさん成長できました！一番楽しい研修でした。アジャイル開発の知識をこれからも活用していきます。」

最後に、このような貴重な研修の機会を設けていただき、誠にありがとうございました！この研修を機にAWSの資格をとったメンバーもおり、大変貴重な研修となりました。

研修中ずっと支えてくださったチュータの皆さん、本当にありがとうございました。

今後の目標・おまけ

OfficeRingの最終目標は社内専用サイトに掲載され、社員全員に活用してもらうことです。

最後に、メンバーが考えた力作のサービスリリース後のユーザーストーリーです。ぜひ最後まで読んでください！

終電を待つホームである人を見かけた。でも声をかけられずにいた。。。。

「ピロピロ、、ピロピロ、、」

8:30に時計が部屋中に鳴り響いたと同時に肌寒い風が部屋を吹き抜けた。

私は達也。現在IT企業で勤務をする26歳。春から東京に上京しはや２年を経とうとする。昨年はリモート勤務が多く同期や先輩方と話す機会も少なくコミュニティは多いとは言えないだろう。

達也はその大きな音で起き、冷たい水を一口飲んだ。

「今日は出社か、、、」

そう。普段はリモート勤務が多い彼だが、本日は出社しなくてはならない。

「よし。行くか。」

しかし、彼の後ろ姿は自信に満ち溢れていた。

これまで彼は基本的に週２回の出社であった。しかし、出社してもチームメンバー以外とは出社日が合わないため、他チームとコミュニケーションをうまくする事ができていない。また、先輩や上司と話す機会や同期と集まる機会が少ない。そのため、達也は出社することを億劫に感じ、基本的にはリモート勤務で業務を遂行したいと思っている。

そんな彼が今日は出社をすることを億劫を感じていない。それどころか自信に満ち溢れた姿で出社準備をしているではないか。

達也は猫に餌をあげ、

「行ってきます。」

そう呟いて部屋を後にした。

彼は昨日リリースした、「Office ring」を利用している。このサービスは、出社日が違う中で、面識のない人と接点を与えてくれる画期的な社員向けマッチングサービスなのである。趣味やスキル、勤務地、休憩時間、年齢、性格等でマッチングすることが可能だ。また、マッチングするだけでなく、会話が途切れないよう手助けBOTやコミュニケーションを円滑に取るためのチャット等の機能も備えており、繋がりの中で資格やスキル等の質問も可能になっている。こんなに素晴らしいサービスを利用する以外考えられない。

達也は「Office ring」を使い昼はランチ、夜の飲み会の約束、また、後輩の女の子から達也が取得している資格の質問が来ているのだ。達也は出社していても上手くコミュニケーションを取れず、コミュニティも少なかったが、この「Office ring」を活用することで、コミュニケーションの活性化とコミュニティの拡大を図り、仕事もプライベートも充実し心に余裕ができて生活することができるようになったのだ。

「先輩！！マッチングしたあいかです。お時間大丈夫ですか！？」

後ろから、透き通るような白い女の子の姿が見えた。

「あ！！！！！！！！！！」

達也は笑顔で手を振った。

「明日の天気は晴れ、、、晴れのち、、、、、、、、、」

達也の耳にはかすかにTVの音だけが聞こえていた。