Posted at

AdminLTE2をRails5.1/yarnで動かす

More than 1 year has 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統合!

  • 今までの微妙さが皆無

ソース