yarnでインストールしたAdminLTE3を使った管理画面の作り方
こんにちはしおはまです。
今回はAdminLTE3を使った管理画面の作り方をまとめていきたいと思います。
そもそもAdminLTE3ってなんですか?って思いますね。
簡単にAdminLTEの説明
AdminLTE3
とはBootstrap3をベースにした、管理画面等のテンプレートテーマです。
上記のような画面や、
こんな管理者用のログイン画面だって簡単に実装できてしまいます。
スマートフォン等にも対応しており、かっこいい管理画面作りたいけどデザインに自信がない・・・といった方でも、かっこいいUIが作成できてしまいます。(ちなみに僕はフロント部分が苦手なので大変助けられました...)
前提条件
ます前提条件としてyarn
がインストールされていることを確認してください。
yarn
がインストールされていない場合は、先にyarn
をインストールしてからこちらを参考してください。
ここではyarn
のインストールは割愛させていただきます。
AdminLTEのインストール
それではさっそくAdminLTE
をインストールしていきます。
$ yarn add admin-lte
色々インストールされて最後に✨ Done in
という文字が出たら正常にインストールされています。
インストールが完了したら以下の3つのファイルが作成されます。
- node_modules
- package.json
{ "dependencies": { "admin-lte": "^3.1.0-rc" } }
- yarn.lock
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. # yarn lockfile v1 "@fortawesome/fontawesome-free@^5.15.1": version "5.15.2" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz#218cd7276ab4f9ab57cc3d2efa2697e6a579f25d" integrity sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA== "@lgaitan/pace-progress@^1.0.7": version "1.0.7" resolved "https://registry.yarnpkg.com/@lgaitan/pace-progress/-/pace-progress-1.0.7.tgz#c96fbbd9fd4cf528feed34ea0c8f9d8b3e98f0dd" integrity sha1-yW+72f1M9Sj+7TTqDI+diz6Y8N0= "@sweetalert2/theme-bootstrap-4@^4.0.1": version "4.0.3" resolved "https://registry.yarnpkg.com/@sweetalert2/theme-bootstrap-4/-/theme-bootstrap-4-4.0.3.tgz#7a9e7a99f5ecfb353e4ba9a16de918736162370c" integrity sha512-jP8cpQy4cGjlGPkEK8KF/owF00BRz5vvEdi5VrpTsiMjdkte85a1EZ/azPsX9HQrMAZ2qAmIsleV8UDcl8R2YQ== "@ttskch/select2-bootstrap4-theme@^1.4.0": version "1.5.2" resolved "https://registry.yarnpkg.com/@ttskch/select2-bootstrap4-theme/-/select2-bootstrap4-theme-1.5.2.tgz#3b4519b349f3e7831c28752a1e9617312a192656" integrity sha512-gAj8qNy/VYwQDBkACm0USM66kxFai8flX83ayRXPNhzZckEgSqIBB9sM74SCM3ssgeX+ZVy4BifTnLis+KpIyg==
このうちnode_modules
は頻繁に活用するのでちゃんとインストールされていることを確認してください。
使い方
AdminLTEの使い方はシンプルで先程インストールしたnode_modules
から使いたいhtmlファイル
を選び、erbファイル
に変換して使います。
例えば、初めに画像で使った管理者用のログイン画面を使いたい場合、
node_modules/admin-lte/pages/example/login.html
のファイルを使えば、簡単に使うことができます。
jsファイルとcssファイルを分ける
先程使用したlogin.html
はあくまでもhtmlファイル
なので中身を見るとわかると思うのですが、cssの読み込みやjsの読み込みのコードまで書いてあります。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>AdminLTE 3 | Log in</title> <!-- Google Font: Source Sans Pro --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"> <!-- Font Awesome --> <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css"> <!-- icheck bootstrap --> <link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css"> <!-- Theme style --> <link rel="stylesheet" href="../../dist/css/adminlte.min.css"> </head> <body class="hold-transition login-page"> <div class="login-box"> <div class="login-logo"> <a href="../../index2.html"><b>Admin</b>LTE</a> </div> <!-- /.login-logo --> <div class="card"> <div class="card-body login-card-body"> <p class="login-box-msg">Sign in to start your session</p> <form action="../../index3.html" method="post"> <div class="input-group mb-3"> <input type="email" class="form-control" placeholder="Email"> <div class="input-group-append"> <div class="input-group-text"> <span class="fas fa-envelope"></span> </div> </div> </div> <div class="input-group mb-3"> <input type="password" class="form-control" placeholder="Password"> <div class="input-group-append"> <div class="input-group-text"> <span class="fas fa-lock"></span> </div> </div> </div> <div class="row"> <div class="col-8"> <div class="icheck-primary"> <input type="checkbox" id="remember"> <label for="remember"> Remember Me </label> </div> </div> <!-- /.col --> <div class="col-4"> <button type="submit" class="btn btn-primary btn-block">Sign In</button> </div> <!-- /.col --> </div> </form> <div class="social-auth-links text-center mb-3"> <p>- OR -</p> <a href="#" class="btn btn-block btn-primary"> <i class="fab fa-facebook mr-2"></i> Sign in using Facebook </a> <a href="#" class="btn btn-block btn-danger"> <i class="fab fa-google-plus mr-2"></i> Sign in using Google+ </a> </div> <!-- /.social-auth-links --> <p class="mb-1"> <a href="forgot-password.html">I forgot my password</a> </p> <p class="mb-0"> <a href="register.html" class="text-center">Register a new membership</a> </p> </div> <!-- /.login-card-body --> </div> </div> <!-- /.login-box --> <!-- jQuery --> <script src="../../plugins/jquery/jquery.min.js"></script> <!-- Bootstrap 4 --> <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- AdminLTE App --> <script src="../../dist/js/adminlte.min.js"></script> </body> </html>
これをRailsではアセットパイプラインの仕組みを使って、jsファイルとcssファイルを分けることができます。
ここではわかりやすくadmin.js
とadmin.scss
ファイルを作成し、個別ファイルでjsとcssを分けていきます。
#admin.scss @import 'bootstrap/dist/css/bootstrap.min.css'; @import 'admin-lte/dist/css/adminlte.min.css'; @import 'admin-lte/plugins/fontawesome-free/css/all.min.css';
#admin.js //= require rails-ujs //= require jquery/dist/jquery.min //= require bootstrap/dist/js/bootstrap.min //= require admin-lte/dist/js/adminlte.min
※application.js、application.cssでのrequire_tree .について
Railsではデフォルトでapplication.js
とapplication.css
に
# application.js //= require_tree .
# application.css
*= require_tree .
というコードがあります。
これは何を意味しているかというと、require_tree
には指定したディレクトリ以下のすべてのJSファイルを読み込むといった特徴があります。
先程作成したadmin.js
とadmin.css
は application.js
とapplication.css
と同じ階層に作成しています。
→つまりrequire_tree
を記述していることによって管理画面しか使用しないファイルまでapplication.css(js)
を読み込んでしまいます。
個別でcss、jsファイルを読み込むにはrequire_tree
は削除します。
jsファイルとcssファイルを別に読み込むことができたら元のhtmlファイルをerbで使う部分以外を削除します。(今回は元のファイルからかなりカスタマイズしています)
<div class="hold-transition login-page"> <div class="login-box"> <div class="login-logo"> <%= link_to 'ログイン', '#' %> </div> <div class="card"> <div class="card-body login-card-body"> <%= form_with local: true do |f| %> <div class="form-group"> <%= f.label :email, (t 'user_sessions.new.email') %> <%= f.email_field :email, class: 'form-control', id: 'email' %> </div> <div class="form-group"> <%= f.label :password, (t 'user_sessions.new.password') %> <%= f.password_field :password, class: 'form-control', id: 'password' %> </div> <div class="row"> <!-- /.col --> <div class="col-4 form-group"> <%= f.submit t('user_sessions.new.title') , class: 'btn btn-primary' %> </div> <!-- /.col --> </div> <% end %> </div> </div> </div> </div>
このようにすると
無事にログインが作れたかと思います。
まとめ
今回はバックエンドの実装ではなく、フロント部分の実装をしました。
フロント部分は苦手なのでしっかりアウトプットすることで知識の定着を測っていきたいです。
バックエンドの実装も今後まとめていければと思っています。
最後まで拝読していただき、ありがとうございました。