しおブログ言うてますけど

技術ブログ言うてますけど技術以外のことも発信すると思われ。RubyとかRuby on Railsとか生き方とかジャンルにこだわらず自分の好きなように。初心者なのでお手柔らかに。

yarnでインストールしたAdminLTE3を使った管理画面の作り方

こんにちはしおはまです。
今回はAdminLTE3を使った管理画面の作り方をまとめていきたいと思います。
そもそもAdminLTE3ってなんですか?って思いますね。

簡単にAdminLTEの説明

AdminLTE3とはBootstrap3をベースにした、管理画面等のテンプレートテーマです。

https://i.gyazo.com/508d2e0cb3e93816b1d534ce76acbb02.png

上記のような画面や、

https://i.gyazo.com/f7503cb214a4a9a50c6b4d2bd4a57272.png

こんな管理者用のログイン画面だって簡単に実装できてしまいます。
スマートフォン等にも対応しており、かっこいい管理画面作りたいけどデザインに自信がない・・・といった方でも、かっこいいUIが作成できてしまいます。(ちなみに僕はフロント部分が苦手なので大変助けられました...)

前提条件

ます前提条件としてyarn がインストールされていることを確認してください。
yarnがインストールされていない場合は、先にyarnをインストールしてからこちらを参考してください。
ここではyarnのインストールは割愛させていただきます。

AdminLTEのインストール

それではさっそくAdminLTEをインストールしていきます。

$ yarn add admin-lte

https://i.gyazo.com/28556dffc072ec52bd6be1147ad8f18a.png

色々インストールされて最後に✨ Done inという文字が出たら正常にインストールされています。

インストールが完了したら以下の3つのファイルが作成されます。

  • node_modules

https://i.gyazo.com/f0652887e14c5c66f0edfcdb5e2702d4.png

{
  "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.jsadmin.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.jsapplication.css

# application.js

//= require_tree .
# application.css

*= require_tree .

というコードがあります。
これは何を意味しているかというと、require_treeには指定したディレクトリ以下のすべてのJSファイルを読み込むといった特徴があります。
先程作成したadmin.jsadmin.cssapplication.jsapplication.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>

このようにすると

https://i.gyazo.com/79911e72c08a0f625bff12891a8a045c.png

無事にログインが作れたかと思います。

まとめ

今回はバックエンドの実装ではなく、フロント部分の実装をしました。
フロント部分は苦手なのでしっかりアウトプットすることで知識の定着を測っていきたいです。
バックエンドの実装も今後まとめていければと思っています。
最後まで拝読していただき、ありがとうございました。