ハッカソン合宿制作記①|勤怠メールを楽に管理するニフポッチ

こんにちは!
入社2年目の伊東、久保田、増尾、米増です。

弊社では、毎年エンジニア内製力強化のため、エンジニア定例なるものを行っており、先月その集大成となるハッカソン合宿を行いました!

※ハッカソン合宿について詳しくはこちら

ハッカソン合宿では、受講者が3~4人のチームに分かれ、それぞれがこれまで学んだことを活かして1つのプロダクトを作成します。
本記事では、勤怠メール管理を楽にするウェブサービス「ニフポッチ」を作成した、チーム「リトルグッチーズ」の制作記をご紹介します。

メンバー紹介

伊東(PO)

DB、ログイン、ロジック担当
うまいなーと思わせる施策に出会うとテンションが上がる
家にこもりがち
業務ではニフティニュースの開発・企画を担当

久保田(チームリーダー)

メールロジック担当
趣味はゲーム漁り
ニフティ温泉の開発を担当

増尾

フロントコーディング担当
ABテスト大好き
趣味は激辛巡り、週一で中本に通う
業務ではニフティ不動産の企画を担当

米増

フロントデザインを担当(CSS,Javascript)
趣味は旅行で、年4~5回海外旅行に行く
ニフティ温泉の新規獲得営業を担当
全国各地の温泉を営業中

プロダクトについて

会社に勤務していると、フレックス出社や外出をするたびに社内に勤怠メールを送る必要があったりして、面倒に思ったことはありませんか?

私たちが今回作成したのは、勤怠メールを自動で送信してくれるウェブサービス「ニフポッチ」です。

ワンクリックで勤怠メールが送れるように、という思いから名づけましたがワンクリックでは無理でした笑

ニフポッチの使い方

では、さっそくトップページにアクセスして、使い方をご紹介します。

トップページには、フレックス出社、フレックス退社、午後半休、外出など勤怠メールを送る必要のある項目がずらっと並んでいます。必要な項目をクリックしましょう。

ここでは濃青色のフレックス出社を選んでみたいと思います。

フレックス出社をクリックすると、↓のような画面が出てきました。

フレックスの理由や到着時間をプルダウンで選択し、送信ボタンをクリックしましょう。

すると、↓のように送信完了画面が出てきて、裏では勤怠メールの送信処理が走ります。

デザインにはまるで一貫性がありませんが(笑)、懐かしいアーケードゲームのようなデザインで明るい気持ちになります!

さて、これで会社のメーリスにフレックス出社メールが送れたはずなので、実際に確認してみます・・・

今回はテストのためgmailを使用していますが、問題なくメールが送れているようです!

なお、勤怠メールは出先で送ることも多いので、こんな感じでレスポンシブにも対応しています。

システムについて

ニフポッチの作成には、PHPのウェブフレームワークであるLaravel を使用しました。

Laravelを使うと、ルーティングやMVCの管理だけでなく、ログイン機能やセッション管理、データベースの構築も簡単に行うことができるので、とても便利です。

ログイン、DBについて

ニフポッチでは、勤怠メールを送信するために社員一人ひとりのログイン情報と勤怠メールの送信先メールアドレスの登録が必要です。

そこで、↓のような認証フローを作成しました。

ログインすると、メールアドレスをforeign keyとし、会社が保有する社員DBより氏名が抜かれ、メール送信時に使用できる想定となっています。

ログイン済みの場合は、勤怠メールの送信先メールアドレスが未設定の場合のみ、設定画面に飛ばされます。

Laravelの機能でセッション管理も行えるので、ログインから一定時間が経過するとセッションが切れ、再びログイン画面に飛ばされます。

メール送信機能について

ニフポッチでは、「送信」ボタンがクリックされたタイミングで裏側では勤怠メールを送信する必要があります。

本来は社用メールアドレスを使用するはずですが、今回はテスト動作のためGmailAPIを使用する予定でした。

しかしよくよく調べてみると、Gmail APIを使用してメールを送信するためのoauthの知識と時間が足らないことが判明したため、今回はSendGridというサービスのAPIを利用してSMTPサーバー経由で認証済みメールを送ることにしました。

おわりに

チームリトルグッチーズでは、非エンジニアや文系出身の仮エンジニアが多く、四苦八苦しながら開発を行いました。

gitの使用が初めてだったメンバーもいたので、masterブランチで大コミット→大量コンフリクト、という事件もありました。

それでも、メンバー全員が同期だったこともあり、仲良く楽しみながら、最後は納得のいくプロダクトを作ることができました!

 

メンバー各々が、それぞれ成長を実感する内容となり、今後の業務にも学んだことを活かしていければと思っています。

ぜひみなさんの会社でもハッカソン合宿、行ってみてはいかがでしょうか。