背景
練習用Webアプリ作成企画の進捗報告(2回目)です。
今回は仕様のうち、2に関連する部分に着手しました。
- 選手やコーチ、球団スタッフの情報を管理したい。
- 練習時間や試合のための移動、打ち合わせの時間を簡単に共有したい。
今回の部分に対応するブランチ(CreateForEvent)をプッシュしたため、手元で見てみたい方はクローンしてみてください。
目標
新規作成ページの実装
イベントクラス(練習時間や試合、移動)に関する作成ページを実装します。
結果
手順
Eventクラスの作成
EventクラスとそれとRelationがあるEventTypeクラスを作成しました。EventTypeクラスを用いて、Eventの種類(例、試合・移動・ミーティング)を管理しようと考えました。
テーブルの作成
EntityFrameworkを用いて、codeFirstに基づいて作成しました。
手順は、クラスの作成→migration→update-databaseになります。
詳しい手順はこちらに書いてます
新規作成ページの作成
ASP.NET MVCが用意してくれている機能で、モデルクラスをもとにCRUDを用意してくれます。
ひとまず、こちらで大枠を作成しました。
Nameはテキストボックスとなっており、デフォルトでは名前に統一感がでないように感じました。
そのため、Typeによって、Nameのプレースホルダを変更する仕様に変更しました。
例, Type = Game → プレースホルダ = “vs Celtics”
詳しい内容はこちらに記載しました。
Eventクラスには、日付(Date)、集合時間(MeetingTime)、解散時間(DismissalTime)を用意しました。こちらもDefaultのままでは、味が悪かったので、やや調整を行いました。
具体的にはflatpickrというライブラリを使用しました。flatpickrは、以下の理由から採用しました。
- 実装までがシンプル
- 日付のみの表示と時刻のみの表示を行えること
- 無料で利用できること
- デザインが素敵なこと
さらに、丁寧に解説してくださっている方がいたため、ほとんどコピペだけで使用することができました。flatpickrは結構気に入っていて、別の機会でも使用出来たらと思っています。
振り返り
良かった点
ひとまず、新規作成ページができてよかったです。
また、日付の部分はそれなりに時間をかけ、いくつかのライブラリを試したうえで今回の方法に至ったため、気に入っていますし、入力もしやすいのではないかと思っています。
プレースホルダーについても、名前の統一感を持たせることにつながったと思います。今後Nameを用いた検索機能を実装することをぼんやりと思い浮かべているため、その際に実装しやすくなるのではと思っています。
改善点
入力欄のサイズはもっと工夫してもいいかと思います。例えば、集合時間(MeetingTime)と解散時間(DismissalTime)はもっと小さくして、横並びにしていたほうが一般的かと思っています。
その他には、場所(Place)がある程度限定されているならば、DBにその場所を保存し、ドロップダウンリストで選択できるようにする、という選択肢もあるかなと思っています。
今後の方針
今日のスケジュール、今後のスケジュールが一目でわかるような画面を作成したいと思っています。
まだまだ下書きですが、左に今日と明日のスケジュール、右にカレンダーと選択した日の予定を表示したいなと思っています。
コメント