以前知人に作ってくれーみたいなことを言われたような言われてないような気がしたので簡易版を作ってみました。
内容は安来市民体育館をベースにしています。
ホーム画面
![](https://pcmatsumoto.com//wp-content/uploads/2022/03/2022-03-07_23h35_00-1024x495.png)
できる限りシンプルに。
シンプル・イズ・ベスト!
![](https://pcmatsumoto.com//wp-content/uploads/2022/03/Screenshot_20220307-233715-576x1024.png)
もちろんスマホにも対応!
色の違いは単に筆者がPCブラウザをダークモードで使用しているからというだけで、通常は統一されています。
管理画面
予約
![](https://pcmatsumoto.com//wp-content/uploads/2022/03/2022-03-09_16h47_56-1-1024x495.png)
管理者IDとパスワードを入力すると
![](https://pcmatsumoto.com//wp-content/uploads/2022/03/2022-03-09_16h51_50-1024x495.png)
予約入力画面が表示されます。
試しにテキトーに予約してみると
![](https://pcmatsumoto.com//wp-content/uploads/2022/03/2022-03-09_16h54_47.png)
![](https://pcmatsumoto.com/wp-content/uploads/2022/03/2022-03-09_16h55_54-1024x495.png)
ちゃんと予約状況が更新されます。
予約削除
メニューから「List」を選択すると
![](https://pcmatsumoto.com//wp-content/uploads/2022/03/2022-03-09_17h01_17-1024x495.png)
予約一覧が表示されるので
![](https://pcmatsumoto.com//wp-content/uploads/2022/03/2022-03-09_17h02_50-1024x495.png)
削除したい予約のチェックボックスをクリックorタップし削除ボタンを押すと
![](https://pcmatsumoto.com//wp-content/uploads/2022/03/2022-03-09_17h04_06-1024x495.png)
削除されます。
バグ
実はここまでで説明した機能の中に重大なバグを残してあります。
もしリリースするとしたら修正しますが、どこにバグが有るか考えてみてください。
テスト版はこちら。(現在は仕様を変更しています。)
まとめ
YouTubeで見ているエンジニアのチャンネルがWeb系ばかりだったので触発されて作ってみました。
過去にも似たようなものは作ったことがあるのですが、最近はより簡単に作れるようになってました。
技術の進歩ってすごいですね。
コメント