Help us understand the problem. What is going on with this article?

AdminLTE2をRails5.1/yarnで動かす

More than 3 years have passed since last update.

この記事は

  • Bootstrapベースの管理画面向けUIライブラリ、AdminLTE2をRails5.1のyarnで適用したメモです

今までは

  • 従来のRailsでAdminLTEを使う場合下記のようないくつかのやり方がありますが、なんだか結構微妙です。

Gemにパッケージされたものを使う

bower-railsを使う

  • bower-railsを使って、bower経由でAdminLTEを落としてきて利用する方法
  • この記事を見るとどうも静的ファイルのパス関係の解決に失敗してうまくいかないらしい
  • そもそもBowerってnpmに押されて消えゆく宿命なのでは・・・

RailsAssets.orgを使う

  • RailsAssets.orgというまあ言ってみればBower Proxy for Railsみたいなサイトを経由する方法
  • Gemfileにsource 'https://rails-assets.org'を入れて、gem 'rails-assets-admin-lte'とかやります
  • するとなんとbower-railsでは対応していなかったパス解決もされた状態で、bower→rails-assets.orgと経由してgemが落ちてきます
  • でも、pluginsの下とか、bower.jsonに書かれていないJSとかは消えちゃって使えないんですよ。。。
  • そもそもBowerって(ry

Rails5.1/yarn

そこで出てきたのがRails5.1ですよ!yarnとasset pipelineの統合ですよ!

やってみる

セットアップ

  • yarnとかnpmとかnodeとか適当に入れます
  • railsも適当に入れます
  • 詳細は略

Railsプロジェクトの作成

  • 普通にrail newします
  • ここでwebpackとかの指定もできるみたいですが今回はいらないので何もオプション付けません
$ bundle exec rails new adminlte-rails51-sample
$ cd adminlte-rails51-sample/
$ bundle install

yarnでAdminLTEをインストール

  • たったこれだけです
$ yarn add admin-lte
  • Rails.rootの下にnode_modulesディレクトリができてAdminLTEが入ってきました
| node_modules/
| | admin-lte/                                                                                                                                                                                   | | | bootstrap/
| | | build/
| | | dist/
| | | documentation/
| | | pages/
| | | plugins/
| | | .jshintrc
| | | .npmignore
| | | Gruntfile.js
| | | LICENSE
| | | README.md
| | | bower.json
| | | changelog.md
| | | composer.json
| | | index.html
| | | index2.html
| | | package.json
| | | starter.html
| | | yarn.lock
| | .yarn-integrity
  • あとpackage.jsonに追記されたりyarn.lockでGemfile.lockちっくにバージョン固定されたりしています
package.json
{
  "name": "adminlte-rails51-sample",
  "private": true,
  "dependencies": {
    "admin-lte": "^2.3.11"
  }
}
yarn.lock
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


admin-lte@^2.3.11:
  version "2.3.11"
  resolved "https://registry.yarnpkg.com/admin-lte/-/admin-lte-2.3.11.tgz#da56dcd34d42e9ef1af362be15520a053a9d43db"

サンプル

  • AdminLTE適用のサンプルとして、AdminLTEに付属してくるstarter.htmlを取り込んでみます
  • まずサンプル用にファイルを生成しておきます
$ bundle exec rails g controller sample starter

layoutファイルのあてこみ

  • 適当にstarter.htmlをコピペしてlayoutファイルを作ります
  • ローカルファイルのjs/cssの読み込みは消去します(assetで読むため)
application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>AdminlteRails51Sample</title>
    <%= csrf_meta_tags %>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  </head>
  <body class="hold-transition skin-blue sidebar-mini">
    <%= yield %>
  </body>
</html>

js/css類の指定

  • starter.htmlのheadタグで元々読み込んでいたjs, cssのassetの指定をします
  • 今回、rails-assets.orgではできなかったplugins下の読み込みもしてみています(iCheckプラグイン)
application.js
//= require rails-ujs
//= require turbolinks
//= require_tree .
//= require admin-lte/plugins/jQuery/jquery-2.2.3.min
//= require admin-lte/bootstrap/js/bootstrap.min
//= require admin-lte/dist/js/app.min
//= require admin-lte/plugins/iCheck/icheck
application.css
/*
 *= require_tree .
 *= require_self
 */
@import 'admin-lte/bootstrap/css/bootstrap.min';
@import 'admin-lte/dist/css/AdminLTE.min';
@import 'admin-lte/dist/css/skins/skin-blue.min';
@import 'admin-lte/plugins/iCheck/all';

本体htmlの作成

  • コピペで貼り付けます
  • こんな感じ

imgタグのケア

  • starter.htmlにはimgタグで直接画像を表示しているところがあります
  • どうも画像はyarn統合の中では想定外みたいでそのままでは読めなかったのでapp/assets/imagesの下にコピーしました
  • その上でimage_tagヘルパに書き換えます

完成!

これで終わりです!立ち上げてみましょう

$ bundle exec rails s

ダウンロード.png

ばっちりですね

終わりに

  • 素晴らしいなー、yarn統合!
  • 今までの微妙さが皆無

ソース

shouta-dev
Railsが大好き!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away