Zenn
🙄

Rails 6.0 で Fomantic-UI を使う

2021/06/19に公開
Rails
#
fomanticui
#
semanticui
tech

初めに

Ruby on Rails で、Fomantic UI
を使うための記事です。

環境

% ruby -v
ruby 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-darwin19]

% rails -v
Rails 6.0.3.2

新規作成

新しいRailsアプリを作成します。
アプリ名は、awesome_app とし、データベースには、postgresqlを使うこととします。
ActionMailer等、使わないものはスキップします。

% rails new awesome_app --database=postgresql --skip-action-mailer --skip-action-mailbox --skip-action-text --skip-action-cable --skip-keeps

Gemfile

簡潔にビューを記述できるslimが好きなので、
テンプレートエンジンにはslimを使うよう、slim-railsを追加します。
また自動生成されたapp/views/layouts/application.html.erbもslim形式に変換できるよう、html2slimも追加します。

# Gemfile
gem 'slim-rails'
gem 'html2slim'

erbをslimに変換

% erb2slim app/views --delete

変換が終わったら、html2slimは使わないので、削除します。

# Gemfile
gem 'slim-rails'

Fomantic-UIを導入する

Fomantic-UIは、Semantic-UIのコミュニティフォークです。
jQueryも必要なので、一緒にインストールします。

% yarn add fomantic-ui jquery

yarn でインストールしたFomantic-UIと、jQueryをwebpackで管理します。

ついでに、Fomantic-UIでドロップダウンメニューが使えるよう追記します。

// app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("jquery")

import "fomantic-ui/dist/semantic.min.css"
import "fomantic-ui/dist/semantic.min.js"

//初回読み込み、リロード、ページ切り替えでドロップダウンメニューを使えるようにする
$(document).on('turbolinks:load', function() {
  // show dropdown on hover
  $('.ui.dropdown').dropdown({
    on: 'hover'
  });
})

トップページにメニューを配置します。

/ app/views/layouts/application.html.slim

doctype html
html
  head
    title
      | AwesomeEvents
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

  body
    /! 上部ナビゲーションメニュー
    .ui.top.fixed.menu
      .ui.container
        = link_to 'さくら商会', root_path, class: 'ui item'
        .ui.right.menu
          .ui.dropdown.item
            | 会社案内
            i.dropdown.icon
            .menu
              = link_to '会社概要', root_path, class: 'ui item'
              .divider
              = link_to '沿革', root_path, class: 'ui item'
          = link_to 'お問い合わせ', root_path, class: 'ui item'

    = yield

参考

Discussion