作ったもの

複数店舗のシフト管理サービス

作った経緯

仕事では企画的なことやお客様との調整ごとが多く、開発することから離れつつあった
昔、学生時代にバイトしてた頃、シフトが紙媒体だったので、面倒だった
既存のシフト管理サービスは有料のものが多かったので、無料でサービス提供できないか試したかった

一番は単純に開発がしたかったのが大きかったですね。

システム構成

構成図

結構、スタンダードな構成かと思います。

言語/ライブラリ

JavaScript
React
Bootstrap

主要なAWSサービス

Route 53
ドメインのDNSレコードの管理が出来るサービス。
CloudFrontにルーティングするために利用。
お名前ドットコムで取得したドメインを登録。
(AWSでもドメインは取得できますが、お名前ドットコムの方が安い気がします)
Certificate Manager
SSL/TLS証明書を簡単に発行、管理できるサービス。
HTTPS通信を行うために利用。
ボタンをポチポチすれば、勝手にいい感じにやってくれます。
CloudFront
CDN(Content Delivery Network)サービス。
HTTPS通信とコンテンツの配信のために利用。
OAC(Origin access control)でS3へのアクセスをCloudFrontに制限する。
以前はOAI(Origin access identity)というやり方がありましたが、今はOACでやることが推奨されているようです。
S3
ストレージサービス。
Reactでビルドしたフロントの資材を配置。
Webサイトとして利用する際は単体ではHTTPS通信が出来ないので、CloudFrontと併用。
静的ウェブサイトホスティングを無効のまま、CloudFrontからの通信を許可するバケットポリシーを定義します。
Cognito
ユーザーの認証/認可が素早く構築可能なサービス。
ユーザーを作成した際にメールで自動通知が可能です。
API Gatewayの認可として利用。
API Gateway
APIの作成および諸々の管理が出来るサービス。
lambdaと組み合わせて、APIを構築するために利用。
店舗を管理する管理者と一般ユーザで出来ることが異なるので、認可処理を組み込めます。
lambda
プログラムを定義しておき、サーバーレスで実行できるサービス。
アプリケーションのメインとなる処理部分の構築で利用。
前回の実行から時間が経つと、待機状態になるため、タイムアウトの設定は考慮する必要があります。
RDS
データベースのセットアップ、運用、およびスケールを簡単に行うことのできるマネージド型サービス。
シフト関連情報を保持するために利用。

機能

店舗管理
従業員管理
シフト管理
シフト作成
シフト参照

こだわったところはシフトの描画のところで、マウス操作でシフトの開始、終了時間を変更出来るようにしました。
描画はJavaScriptの「canvas API」を利用しています。

苦労したところ

フロントエンドについては、あまり詳しく無いので、常に調べながら作成してました。
特にデザイン部分は奥が深く、もっと勉強が必要だなと思いました。

終わりに

さすがクラウドは本番環境に反映、公開までがとても早いと感じました。
AWSの各サービスを利用方法はググれれば出てきますし、とても便利な世の中になったなと実感しています。
また、サービスとしてはまだ、改善の余地や機能の拡充はあると思いますので、これから引き続き、作っていこうと思います。