RailsアプリケーションにCSSフレームワーク(Foundation6)を導入する

エンジニアの上垣です。

おかげさまでジモティーは日々多くのユーザー様にご利用いただいているのですが、その反面、長年の開発の歴史の積み重ねにより、CSSファイルの肥大化、複雑化が起こっており、これにより、画面作成工数の増大、ページ間レイアウトに差異ができるなどの問題が発生しています。

これらの問題を解消するために、現在、以下２つの取り組みを実施しています。

CSSフレームワークの導入
既存のCSS設計手法を取り入れた記述ルールの策定・運用

フルリニューアルをかけられるのであればそれに越したことはありませんが、ジモティーのサービス規模を考えると、影響範囲が大きいので、既存サービスを運用しながら、段階的に置き換えていく手法が必要になってきます。

今回の記事では、既存Railsアプリケーションに、段階的にCSSフレームワークを導入する手順についてご紹介します。

前提

今回の手順は以下のバージョンを対象にしています。

rails 4.2.5
foundation-rails 6.2.4.0

また、HTMLはhamlで、CSSはSassで記述しています。

フレームワークの選定

導入実績の多さ、使えるコンポーネントの種類、documentの豊富さを主な観点に、候補として以下3つのフレームワークに絞りました。

Bootstrap getbootstrap.com
Foundation foundation.zurb.com
Semantic UI semantic-ui.com

各フレームワークについて、branchを切って検証しつつ、選定を進めました。利用できるコンポーネントにほとんど差異はなかったのですが、既存のアプリケーションへの導入のしやすさ、カスタマイズ工数の少なさ、documentの豊富さなどから判断して、Foundation6 を導入することに決めました。

Foundationのインストール

現状ジモティーでは、フロントエンドのビルドツールを導入していないので、素直に gem を利用します。Foundation には foundation-rails(https://github.com/zurb/foundation-rails) というgemが提供されているので、まずはインストールします。

Gemfileに追加

gem "foundation-rails"

インストール

$ bundle install

gem のインストール後、下記コマンドを実行して、以下２つの設定ファイルを生成します。

$ rails g foundation:install

foundation_and_overrides.scss
_settings.scss

主に _settings.scss を編集して、既存サイトのデザインと馴染むようにカスタマイズしていきます。

CSSのエントリーファイルを作成

Foundationをインポートする、新しいCSSのエントリーファイルを作成します。サービス固有のCSSがFoundation で上書きされないように、必ずFoundationの設定ファイルの先頭でインポートしておきます。このファイルは、既存のCSSファイルに import されないように注意してください。

app/assets/stylesheets/v2/application.scss

@import "foundation_and_overrides.scss";

// 以下にサービス固有のCSSファイルをインポートする

JavaScriptのエントリーファイルを作成

Foundation は jQuery が必須なので、必ず事前に jQuery を requireします。このファイルも、既存のJavaScriptファイルからrequire されないよう気をつけてください。

app/assets/javascripts/v2/application.js

//= require jquery-1.12.4
//= require jquery_ujs
//= require foundation


// 省略

$(function(){
  $(document).foundation();
})

precompile 対象に追加する

View から呼び出すために、作成したエントリーファイルをprecompile 対象に追加しておきます。

config/initializers/assets.rb

Rails.application.config.assets.precompile += %w[v2/application.css v2/application.js]

フレームワークを読み込むレイアウトファイルを作成

既存のレイアウトファイルをコピーして、新レイアウトファイルを作成します。stylesheet_link_tag, javascript_include_tag メソッドで先ほどのエントリーファイルを指定して、ページごとに唯一このファイルだけが読み込まれるようにしておきます。

app/vies/layouts/v2/application.haml

- # 省略
%head
  = stylesheet_link_tag "v2/application"
  = javascript_include_tag "v2/application"

- # 省略

フレームワークを適用したい action に、新レイアウトを適用

rails の controller で、フレームワーク適用対象 action の layout を指定します。

app/controllers/sample_controller.rb

class SampleController < ApplicationController
  layout "v2/application" # コントローラー内のすべてのアクションに適用

  def index
    render layout: "v2/application" # このアクションにのみ適用
  end
end