ダメ男のブログ: rails4 Foundation 6を使用する

2015年12月5日土曜日

rails4 Foundation 6を使用する

公開日：2015年12月05日

記事概要

rails4でFoundation 6を利用する場合の説明記事です。

環境

rails4.2.4
ruby2.2.3
Foundation 6

Foundation 6のインストール

Foundation 6の公式サイトには以下のgemを使った導入方法の説明が記載されています。

{rail-app-folder}/Gemfile


gem 'foundation-rails'

しかし、この方法はお勧めしません。
理由は、Foundation6が不要になったり、Foundation6のアップデートをする場合に、gemでインストールしてしまうと後の修正が大変になってしまうからです。
なので、この記事では、通常のダウンロードをしてファイルを配置する形を説明します。

Foundation 6に必要なファイルを配置する

公式サイトからダウンロードしてきたFoundation 6のファイルをrailsアプリのディレクトリに配置します。
rails4では、cssやjavascriptのファイルをAsset Pipelineの機能を利用して使うのが一般的です。この機能を利用する場合は、app/assetsディレクトリにcssやjsを配置する必要があります。

今回のアプリでもAsset Pipelineは利用するので、

{rail-app-folder}/app/assets/stylesheets


foundation.css

{rail-app-folder}/app/assets/javascripts


foundation.js

のようにファイルを配置します。

app/views/layout/application.html.erbへの記載

Foundation6のcssとjsファイルは共通で利用するので、application.html.erbに

app/views/layout/application.html.erb


  <%= stylesheet_link_tag "application", media: "all" %>
  <%= javascript_include_tag "application" %>

のように記述します。

アプリを起動

WEBrickを起動して確認しましょう。

terminal


rbenv exec bundle exec rails s -b 0.0.0.0

うまくアプリが立ち上がったら、ブラウザからソースコードを確認して、

html


<link rel="stylesheet" media="all" href="/assets/foundation.self-9b3ba3fcd76e7ef0282715e4069bac5699978f1970d3ac85f98ddf645c955531.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/application.self-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css?body=1" />

のようにhtmlが生成されていることを確認しましょう。