【React開発】

NextSHIFT 実装

　技術説明

本資料について

本資料では、NextSHIFTで実装した機能と、それを支える技術についてご説明します。

システム課で使用可能なリソースを用いたフルスタック開発(Html、CSS、JavaScript（React）、Node.js、kintone、GCP、GoogleAppScript）の参考になればと考えます。

また、アプリケーションのデモと説明動画をYoutubeにアップロードしています。さらに詳しく知りたい方はそちらもご覧ください。

目次

〇全体説明

• 作成したもの
• 機能概要
• 使用技術解説-フロントエンド、バックエンド

〇個別説明

• 機能詳細、実装内容詳細

作成したもの・

機能概要

作成したもの

以下の赤字を担うWebアプリケーション

アプリケーションの全体像について⇒アーキテクチャ

〇NextSHIFT（※命名はChatGPTに依頼）

　-森松工業の全社員の休暇・残業申請の管理を行う

　-間接部門の社員の休暇・残業の申請を行う

〇工場・現場用申請アプリ（2023.10リリース、2024.02高速化・iphon対応）

　-現場・工場社員の申請を行う

〇申請状況一覧アプリ（2023.10リリース）休暇、当日残業、月間残業

　-工場のサイネージ・ディスプレイ等で状況を共有する。

機能概要-申請・管理

〇申請機能

　新規申請、申請データ項目編集、取り下げを行う

〇管理機能

　新規申請、申請済データ項目編集、一括更新（承認、却下、取消、未承認）を行う

機能概要-認証・記録

〇社外からのアクセス防止とユーザ認証によるなりすましの防止

　Google(Gmail）の認証に合わせて、奉行の勤怠情報から生成した

　アプリケーションのマスタと照合し、ログインユーザ名、メールアドレス

　を記録する。

〇申請データに対するトレーサビリティの確保

　申請したデータに対して、いつ、誰が、何をしたかを記録する。

〇閲覧・編集権限の設定

　アプリケーションのマスタを使用して、ユーザー毎に工場単位、人単位での閲覧・編集権限を設定する。

アーキテクチャ

NextSHIFT

(休暇・残業申請管理アプリケーション）

アーキテクチャ-メール通知

間接部門社員

　以下を　追加・削除・変更

　・メールアドレス

　・送信する・しない/0件送信する・しない

　・送信時刻：9:00～17:30（30分刻み）

＜Front-end＞

＜Back-end＞

CRUD

CRUD

GoogleAppScript

メール送信アプリ

0:05に9:00～17:30までの30分毎のトリガをセット

トリガの処理内容

・休暇・残業申請の当日・未承認の件数を算出

・宛先アドレスにメールを送信※

　・時刻、送信する・しない、森松カレンダー

　　による送信判定

CRUD

使用技術

使用技術-フロントエンド

Coding

開発言語：HTML5、CSS3、JavaScript（React v18、ES6記法遵守）

CSSの記述方式：CSS Modules85%、styled-component5%、 inline 10%

グローバルステート管理：Recoil

UIコンポーネント：Material UI

アイコン：Material UI ICon、FLATICON

　　その他：papaparse(CSV出力）、axios(APIコール）、Firebase（認証）

CloudService

　ホスティング:FirebaseHosting

　認証:FirebaseAuthentication

使用技術-バックエンド

Coding

〇フロントエンドで使用するAPI提供アプリケーション

役割：フロントエンド - kintone連携

　ユーザ認証、残業・休暇データのCRUD操作 : Express/Node.js

　 役割：フロントエンド-GoogleAppScript連携

　　　休暇情報のCUD操作: Express/Node.js

　〇バックエンドで使用するAPI提供アプリケーション

役割：Node.js-GoogleCalendar連携

　 　　休暇情報のCUD操作:GoogleAppScript

CloudService

　　APIの実行:CloudRun(Express/Node.jsの実行)、GoogleWorkSpace(GoogleAppScriptの実行)

使用技術-バックエンド

DataBase

〇kintone:

-所属工場マスタ:工場選択に使用

　　-ユーザ管理：認証、権限設定に使用

　　　　ルックアップ：

　　　　　　B@社員マスタ:ログインユーザ用（間接部門社員）

　　　　　　A@社員マスタ:管理される社員用（全社員）

　　-残業申請・休暇申請データ：申請データのプールに使用

個別説明

フロントエンド

個別説明

ログイン・ステート

ログイン機能

ログインは、FirebaseAuthenticationでGoogleを選択している。

これと、GCP側でのポリシー設定で、社外からのアクセスをはじいている。

ログイン情報はブラウザのローカルストレージに格納し、2回目以降の再ログインを省略している。

ログアウト時には、ローカルストレージをクリアする。

〇アニメーション

　ローディングアニメーションはMaterialUIをベースにCSSで実装している。

〇エラーダイアログ

　認証失敗、APIコールエラー時のダイアログ表示も実装している。MaterialUIをベースに実装している。

〇Googleアイコン

　ログイン時にGoogleのユーザプロファイルからプロフィール画像のURLを取得して、後述するステートで管理し

　ている。

ログイン情報・ステートの管理機能

〇ユーザ情報について

　ログイン時、kintoneからユーザに関する主に以下の情報を取得している。

　社員番号、氏名、管理する工場のリスト、管理する社員のリスト

　権限区分（一般、承認者、管理者）、前回選択した申請先　他

〇ステートの管理について

　上記内容をローカルストレージに格納すると同時に、Reactにおけるグローバルステートでも管理している。Redux、useContext、Recoilの中から、Recoilを使用した。選定理由は、実装のし易さと再レンダリングルールの分かり易さであった。個人的に、Reduxは新規開発で使用しない方がいいと思う。

他にも、残業・休暇データ（生データ、フィルタデータ、ページデータ）、

メニューボタンのステータスなど複数のコンポーネントで使用するものは積極的にグローバルステートとした。

個別説明

レスポンシブ対応

レスポンシブ対応

〇レスポンシブ対応で留意した点

　・フォントの大きさ、フレックスボックスによる要素の並び（横・縦）の変更

　・サイドバーの表示、非表示、サイドバー要素をヘッダーに移動

　・テーブル要素の変更、ダイアログの幅の変更

〇ブレークポイントについて

　max:900px(iPadMini:768px向け)、max:400px(iPoneSE:375px向け)としている。

　ブレークポイントの数については、システム課の導入デバイスに合わせて、最小限にし、max-width、min-widthを使用して、大幅な崩れがないように配慮した。

個別説明

申請・管理画面

申請・管理画面

〇所属と氏名の表示

　申請画面と管理画面が分かるように、申請画面ではログインしているユーザの情報を表示するようにした。

〇カレンダーの工夫

　FromとToがある場合はFromの変更に応じて自動でToも変更されるようしている（範囲を広げたいときはToを変更するようにした）

　休暇管理：当月～翌月、休暇申請：前年の当月～翌月

　残業管理：当月、

　※　残業申請の確認には年月のみのカレンダーを使用している。

　※ Material UI のカレンダーの日本語化対応を行っている（ドキュメントが解読できず苦労した）。

〇フィルターの仕組み

　所属（工場・間接）と日付の変更時にのみAPIコールを書けるようにし、それ以外のパラメータはそこからのフィルタリング

　としている。onChangeイベントでの動的なフィルタリングを実現している。キーワードについては、配列の特定の要素の文

　字列の部分一致を実装している。

​

申請・管理画面

〇ページネーション

　ページネーション件数選択（20、50、100）を可能とし最終ページ、最初のページにジャンプを可能としている。

〇一括ボタンの配置と動作

　表示されているページのデータについて、一括で状態（承認、却下、取下、取消、未承認）を変更するボタンを

　配置している（申請画面と管理画面で設置するボタンを変更している）。

　ボタンのクリックにより、変更対象の行とそうでない行の色をOpacityで視覚的に判別できるようにし、そのと

　き、押せるボタンも「反映」「取消」のみとして、ユーザが次に何をするかが分かり易いようにした。

　なお、設定できる状態にはルールがあり、複数の状態が混在している場合も対象を判別して設定可能としている。

　例：承認、却下が押された時⇒未承認のみ対象

　　取消が押されたとき⇒承認のみ対象　　

​

申請・管理画面

〇累計の表示

　累計の残業時間、食事数、休暇取得日数、時間、回数を表示するようにしている。これにより、月別、個人別で累計を

　確認することもできる。　より詳細な集計を行う際には以下のCSV出力で得られるファイルを使用していただくことを

　想定している。

〇CSV出力

　フィルタリングがかかった状態（表示件数）分のデータを出力するようにしている。命名規則は以下のとおり。

　種別(hollidays、overtimes）NNNN（社員番号）

　管理画面：種別_YYYYMMDD_HHMMSS、

　申請画面：種別_id_NNNN_YYYYMMDD_HHMMSS　　

　なお、iPhone、iPadではCSV出力はできないので、CSSで非表示にしている。

〇リフレッシュボタン

　DBとの同期をとるために、最新のkintoneのレコードを取得するボタンを用意した。

個別説明

申請フォーム

申請フォーム

フロントエンド開発において最も時間をとられた部分である。バリデーションチェック、項目選択による表示切り替え、入力可能な値の制限等動きのあるUIを実装している。

〇フォーム全体の動作

-新規としてフォームを開いた場合

　フォームの呼び出しが申請画面ではユーザ（社員情報）が固定で入るようにし

　ている（変更不可）。

フォームの呼び出しが管理画面ではユーザ（社員情報）から入力するとしてい

　る。

​

申請フォーム

〇フォーム全体の動作

　-編集としてフォームを開いた場合

　　ユーザは固定で入るようにしている（変更不可）。

　 　最終更新者、更新時刻の表示とコメント（なぜ編集したか）を設けている。

　　フォームの呼び出しが管理画面の場合は、状態が「取消」、「取下」のも

　　のが編集不可となっている。

　　フォームの呼び出しが申請画面の場合は、状態が「取消」、「取下」、「承

　　認」のものが編集不可となっている。

申請フォーム

〇重複判定

　新規としてフォームを開いたの場合、ユーザ情報確定時、日付・時刻変更時

　に、即時で重複判定を実行している。

　編集としてフォームを開いた場合、上記の重複判定に以下の条件をいれてい

　る。

　フォームを開いた時点での、日付・時刻の場合は重複と判定しない。

申請フォーム

〇アラート

　入力時に即時で反映が行われ、該当箇所にエラーを表示する。

　また、「申請」「更新」ボタンクリック時にもバリデーションチェックを行い、

　エラー判定時はエラーダイアログを表示する。条件は以下のとおりである。

　-社員名が入力されていない。

　-日付・時刻が重複している。

　-食事有りなのに、食事の注文数が０である。

　-残業時間が０である。

　-時間休なのに取得時間が1.00H、2.00H、3.00H以外である。

　-申請理由が空白である

申請フォーム

〇休暇申請

　有給・欠勤・特別・労災：

　　開始日と終了日を選択可能とする。開始日>終了日となった場合は自動で開始日=終了日をセットする。

　代休：

　　取得日のみ選択可能とし、範囲を当月のみとする。また代休該当日を表示し、選択可能日を取得日より前でかつ当月とする。

　　ただし、月の初日のみ代休取得日と同日を選択可能とする。

　午前休・午後休

　　取得日のみ選択可能とし、時間を表示する。時間は変更不可で、8:30-12:00または、13:00-17:30とする。

　遅刻・早退・外出

　　取得日のみ選択可能とし、時間を表示する。時間は変更可能とする。開始時刻の変更に応じて、終了時刻の選択範囲を開始時

　　刻<終了時刻となるように自動でリストをセットする。

　時間休

　　遅刻・早退・外出の条件に合わせて、時間が1,2,3時間以外の時にエラーを表示する。

個別説明

バックエンド

個別説明

API提供アプリケーション

API提供アプリケーション(Express/Nodejs)

〇kintone

□ユーザ、社員情報

　　-ユーザ情報の取得

　 　Gmailアドレスをキーに、NextSHIFT用のアプリからユーザ情報を取得

　-社員情報の取得

　社員番号をキーに、A@日報用社員マスタから社員情報を取得

　□休暇情報・残業情報

　　-休暇情報の追加・更新・取得

　　-取得：キー１：所属工場、日付、状態、キー２：社員番号、日付、状態　件数:最大10,000件

　　 追加：最大100件

　　 更新：項目１：ステータス＋メッセージのみ、項目２：ステータス＋メッセージ＋更新対象項目

※ 状態により、承認時刻をセット／削除している。更新者の氏名+メールアドレスの@以前をkintoneのコメントとして追記

API提供アプリケーション(Express/Nodejs)

〇Googleカレンダー

□休暇情報

　追加：キー：Gmailアドレス、日付、時刻、社員名

　削除：キー：Gmailアドレス※、日付、時刻、社員名

　※：申請時に指定した工場のGmailアドレス（例えばPT課ならpt.common@morimatsu.jp）。

　　　申請時に「間接部門」を指定した場合は、このAPIの処理対象外となる。

　APIの使用方法

　　承認⇒承認の時：前回の情報を削除⇒新しい情報を追加

　　承認⇒承認以外の時：前回の情報を削除

　　承認以外⇒承認の時：新しい情報を追加

個別説明

kintoneアプリ

NextSHIFT用

〇NextSHIFTユーザ管理

　主な管理項目

　ユーザ情報：社員番号・氏名・所属・メールアドレス（

　　　　　　　ルックアップ：B@社員マスタ

　管理工場：工場ID・工場名（ルックアップ：NextSHIFT工場マスタ）

管理社員：社員番号・氏名・所属（ルックアップ：A@日報用社員マスタ）

　ユーザ区分：Administrator/Authorizer/Normal(メニューの表示用）

〇NextSHIFT工場管理

　管理項目：工場ID・工場名

アーキテクチャ全体用

〇休暇申請(iPhone・iPad・PC）／残業申請(iPhone・iPad・PC）

特筆する管理項目：

　kintoneのコメント欄での更新者（氏名＋メールアドレスの@以前）履歴

　残業時間に関する申請値と実績値の個別管理

​

【React開発】

NextSHIFT メール

通知機能　実装

　技術

本資料について

本資料では、NextSHIFTのメール通知機能で実装した内容と、それを支える技術についてご説明するとともに、UIの一覧を掲載します。

Webアプリケーションのフルスタック開発(Html、CSS、JavaScript（React）、Node.js、kintone、GCP、GoogleAppScript）を行っています。

皆様の開発の参考にしていただければと思います。

目次

〇実装内容・技術

• 作成したもの
• 機能概要
• 使用技術解説-フロントエンド、バックエンド

〇UI一覧

作成したもの・

機能概要

作成したもの

残業申請・休暇申請の状況がメールで通知されるアプリケーション

（既存アプリにメニューを追加）　⇒参考：アーキテクチャ

⇒送信対象（メールアドレス）、送信時刻、送信プロパティを

　ユーザで自由に入力できるアプリケーションを作成

（時刻や送信先の変更はユーザ側で行ってもらいたいため。）

​

実装機能

〇メール情報設定機能

■設定可能な項目

　◎基本情報：社員番号、社員名、メールアドレス※

　※メールアドレス、社員名のみ必須とし、社員番号は任意とした。

　　社員番号のBlurにより、社員名、メールアドレスを自動入力とした。

　◎送信情報：送信する／しない、0件でも送信する／しない、送信時刻

　（9:00～17:30（30分刻み）

実装機能

〇メール通知機能

■処理内容

　 0:05に9:00～17:30の30分毎に以下の※処理を実行する

　※処理

　　休暇・残業申請の当日申請分かつ「未承認」の件数を算出

　　前項で設定した条件+会社カレンダー（稼働日のみ送信）に該当する場合

　　※通知メールを送信

　※通知メールの記載内容

　　上記で算出した休暇・残業申請各々の件数、承認画面へのリンク

使用技術

使用技術総論

メール情報の入力については、従来のuseStateとuseEffectを使用した、独自のバリデーションチェックではなく、最新のフロントエンド開発で使用されている、

「ReactHookFormとzod」による実装にトライし、実装できた。

上記により、バリデーションチェックのロジックの簡素化が実現可能となり、モダンなフロントエンド開発のノウハウの蓄積にもなった。

​

使用技術-フロントエンド

Coding

開発言語：HTML5、CSS3、JavaScript（React v18、ES6記法遵守）

入力フォーム・バリデーションチェック：ReactHookForm、zod

CSSの記述方式：CSS Modules85%、styled-component5%、 inline 10%

グローバルステート管理：Recoil

UIコンポーネント：Material UI

アイコン：Material UI ICon、FLATICON

　　その他：papaparse(CSV出力）、axios(APIコール）、Firebase（認証）

​

使用技術-バックエンド

Coding

〇フロントエンドで使用するAPI提供アプリケーション

役割：フロントエンド - kintone連携

　メール情報のCRUD操作 : Express/Node.js

　 〇メール送信機能

役割：申請件数の算出とメール通知処理

　　　GoogleAppScript

CloudService

　　APIの実行:CloudRun(Express/Node.jsの実行)、GoogleWorkSpace(GoogleAppScriptの実行)

使用技術-バックエンド

DataBase

〇kintone:

-所属工場マスタ:工場選択に使用

　　-残業申請・休暇申請データ：申請データのプールに使用

【残業】一括申請機能

​

工場の申請アプリに残業の一括申請機能を追加

社員情報は端末（PC、iPhone、iPad）に記憶される

50

Click

追加・削除

【残業】一括申請機能

​

​

残業する日に申請済みの社員が１人でもいる場合は、申請できない

⇒リストから削除して残りの人で一括申請し、次回再度追加する

​

51

52

「今期計画有休」が常に「青色」となるようにする

【NG】 5日未満

【OK】5日分

今期計画有休 5日