Ruby
Rails
YARN
inspinia

InspiniaをRails5.1/yarnで動かす

はじめに

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