Rails環境にUikitのデザインを適用する方法

8953 ワード
初心者 Rails UIKit Rails テキストリンク

はじめに

Qiita初投稿です。
現在、Rails学習のためWebアプリケーションの作成に着手したところです。
フロントエンド側はBootstrap・Materialize以外のイケてるCSSフレームワークを採用したく模索したところ、
デザインが綺麗でコンポーネントが豊富なUikitを発見しました。
本記事ではUikitをRailsで利用できるまでの手順を備忘録として残します。

実行環境

  • Ruby on Rails 5.2.3
  • Ruby 2.5.3
  • Uikit 3.1.6

適用までの手順

【１】Uikit本家からcssとjavascriptをダウンロードする

ここからダウンロード

ダウンロードすると以下のフォルダ/ファイル構成となっています。

ファイル構成　(今回利用するものだけ記載）
uikit-3.1.6
 ├── css
 │   └── uikit.min.css　# ←今回使用するcss
 │
 └── js
     └── uikit-icons.min.js # ←今回使用するjs(アイコン用）
     └── uikit.min.js # ←今回使用するjs

【２】ダウンロードした各ファイルをRails環境に配置する

Rails Guidによると、cssとjsはユースケースに応じて以下の３つのいずれかに配置すると記載があります。

  1. app/assetsは、カスタム画像ファイル、JavaScript、スタイルシートなど、アプリケーション自身が保有するアセットの置き場所です。
  2. lib/assetsは、1つのアプリケーションの範疇に収まらないライブラリのコードや、複数のアプリケーションで共有されるライブラリのコードを置く場所です。
  3. vendor/assetsは、JavaScriptプラグインやCSSフレームワークなど、外部の団体などによって所有されているアセットの置き場所です。

上記により、配置先は３が適切と思われます。それでは配置していきます。

①ディレクトリ/ファイル作成

app/vendorディレクトリ配下にアセットファイル格納用のディレクトリを作成し、その中に【１】でダウンロードしたファイルをそれぞれ配置します。

vendor
└── assets # ←ディレクトリ作成
    ├── javascripts　# ←ディレクトリ作成
    │   └── uikit-icons.min.js # ←配置
    │   └── uikit.min.js # ←配置
    │
    └── stylesheets　# ←ディレクトリ作成
        └── uikit.min.css # ←配置

②マニュフェストファイルに上記の読み込み定義を追加

app/assets/javascripts/application.jsと app/assets/stylesheets/application.scss に以下を記述します。

app/assets/javascripts/application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require uikit.min  # ←追加
//= require uikit-icons.min　# ←追加
//= require_tree .
app/assets/stylesheets/application.scss
 *= require_tree .
 *= require_self
 */
 @import "uikit.min";　# ←追加

③追加したディレクトリのパスを通すためRails再起動

再起動後、①で作成したapp/vender/assets配下のパスが通っていることを
rails console -> Rails.application.config.assets.pathsで確認します。

> rails c
Loading development environment (Rails 5.2.3)
[1] pry(main)> Rails.application.config.assets.paths
=> ["/sample_app/app/assets/config",
 "/sample_app/app/assets/images",
 "/sample_app/app/assets/javascripts",
 "/sample_app/app/assets/stylesheets",
 "/sample_app/vendor/assets/javascripts",  # ←①のパスが存在することを確認する
 "/sample_app/vendor/assets/stylesheets",  # ←①のパスが存在することを確認する
 #<Pathname:/sample_app/node_modules>]

以上でUikitのCSSフレームワークが利用できる状態となっているはずです。

【３】動作確認

ここでは適当なViewにUikitの記述を追加し、スタイル/アイコン/JSが一通り表示・機能することを確認します。

home.html.erb

<span uk-icon="heart"></span>

<br>
<br>

<span class="uk-label">Default</span>

<br>
<br>
<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div class="uk-light uk-background-secondary uk-padding">
            <h3>Light</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <button class="uk-button uk-button-default">Button</button>
        </div>
    </div>
    <div>
        <div class="uk-dark uk-background-muted uk-padding">
            <h3>Dark</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <button class="uk-button uk-button-default">Button</button>
        </div>
    </div>
</div>

<br>
<br>
<button class="demo uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Notification message'})">Click me</button>

（結果↓）

参考