こんにちは!
入社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ブランチで大コミット→大量コンフリクト、という事件もありました。
それでも、メンバー全員が同期だったこともあり、仲良く楽しみながら、最後は納得のいくプロダクトを作ることができました!
メンバー各々が、それぞれ成長を実感する内容となり、今後の業務にも学んだことを活かしていければと思っています。
ぜひみなさんの会社でもハッカソン合宿、行ってみてはいかがでしょうか。