InspiniaをRails5.1/yarnで動かす

はじめに
===

先日、[AdminLTE2をRails5.1/yarnで動かしてみた](http://qiita.com/shouta-dev/items/2d46c68ebbe163dc0c6c)のですが、今回は更にニッチにInspiniaをRails5.1/yarnで動かしてみることにします。

バージョン等
---

* Rails 5.1
* Inspinia 2.7.1

Inspinia?
===

* [Inspinia](http://webapplayers.com/inspinia_admin-v2.7.1/)は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
```

```js: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へアセットパスを通す

* 下記の感じでアセットパスを通します

```ruby: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](http://webapplayers.com/inspinia_admin-v2.7.1/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に追記

```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に追記

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