Laravelへの移行 on ララジャパン

Laravelへの移行（３）管理画面のスターターパッケージ　Laravel-AdminLTE

Sun, 06 Sep 2020 01:17:16 +0900

前回に引き続いて、Laravelを使用したBootstrapの管理画面のスターターパッケージの紹介です。いかに新規のプロジェクトの管理画面を速く立ち上げるかが目的です。前回は、Core UIをベースにしたパッケージでしたが、今度は、Admin LTEをベースにしたものです。両方ともBootstrapのバージョン４をもとにしています。

インストール

Laravel Boilerplateでは、Laravelそのものも含むzipファイルをダウンロードしてインストールという形式でしたが、Laravel-AdminLTEでは、まずLaravelのプロジェクトをコマンドラインで作成してから、Laravel-AdminLTEのパッケージjeroennoten/laravel-adminlteをcomposerでプロジェクトにインストールします。その際には、依存するパッケージalmasaeed2010/adminlteもインストールされます。 almasaeed2010/adminlteのパッケージがAdmin LTEの無料版のCSSフレームワークで、jeroennoten/laravel-adminlteのパッケージがLaravelのプロジェクトにおいて、管理画面のbladeファイル、レイアウト設定やメニューなどの機能を提供します。

ルック

残念ながらLaravel-Admin LTEのデモサイトがないのですが、以下のような感じです。

ログイン画像

管理画面画像

config/app.phpで設定が必要ですが、日本語も対応しています。

Admin LTEに関しては、こちらでいろいろなUIを閲覧できます。

設定

Laravel Boilerplateと比べて、デフォルトでインストールされている機能は少ないですが、以下のベーシックなレイアウトの設定が独自のconfig/adminlte.phpのファイルから簡単にできます。

タイトル
ファビコン
ロゴ画像
ユーザーメニュー
これは、画面右上のログインしたユーザー名（ここではkenji）をクリックしたときの表示。

レイアウト

例えば、上の画面の設定では、固定のナビバーとフッターを指定しています。

  'layout_topnav' => null,
  'layout_boxed' => null,
  'layout_fixed_sidebar' => false,
  'layout_fixed_navbar' => true,
  'layout_fixed_footer' => true,

認証の画面表示のCSSクラス
body、content、sidebar、topnavなどのcssクラス
サイドバーのルック
ユーザーのプロフィールやダッシュボードやログアウトなどのURL
Laravel MIXの使用
サイドバーのメニューの指定
配列で指定できます。階層もOKです。以下は上のメニューの設定の一部。
```
                                    
```
style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;">'menu' => [ [ 'text' => 'search', 'search' => true, 'topnav' => true, ], [ 'text' => 'blog', 'url' => 'admin/blog', 'can' => 'manage-blog', ], [ 'text' => 'pages', 'url' => 'admin/pages', 'icon' => 'far fa-fw fa-file', 'label' => 4, 'label_color' => 'success', ], ['header' => 'account_settings'], [ 'text' => 'profile', 'url' => 'admin/settings', 'icon' => 'fas fa-fw fa-user', ], [ 'text' => 'change_password', 'url' => 'admin/settings', 'icon' => 'fas fa-fw fa-lock', ], [ 'text' => 'multilevel', 'icon' => 'fas fa-fw fa-share', 'submenu' => [ [ 'text' => 'level_one', 'url' => '#', ], style="color:#f92672">...


サイドバーのメニューのフィルター。権限によりメニューのオン・オフが可能となります。
プラグイン。datatablesやselect2などのjsの指定。


これら設定は、以下の場所で詳細がドキュメントされています。
https://github.com/jeroennoten/Laravel-AdminLTE#6-configuration
採用できそう？
気に入ったのは、基本的な設定が簡単にconfigファイルで行えることです。また、Laravel Boilerplateと違って、独立したパッケージとして提供されているので、将来のパッケージの更新の面では管理しやすいと思います。



Laravelへの移行（２）管理画面のスターターパッケージ　Laravel Boilerplate
Sun, 30 Aug 2020 09:32:09 +0900
前回ではセッションを共有することで、現行のPHPのプログラムと新規のLaravelのプログラムの行き来が可能となりました。もう現行に縛られることはないので、新規の画面のルックも最新のレスポンシブ対応のBootstrapを取り入れてみます。管理画面の移行を前提に、Laravelを使用したBootstrapの管理画面のスターターパッケージをいくつか紹介します。今回はLaravel Boilerplateをご紹介します。
デモ
Laravel Boilerplateは、現在Laravel6.xと7.xの２つのバージョンがあります。
ウェブサイトは、https://laravel-boilerplate.com/index.html
デモサイトがあるので早速見てみましょう。
https://demo.laravel-boilerplate.com/login
以下の情報でログインできます。
管理者:
User: admin@admin.com
Password: secret
ユーザー:
User: user@user.com
Password: secret
ログイン画面は、

管理者としてログインすると管理画面となりますが、以下はそのユーザー管理画面、

とちょっと日本語変だけれど日本語にも対応しています。
ルックは、以下のBoostrapバージョン４対応のCore UIを使用しています。これを見るといろいろなことができそうでワクワクしますね。
追加されたcomposerのパッケージ
インストールして標準装着されている機能をチェックしたいなら、composer.jsonを見るのが手っ取り早いです。
以下は、Laravel 7.xのデフォルトのcomposerのrequireのセクションです。
...
    "require": {
        "php": "^7.2.5",
        "fideloper/proxy": "^4.2",
        "fruitcake/laravel-cors": "^1.0",
        "guzzlehttp/guzzle": "^6.3",
        "laravel/framework": "^7.0",
        "laravel/tinker": "^2.0",
        "laravel/ui": "^2.1"
    },
...
以下は、Laravel boilerplateの同様なセクションです。
...
   "require": {
        "php": "^7.2.5",
        "albertcht/invisible-recaptcha": "^1.9",
        "arcanedev/log-viewer": "7.x",
        "darkghosthunter/laraguard": "^2.0",
        "fideloper/proxy": "^4.2",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^6.3",
        "jamesmills/laravel-timezone": "^1.9",
        "lab404/laravel-impersonate": "^1.6",
        "langleyfoxall/laravel-nist-password-rules": "^4.1",
        "laravel/framework": "^7.22.4",
        "laravel/socialite": "^4.3",
        "laravel/tinker": "^2.0",
        "laravel/ui": "^2.0",
        "livewire/livewire": "^1.0",
        "rappasoft/laravel-livewire-tables": "^0.1",
        "rappasoft/lockout": "^2.1",
        "spatie/laravel-activitylog": "^3.14",
        "spatie/laravel-permission": "^3.11",
        "tabuna/breadcrumbs": "^1.0"
    },
...
いくつか追加されたパッケージを紹介すると、


arcanedev/log-viewer

Laravelのログも含めて、作成されたログファイルを管理画面でログのメッセージのレベルにマッチした色付きで閲覧できるようです。



darkghosthunter/laraguard

「2ファクタ認証」のパッケージです。最初から必要でないかもしれないですが、オプションとしてあるのはいいですね。



lab404/laravel-impersonate

これは管理者があたかもユーザーになりすますためのパッケージです。すでにLaravelにその機能あったような。



rappasoft/laravel-livewire-tables

これは以前紹介したjqueryのdatatablesのlivewire版です。



spatie/laravel-activitylog

こちらは以前紹介した、DBの変更履歴記録と同様なパッケージです。



spatie/laravel-permission

これは上に掲載したユーザー管理の画面において、それぞれのユーザーにロール（役割）を割り当てるためのパッケージです。それにより、ログインした管理者がどの画面にアクセスが可能かを操作します。結構なパッケージです。



tabuna/breadcrumbs

このブログでいつか紹介しようと思っていたのですが、パンくず表示のための、とても有名な、https://github.com/davejamesmiller/laravel-breadcrumbsパッケージがありました。しかし、残念なことに作者の都合で今年更新ストップとなりました。しかし、嬉しいことに、違うプログラマがそれをもとに新たなパッケージを作成したのがこれです。まだ使用したことありませんが、いつか紹介したいです。


追加されたnode-jsのパッケージ
今度は、jsのパッケージの方を見てみます。
composerと同様に、laravel 7.xでは、
...
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "vue-template-compiler": "^2.6.11"
    }
...
Laravel Boilerplateでは、
...
    "devDependencies": {
        "@coreui/coreui": "^3.0.0",
        "@coreui/icons": "^1.0.1",
        "@fortawesome/fontawesome-free": "^5.12.1",
        "@popperjs/core": "^2.0.6",
        "alpinejs": "^2.3.5",
        "axios": "^0.19",
        "bootstrap": "^4.5.0",
        "cross-env": "^7.0",
        "jquery": "^3.5.1",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "perfect-scrollbar": "^1.5.0",
        "popper.js": "^1.16.1",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "sweetalert2": "^9.8.2",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
...
こちらも追加されたパッケージを見てみましょう。

@coreui/coreui、@coreui/icons

テンプレートとして使用しているCore UIのパッケージです。なるほどnpmで管理するのですね。アイコンも1500以上あるようです。ちなみに、Core UIを使用しているのは、管理者画面の部分のみです。


@fortawesome/fontawesome-free

これは非常に有名なアイコンのライブラリです。有料版もありますが、ここでは無料版を使用です。先の、Core UIのアイコンと合わせて膨大な数のアイコンから選択可能となります。


alpinejs
こちらはLivewireの作者のjsフレームワークです。日本語のマニュアルもありますね。


sweetalert2
こちらは、jsのalert()のベターバージョンのようですね。興味あります。


さて、これ採用できそう？
機能が盛りだくさん、というのが印象です。しかし使いこなすには、彼ら独自のディレクトリの構造（Domainなど）があり、すべて理解する必要あり時間がかかりそうです。かと言って、要らない機能のパッケージを外して簡単化するのは、影響する部分を考えると難しそうだし。
また、resources/viewsのディレクトリの構造やその中のbladeファイルを見ると、コンポーネントとか使用してとてもフレキシブルにしていますが、細分化しすぎの感がありこれまた理解に時間がかかりそうです。また、多言語対応なので、国際的なプロジェクトの作成には良いかもしれませんが、日本語だけしか必要ないとなると複雑すぎです。
あと、管理画面のメニューを管理する機能があればよいのですが、残念ながらありません。
これを採用するかどうかは別として、知らないパッケージがどう使われているかはとても参考になりそうで、時間かけて理解するのは価値はあります。ということで次回は違うLaravelのスターターパッケージ（？）を見てみます。


Laravelへの移行（１）他のプログラムの認証セッションを認識
Sun, 12 Jul 2020 07:52:38 +0900
長いこと開発者をやっていると自分が開発した古いphpのプログラムの管理が悩みの種になります。なぜならLaravelのフレームワークが使われていないからです。年々新しい機能を追加したりしていると複雑になってくるし、ある昔のフレームワークで書かれたプロジェクトではphpunitも使えなく検証も容易にできません。このままで進んでいくにはますます管理において頭が痛くなります。しかし、すべて書き直してLaravelへの移行となると、日数とコストは大変なものです。さらに、外見がほとんど変わらずに中身だけの変更なので、お客さんを説得するのも難しい。
しかし、機会は訪れるもので、その悩みのプロジェクトのひとつにおいて、お客さんから大きな新規のリクエストが来ました。その新規のリクエストは現在の機能とは独立して扱える部分が多いので、こちらを独立させてLaravelで開発することにして、完成したら現行の機能を徐々にLaravelに移行していく、ということになりました。
嬉しい前進ですが、このプロジェクトに関して１つの必須条件は、現行のプログラムの認証を使用して（まだ使われるので）、新規のLaravelのプログラムの方では再度ログインを必要としてはいけない、というものです。
現行のプログラムの認証セッション
現行のプログラムもLaravelと同様に、ユーザー認証後ブラウザのクッキーを使用してそのユーザーのためだけの認証セッションを作成します。
以下は、現行のプログラムの認証セッションをシミュレートするプログラムですが、ログインしたユーザーの情報（ここでは、user_id）をセッションの情報に保存します。
start.php
ini_set('session.save_path', "/usr/www/repos/session");
ini_set('session.cookie_secure', '1'); // only secure
ini_set('session.name', 'admin');

session_start();
$_SESSION = ['user_id' => 1];
このプログラムをウェブでアクセスすると、アクセスしたクライアント、つまりブラウザでは、そのドメインで、adminという名前のクッキーが作成され、t20fa2tc05dd5gda1sfs1tsrofのような値が保存されます。そして、サーバー側では、指定した場所、つまり、/usr/www/repos/sessionのディレクトリに、sess_t20fa2tc05dd5gda1sfs1tsrofのセッションファイルが作成されます。その中身は以下のようになります。phpの$_SESSION変数の中身がそこで保存されています。
$ sudo cat /usr/www/repos/session/sess_t20fa2tc05dd5gda1sfs1tsrof
user_id|i:1;
認証セッションの認識
さて、問題は先の他のphpプログラムでの認証セッションをどうやってLaravelで認識して、あたかも自分の認証とするか、です。しかし、phpのセッションの構造は、Laravelの認証後に作成されるセッションとは違い、Laravelで簡単に共有というわけにはいきません。
そこで、私が考えたのは、まず、新規のLaravelのプログラムが認証を必要するときに、現行のプログラムですでに作成された認証セッションを認識して、それが正しいものなら、改めてLaravelの認証を実行することです。幸い、Auth::login($user);のようにログイン画面を通さずに認証する関数もあります。
まず、routeの設定部分を見てみましょう。
routes/web.php
Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');
上では、/homeにアクセスすると、ログイン画面、/loginにリダイレクトされますが、それはHomeControllerのコンストラクタで以下のようにガードされているからです。
app/Http/Controlers/HomeController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth:admin');　// ここで保護
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Contracts\Support\Renderable
     */
    public function index()
    {
        return view('home');
    }
}
しかし、以下のようにAuthenticateのミドルウェアのauthenticate()を上書き定義すると、
app/Http/Middleware/Authenticate.php
namespace App\Http\Middleware;

use Illuminate\Auth\Middleware\Authenticate as Middleware;

use Auth;
use App\User;

class Authenticate extends Middleware
{
    /**
     * Determine if the user is logged in to any of the given guards.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  array  $guards
     * @return void
     *
     * @throws \Illuminate\Auth\AuthenticationException
     */
    protected function authenticate($request, array $guards)
    {
        if (empty($guards)) {
            $guards = [null];
        }

       if (in_array('admin', $guards)) {
            // すでにLaravel側で認証されているなら、OK
            if ($this->auth->guard('admin')->check()) {
                return $this->auth->shouldUse('admin');
            }

            // 現行のプログラムの認証セッションから情報を取得

            ini_set('session.save_path', "/usr/www/repos/session");
            ini_set('session.cookie_secure', '1'); // only secure
            ini_set('session.name', 'admin');

            session_start();

            if (isset($_SESSION['user_id'])) {
                if ($user = User::find($_SESSION['user_id'])) {
                    // ユーザーが存在するなら、Laravelで認証
                    Auth::guard('admin')->login($user);
                }
            }
        }

        foreach ($guards as $guard) {
            if ($this->auth->guard($guard)->check()) {
                return $this->auth->shouldUse($guard);
            }
        }

        $this->unauthenticated($request, $guards);
    }
...
すでに、現行のプログラムで認証されているなら、そのセッションの値を取得してLaravel側でも認証とします。
注意点としては、現行のプログラムと新規のLaravelのプログラムとで２つの認証セッションが存在することになります。両方とも違うセッションでお互いの存在を知らないので、セッションの期間が異なることになります。現行の方の認証が期限切れとなってもLaravelの方ではまだ期限内かもしれません。しかし、逆にLaravelのセッションが期限切れとなっても現行のプログラムのセッションが期限内なら、再度Laravelでセッションを作成するので問題はありません。
それから、現行のプログラムもLaravel側でも認証されていなときに、Laravel側にアクセスされたら、現行のプログラムのログイン画面にリダイレクトすることが必要です。それは以下のように、先のAuthenticateのクラスで、unauthenticated()を定義することにより可能です。
app/Http/Middleware/Authenticate.php
...
   /**
     * Handle an unauthenticated user.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  array  $guards
     * @return void
     *
     * @throws \Illuminate\Auth\AuthenticationException
     */
    protected function unauthenticated($request, array $guards)
    {
        if (in_array('admin', $guards)) {
           throw new AuthenticationException(
                'Unauthenticated.', $guards, 'http://localhost/app/admin/login' //現行のログイン画面
            );
        }
    }
...
最後に、現行のプログラムも新規のLaravelでも、セッションのクッキーパスが同じとすることをお忘れずに。そうでないと、新規のLaravelでは現行のプログラムのセッションにアクセスできません。上では両方ともクッキーパスはデフォルトの/となっています。

Laravelへの移行 on ララジャパン

Laravelへの移行（３）管理画面のスターターパッケージ Laravel-AdminLTE

インストール

ルック

設定

採用できそう？

Laravelへの移行（２）管理画面のスターターパッケージ Laravel Boilerplate

デモ

追加されたcomposerのパッケージ

追加されたnode-jsのパッケージ

さて、これ採用できそう？

Laravelへの移行（１）他のプログラムの認証セッションを認識

現行のプログラムの認証セッション

認証セッションの認識

Laravelへの移行（３）管理画面のスターターパッケージ　Laravel-AdminLTE

Laravelへの移行（２）管理画面のスターターパッケージ　Laravel Boilerplate