はじめに

先日、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統合の恩恵を受けるところからはじめてはいかがでしょうか。

InspiniaをRails5.1/yarnで動かす