🎇

Laravelの管理画面ライブラリVoyagerを使ってみた

2021/03/11に公開5件

Laravel

PHP

voyager

tech

Laravel(+Vue)での管理画面作成に際して、色々と技術調査をしていてVoyagerに興味が出て、技術調査がてら少々使ってみたので、まとめてみました。

想定読者

Laravel(+Vue)で管理画面を作成したい際に、技術選択の一つとしてVoyagerを視野に入れて、比較検討したい方
(英語が苦手な私みたいに)Voyagerを使用する際、英語の文献を読みたくない方

Voyager

Laravelの管理画面作成ツールです。
https://voyager.devdojo.com/

Laravel-adminとの比較等に関してはこちらを参照していただけると有難いです。

Laravelの他の管理画面ライブラリに関しては読者各々に調べていただくとして、ここでは割愛します。

インストール

Laravelのインストールに関してはこちらを使用します。
かつてlaradockで苦しんでいた時代が懐かしいですね（笑）

Laravelプロジェクトのインストール

curl -s https://laravel.build/example-app | bash

example-appディレクトリに移動してLaravel-Sailを起動する

cd example-app
./vendor/bin/sail up

Laravelデフォルトの画面が立ち上がります。

Composerをインストールします。

composer install

Voyagerをインストールします。

composer require tcg/voyager

ダミーデータを取り込みます。

./vendor/bin/sail php artisan voyager:install --with-dummy

ログインをします。
http://localhost/admin/login

初回に関してはこちらでログインすることが可能です。
email: admin@admin.com
password: password

ログインが完了し、管理画面に入ることができました。

新しいテーブルの作成

メニューバーから「Tools」の中の「Database」を選択し、左上の「新しいテーブルを作成」を押下します。

カラムを入力します。

productsテーブルが作成されたことが確認できます。「このテーブルにBreadを追加」を押下します。

左のメニューバーの中にproductsがあることが確認できます。

「新しく追加」を押下すると新規データの追加、「一括削除」を押下すると全データの削除、「表示」を押下すると詳細の確認、「編集」を押下するとデータの編集、「削除」を押下すると該当データが削除されます。

widgetsの編集

vendor/tcg/voyager/src/widgets/〇〇が
app/Widgets/〇〇にオーバーライドするので、
app/Widgets/ProductDimmerの作成

<?php
namespace App\Widgets;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Str;
use TCG\Voyager\Facades\Voyager;
use App\Models\Product;
use TCG\Voyager\Widgets\BaseDimmer;
class ProductDimmer extends BaseDimmer
{
    /**
     * The configuration array.
     *
     * @var array
     */
    protected $config = [];
    /**
     * Treat this method as a controller action.
     * Return view() or other content to display.
     */
    public function run()
    {
        $count = Product::get()->count();
        $string = ‘製品’;
        return view(‘voyager::dimmer’, array_merge($this->config, [
            ‘icon’   => ‘voyager-bag’,
            ‘title’  => “{$count} {$string}“,
            ‘text’   => “データベースに{$count}製品存在しています。すべての製品を表示するには下記のボタンをクリックください。“,
            ‘button’ => [
                ‘text’ => ‘すべての製品を表示’,
                ‘link’ => route(‘voyager.products.index’),
            ],
            ‘image’ => voyager_asset(‘images/widget-backgrounds/02.jpg’),
        ]));
    }
}

App/Models/Product.phpの作成

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
    use HasFactory;
}

config/voyager.phpのwidgets部分を編集をします。

'dashboard' => [
    // Add custom list items to navbar's dropdown
    'navbar_items' => [
        'voyager::generic.profile' => [
            'route'      => 'voyager.profile',
            'classes'    => 'class-full-of-rum',
            'icon_class' => 'voyager-person',
        ],
        'voyager::generic.home' => [
            'route'        => '/',
            'icon_class'   => 'voyager-home',
            'target_blank' => true,
        ],
        'voyager::generic.logout' => [
            'route'      => 'voyager.logout',
            'icon_class' => 'voyager-power',
        ],
    ],
    'widgets' => [
        'TCG\\Voyager\\Widgets\\UserDimmer',
        'TCG\\Voyager\\Widgets\\PostDimmer',
        'App\\Widgets\\ProductDimmer',　//この部分を編集します。
    ],
],

となり、先程のapp/Widgets/ProductDimmer.phpが反映されていることが確認できる。

viewの編集

上記で作った　http://localhost/admin/product　のページを編集していきます。

vendor/tcg/voyager/resources/views/〇〇が
resources/views/vendor/voyager/〇〇にオーバーライドするので、
resources/views/vendor/voyager/products/browse.blade.php
を記載します。

vendor/tcg/voyager/views/resources/bread/browse.blade.phpをコピーし
@section('content')部分を削除すると、
下記のようになり、オーバーライドができていることが確認できます。

下記辺りを参考にしていただけると、できると思われます。

voyagerのメリット・デメリット

技術調査の過程でvoyagerを使ってみた所感を記します。

メリット

爆速で管理画面の機能が実装できる。
個人開発で、複雑な要件でない場合の最適なツールであるように思える。
Githubのスター数が多いので、使用者が多い。

デメリット

管理画面から生成したデータやテーブルを出力する術がデフォルトの機能にないと思われるので、複数人での開発に不向きであるように思える。
複雑な要件に対応するのが、難しそうに感じる。
描画部分をblade.phpに記載していく形になるので、コードの可読性が悪い。
日本語記事が少ないため、英語文献に当たる機会が多くなりそう。

最後に

ここまで読んでいただき誠にありがとうございました。最終的に僕は個人開発においてvoyagerを利用していないので、これ以上調査することは現在は検討していないのですが、よりよい使い方等知っている方がいれば教えていただけると幸いです。理解が不十分な所等もあるかもしれませんが、ご指摘いただけると幸いです。

Discussion

convers39

ブログありがとうございます。
ちょうど今sailで新しいappを立ち上げて、voyagerをインストールするのを試していますが、このステップでターミナルで何もアウトプットがなく静かに終わってしまいます。。

./vendor/bin/sail php artisan voyager:install --with-dummy

色々と検索してみましたが、インストールするとマイグレーションなどのメッセージが出るはずですよね。同じ状況にあったりするのでしょうか。

しげるさん

こちら検証しました。

./vendor/bin/sail php artisan voyager:install --with-dummy

のコマンドを打つと、自分の環境だと上記手順でmigrationなどのメッセージが出ています。
すいません。現状原因が分からないです。詳細など書いていただければ、原因が分かるかもしれません！

しげるさん

コメントありがとうございます。すみません、今確認いたしました。執筆時と状況が異なっている可能性もありますので、後日になりますが、検証してレスします。

convers39

ご丁寧にありがとうございます。
色々と試行錯誤して、ようやく原因が見つかりました。
理由は自分がdocker-composeファイルを変えたからです。laravelのservice nameの.testを削除してしまい(laravel.test -> laravel)、sailが実行する時に道を迷ってしまいます。
これに気づいたのは、voyagerのインストールだけでなく、全てのコマンド（例えばsail php -vでさえ）が無反応とのことでした。
それでsailかdockerの問題ではないかと思い、sailのシェルスクリプトをよく見たら、下記の行があって、APP_SERVICEの環境変数が設定されているのがわかりました。
export APP_SERVICE=${APP_SERVICE:-"laravel.test"}
今は無事に作動しています。お手数をおかけしてすみませんでした。

しげるさん

おー、良かったです！良き開発ライフを！