Laravel Novaとは
Laravel Novaは最近発表されたばかりのLaravel用の管理者画面作成パッケージになります
Laravelのメイン開発者が作ったこともありかなり話題になっています
Laravel Novaのような管理者画面用のパッケージはプロダクトの初期など管理者画面の作成に工数を避けない場合に重宝します。
導入におけるポイント
このような管理者画面用のパッケージは無料のものから有料のものまで幅広くありますが、実際に導入を検討するにあたって
外せないポイントが以下の2つだと思っています
1. テーブルのCRUD画面が、ほぼ工数0で実装できる
2. 独自のページを簡単に追加できる
1 に関しては他の記事や公式サイトなどを参考にしていただければ、問題なくできることがわかると思いますが
2 の個別ページの追加などに関しては記載がなかったので今回ご紹介させていただきます。
前提知識
個別のページの追加するにあたって、まずLaravelNovaの簡単な構成をお話します。
Laravel Novaはページの構成にVue.jsを使用しており,ページ遷移などはvue-routerを使用する
SPAの管理画面になっています。
なので、ページを追加するにあたってlaravelのbladeではなくvueファイル単位で追加していくことになります。
そのためbuildする必要があるので、npmコマンドが実行できる環境を予め構築しておいてください。
追加ページ
今回は画面に
こんな感じのカスタム画面を追加してみようと思います
１. ビルド環境の構築
まずプロジェクト直下の nova ディレクトリへ移動します
cd nova
次に必要なモジュールをインストールします (必ずnovaディレクトリ配下でやってね)
npm install
完了すると以下のように、nova配下に node_modules ディレクトリが作成されます
nova
├─ config
├─ database
├─ node_modules
├─ ...
次にnova配下にコメントアウトしてあるwebpack.mix.jsがあるのでリネームして使える状態にします
webpack.mix.js.dist → webpack.mix.js にする
webpack.mix.js内に記述してあるbuild後のコピー先ディレクトリを変更します
.copy('public', '../nova-app/public/nova')
↓
.copy('public', '../public/nova-assets/')
これでページを追加する準備は整いました
2. ページの追加とvue.routerの設定
以下のようにviews配下にtest.vueを追加します
nova
├─ config
├─ database
├─ node_modules
├─ resources
├─js
├─ views
├─ test.vue ⬅ ここに追加する！！
test.vue
<template>
<main>
<p>カスタムページです</p>
<br>
<input type="button" value="OK">
</main>
</template>
ページを追加できたら、ルーティングの設定をします
routes.jsの中身に先程のページを追記します
nova
├─ config
├─ database
├─ node_modules
├─ router
├─routes.js
routes.js
import test from '@/views/test'
// 省略
{
name: 'test',
path: '/test',
component: test,
},
以下のファイルにも追記します
nova
├─ config
├─ database
├─ node_modules
├─ resources
├─components.js
components.js
import test from '@/views/test'
// 省略
Vue.component('test', test)
以上でページの追加は終わりです。
3. buildして反映させる
最後にbuildします (必ずnovaディレクトリ配下でやってね)
npm run watch
実行すると以下のように表示されbuildが成功しているのがわかると思います
WAIT Compiling... 00:24:18
95% emitting
DONE Compiled successfully in 457ms 00:24:18
Asset Size Chunks Chunk Names
/app.js 2.39 MB 0 [emitted] [big] /app
/app.css 68.5 kB 0 [emitted] /app
buildが完了したので
/nova/test とアクセスすると先程追加したページが見れる用になっています
本来であれば、左側のサイドバーからページ遷移できる用にしたいのですが、そのあたりはまた別の機会とさせてください。
以上で個別ページの追加は完了です！！
あとがき
LaravelNovaはまだ出たばかりであり、現在たくさんissueも上がっているため、もっと簡単にできるようになるかもしれません。個人的にはUIやvueを取り入れているところも含めて結構気に入ってるので今後LaravelAdminに変わってスタンダードになっていくのでは と期待しています。
もちろん単純なCRUDのページであればvueをいじらずともphpの記述だけで実装できます
今回は単純なCRUDではカバーしきれない場合などにご活用ください。