『Bootstrap4入門』学習用アプリケーション「会員管理システム（PMMS）」について 【Udemyで学習】
学習用アプリケーション「会員管理システム」についてお話しします。
このアプリは、本コースのために、Bootstrap4を利用して私が作成した、モックアップサイトです。サーバサイドの機能を実装していないモックアップですので、実際に会員を登録したり編集したりということはできません。作成したのは、Bootstrap4を利用したHTMLのみです。
また、本アプリの名称ですが、プログラミング愛好会の会員管理システムを想定しましたので、Programming club Membersip Management System の頭文字をとって「PMMS」と名付けました。
このアプリは主に３つの画面で構成されています。
１つ目の画面は「会員一覧画面」です。トップ画面として表示される画面です。会員の一覧が1ページに10人表示され、ページャ機能を具備しています。
２つ目の画面は「会員詳細画面」です。ページ内にタブを設置し、会員の基本情報や所属する部会などの情報を切り替えて表示できるように考えました。
3つ目の画面は「新規会員登路画面」です。Bootstrap4による登録用フォームの説明をするために設置しました。
次に画面遷移についてお話します。
「会員一覧画面」の氏名のリンクをクリックすると「会員詳細画面」に遷移します。また、画面上部の「会員一覧」リンクをクリックすると「会員一覧画面」に戻ることができます。さらに「会員登録」リンクをクリックすると「新規会員登録画面」に遷移します。ここでも画面上部の「会員一覧」リンクをクリックするとことで「会員一覧画面」に戻ることができます。
次に、画面遷移以外の画面の動きをご紹介します。
まずは画面上部に設置したナビゲーションバーです。画面をスクロールしても固定されて表示されるのでメニューとしての役割を持たせています。会員一覧や会員登録のリンクに加えて、ドロップダウン形式のメニューを実装しました。 ナビゲーションバー右端のバージョン番号をクリックすることで「このアプリについて」的なモーダルダイアログが表示されます。モーダルダイアログの紹介に使用することを目的として設置しました。
次に会員詳細画面で画像をスライド表示しているカルーセルです。デフォルトでは周期的に画像が変化しますが、画像の左右に存在するコントローラで意図的に画面を遷移することができます。
それから、同じく会員詳細画面のタブ切り替えです。ひとつのページに多くのコンテンツを表示させる場合によく使用される機能です。
本アプリは、GitHubのPages機能を使用して公開しています。URLは「https://zunda-lab.github.io/Bootstrap4Sample」です。いつでもお試しいただけます。
これで学習用アプリケーション「会員管理システム」の紹介を終わります。
