オリプロテーマ企画

# どんなオリアプを作る？

### 結論

`職場の課題を解決するもの`

### もう少し、補足すると

`仕事現場とそれ以外の時間の課題を解決するもの`

# 目標/ゴール

`WEBエンジニアとして就職すること`


# 背景

私は、`交通警備の会社`で働かせていただいております。

下記は、私の働いている会社の特徴です。

- 警備、管制、事務、営業という4つの部署がある
- 警備の仕事は、建築工事や土木工事の現場に出向き、**現場**で警備業務
- 管制の仕事は、**警備員**の明日の現場を決める業務
- 事務の仕事は、何をやってるか私は知らない
- 営業の仕事は、全国各地の現場から**案件**を取ってくる



# 超具体的に説明していく

重要になってくるのは、２つ

- 管制の仕事
- 各現場での警備員の隊長


です。

## 警備員

- 現場ごとに、必要な警備員の数は異なり、少ないところだと1名、多いところだと20名を超える現場もある
- 8名現場の場合、1名が隊長、7名が隊員
- 出勤時間、集合場所、勤務時間、業務内容、注意事項は、現場によって変わる（つまり、毎日違う）
- 同じ現場でも、毎日、隊員は入れ替わる（隊長は、同じ現場に継続して入ることが多い）


### 警備員の隊長について
- 各現場では、必ず1名、隊長が必要
- 明日のメンバーを聞いて、`そいつはやめてくれ`権限を持っている






## 管制

- 6名ほど、在籍している
- 出勤時間は、9:00〜18:00
- 隊長に対して、ここの現場の隊長をお願いする
- 隊長に対しては、隊員のスキルと現場や他の隊員との相性はどうだったか、聞いて、覚えておく
- 隊員に対しては、色々配慮しながら、明日の現場をお願いする
- 隊員に対しては、場合によっては、現場を一定期間、固定でお願いする




## その他

- この会社が保有している現場数は、260現場くらいある
- この会社の警備員の社員数（アルバイト含め）は、900名ほど
- 事務員に関しては、今回触れない（唯一、勤怠管理、交通費管理、などは、今後、機能追加できそう）


# では、何が問題で、どう解決したいのか

様々あります

## ①明日の現場の情報に誤りがあることがある



#### 主な原因

管制の人が、`送る度に、毎度、入力しないとならない`

#### 解決策

一度、現場を登録したら、DBに保存されるようにし、送信のたびに、入力しないようにする


## ②明日の指示が、てきとう/曖昧で、しっかりと把握できないことがしばしばある

管制6名は性格が違い、明日の現場の詳細の送り方（情報内容/フォーマット）が異なる


#### 具体例

##### ・明日の現場の基本的なフォーマット

```
案件名：
元請け会社：
出勤日：
集合場所：
集合場所住所：
集合時間：
開始時間：
勤務時間：
隊員数：
隊長氏名：
業務内容：
注意事項：
```

##### ・管制Aさんの送り方（真面目系人間）

```
お疲れ様です。
明日のスピーキングテストについての連絡です。

11/26（日）
①朝7時までに出発連絡を私（高橋）の携帯に下さい。通話でもLINEやショートメールのメッセージでも構いません。
高橋携帯　0?0-33?7-3?42

②8時30分に（可能なら8時20分までに）○田高校の正門前に集合。
三○高校　○区三○1-4-?6
最寄り駅は赤○橋駅です。

③2号制服の冬服上下、防寒着、キャップ、モール、警笛、白ベルト、白手袋（軍手不可）、黒革靴（指定の安全靴）、上履き（スリッパ等）、おにぎりやパンなどの昼食、飲み物

スニーカーは不可です。誘導灯、交通腕章、夜光チョッキは不要です。

試験のため、持ち物忘れ、遅刻は大問題に発展してしまうので、今日中に念入りに準備をお願いします。

不明点があれば、本日の19時までに連絡を下さい。よろしくお願いします。
```


##### ・管制Bさんの送り方（てきとう系人間）

```
2/1

8:30開始

ミルッ○ス
新菱○熱案件お願いします。


集合場所
東京テ○ポート駅を地上に出て

TOKYOのオ○ジェ前。
```

#### 解決策

①と同じだが、１度入力したら、もう一度その案件を送信するときは、使い回す


## ③集合場所と集合場所住所の照らし合わせがむずい/時間が勿体無い

どういうことかというと、

- 集合場所には、○○公園

と書いてあって、
- 集合場所住所には、○○区○○?-??-?

と書いてあるとして、

これを、Google検索すると、

**○○公園が出てこなくて、近くに似たような名前の公園が出てくることがある。**

・`そっちに行くと、集合場所が間違ってて、Yahooのマップで見ないと、出てこない公園があったり、`

それ以外にも、

・`集合範囲の指定が広くて、8名の隊員が、それぞれ別の場所で開始時刻まで待機している`

などの場合がある。




#### 解決策

DBに保存してある住所から、明日の現場情報として、マップ上にピンを立てる形で、視覚的にわかるようにし、全員が同じ場所で集合できるようにする


## ④毎度、現場が違うので、電車の経路を毎日確認しないといけない

#### 警備隊員の中で唯一私と話をしてくれる斉藤さんの証言

```
毎度、現場が変わるって、まじストレスじゃないですか？
```

#### これについて私の返答

```
いやぁ〜、ほんとそうっすよね...
でも、警備員の仕事だと、しょうがないっすもんね

...

あ！！！

でも、特定の部分をコンピュータにさせることで、少し、ストレス和らぐかもしんないっすよ！
```

#### となって、考えた機能が、

せめて、電車の経路だけは、毎度、自動で算出してくれて、

また、日時ごとに、交通経路を記録しておいてくれて、月末に提出するときのフォーマットで、出力/印刷できる機能



#### ポイント

ここで、明日の天気も取得できると良いと考えている


## ⑤警備隊員は意外と事務作業が多い

- 交通費の請求を交通費申請用紙で郵送（月末）
- シフトを紙で郵送（月末）
- 毎度、明日の現場を、Googleマップで確認
- 毎日、明日の移動経路を、NAVITIMEで確認
- 明日の天気を確認して、持ち物を入れ替える

これらを、自動で、システムがやってくれるとなれば、かなり助かる



## ⑥隊長の為の特別機能


先ほど、**隊長が重要**と申しましたが、

それはなぜかと言うと、

隊長は、

・誰よりも早く来て、隊員が全員来るか、来なかったら管制に報告、また遅刻の管理/報告をしなくてはならない
・隊員の勤務態度を見て、管制に報告
・必要な人員が揃っていない：管制に報告
（例えば、片側交互通行（通称、片交）の現場で、片交ができる人が1人も来ていない場合、追加の人材を要請しないといけない場合もある）
・その他、さまざまなことを、管制とコミュニケーションとらないとならない

これらが、隊長の役割です。


#### これのシステムによる実現方法

1. 管制との通話機能を付ける
1. 現場ごとに、掲示板機能
1. 管制の人しか見れない、隊員ごとの評価ページ
1. その現場に来る人に、事前に伝えたいことを隊長がメモとして書き込める
1. 共有ホワイトボード機能

## ⑦休憩管理機能

また、もう一つ、**現場での課題の解決もできる**と書きましたが、

現場では、7名稼働している隊員を、20分ずつや30分ずつなど、休憩を回していきます。

ですが、問題が発生します。

```
隊長より、`30分ずつ休憩どうぞ`と言われる。

1人目：9:30から→9:58に帰ってくる
2人目：10:00から→10:29に帰ってくる
3人目：10:30から→11:01に帰ってくる
4人目：11:01から→11:32に帰ってくる
5人目：11:32から→12:05に帰ってくる
2人目：12:06から→13:09に帰ってくる
3人目：13:10から→13:42に帰ってくる
4人目：13:42から→14:15に帰ってくる

これが、繰り返されると、

最後に、時間が大幅にずれている
```

### これを、アプリで管理すれば、誰で、ずれたか一発でわかる



## ⑧上番報告と下番報告の機能

上番報告：家を出たら、管制に、'電話'もしくは'メッセージ'で、`今から現場に向かいます。`と報告する義務

下番報告：現場を退勤したら、管制に、'電話'もしくは'メッセージ'で、`ただいま、現場を退勤しました。`と報告する義務

### これを、アプリのボタンを押すだけで行う。

※特定の時間にならないと、表示されないボタン（イタズラ防止）


## ⑨無線機能

場合によっては、無線機が必要な現場があります。

その時に、隊長が事前に、会社から無線機を渡されています。

これを、スマホからBluetoothで、接続し、片耳の操作機能付きイヤホンで、無線機と同等の機能を組み込みます。




## ⑩



## その他


### 交通費申請と勤怠申請の機能

これは、`事務と結合/既存のWEB給与明細と結合`を目指す。

### 営業から、案件の入力ページに切り替える

今は、`管制`が入力しているが、`営業`は、営業をとってきた時点で、フォームから入力するようにしてもらう




# このアプリが与えられる付加価値

- 管制の方の残業時間と無駄な手間を少なくできる
- 私たち（警備員）は、仕事以外の時間に、業務のことから時間を奪われなくなる


# ここから、私の作成したいオリアプについてです。

## アプリ情報

サービス名：S-Degital
サービス：業務内外プロセス等効率化アプリケーション

まず、満たし方について

## 必須要件

### ①ユーザーと課題が定義されて、ユーザーの課題を解決するものになっている

####  まずユーザーは、と言うと

①管制の方々
②警備の方々

#### 課題は、と言うと

①管制の人らは、"仕事だから"とか"慣れ"とかで、やりきっているが、実はとてもめんどくさいことをしている
②そして、その被害が実は私たち（警備隊の人ら）に来ている
③仕事作業以外の、やることが意外と多い
④純粋に、このアプリを作るのが楽しみ

### ②プログラムが正しく動作する（エラー等で落ちない）

・`デバッガ`
・`静的解析ツール`
・`テストコード`

を使用して、エラー落ちを最大限なくす

### ③コードが読みやすい（静的解析ツールを通している）

・`リーダブルコード`
・`達人プログラマー`
・`プリンシブルオブプログラミング`

を参考にする

### ④見た目が一定整っている（デザイン崩れしていない）

デザインセンスは、ない

### ⑤独自ドメイン、HTTPS で Web 上に公開されている

できる、余裕

### ⑥GitHub 上にコードを公開し、プルリクを活用している

プルリクは、余裕でできる

### ⑦テストコードが少なくとも1つ以上書かれている

できる、やったこともある

## 加点要件

### ①SPA（Single Page Application） + API の構成である

多分、できる

### ②ユーザーが1人以上実際に使っている

俺は、100%使う
多分、斉藤さんは使ってくれる

### ③運用（CICD,監視,セキュリティ,冗長性等）が考慮されている

・`GitHub Actions`
・`Railsガイドのセキュリティの箇所`
・`体系的に学ぶ安全なWebアプリケーションの作り方`


を参考にする

### ④パフォーマンスが悪くない

インフラ、セキュリティ、サーバー負荷、アクセス数考慮に挑戦したい

参考は、

・`Webエンジニアが知っておきたいインフラの基本`
・`体系的に学ぶ安全なWebアプリケーションの作り方`
・`マスタリングTCP/IP　入門編`
・`プロになるためのWeb技術入門`

**※推奨教材は、全部購入している**

### ⑤ストレスなく使え、UI/UXが良い

・`1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座`

・`パソナの社員用ページ`

を参考にする

### ⑥デザインが綺麗

・`1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座`

・`EveryGoの会員ページ`

を参考にする

### ⑦モダンな技術（SPA,Docker,etc）を使っている

[これ](https://zenn.dev/riya_amemiya/articles/55d3918487e426)を参考に、

挑戦したい技術は、`Next.js`,`Rails`,`Docker`,`TypeScript`,`TailwindCSS`,`GitHub Actions`,`Recoil`,`Jest`,`Notion`

これらの技術を使用していく

### ⑧自分から作りたくて作っている

これは、当てはまる

業務改善をしたくて、作っている

### ⑨エンジニアになりたい理由とプロダクトのテーマにストーリー性がある

ストーリー性もあるし、
エンジニアになりたい理由の１つとも合致している

私が、エンジニアになりたい理由は、

大まかに、

・実際に、業務上で使用されるものを作りたい
・複雑な課題を解決するものを作りたい

他にもありますが。


## もし可能であったら、最終的につけたい機能

**①全隊員が、各隊員のプロフィールを見れて、経験年数、レベル、周りの人からの評価、を閲覧できる**

**②隊員が、自分のプロフィール写真を登録できて、NFT化できる**

**③隊長は、隊長手当をもらう権利があるが、貰っていない人が多い（なので、投げ銭/寄付できる機能）**


なぜかというと、とても素敵な隊長がいるからです。

例えば、実際私が経験したことですが、

警備員は、現場が早く終わると、早く帰れる場合があります。

その時に、自分が休憩に行っていて、もう既に現場が終わっていると、他の隊員は帰れるのに、隊長は私1人の休憩の帰りを待たなくてはなりません。

この日は、とても優しい隊長で、現場が終わってから30分も待ってくれていたのにも関わらず、「持ち物がなくなるといけないから」と文句を一言も言わずに、下番しました。

これが、`本質的な優しさ`だと感じた体験でした。

私は、何か恩返しのようなことを返したい気持ちに一瞬なりました。

150円、送信することができたら良いと感じたので、ほしい機能でした。

この機能は、`ありがとう隊長機能`と呼びましょう。

そして、この機能のおかげで、より隊長のやる気はUPするかもしれません。

**④現場の近くに、どこにトイレがあるか/どこに昼休憩で食べに行けるレストランがあるか、教えてくれる機能**

**⑤新入社員用に、講義を配信できる機能**

**⑥法律と定款と就業規則と社内規則を閲覧できる機能**

**⑦隊長のみが、隊員を評価できるメンバーランク機能**

**⑧管制のみが、メンバーランクを強制的に変更可能機能**




# 簡潔に！！

## WHO/WHAT：誰のどんな課題を解決するのか？

私たち！

## WHY：なぜ、それを解決したいのか？

プライベートの時間が少なくなる！

## HOW：どうやって解決するのか？（サービス案）

DBに保存！


# 今後、どのように進めていくか

1. コア部分を作る
1. AWSに、デプロイ
1. 改善と機能追加
1. 斉藤様に使ってもらう
1. 改善と機能追加



# 








## オリジナルプロダクトのテーマ




```

「無駄な情報処理作業の手間を無く」 したい
「'自分'や'他の警備員'と'いつも私たちの現場を配慮しながら決めてくれている管制の方々'」 向けの
「S-Digital（略して、S-Degi(エスデジ)）」 は
「業務系アプリケーション」 です。

これは 「ユーザーの作業量と作業時間の短縮をする」 ことができ、
「システムを使っていないとき」 とは違って、
「大いに、時間が削減され、非常に利用価値」 がある。

```

# 簡単なワイヤーフレーム

## 警備員アカウント


![スクリーンショット 2024-02-29 20.29.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586858/57ff8f44-96e9-90f6-7cb0-035d6d009038.png)


### 明日の現場ページ

![スクリーンショット 2024-02-29 20.29.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586858/352ec76d-6329-f9ed-47f5-050534194ac0.png)


### 明日の現場ページ

![スクリーンショット 2024-02-29 20.30.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586858/a36a56c6-bb58-97c0-7ac4-c4ab4567b2fa.png)


### 過去の現場履歴ページ

![スクリーンショット 2024-02-29 20.30.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586858/b471a8e8-4414-f90e-beab-d9253e0846de.png)


### 許諾後の明日の現場ページ

![スクリーンショット 2024-02-29 20.30.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586858/dafeb7a6-f32a-9625-dfeb-64096d3fc025.png)




## 管制アカウント

![スクリーンショット 2024-02-29 20.30.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586858/1c321f50-cddd-c0b6-a140-46fdf7ddef86.png)


### 未定現場一覧ページ

![スクリーンショット 2024-02-29 20.30.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586858/4711aa3f-a6a0-5db8-7372-4b3dd349e246.png)


### 現場案件一覧

![スクリーンショット 2024-02-29 20.31.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586858/546c5eda-8642-e203-23c1-4fe424c709c2.png)


### 案件登録ページ

![スクリーンショット 2024-02-29 20.31.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586858/9f13c863-c0fd-f4c5-52ce-ea05705a73f6.png)


### 隊員一覧

![スクリーンショット 2024-02-29 20.31.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586858/97f24139-d061-9584-fb6c-f30757053ed2.png)


### 通知一覧

![スクリーンショット 2024-02-29 20.31.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586858/3880ff2b-22d4-2dd9-fe39-9aa002cde294.png)


### 個別の案件ページ

![スクリーンショット 2024-02-29 20.31.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586858/ec014f0c-c2bb-ff30-c8db-575227cc4fc6.png)


### 依頼ページ

![スクリーンショット 2024-02-29 20.31.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586858/e59728f0-b108-4ec7-162a-9867fab6da39.png)



### 既定現場一覧ページ

![スクリーンショット 2024-02-29 20.38.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3586858/1a5a2a15-fe72-559d-283b-6deeabfe48f6.png)




# 希望

Webとモバイルの両方を作りたい

Webは、Next.js
モバイルは、ReactNative

で、6ヶ月後くらいに、完成させたい



## 手引き

[S-Degiのメイン部分のみ/コア機能飲みの解説記事](https://qiita.com/delsan/items/745c26b6e614e91244f2)




# ラストステートメント

本当に最後は、

- 全支社間連携
- 日勤だけでなく、夜勤も機能を調整して組み込む


までやりたいが、

1人のエンジニアでできるのか