はじめに
先日、AdminLTE2をRails5.1/yarnで動かしてみたのですが、今回は更にニッチにInspiniaをRails5.1/yarnで動かしてみることにします。
バージョン等
- Rails 5.1
- Inspinia 2.7.1
Inspinia?
- InspiniaはAdminLTEを拡張した有償のCSS/JSライブラリです
- とは言ってもそんなにAdminLTEと変わらない気もしますが具体的なサンプルが豊富でとりあえずコピペしていけばいろんないい感じの画面を作れるメリットがあります
- 問題は有償なのでnpm/yarnだとかに最新のソースが公開されているわけではなく、ログインしてソースをダウンロードするしかない点です
- ちなみにたまにgithubにコードが置いてあったりしますが、ライセンス的にグレーというかたぶんブラックなので近づかないほうがいいと思います
- 大体古いソースのケースが多いですが・・・
本編
では本編です。
作業の概要
基本戦略としては、下記となります
- ローカルにInspiniaをダウンロード
- yarnでローカルインストール
- asset pipelineからjs/cssを読み込んで利用
作業の詳細
解凍・コピー
- Inspiniaから配布されているアーカイブを解凍するとたくさんのディレクトリがあります
ls
ASPNET_Core_1_0_Full_Project Angular_4_Seed_Project Angular_Seed_Project_Gulp Landing_Page PSD_Files SASS
ASPNET_Core_1_0_Seed_Project Angular_Full_Version Angular_Seed_Project_MEANJS Laravel_5_Seed_Project Rails_Full_Version SCSS
ASPNET_MVC5_Full_Version Angular_Seed_Project Documentation Meteor_Full_Version Rails_Seed_Project Static_Full_Version
ASPNET_MVC5_Seed_Project Angular_Seed_Project_Grunt LESS Meteor_Seed_Project ReactJS_Seed_Project Static_Seed_Project
- これはRailsとかAngularとかReactとか諸々のプロジェクトにあらかじめ統合してある各種ディレクトリが配布されているためです
- 今回はもっともシンプルな
Static_Full_Versionという、単なるHTML/CSSから構成されているディレクトリを用いることにします - とりあえずRailsルートのvendorの下にinspiniaという名前に変更して配置します
cp -R /tmp/Static_Full_Version/ ./vendor/
mv ./vendor/Static_Full_Version/ ./vendor/inspinia
package.jsonの追加
- yarnでインストールするためにはライブラリのメタ情報である
package.jsonが必要なのですが元々オンライン配布する気のないInspiniaには存在しません - なので、自作でかなり適当に追加します
vim vendor/inspinia/package.json
vendor/inspinia/package.json
{
"name": "inspinia-local",
"version": "2.7.1"
}
sass/lessファイルの削除
- この配布ディレクトリにはピュアcssにトランスパイルした後のファイルが入っているはずなのですが、なぜか少しだけsass/lessも同梱されています
- これにasset pipelineが反応してトランスパイルに失敗するため、先に削除しておきます
rm -rf vendor/inspinia/font-awesome/scss
rm -rf vendor/inspinia/font-awesome/less
- 本当はasset pipelineの読み込みのところでよけた方がバージョン管理含めて簡単そうですが、とりあえず面倒なので・・・
yarnでインストール
- yarnコマンドを実行してローカルインストールします(yarnのインストール手順は割愛）
yarn add file:./vendor/inspinia
- この時点でnode_modulesディレクトリの下に丸ごとinspiniaディレクトリの中身がコピーされます
- yarn.lockファイルにも追記されます
node_modulesへアセットパスを通す
- 下記の感じでアセットパスを通します
config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('node_modules')
- ※最初からrails 5.1で
rails newしていると元々書いてあるかもしれません
js/cssの取り込み
あとは必要なjs/cssを取り込んでいくだけです。
基本的には同梱のサンプルファイルのソースを見て、使ってるファイルを書いていきます。
たとえば、login.htmlというファイルのソースをみると下記の6ファイルを読み込んでいます。
css/bootstrap.min.css
font-awesome/css/font-awesome.css
css/animate.css
css/style.css
js/jquery-3.1.1.min.js
js/bootstrap.min.js
この場合、下記をapplication.cssに追記
application.css
@import 'inspinia-local/css/bootstrap.min.css';
@import 'inspinia-local/font-awesome/css/font-awesome.css';
@import 'inspinia-local/css/animate.css';
@import 'inspinia-local/css/style.css';
下記をapplication.jsに追記
application.js
//= require inspinia-local/js/jquery-3.1.1.min
//= require inspinia-local/js/bootstrap.min
という感じで利用ができます。
終わりに
前回からの繰り返しになりますがRails5.1のyarn統合最高です。
どうもRails5.1のJS周りの情報を検索するとやたらとwebpack統合の話ばっかりでてきますが、まだまだ（今後も？）react/angular/vueとか全面的に使ってるプロジェクトなんて一握りだと思います。
そもそもRailsはトラディショナルなWebアプリケーションを爆速で作るところを得意としている面もあるので、まずは普通のyarn統合の恩恵を受けるところからはじめてはいかがでしょうか。