画面構成を考えてみる - Laravelで業務システム

ベースができたので、いよいよメインの開発をはじめるわけですが、今回は画面構成に関して少し考えたいと思います。ちなみにログイン機能なのですが、修正画面等がないので別の機会にテコ入れしようと思ってます。

メニュー構成

顧客マスタだけつくるのにメニュー構成も何もないだろうと思われそうですが、確かにその通りです。ただ、実際のシステムでは様々な機能があり、メニューはなくてはならないものです。後で、メニュー追加したりするとメインのプログラムにも手を加えないといけないということもわりとあるので、形だけでも作っておきます。

イメージ的にはログイン後、メインメニューが表示され、そこに"マスタ"ボタンを作りクリックすると、"マスタメニュー"画面に遷移し"マスタメニュー"画面に"顧客マスター"ボタンを配置して、そこから、顧客マスタの画面に遷移するイメージです。

メニューというとドリルダウンメニューやツリーメニュー等がありますが、画面にボタンを配置する形のほうが直感的にわかりやすいしコーディングしやすのでよく使います。もちろん適材適所ではありますけどね。

顧客マスタ画面構成

マスタ画面は単純なものだと、利便性を考えCRUDを一画面で実現することがよくあります。ただ、複雑なもになると一画面構成にするのは困難になり、返って利便性が落ちる場合もあります。今回はここも考慮して、CRUDは分離した画面で実現するようにします。

とはいえ、現段階で複雑なマスタを作ることは想定しておらず、顧客マスタで扱う項目は"顧客コード","顧客名","住所","TEL","FAX"程度のものでいったんとめておきます。いままで作ってきた顧客マスタはだいたいこのあたりの項目は入れてました。

UIについて

Laravel/UIのスカフォールドはReactを選択しましたが、LINEのようなアプリ開発考えることをしなければSPAを意識しなくてもいいだろうと考えており、Laravelの標準+BootstrapでUI構築は基本行うようにします。ただし、SPAのほうが便利なところがあれば、React使ってみてもいいかもしれませんが、こっちは気が向いたら別カテゴリでやろうかと思います。

尚、スカフォールドをReactにしたのでBootstrapは別で、依存関係考慮して読み込まないといけないかなと思ったら、インストールされているようです。初期画面のBladeファイルでBootstrapのclass使ってたのであれっ?とは思ってましたが。

npmでインストールしたパッケージはプロジェクトフォルダ直下の"package.json"みるとわかり、ちゃんとbootstrapの記載もあります。ただし、私の環境だとBootstrapのバージョンが v4.6.0なので、最新の5系でないため、ここは気を付けといたほうがよさそうです。