エンジニアの上垣です。
おかげさまでジモティーは日々多くのユーザー様にご利用いただいているのですが、その反面、長年の開発の歴史の積み重ねにより、CSSファイルの肥大化、複雑化が起こっており、これにより、画面作成工数の増大、ページ間レイアウトに差異ができるなどの問題が発生しています。
これらの問題を解消するために、現在、以下２つの取り組みを実施しています。
フルリニューアルをかけられるのであればそれに越したことはありませんが、ジモティーのサービス規模を考えると、影響範囲が大きいので、既存サービスを運用しながら、段階的に置き換えていく手法が必要になってきます。
今回の記事では、既存Railsアプリケーションに、段階的にCSSフレームワークを導入する手順についてご紹介します。
前提
今回の手順は以下のバージョンを対象にしています。
また、HTMLはhamlで、CSSはSassで記述しています。
導入実績の多さ、使えるコンポーネントの種類、documentの豊富さを主な観点に、候補として以下3つのフレームワークに絞りました。
各フレームワークについて、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
"foundation_and_overrides.scss";
// 以下にサービス固有のCSSファイルをインポートする
Foundation は jQuery が必須なので、必ず事前に jQuery を requireします。このファイルも、既存のJavaScriptファイルからrequire されないよう気をつけてください。
app/assets/javascripts/v2/application.js
$(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
以上で、既存CSS, JavaScriptを汚さずに、部分的にCSSフレームワークを適用できます。
まとめ
以上、RailsアプリケーションにCSSフレームワークを導入する手順をご紹介しました。
また、今回の記事では触れていませんが、フレームワークの導入と同時に FLOCSSという設計手法を用いて、CSSルールの策定・運用も並行して進めています。
github.com
こちらについても紹介したいのですが、ちょっと長くなりそうなので、次の機会にそれらの話題に触れられればと思います。
