はじめに
こんにちは！ 初めまして！
今年の新卒としてアスクル株式会社へ入社したラーメン (@ramendaDev) です。
今回の記事では、 2022年8月6日-8日にかけて開催された、ヤフー株式会社主催の「Internal Hack Day19」について振り返ります。
昨年のアスクルチーム参加の様子
そもそもInternal Hack Dayとは
「Internal Hack Day」とは2007年からヤフー株式会社の社内イベントとして開催されている、24時間で開発した作品を90秒でプレゼンテーションをして競い合うハッカソンイベントです。 2020年からZホールディングスでの合同開催となり、今年はヤフー、LINE、PayPay、ZOZO、アスクルの5社が参加しました。
今回開発した「振り分け君」について
今回私たちは、Zoomを利用したオンラインでの会議や懇親会などで新入社員や先輩社員、人事などの「役職」の偏りが出ないようにバランス良く人を振り分けるサービス「振り分け君」を開発しました！
Zoomにはミーティングで参加しているユーザを少人数ごとのグループに分けることができる「ブレイクアウトルーム」という機能があります。 新入社員研修ではZoomを利用して会社の業務を理解するオンライン現場研修や、先輩社員とのオンライン懇親会など、さまざまな方と話す機会を頂きました。 しかしZoom内蔵の自動振り分け機能を利用してブレイクアウトルームにメンバーを振り分けると、それぞれの役職や部署といった「属性」は考慮されずに、属性が偏ったメンバーの振り分けになることがありました。 これをどうにかしたい！ と思ったことが開発のきっかけです。
「振り分け君」はブラウザで動くサービスです。
ブレイクアウトルームの数を入力し、ミーティングに参加するユーザの「属性」「名前」「メールアドレス」を入力します。 「属性」とは性別や年齢層、先輩社員や新入社員かなど、ユーザが任意で指定できるグループのことです。 すると、属性が被らないようにブレイクアウトのルームメンバーを、バランス良く振り分けをしてくれます。
Zoom内蔵の振り分け機能はユーザの属性を考慮して振り分けさせることができないので、ここが「振り分け君」の大きな特徴です。
サービスの使い方
- ブレイクアウトルームの数を入力する。
- 「属性」のフォームに「役職」や「部署」などを入力する。
- それぞれに属するユーザの名前とメールアドレスを入力する。
- 「振り分け！」ボタンを押す。
- 振り分け結果が表示される。
工夫した点
ワンクリックコピーボタンの実装
振り分け結果を表示する際にZoomのチャット欄やSlackなどのメッセージツールにすぐ送信できるよう、「結果をコピーするボタン」（ワンクリックコピーボタン）を実装しました。
押すと次のようなテキストが、クリップボードにコピーされます。
【ルーム: 1】 いこみょん いっくん 【ルーム: 2】 たかはち ラーメン
CSVファイル出力ボタンの実装
ZoomにはCSVファイルを使用してブレイクアウトルームの割り当てを事前に行う機能があります。
これは終日メンバーが固定の場合にとても便利な機能です。このZoomの機能を利用するために、CSVファイルを生成する機能を実装しました。
押した時の出力例です。
Pre-assign Room Name,Email Address ルーム1,ikomyon@a.co.jp ルーム1,ikkun@a.co.jp ルーム2,takahachi@a.co.jp ルーム2,ra-men@a.co.jp
この出力されたCSVファイルを、Web上のZoomからミーティングを作成する際に「ブレイクアウトルーム事前割り当て」のところでインポートをすれば反映されます。
振り分け君のリンク
今回制作した「振り分け君」はこちら(https://idaten-hack.github.io/team-generator/)で公開しています。
GitHubリポジトリはこちら(https://github.com/idaten-hack/team-generator)です。
参加したきっかけ
私たちのチームが今回のハッカソンに参加すると決めたタイミングは、新卒研修が終盤に差し掛かった7月上旬でした。 その理由は、自分たちのスキルアップのためや、他のグループ企業のエンジニアとの交流をしてみたかったからです。 社外の方の発表や作品を通じて、私たちにも新しい考えが生まれ、いい刺激を受けられるのではないかと思いました。 また、新卒で入社された先輩たちも参加されている方が多く「楽しかった」という声を聞いていたので「面白そう！」という興味がありました。
当日までにやったこと
Hack Dayでは事前にコードを書くことはルール上NGでしたが、アイデア出しや設計書を作成するのはOKでした。 そのため、先行してやれることはやっていこう！ のスタンスで、何を作るかを決めるための話し合いをしました。 出たアイデアとして新卒研修期間を振り返り、働き方に対して改善できそうなWebサービスや、夏らしく花火を打ち上げたりするアプリなどがありました。 その中から、研修期間中での座談会で 「同期ばかりのルームで先輩社員の人数が少なくなり、あまり話が聞けずもったいない時間だった」
「Zoomのランダムでブレイクアウトルームを振り分ける機能がイケてない」
などと感じた、という話が挙がりました。 今回はここに焦点を当て、 技術的に改善できないかをテーマに決めました。 お世話になった人事の方への恩返しを含めてチームの気持ちが固まった準備期間でした。
当日の行動
Hack Day1日目の午前中は、2日間のスケジュールとTODOリストを作成し何をすべきかを洗い出しました。 今回は大きく「結果出力」「振り分け処理」「Webフロント」の3つに分け、役割を分担した後に開発を始めました。
私はWebフロントとして、ユーザが入力するフォームの開発をしました。 今回はチーム内での議論の結果、JSのライブラリやフレームワークを利用せずに開発しました。 理由として、React.jsやVue.jsを利用する際の学習コストがあると考えたためです。
このような形で進めて行きましたが、属性を増やしたり、ユーザ追加をする際の入力フォームの追加、削除の処理で予想以上に時間がかかってしまいました。 追加ができても削除ができないことや、1回追加ボタンを押すと5個ユーザ入力フォームが出てきてしまうバグが発生し、とても苦労しました。
メンバーとも相談し、最終的にはinnerHTMLプロパティを利用してフォームのHTMLを挿入する関数を作成しました。
script.jsへのリンク
2日目からは開発と並行して、発表のためのプレゼン資料の作成に取り掛かりました。 発表時間は90秒に収めなければならないので、「メンバーが口に出して発表する形式」と「サービス紹介動画として発表する形式」の2つで検討をしました。 議論の結果、「資料を作成する時間が間に合うのか」という観点から、前者の方に決まりました。
さまざまなことがありましたが、無事に2日目終了時点で開発完了しました。 2日前にはアイデアでしかなかったものが実際に動いた時の感動は大きかったです。
今回の学び
今回のHack Dayで学んだことを各メンバーそれぞれに聞いてみました。
ラーメン (@ramendaDev) (入力フォーム担当)
- ライブラリやフレームワークを導入するべきでした。
- 学習コストがあるとは思うが、サンプルコードを参考にしてこの作品へ落とし込むことは可能だったと思います。
- メンバーの中にはReactを触ったことのある人がいたので、その人からアドバイスを受けることができました。
- 開発開始前にライブラリの選定や学習時間を設けたほうがよかったです。
- JSのライブラリやフレームワークを利用していれば、実装時間を短縮できた可能性があります。
たかはち (@nemuki_dev) (CSV出力と画面デザイン担当)
- 対面での開発は楽しかったです。
- 基本テレワークで仕事をしているので開発メンバーがずっと近くにいるという体験が初めてでした。
- わからないところを気軽に聞けたり、モブプロをすることが楽だったりメリットをたくさん感じました。
いこみょん (振り分けロジック担当)
- 見切り発車だったが最低限の要件を満たすロジックを早めに書き終えられたのがよかったです。
- 普段使わない脳の部位をフル活用しました。若返った気がします。
たねだ (バックエンド担当)
- 想像上のアイデアからではなく、実際に起こった課題をベースに企画がスタートしました。きちんとお客様のことを考えながら開発・企画したことによって、実用性のある成果物に繋げることができました。
- このアプリケーションを利用するユーザが、うれしいと思ってもらえる機能を追加できてよかったです。
- 自分たちの作品をチームで共有して終わるだけでなく、発表してグループ社員の方々からフィードバックを頂けたことは大きな経験でした。
- 他社の社員との交流会があり、技術だけでなく人柄などが知れて世界が広がった気がしました。
全体を通しての感想
Internal Hack Day19に参加してよかったです。 そう思った理由は2つあります。
まず第一に、自分が知らなかった技術の知識を得ることができたからです。 ユーザ振り分けのロジックや、今回詰まった部分でもあるWebフォームの複製は実装していて新鮮でした。 私の学生時代にはオンラインでのハッカソンイベントが多く、複数人で同じ場所にいながらの開発経験がなかったのでとても楽しかったです。 2日間での開発はとても大変でしたが、自分一人で開発することとは大きく異なるので、今後の業務中の開発に役立てられる部分もあると感じました。
第二に、他社のエンジニアとの交流で自分の輪を広げられたからです。 発表を聞いてさまざまな技術やアイデアに触れることができたので、とてもよかったです。 Hack Day終了後にも情報交換の場や、集まる場もあれば嬉しいと思いました。 私の当初の目標であった他社エンジニアとの繋がりもできました。 出会った縁は今後も大切にしていきたいです。
終わりに
最後になりますが一緒に参加をしてくれたチームの皆、このInternal Hack Day19に関わったすべての皆さま、本当にありがとうございました！ また、ここまで読んでいただいた皆さまもありがとうございました！
