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

【Laravel】AdminLTEを導入

Laravel
スポンサーリンク

はじめに

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

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

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

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

AdminLTE 3 | Dashboard

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

Quipha

個人開発ですがQuiphaというサービスを開発しました。
Webアプリケーションであり、Laravelで作成しました。デザインはAdminLTEを使用しました。
簡単に管理画面のようなサイトを作れるのが便利ですね!

良かったら、会員登録して動作を試してみて下さい。

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プロジェクトへ導入

使用するバージョン
  • Laravel Framework 8.23.1
  • Node.js 14.15.4
  • Composer v2.0.8
  • jeroennoten/Laravel-AdminLTE (AdminLTE v3.0.5)

Laravelの構築

まずはLaravelの構築です。
ログイン画面も適用できますので、認証機能の導入もしましょう。
ブログの以下にまとめた記事をご参考ください。

詳しく解説してます👍

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

AdminLTEの導入

インストール

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

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

この時点で、公開フォルダにAdminLTE本体や、Bootstrap等が追加されます。
現時点ではひとつ古い、AdminLTE v3.0.5でした。

追加ファイル(抜粋)
  • 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の導入状況を確認します。

php artisan adminlte:status

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

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

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

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

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

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

php artisan adminlte:install --only=auth_views

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

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

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

http://localhost:8000/login

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

http://localhost:8000/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:8000/adminlte

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

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

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

さいごに

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

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

コメント

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