自己紹介
はじめまして、以前の記事で登場したことがある L です。
最近は各種資格試験と戦っていて、疲れています…
今回は出勤状況を確認するアプリを作りましたので、アプリについて初めてのブログを書いてみました。
開発背景
開発の背景として、主に2つのきっかけがあげられます。
一つ目は、在宅勤務の定着により、勤務状況がわかりづらいという問題。
今年の3月27日から弊社ではリモートワークが導入されていますが、仕事の内容によって出社または外出して作業をすることもあります。
そのため出社、在宅などの勤務状況の把握が難しくなっています。また、技術統括部はコアレスフレックスという比較的に自由な勤務制度を採用しています。各自の業務に合わせて勤務することができ、出勤・退勤時間は特に定められていません。そこで、出勤・退勤状態の把握はより難しくなっています。
二つ目は、出社して自席でビデオ会議に出席するなど集中したいときに、声かけられることがありました。特に技術統括部はコロナウイルスの感染対策防止策として、個々のデスクの上にパーティションが設置されているので、誰が何をやっているのか把握しにくくなっています。声をかけて返事がないから、席のそばまで行ったらイヤフォンを着けて、ビデオ会議中だった、という感じです。
このような場合、Google Calendarでいちいちメンバーの予定を確認することなく、一目で在宅、外出、会議などの勤務状態をわかるようなアプリがあればよいなと思いました。これが開発のきっかけです。
アプリ概要
■構成
アプリの構成について紹介したいと思います。
構成図は以下のようになります。
フロントエンドは、定番のHTML/CSSを使い、JavaScriptの代わりにVuejsのCDNを使ってみました。
サーバーサイドは多くのWebアプリと同じで、Webサーバーとデータベースで構成しました。WebサーバーにApache、データベースにPostgreSQLを使用しました。また、今回はOAuth2.0を用いて認証機能を追加し、ユーザーを確認する仕様にしてみました。
■実際にできたもの
次に、アプリの画面をお見せしたいと思います。
一目でわかるようにデザインをできるだけシンプルにしました。
※このスクリーンショットでは実際のメンバーの名前を「X」に置き換えています。
勤務状況は「外出・在宅・出勤・退勤・休み」の5つのステータスに分けました。
ステータスの変更は、ドラッグアンドドロップでできる仕様です。
ビデオ会議など集中したい場合は、サブステータスとしてダブルクリックとバインドして、「取り込み中」であることがわかるようにしました。自分のアイコンをダブルクリックすると下図のように赤いマークがつきます。
また、アプリはOAuth2.0を使って認証機能を実装しているので、社内メンバーのみアクセスできるようになっています。しかし、現段階では部内限定で利用しているアプリのため、部のメンバーしかアイコンの位置を移動させたり、赤く表示させたりすることはできません。
さらに、簡単にメンバーの状況を確認できるように、メンバーの検索機能とチーム名によるフィルター機能も実装しました。これで特定の人のステータスを即時に把握することが可能になります。
今後
今後の課題として、勤怠システムと連携し、出勤・退勤の打刻をするとアプリのデータ更新を自動でできるようにしたいと考えています。
現在は社内ネットワークもしくはリモート接続時のみアプリを使用することができますが、スマートフォンなどの移動端末でも使えるように、また、現在、弊社で注力している、Oracle Cloudへの移行も予定に入れたいと思います。
