初めての Foundation6 on Rails4

## Foundation6をRails4で使う

知らないうちに、[Foundation](http://foundation.zurb.com)が6にアップデートされていた。

[foundation-rails](https://github.com/zurb/foundation-rails)を使ってRuby on RailsでFoundationを使えるようにした。

[foundation-rails](https://github.com/zurb/foundation-rails)に書いてある手順どおりに実行しただけ、修正点を把握したいので、コマンド実行後のdiffも記載している。



### 環境

* OSX: 10.11.3
* Ruby 2.3.0
* Rails: 4.2.5.2
* foundation-rails: 6.1.2.0

### Railsプロジェクトの作成

[foundation-rails](https://github.com/zurb/foundation-rails)のREADMEを実行していく

### Railsプロジェクトの作成

```
% rails new hello_foundation
% cd hello_foundation/
```


### Gemfileの修正

```
% vi Gemfile
```

```
gem 'foundation-rails'
```

```
% bundle
```

### foundationの初期設定

```
% rails g foundation:install
```

```
Running via Spring preloader in process 5675
      insert  app/assets/javascripts/application.js
      append  app/assets/javascripts/application.js
      create  app/assets/stylesheets/foundation_and_overrides.scss
      create  app/assets/stylesheets/_settings.scss
      insert  app/assets/stylesheets/application.css
    conflict  app/views/layouts/application.html.erb
Overwrite /private/tmp/hello_foundation/app/views/layouts/application.html.erb? (enter "h" for help) [Ynaqdh] y
       force  app/views/layouts/application.html.erb
   identical  app/assets/stylesheets/foundation_and_overrides.scss
   identical  app/assets/stylesheets/_settings.scss
```

## 変更点の確認

### ``app/assets/javascripts/application.js``の修正点

```diff
 diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index e07c5a8..92a9acf 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -12,5 +12,8 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require foundation
 //= require turbolinks
 //= require_tree .
+
+$(function(){ $(document).foundation(); });
```

[Installation](http://foundation.zurb.com/sites/docs/installation.html#html-starter-template)で記載されているように、foundationの関数を実行する設定が追加されている。

### 新規作成される``app/assets/stylesheets/foundation_and_overrides.scss``の中身

motion-uiを使うには、コメントを外せとの記述がある、[motion-ui](http://foundation.zurb.com/apps/docs/#!/motion-ui)はこれのことのようだ。

```sccs
@charset 'utf-8';

@import 'settings';
@import 'foundation';

// If you'd like to include motion-ui, you need to install the motion-ui sass package.
//
// @import 'motion-ui/motion-ui';

// We include everything by default.  To slim your CSS, remove components you don't use.

@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;

// If you'd like to include motion-ui, you need to install the motion-ui sass package.
//
// @include motion-ui-transitions;
// @include motion-ui-animations;
```

### 新規作成 ``app/assets/stylesheets/_settings.scss``ファイルの中身

一部抜粋

中身のサンプル

```sccs
// 1. Global
// ---------

$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;
$primary-color: #2199e8;
$secondary-color: #777;
$success-color: #3adb76;
$warning-color: #ffae00;
$alert-color: #ec5840;
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
$body-antialiased: true;
$global-margin: 1rem;
$global-padding: 1rem;
$global-weight-normal: normal;
$global-weight-bold: bold;
$global-radius: 0;
$global-text-direction: ltr;
```

### ``app/assets/stylesheets/application.css``の修正内容

```diff
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index f9cd5b3..c8b8e57 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -12,4 +12,6 @@
  *
  *= require_tree .
  *= require_self
+ *= require foundation_and_overrides
+
  */
```

### ``app/views/layouts/application.html.erb``の中身

スタイルシートのturbolinkの設定が消されている。

```diff
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index fbd1fb1..cd60004 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,14 +1,19 @@
 <!DOCTYPE html>
-<html>
-<head>
-  <title>HelloFoundation</title>
-  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
-  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
-  <%= csrf_meta_tags %>
-</head>
-<body>
-
-<%= yield %>
-
-</body>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
+
+    <%= stylesheet_link_tag    "application" %>
+    <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
+    <%= csrf_meta_tags %>
+  </head>
+
+  <body>
+
+    <%= yield %>
+
+  </body>
 </html>
```

## ヘッダデータの追加

試しにtop-barを追加してみる。[top-bar](http://foundation.zurb.com/sites/docs/top-bar.html#basics)の設定はここのを丸コピー

```diff
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index cd60004..2e9fcca 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -13,6 +13,31 @@
 
   <body>
 
+    <div class="top-bar">
+      <div class="top-bar-left">
+        <ul class="dropdown menu" data-dropdown-menu>
+          <li class="menu-text">Site Title</li>
+          <li>
+            <a href="#">One</a>
+            <ul class="menu vertical">
+              <li><a href="#">One</a></li>
+              <li><a href="#">Two</a></li>
+              <li><a href="#">Three</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Two</a></li>
+          <li><a href="#">Three</a></li>
+        </ul>
+      </div>
+      <div class="top-bar-right">
+        <ul class="menu">
+          <li><input type="search" placeholder="Search"></li>
+          <li><button type="button" class="button">Search</button></li>
+        </ul>
+      </div>
+    </div>
+
+
     <%= yield %>
 
   </body>
```

## サンプルページの作成

### 

```
rails g scaffold address_book name:string tel:string
bin/rake db:migrate

```

サーバ起動

```
rails s
```

http://localhost:3000/address_books
でfoundationのヘッダが表示されるようになった。

## 疑問

* foundationを使う時、TurbolinkをOffにしないと、うまく動かないことがあるようだけど、6の場合はどうなんだろう？