CHILLNNインターンが、水星のオフィス掃除を快適にするアプリを開発してみた。

2023年3月13日 11:43

こんにちは、CHILNNでエンジニアインターンをしている井上ひかりと申します！
今回は開発したおもしろ謎アプリ、『掃除当番くじ』について水星とCHILLNNの裏話も交えながらサクッと解説していきたいなと思います。

なぜ、お掃除当番くじを作ったの？？

私の所属するCHILLNNのインターン研修最終課題には、実務とほぼ同じ技術スタックでアプリを1人で作りきるというタスクがあります。
これが終われば、晴れてエンジニアとして実務に参加できるわけですが、この最終ステップが1番難しい、、！！
成長できる重要なとこでもあるんですが、突破したインターン生それぞれに、酒のつまみにできるくらいのネタがたくさんできる時期なんですね。
そんなこんなで色々とアイデア出しはしてみたんですが、なかなかこれだっ！というものにたどり着けずウンウンうなっていたところ、あるエンジニアの先輩から鶴の一声が…

🙎「俺、３回連続、掃除場所が床だったんだけど、
お掃除くじとかいいんじゃない？」

私たちのオフィスは2階建の一軒家。
1FはCHILLNN、2Fは水星の部屋として分かれています。

毎週月曜日には、出勤メンバーがそれぞれ担当の場所を掃除するルーティンがあります。
ただ、クライアントMTGや、外出の用事などで参加できる人数も日によって様々だったりするので、これまでは掃除箇所の割り振りは担当社員が毎週、出勤している人数を調整しながら、手作りのくじをみんなに引いてもらい、掃除場所を決めるシステムでした。

しかもオフィスの1 階が男性用トイレ、2 階が女性用トイレなので女性用と男性用に分割しているので、女性用くじ、男性用くじと分けて対応しなければいけないのです。

これは振り分け担当者にとってなかなか大変な仕事だ！ということで、なんとかシステム化できないかなぁという課題感が身近にありました。

実際にアプリを作ってみた 🐥

このアプリでは、
「いつでもくじが簡単に発行・実行できて、制限時間内であればオフィスのどこにいても何をしていても参加できる」状態を理想としました。

具体的なフローは、

　　1. 管理者が毎回のくじの基盤となるマスターデータを作る
　　2. くじを発行する
　　3. くじに参加できるリンクが貼られた通知がSlackに飛ぶ
　　4. 参加者は通知のリンクからアプリを開いてくじに参加する
　　5. 制限時間になったらSlackにリマインドが飛ぶ
　　6. 管理者が人数を微調整してくじを発行する
　　7. くじの結果がSlackに届く

なんですが、これだけだと絶妙にわかりにくいと思うので、具体的に解説します！

1. 管理者が毎回のくじの基盤となるマスターデータを作る

まずは毎回のくじの基盤となるマスターデータを作成します。
掃除場所の名前と、なんとなくの人数を割り当てて作っていきます。そしてトイレ担当の振り分けは、Optionとして設定することでくじに参加する前に分岐できるようにしました。

そして、参加を促す通知を送るSlackのチャンネルと、時間を設定しておきます。その日中なら10時でも15時55分でも好きな時間に設定可能です！
基本的にここで作ったくじの基盤となるデータは毎回いじらなくてもいいようにして、くじ発行の負担を減らしています。

2. くじを発行する

制限時間を設定して、くじを発行します！
今日出社してる人が明らかに多いぞ or 少ないぞ、なんて時はここから微調整もできますが、 基本的には、毎回のくじの発行は制限時間を決めるだけに設計してます。（簡単ですね〜！）

3. くじに参加できるリンクが貼られた通知がSlackに飛ぶ

ステップ1で設定していた時間になるとSlackに通知が来ます。参加できる方は、このリンクから入ってくじに参加します。

4. 参加者は通知のリンクからアプリを開いてくじに参加する

ページを開くと👆のようなページが現れます。
（＊新規の場合はユーザー登録が必要です！）
項目にチェックを入れてくじに参加するだけで、いつでもどこでも参加できちゃいます。ちなみにチェック項目にはキャッシュを持たせてるので、実際には参加するボタンを押すだけです！

5. 制限時間になったらSlackにリマインドが飛ぶ

ステップ2で設定した制限時間になると、またまたSlackにリマインドが飛びます。ちなみに、管理者であれば（Admin権限を持っていれば）誰でもくじの実行が可能になってます。

管理者権限も付与できます👇 !

6. 管理者が人数を微調整してくじを発行する

管理者が参加人数を確認、くじの掃除場所それぞれの人数を微調整して参加人数と合うように調節してからくじを発行します。

しかもステップ1で設定したマスターデータが変更されるわけではないので、「今日はいつもより人数少ないから、テーブル拭き担当なし！」なんて時は、テーブル拭きの人数を0にすることもできます。
これで、集まらずに参加人数を確認できちゃうわけです！便利ですね！🎉

7. 結果がSlackに届く

掃除開始のタイミングにSlackにて結果が届きます。
各自スムーズに担当場所に移動し、掃除を始めることができるようになりました！

　🧹 　🧤　 🧽　

ちょっとエンジニアっぽいことも書かせてください！
ということで、今回作成したネットワーク構成図はこちら👇

依存関係も書いちゃっててツッコミどころはあると思うんですが、大体こんな感じです。

Great Hackersの皆様、まだまだ駆け出しなので生温かい目で見守っていただければ嬉しいです🙇‍♀️！

作り上げるまでに大変だったこと

そもそもアプリってどうやって作るんや！

CHILLNNに拾ってもらうまで　📦🐕
私は国際系学部の大学3年生で、プログラミング自体全くの初心者でした。プログラミングを始めたのが大学3年生の5月中旬。学生のハッカソン(コンペっぽいもの)に数回出場したことがある程度。当時は先輩のコードを真似することが多く、自分でアプリを作るにはほど遠い毎日でした…。
焦りを覚えて応募したインターン先は107社にのぼり…、でも現実は本当に厳しい…。実務経験がないエンジニアを取って、育ててくれる会社はとーっても少ないんです！！返答が来た20社ほどと面接し、受かったもの数社から、1番成長できそうで雰囲気が良かったCHILLNNを選びました！

それまでプログラミングとはほぼ無縁の世界で生きてきた私にとって、CHILLNNの研修はとても歯応えがありました。
研修はステージが3段階に分かれているんですが、突破したインターン生共通の認識は大体こんな感じです笑

【STAGE 1】：エンジニアの基礎　　
（ふむふむなるほど、プログラムってこうなってるのか、なんとなくわかった気がする😁）

【STAGE 2】：開発基礎　アプリを真似して作ってみる
（うわ、内部ってこうなってるの？　エラーが解決できない、Step1何やってたんだろう😭）
　　↓
（よし、なんとなくわかった気がする？😁）

【STAGE 3】：開発実践　自分でアプリを作ってみる
（エラーしかでない毎日。Step2何やってたんだろう😵‍💫）
　　↓
（よし、大体のエラーも一人で解決できるぞ！😁💪）

CHILLNNの研修課題はとにかく考えさせる構成になっています。
エンジニアはエラーと向き合うことが多い生物です。一つ一つ自分で調べて、コードを書きまくって壁にぶち当たって自分で解決できるようになる必要があるのです。

研修に必死だった毎日　ーデバッグができなかった日々

研修中は基本的にオフィスに通わせていただき、一つ席を貸していただきます。なので、作業中、社員さんやインターンの先輩が業務している様子が見えるんです。そんな中ひとり、エラー祭りを開催してしまう私…。これは私の性格的にも「自分だけ何も貢献できてない！😭」と焦ってしまうこともありました。
そんな私に、CTOの永田さんは

「エンジニアはエラーにぶつかったぶんだけ強くなれる」

という言葉をよくかけてくださいました。
特にSTAGE3では、ひたすらエラー大感謝祭です。忙しい社員さんに、毎回エラーのお伺いに行くことはできない！自分で解決できるようになりたい！とコードに向かいました👩‍💻🔥 自力でエラーが解消できるまで数週間、永田さんの言葉を何度も自分に言い聞かせて、ひたすら粘り続けました。
すると、最初はポンコツすぎて3日かかっていたデバッグが、何度もやるうちに同じようなものを大体1時間ぐらいで解決できるようになり、どんどんコツを掴み始めるようになり…!
大学も国際系でかなり忙しい学部だったのですが、空きコマや土日をフル活用して研修をなんとか突破しました 🎉 ! 偉そうなこと言ってますが、実はフルコミット3ヶ月が目標の研修を、大学と掛け持ちとはいえ5ヶ月もかけてしまいました。。
でも心が折れそう( いや、あれは折れてましたね笑 )な時も、いつも社員さんやインターンの先輩方が声をかけてくださり励ましていただきました。土日にオフィスに行っていた時も永田さんや先輩方がたまに顔を出しに来てくださって、とっても心強かったです！本当にいつも色々とありがとうございます！

こだわったポイント

マインドっぽい話が続いたので、アプリの話に戻ります！このアプリ制作で特にこだわったポイントを2点とりあげます。

こだわりポイント①：ユーザーに不安を抱かせないUI・UX設計

私がいなくても、迷いなくアプリが運用できることを今回のアプリのUI・UX設計のゴールにしていました。
元々、ハッカソンでユーザーに使いやすいUI・UXの実装経験を模索してきたことはありましたが、今回は身近に良き具体例としてCHILLNNがあり、今回アプリを作る私にとっては最高のお手本でした。
迷った時や困った時はCHILLNNのページをぽちぽちさわって、再現できないか何度も試しました。具体的には、ナビゲーションを横に配置し、How to Useをつけることで、くじのフローがわかるようにしています。

こだわりポイント②：オプション機能とくじのロジック

細かいポイントにはなりますが、端的に
　男性だから男子トイレ、女性だから女子トイレ、
と振り分けるのではなく、
　普段一階のトイレを使用する人、普段二階のトイレを使用する人
とオプション機能をつけて、ジェンダー的にも配慮できるように設計しています。

男性や女性とカテゴリー化すれば、もっと簡単に課題解決はできるんですが、色々なユーザーのペルソナを作って、気持ちにとことん寄り添ってみました！

また、上記のオプション機能を考えながらも結果にランダム性を出すことも、時間をかけて悩みこだわったポイント。
ランダム性については、Fisher–Yatesアルゴリズムというものを使っています。簡単に言うと、くじに参加した人のデータの入った配列を、ランダムに並び替えるためのロジックとしてこのアルゴリズムを使用しています。

前回のくじの結果と違うものを割り当てる方法も考えたんですが、オプションに対して当てはまるユーザーが2、3人の場合、ランダムとは言いきれないのではと思い、採用しませんでした。

くじ全体のフローとしては、まず、この当てはまるユーザーがオプションごとにランダムな配列にされ、オプション付きのくじに割り当てられます。そして、割り当てられた人以外がランダムな配列にされ、残りのくじに割り当てられていきます。
アルゴリズムに慣れておらず、この部分のコードが200行くらいになってしまいましたが、今後改修していければと思っています！

実際に使ってもらってどうだったか

使い続けてもらえそう！

まだまだ改善の余地はあるんですが、毎週運用してもらっていて、課題解決もできている状態です！
ですが、まだまだ改善の余地はあるなと感じています。
例えば、オプションにチェックマークをつけないでくじに参加するとトイレ掃除を回避できてしまうなど、、(ダメ！！ゼッタイ！＼＼\٩(๑`^´๑)۶//／／)

なので、今後オプションに参加した人を管理者が見れるようにしようかなと思っています👀 !

実務に入ってまだ数日ですが、反省点としてやはりコードの保守・運用・可読性という観点から改善できる点が見えてきました。サーバーサイドやコンポーネント分割など、まだまだ色々とアップデートできそうです！ユーザーのフィードバックをもとに、これからも改善していきます！

CHILLNNのインターン、どうだった？

結果的に、エンジニアとしても人としても成長できたと感じています！
色々と、柔軟かつ実践的に試せるスタイルの研修が、私には合っていました！デバッグが自分でできるようになるまでは大変でしたが、それ以降は自分のイメージを形にしていくのが楽しくて、寝食を忘れて没頭していました。
エンジニアとしては、卵からひよこになりたてぐらいなのでまだまだですが、これからも色々と実務でもCHILNNに貢献できたらいいなと思っています！

CHILLNNのインターンに興味のある方へ

やる気に燃えている、プログラマーになりたいみなさん、 CHILLNNのインターンに参加してみませんか？？
採用情報は下記をご確認ください。

↓ カジュアル面談はこちらから！

よろしければ、ぜひサポートをお願いします💘いただいたサポートはホテルのさらなる満足度向上のために活用させていただきます🙇🙇