1 of 111

制服注文管理アプリケーション

技術資料

Architecture and

Implementation Details

1

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

2 of 111

2

本資料で説明すること

・使用技術

・アーキテクト（インフラ設計）

・実装機能

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

3 of 111

3

使用技術

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

4 of 111

4

言語・フレームワーク・ライブラリ

🚀フロントエンド

言語:html、CSS、JavaScript

JSフレームワーク：React18

CSS: CSSモジュール（SASS）、MaterialUI、ReactIcon

状態管理ライブラリ：Redux

主要ライブラリ

認証：FirebaseAuthentication・GoogleOAuth2.0、日付：date-fns、テーブル：TanstackTable、PDF生成:ReactPDF、装飾：React-tostify、メール送信:GmailAPI

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

理解が難しいとされる生のReduxを使用

5 of 111

5

言語・フレームワーク・ライブラリ

🚀フロントエンド

解説：「大規模開発で使用されるReduxによる状態管理を実装」

　一般的に難しいとされているReduxを導入し、状態管理を実装した。ユーザ情報、カート情報、商品情報の更新手続はすべてReduxを介して行うようにした。

　また、FireStoreのリアルタイム監視による、アプリ間のリアルタイムなデータ共有を実現した。

　また、ReactPDFとGmailAPIにより、アプリから注文書のPDFファイルを作成して送付する一連の流れをワンクリックで行えるようにしている。

　認証については、GmailAPIを使用するため、OAuth2.0による認証を実装し、バックグラウンドでアクセストークンの自動更新処理を行うようにもした。

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

6 of 111

6

言語・フレームワーク・ライブラリ

🚀バックエンド

〇アプリケーション

　言語:Node.js

　主要ライブラリ：NodeMailer、FirebaseAdmin、kintone

〇データベース

　CloudStorageForFireBase：商品画像

　Firestore:

　　　　データ：ユーザ情報、カート、お気に入り、注文履歴、商品情報、販売店情報、カテゴリ、

　　　　　　　　　メーカー、発注部署・拠点

　　　　マスタ：A@社員マスタ、B@社員マスタ、A@仕入先マスタ、A@事業所マスタ

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

Cloud Scheduler

Cloud Run

7 of 111

7

言語・フレームワーク・ライブラリ

🚀バックエンド

〇データベース続き

kintone:A@社員マスタ、B@社員マスタ、A@仕入先マスタ、A@事業所マスタ

※日次でkintoneからFireStoreに連携

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

Cloud Scheduler

Cloud Run

8 of 111

8

言語・フレームワーク・ライブラリ

🚀バックエンド

解説：「バッチ処理をNode.jsで構築」

　アプリのリアルタイムな処理以外は、バックエンドのバッチ処理に切り出している。CloudFunction、CloudRunでデプロイし、CloudScheculerで定期実行している。

　社員情報をはじめとする他システムのデータ

　⇒kintoneからFireStoreに格納する処理-日次

　⇒発注担当者への定期メール送信-30分毎

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

Cloud Run

Cloud Scheduler

9 of 111

9

アーキテクト（インフラ）

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

10 of 111

10

Database

Front-end

Authentication

Firebase

Authentication

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

Application

FirebaseHosting

フロントエンド-データベース

CloudStorage

ForFirebase

FireStore

OAuth2.0

GoogleCloud

Resources

11 of 111

11

フロントエンド-データベース

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

🚀フロントエンド-データベース

　ホスティング:FirebaseHosting

　データベース：CloudStorageForFirebase、FireStore

　認証：Firebase、OAuth2.0（GmailAPIのため）

解説：OAuth2.0認証以外Firebaseで完結するコンパクトな設計

12 of 111

12

Back-end

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

Application

バックエンド-データベース連携

Database

CloudStorage

ForFirebase

FireStore

Cloud Run

Cloud Scheduler

Cloud Functions

・マスタ連携-日次

　　 A@社員マスタ、B@社員マスタ、A@仕入先マスタ、A@事業所

・通知メール送信-30分毎

13 of 111

13

バックエンド-データベース連携

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

🚀バックエンド-データベース連携

　サーバーレス:CloudFunctionForFirebase（各種マスタ連携）

CloudRun（ジョブ）（定期メール送信）

　スケジューラ：CloudScheduler（デプロイの定期実行）

　データベース：FireStore、kintone

　解説：SLAを考慮し、GASではなく、GoogleCloudのサービスを使用

14 of 111

14

機能一覧

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

15 of 111

15

機能の一覧

🚀機能は大まかに以下の6つです。

🐡共通機能（認証・認可（権限のこと、コンテンツの表示、ページ移動の制限）、

　お気に入り、プロフィール編集）

🐡マスタ登録機能（カテゴリ、メーカー、商品、発注部署、ユーザー）

🐡注文機能（商品の注文・キャンセル・検収）

🐡発注機能（商品の発注・キャンセル・検収の一元管理）

🐡お知らせ管理機能（新規投稿、編集、削除、通知）

🐡バックエンドサービス（メール通知、各種マスタ連携）

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

16 of 111

16

機能詳細

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

17 of 111

17

共通

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

18 of 111

18

ログイン・認証

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

Firebase認証

OAuth 2.0

FireStoreとFireStorage

Gmail

2段階認証によりアプリにログインします。１つはFirebaseを使用するための認証です。それが終わるとGmailを送信するのに必要なOAuth2.0の認証を行う画面が表示されます。

19 of 111

19

認証状態の維持

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

🚀アクセストークンを管理しています

アプリ起動中は、１時間で有効期限が切れるアクセストークンを有効期限直前に自動更新しています。

アクセストークンが切れるか、Firebase認証が切れると強制的にログアウトします。

次項にアクセストークンの更新処理を記載します。

20 of 111

20

アクセストークンの更新処理

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

20

ログイン　または　アプリ起動

OAuth2.0認証情報からアクセストークン取得

ログアウト

（FireBaseとOauth2.0両方ログアウト）

監視処理をセット

トークンを取得・ステートを更新

トークンが取得

できない

トークンの有効期限が

残り5分以内である

Yes

No

トークンを取得・ステートを更新

1分毎にトークンの有効期限を監視

トークンが取得

できない

No

21 of 111

21

認可

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

🚀ユーザ権限は3段階用意しています。権限により表示コンテンツや

　操作可能な範囲が限定されます。

一般：プロフィール、商品の注文、取消（発注済除く）、検収

発注担当者：上記＋商品の発注、取消（すべて）

人事担当者、システム管理者：上記＋ユーザ登録、各種マスタの登録

22 of 111

22

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

一般

発注担当者

人事担当者・システム管理者

一般・発注担当者

認可

アクセスできるメニューの制限

23 of 111

23

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

一般

発注担当者・人事担当者・システム管理者

発注済であっても取消済、注文済に変更可能。

他のログインユーザの注文の状態も変更可能。

注文済を取消済にしかできない。

また、ログインしているメールアドレス

以外の注文は変更できない。

認可

発注状態（ステータス）の変更の制限

24 of 111

24

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

リアルタイム同期

🚀以下の情報をアプリ間でリアルタイムで共有します。

・ユーザ情報、注文情報、商品情報

以下の情報が全アプリに即時反映されます。

　・人事担当者・システム管理者が設定した

　　権限、商品情報

　・注文の追加、変更

25 of 111

25

ユーザの自動作成とプロフィール設定

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

ログインするとユーザが自動で生成されます。

プロフィール画面で設定します

なお、後述するユーザ登録画面から人事担当者・システム管理者は変更可能です。

事前に部署を設定して、ユーザを登録して

おくことも可能です。

26 of 111

26

発注部署未登録時の誘導

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

発注部署が未登録の場合以下の流れでマイページに誘導します

Click

警告ダイアログ表示

マイページにジャンプ

27 of 111

27

プロフィール設定

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

B@社員マスタに登録がある場合は自動でセットされますが、共有アドレスの場合は手動で誰かを設定します。

発注部署を選択します

かなで検索します

28 of 111

28

プロフィール設定

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

発注担当者、人事担当者・システム管理者として登録のあるユーザから選択します。

ここにセットしたアドレスで注文確定画面の発注担当者がプリセットされます

商品発注メールを送信するときの署名をプリセットできます。

「一般」権限の方は使用する機会はありません。

29 of 111

29

プロフィール設定

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

自分が発注担当者となっている注文がある場合のメール通知に関する設定をします

時刻と曜日を設定します。０件の場合は通知はしません。

「通知しない」を設定すると曜日がチェック状態になっていても送信しません

30 of 111

30

お気に入り登録

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

商品詳細画面からサイズと数量を選択し♡マークを押すとサイズと数量をお気に入りに保存することができます。

ログインユーザ（メールアカウント）毎に保持されます。

31 of 111

31

マスタ登録

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

32 of 111

32

マスタ一覧

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

🚀マスタ一覧　括弧はマスタ内でIDを使用するもの

🐡カテゴリ

🐡販売店

🐡メーカー

🐡商品（メーカー、販売店、カテゴリ）※

🐡拠点

🐡部署（拠点）

🐡ユーザー（部署）

※マスタ登録にはIDのみ使用する。商品をカートに入れるとき指定したIDのマスタの（最新）情報を

　取得する。

33 of 111

33

カテゴリ登録

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

削除します

入力を一時保存します

取り消したい場合は左上のロゴを押して一覧画面に戻ります。

このボタンを押すと確定されます（FireStoreに保存されます）。

登録したカテゴリはサイドメニューに表示されます。

後述する商品登録で指定したカテゴリで商品の表示をフィルタリングできるようになります。

34 of 111

34

カテゴリ登録-控除区分について

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

IDが重要

:0

:1

:2

　IDの変更には注意が必要です

過去の購入履歴から、控除（全額個人負担、半額会社負担、全額会社負担）を算定るときはこのコードを使用します。

期の途中で変更すると算定結果に影響があります。

商品マスタで使用

C002（安全靴）で購入履歴が生成される

35 of 111

35

販売店登録

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

削除します

入力を一時保存します

取り消したい場合は左上のロゴを押して一覧画面に戻ります。

このボタンを押すと確定されます（FireStoreに保存されます）。

追加するときはここから入力します

36 of 111

36

メーカー登録

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

削除します

入力を一時保存します

取り消したい場合は左上のロゴを押して一覧画面に戻ります。

このボタンを押すと確定されます（FireStoreに保存されます）。

追加するときはここから入力します

37 of 111

37

商品登録

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

新規登録の場合

編集の場合

複数登録可能、スライダーで切り替え表示できるようになります

クリックした画像を削除できます

38 of 111

38

商品登録

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

「非表示」にすると一般・事務担当者には表示されなくなります。

人事担当者・システム管理者には水色で表示されます。

フリー入力です。

なお、社内品番で表示順が決定されます（昇順）

メーカー登録、販売店登録、カテゴリ登録で登録した者から選択します

39 of 111

39

商品登録

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

入力を一時保存します

追加するときはここから入力します

取り消したい場合は左上のロゴを押して一覧画面に戻ります。

このボタンを押すと確定されます（FireStoreに保存されます）。

別の商品として複写することができます。

40 of 111

40

商品並び替え

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

保存を押すとDBに反映されます。

カテゴリでフィルタをかけた

状態でも並び替えできます。

ドラッグアンドドロップで並び替え

41 of 111

41

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

サイドメニューからアクセス

拠点登録

※入力、保存方法は前述したマスタと同じです。

42 of 111

42

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

拠点登録-納入先事業所の初期値をセット

事業所マスタ

一致するものを

検索

初期値をセット

拠点登録した名称から事業所マスタの事業所名を検索し、前方一致したものを納入先事業所に自動でセットします。

拠点マスタ

注文確定画面

43 of 111

43

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

サイドメニューからアクセス

部署登録

※入力、保存方法は前述したマスタと同じです。

拠点マスタで登録した者から選択します

44 of 111

44

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

部署登録-納入部署の初期値をセット

納入先部署

一致するものを検索

リストを生成

納入先事業所名と一致する拠点名を持つ部署から納入先部署のリストを生成する。

また、発注部署の部署名から生成したリストを検索し、前方一致した部署名をセットする。

部署マスタ

注文確定画面

リストを生成

初期値をセット

リストを生成

45 of 111

45

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

ユーザー登録

サイドメニューからアクセス

ログインユーザを登録、編集、削除する

46 of 111

46

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

ユーザー登録

社員情報です。無くてもメーカー登録、販売店登録、カテゴリ登録で登録した者から選択します

アプリは動作しますが、入力するようにしてください。

※初回ログイン時にB@社員マスタにメールアドレスがある場合は自動で指定されます。

社内のGmailアドレスを入力してください。

B@社員マスタから「かな」検索も可能です。

発注担当者のメールアドレスです。社内のGmailアドレスを入力してください。

B@社員マスタから「かな」検索も可能です。

アプリの認可にかかわる情報です。

発注された商品の部署を管理する項目です。注文時にここで指定した部署が設定されます。

47 of 111

47

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

ユーザー登録

発注状況の通知メールスケジュールを表示します。

「送信」が「しない」になっている場合は、曜日に「〇」がついていなくても送信されません。「注文済」の商品が0件の場合も送信しません。

削除機能

フィルタは全カラム対象のあいまい検索です。

48 of 111

48

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

ユーザー登録

プロフィール編集のページで説明した内容を元に入力してください。

新規登録時のみメールアドレスの指定が可能です。

以降、削除するまで変更できません。

新規登録時のみ指定可能

49 of 111

49

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

ユーザー登録

メール以外の項目について変更可能です。

繰り返しになりますが、各々のユーザがプロフィール編集画面で変更する情報と同一です。

新規登録時のみ指定可能のため変更はできない

編集

50 of 111

50

注文

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

51 of 111

51

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

商品の検索とカートへの追加

サイドメニューからカテゴリを選択、キーワードでフィルタリングし、商品を探します

※社内番号の昇順で表示されます

Click！

52 of 111

52

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

商品の検索とカートへの追加

数量を選択し、カートボタンをクリックします。

カートに商品が追加されます。

53 of 111

53

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

カートの変更・確認

商品単位で備考を入力できます。

数量の変更、削除が可能です。

注文画面に移ります。

商品一覧に戻ります。

54 of 111

54

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

注文確定

カートと同じことができます。

カートに連動して金額が変わります。

55 of 111

55

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

注文確定

ユーザ登録、プロフィール編集画面で設定した内容がプリセットされます

社員番号を入力して変更できます。

選択して変更できます。

56 of 111

56

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

注文確定

番号指定、かな検索指定が可能です。

A@社員マスタを使用しています。

購入依頼者を指定する場合

派遣・協力会社を指定する場合

※有・有は指定できないようになっています

番号指定、かな検索指定が可能です。

A@仕入れ先マスタを使用しています。

※権限が発注担当者、人事担当者・システム管理者の場合

57 of 111

57

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

注文確定

仕入先無・購入依頼者無が指定できます。

※権限が人事担当者・システム管理者の場合

58 of 111

58

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

注文確定

変更不可

※権限が一般のユーザ場合：購入依頼者しか指定できないようにしています。

59 of 111

59

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

注文確定

A@事業所マスタの事業所名から選択します。（注文書に記載する住所、電話番号はここでセットされます）。

確定します。

エラーが表示されたら該当箇所を見直し、再度注文を確定してください。

納入先部署を選択します。納入先事業所の選択状態によって、表示されるリストが変わります。

60 of 111

60

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

負担区分について

前提：カテゴリマスタに上限と負担金額を設定します。

61 of 111

61

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

負担区分について

判定の条件と設定する値

　〇上限の判定の条件

　　以下のすべての条件を満たす商品をカウントする。

　　条件1：注文日が該当する期の年の6月1日以降のものである。

　　　　　例：現在が2024年2月13日の場合⇒2023年6月1日

　　　　　　現在が2024年10月27日の場合⇒2024年6月1日

　　条件2：状態が検収済、発注済、注文済のいずれかある。

〇設定する値

カテゴリマスタに設定した区分に応じた値を給与控除額としてセットする。

セットする値

　全額個人負担：数量×単価

　半額会社負担：数量×単価÷2（小数点以下切上）

　全額会社負担：0

62 of 111

62

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

負担区分について

購入依頼者	仕入先（派遣・協力会社）	負担区分	給与控除金額
有	無	購入履歴・カテゴリマスタから算出（全額個人負担・半額会社負担・全額会社負担のいずれか）	算出結果に基づく金額
無	有	全額個人負担	数量×単価
無	無	全額会社負担	0

購入依頼者、仕入先の指定状態における負担区分と給与控除金額

63 of 111

63

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

負担区分について

購入依頼者無・仕入先（派遣協力会社）無

全額会社負担

64 of 111

64

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

負担区分について

購入依頼者無・仕入先（派遣協力会社）有

全額個人負担

65 of 111

65

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

負担区分について

購入依頼者有・仕入先（派遣協力会社）無

算定結果に基づく金額

上限数量2以内のため半額会社負担

上限数量2を超えるため全額個人負担

66 of 111

66

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

負担区分について

同一商品（サイズ）で控除適用できる数量と適用できない数量が混在する場合は

警告を表示します。

ボタンも押せません

警告メッセージと数量を赤色にして変更を促します

※マスタの上限に対して

購入履歴の数量とカート内の数量を足したものが値を超える場合が該当します

67 of 111

67

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

注文履歴の確認と検収入力

サイドメニューから注文履歴を選択します。

68 of 111

68

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

注文履歴の確認と検収入力

注文日：注文確定時に更新

発注日：発注処理時に更新（初期値なし(null)）

検収日：検収処理時に更新（初期値なし(null)）

取消日：取消処理時に更新（初期値なし(null)）

日付で表示条件を指定します。

発注部署はマスタ登録したものが表示されます

後述する状態で表示条件を指定します。

ログインアカウントのみに

絞り見たいときＯＮにします。

69 of 111

69

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

注文履歴の確認と検収入力

注文済

発注済

検収済

取消済

商品の注文をキャンセルした状態。

発注担当者、人事担当者・システム管理者は注文済に変更可能。

注文確定した状態。発注処理の対象となる。発注担当者、人事担当者・システム管理者が発注処理をする。

一般ユーザは取消処理が可能。

注文書を送った状態。発注処理をするとこの状態になる。検収処理の対象。

発注担当者、人事担当者・システム管理者は検収処理と注文済に切り替え可能。

商品を検収し終わった状態。一般ユーザは変更できない。

発注担当者、人事担当者・システム管理者は取消処理が可能。

70 of 111

70

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

注文履歴の確認と検収入力

注文番号で検索可能

発注担当者、人事担当者・システム管理者

の表示例

発注が可能。

検収済についても取消可能。

他のログインユーザの注文についても上記変更が可能。

なお、後述する「発注処理」画面で一括処理も可能。

71 of 111

71

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

注文履歴の確認と検収入力

一般ユーザの表示例

取消のみ可能

他のユーザの注文履歴は変更できない。

72 of 111

72

発注

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

73 of 111

73

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

サイドメニューからアクセス

ログインユーザを登録、編集、削除する

発注処理画面へのアクセス

74 of 111

74

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

注文履歴と同じフィルタリング

全ページ選択状態、キーワードのクリア

件数、金額の確認用

ページ単位での一括選択

メニューの機能

詳細確認、状態変更可能

75 of 111

75

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

メニューの機能

キーワードは全カラム対象のあいまい検索です。

選択中の注文番号のステータスを変更します

発注済のもののPDFを再発行します

（後述するメール送信フォームを表示します）

検索結果にヒットした注文のCSVを出力します。

項目には注文に関する全情報がセットされます。

カラム単位でフィルタ・ソートできます。

76 of 111

76

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

状態更新のながれ

選択

ボタンクリック

確認

更新

※：既に発注済が含まれるためエラー

NG

OK

77 of 111

77

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

発注処理

選択⇒発注済処理⇒PDF生成⇒メール送信をシームレスに行います。

78 of 111

78

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

発注処理

※ＰＤＦ作成・メール送信機能はＰＣからのみ実行できます

　　　　iPhone、iPadでこの機能を使用するためには、

　　　設定画面からトラッキングを有効にする作業が必要であるため、

　　　アプリでは上記の機能を切っています。

79 of 111

79

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

発注処理

選択

ボタンクリック

確認

フォーム表示

80 of 111

80

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

発注処理

メール/PDFは販売店毎に用意します。

TO、CCは販売店マスタに登録したものがプリセットされます。変更可能です。

メールひな型は固定のものがプリセットされます。

変更可能です。

81 of 111

81

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

発注処理

プロフィール編集画面で設定したものがプリセットされます。変更可能です。

クリックでプレビューを表示できます。

PDFをダウンロードしたい場合は、プレビューから行ってください。

また、ローカルのPDFファイルを添付することも可能です。複数指定可能です。

やめるを押した場合はメール送信はされません。

状態は「発注済」になります。

82 of 111

82

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

発注処理

以下のいずれかを満たす場合に改ページします。

・７件以上

・事業所が異なる場合

・発注担当者が異なる場合

PDFについて

A@事業所の情報

販売店マスタの情報

処理日

83 of 111

83

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

発注処理

Gmailに送信履歴が残ります。

84 of 111

84

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

発注処理

選択

ボタンクリック

確認

フォーム表示

一度発注済にしてしまったものも、再発行ボタンよりPDFの作成とメール送信が可能です

85 of 111

85

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

発注処理

注文履歴とCSV出力をして各種チェックリストを作成に使用していただけます。

注文履歴の全項目を出力するものと、奉行用の集計結果を出力するものがあります。

処理対象の件数です

奉行用はツールチップで説明が表示されます

CSV出力機能

86 of 111

86

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

権限による閲覧制限

〇注文履歴の閲覧制限

一般ユーザ：ログインアカウントでの履歴のみ

発注担当者：所属する部署の履歴のみ

人事担当者・システム管理者：すべての履歴

ホバーで文字列全体を表示

87 of 111

87

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

権限による閲覧制限

〇発注処理の閲覧制限

一般ユーザ：使用できない

発注担当者：所属する部署の履歴のみ

人事担当者・システム管理者：すべての履歴

88 of 111

88

お知らせ管理

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

89 of 111

89

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

お知らせ一覧ページ

90 of 111

90

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

お知らせ一覧ページ

切り替え可

システム管理者・人事担当者

発注担当者・一般ユーザ

91 of 111

91

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

未読と既読、ボタン

未読の表示

既読の表示

記事詳細ページに遷移します。

記事詳細ページが表示されると既読状態になります。

新規投稿ページに遷移します。

記事編集ページに遷移します。

92 of 111

92

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

属性と役割

記事の種類です。

既読、未読の状態です。

記事を新規投稿、更新するとすべてのユーザに対して該当記事が未読にリセットされます。

記事の公開、非公開の状態です。

発注担当者・一般ユーザには「公開」のみが表示されます。

93 of 111

93

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

通知機能と条件

通知機能と条件について

以下の①、②、③を満たす記事がある場合は、CSSアニメーションを表示ます。

※1件もない時の表示

①、②、③を満たす記事の件数

①通知がセットされており現在時刻が開始日と終了日の範囲内である。

②公開がセットされている。

③未読状態である。

Click！

94 of 111

94

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

記事投稿／編集

属性の設定

　日付、カテゴリ、公開／非公

　開、通知する／しない、

　通知する期間

記事の作成（指定できること）

・見出し、箇条書きの作成

・フォント変更（サイズ、太

　さ、斜体、アンダーライン、

　カラー、バックカラー）

・URLの挿入

・画像の挿入

・動画の挿入（参照URL）

添付ファイル

・種類問わず添付可能

※100MBまで動作検証済　　

95 of 111

95

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

記事詳細（表示）

入力したスタイルがそのまま表示されます。

96 of 111

96

品切れの設定

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

97 of 111

97

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

品切れの設定概要

サイズ毎に品切れを設定できます。

・購入数量の変更

・カートへの商品の追加

・お気に入りへの商品の登録

品切状態でできなくなること

98 of 111

98

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

品切れの設定　手順

チェックボックスの変更

　サイズごとに変更します

商品の編集からスタート

保存を忘れずに

　保存を押すとデータベースに

　反映されます。

99 of 111

99

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

品切れの設定　表示

品切れと一目で分かるように表示します

100 of 111

100

バックエンドサービス

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

101 of 111

101

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

通知メール送信

発注担当者に指定された

注文済商品が１つ以上ある

発注担当者のメールアカウントに通知設定がされている

＋（両方満たす場合）

指定された日時にメールが届く

102 of 111

102

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

マスタ連携

FireStore

Cloud Run

Cloud Scheduler

Cloud Functions

毎日０：００

A@日報用社員マスタ

B@社員マスタ

A@仕入先マスタ

A@事業所

アプリで使用するマスタを更新する。

workersA コレクション

workersB コレクション

supplier コレクション

offices コレクション

103 of 111

103

マニュアルの投稿と表示

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

104 of 111

104

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

1.マニュアルに関する記事の投稿（追加・編集）

操作の流れ

2.記事へのアクセス

105 of 111

105

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

マニュアルに関する記事の投稿

マニュアルを選択します

それ以外の操作はこれまでの記事投稿と同じです

106 of 111

106

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

マニュアルに関する記事の投稿

他の記事と同様に、お知らせ一覧に表示されます

107 of 111

107

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

記事へのアクセス

ナビゲーションメニューからアクセスします

PC

iPhone

Click!

108 of 111

108

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

記事へのアクセス

お知らせ一覧ページに飛びます

自動でマニュアルでフィルタがかかった状態

タイトルもマニュアルとわかるように変更

詳細ページへ

109 of 111

109

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

記事へのアクセス

作例

110 of 111

110

ユーザの職場氏名への変更

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

111 of 111

111

Web : https://notion-blog-udemy-kappa.vercel.app E-Mail : syota.hayashi@morimatsu.jp

手順：プロフィールorユーザ登録で社員情報を更新

「かな」は社員名を使用してください（※職場氏名ではない）