自分だけのクイズ作成 - Quipha公開中

【Laravel】AdminLTEを導入

Laravel
スポンサーリンク

はじめに

皆さん、Webアプリケーションの画面を作るとき、イチから作成していますでしょうか。

レスポンシブデザイン対応など、

イチから作ると結構面倒ですよね?

そんな時は、出来合いのテンプレートを使って、サクッとアプリケーションを作成しましょう!
オススメは「AdminLTE」です。

AdminLTE 3 | Dashboard

AdminLTEについて詳しくは、こちらの記事にまとめましたので参考にしてみてください。

LaravelでCRUDアプリを作成する際に、AdminLTEを使用して実装しました。
良ければ以下の記事もご覧ください。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

Laravel-AdminLTE

今回は、Laravel向けに最適化されたLaravel-AdminLTEを使用してみたいと思います。

GitHub - jeroennoten/Laravel-AdminLTE: Easy AdminLTE integration with Laravel
Easy AdminLTE integration with Laravel. Contribute to jeroennoten/Laravel-AdminLTE development by creating an account on GitHub.


AdminLTE本体をダウンロードしても導入することができますが、Composerを使用して簡単に導入することもできますし、Blade化されていたりカスタマイズもしやすいためです。

この後解説していますが、さらに詳しい手順は作者のWikiをご覧ください。

Home · jeroennoten/Laravel-AdminLTE Wiki
Easy AdminLTE integration with Laravel. Contribute to jeroennoten/Laravel-AdminLTE development by creating an account on GitHub.

Laravelプロジェクトへ導入

使用するバージョン
  • Windows 11 or macOS Monterey (M1)
  • Laravel Framework 8 or 9
  • Node.js 16.14.2
  • Composer v2.3.5
  • jeroennoten/Laravel-AdminLTE (AdminLTE v3.2.0)

2022/02/09 Laravel9で問題なく動作することを確認しました。
2022/04/19 最新バージョンで確認しました。

Laravelの構築

まずはLaravelの構築です。
Laravel Sailを使った構築は以下の記事をご覧ください。

Windows
Mac

ログイン画面も適用できますので、認証機能の導入もしましょう。

Laravelにアクセスすると、初期画面が表示されます。

AdminLTEの導入

インストール

Laravel-AdminLTEをComposerを使用してインストールします。
Laravelのプロジェクト直下で、以下のコマンドを実行します。

$ sail composer require jeroennoten/laravel-adminlte
$ sail php artisan adminlte:install

この時点で、公開フォルダにAdminLTE本体や、Bootstrap等が追加されます。

追加ファイル(抜粋)
  • config/adminlte.php
  • public/vendor/adminlte/dist/css/adminlte.css
  • public/vendor/adminlte/dist/css/adminlte.css.map
  • public/vendor/adminlte/dist/css/adminlte.min.css
  • public/vendor/adminlte/dist/css/adminlte.min.css.map
  • public/vendor/adminlte/dist/img/AdminLTELogo.png
  • public/vendor/adminlte/dist/js/adminlte.js
  • public/vendor/adminlte/dist/js/adminlte.js.map
  • public/vendor/adminlte/dist/js/adminlte.min.js
  • public/vendor/adminlte/dist/js/adminlte.min.js.map
  • public/vendor/bootstrap/js/bootstrap.bundle.js
  • public/vendor/bootstrap/js/bootstrap.bundle.js.map
  • public/vendor/bootstrap/js/bootstrap.bundle.min.js
  • public/vendor/bootstrap/js/bootstrap.bundle.min.js.map
  • public/vendor/bootstrap/js/bootstrap.js
  • public/vendor/bootstrap/js/bootstrap.js.map
  • public/vendor/bootstrap/js/bootstrap.min.js
  • public/vendor/bootstrap/js/bootstrap.min.js.map
  • public/vendor/fontawesome-free/css/all.css
  • ..
  • public/vendor/jquery/jquery.js
  • public/vendor/jquery/jquery.min.js
  • public/vendor/jquery/jquery.min.map
  • public/vendor/overlayScrollbars/css/OverlayScrollbars.css
  • ..
  • public/vendor/popper/esm/popper-utils.js
  • ..
  • resources/lang/vendor/adminlte/ar/adminlte.php
  • ..

導入状況の確認

以下のコマンドを実行し、AdminLTEの導入状況を確認します。

$ sail php artisan adminlte:status

以下のように表示されました。

AdminLTE本体や、設定ファイル、翻訳ファイルは導入済みです。
引き続き、テンプレートファイル(Blade)を適用していきます。

テンプレートファイル適用

はじめに、ログイン画面のデザインを変更しましょう。

この手順では、既存のログインテンプレートファイルが上書きされますので、必要に応じてバックアップを行いましょう。

以下のコマンドを実行します。

$ sail php artisan adminlte:install --only=auth_views

以下の警告が表示されます。問題なければ「yes」を入力します。

The authentication views already exists. Want to replace the views? (yes/no) [no]:

それではログイン画面を表示してみましょう。
AdminLTEのログイン画面になりましたね。

http://localhost/login

引き続き、ユーザ登録画面を開きます。
こちらも画面がAdminLTEになりました。

http://localhost/register
スポンサーリンク

サンプルページの作成

それではサンプルページを作ってみましょう。
以下の場所にBladeファイルを作成します。

resources/views/adminlte.blade.php

中身は以下のように記述します。たったこれだけです。
これはAdminLTEのテンプレートを指定しています。

adminlte.blade.php
@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>ダッシュボード</h1>
@stop

@section('content')
    <p>ここがコンテンツ部分です</p>
@stop

@section('css')
    {{-- ページごとCSSの指定
    <link rel="stylesheet" href="/css/xxx.css">
    --}}
@stop

@section('js')
    <script> console.log('ページごとJSの記述'); </script>
@stop

web.phpに以下を追記します。
簡易的ですので、コントローラは作成せず、そのままルートを定義して画面を確認しましょう。

web.php
Route::get('adminlte', function () {
    return view('adminlte');
});

サンプルページにアクセスしてみましょう。

http://localhost/adminlte

AdminLTEの画面が表示されました。

ページごとのJavascriptも動作していることが、開発ツールのConsoleから確認できます。

Bladeも必要最低限の記述であり、content部分だけ追加して行けば、どんどんページを作成できますね!

その他

初学者へ

Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう!
Laravelアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

さいごに

今回は導入までまとめました。
非常に簡単に、かっこいいデザインを使うことができますよね!

次回は、カスタマイズの仕方や、実例をまとめたいと思います。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

\オススメ/

コメント

タイトルとURLをコピーしました