#417 Foundation
- Download:
- source code
- mp4
- m4v
- webm
- ogv
今回のエピソードで紹介するZurb Foundationは、エピソード328で紹介したTwitter Bootstrapと同類のフロントエンドのフレームワークです。これら2つの大きな違いは、FoundationがLESSではなくSASS上に構築されているという点で、それによってRailsアプリケーションにより統合しやすくなっています。
Foundation入門
Foundationを実際に試すために、新規のRailsアプリケーションでscaffoldを作成して、作業のための素材を準備します。Foundationを利用するので、スタイルシートが自動生成されないよう、scaffoldの実行時にskip-stylesheetsオプションを指定します。次にデータベースをmigrateします。
$ rails new store $ cd store $ rails g scaffold product name price:decimal --skip-stylesheets $ rake db:migrate
Foundationのインストールは簡単です。ただGemfileのassets groupにzurb-foundation gemを追加するだけです。
# Gems used only for assets and not required # in production environments by default. group :assets do gem 'sass-rails', '~> 3.2.3' gem 'coffee-rails', '~> 3.2.1' # See https://github.com/sstephenson/execjs#readme for more supported runtimes # gem 'therubyracer', :platforms => :ruby gem 'uglifier', '>= 1.0.3' gem 'zurb-foundation' end
Rails 4アプリケーションではGemfileにassets groupはないので、gemをどこに追加してもかまいません。Foundationの設定を完了するために、このgemが提供するfoundation:installというジェネレータを実行します。
$ rails g foundation:install
これによって、レイアウトファイルを含むいくつかのファイルが生成されますが、そのときにすでに存在するアプリケーションのレイアウトファイルを上書きするか確認されます。ここでは上書きを許可しますが、もし既存のアプリケーションにFoundationを追加しようとしている場合は、上書きされる前にレイアウトファイルのコードをコピーしておく方がいいでしょう。このフレームワークはJavaScriptとスタイルシートで構成されていて、それらがasset pipelineに追加されます。application.jsファイルを見てみると、foundationファイルと、ページがロードされるときにフレームワークを初期化するコード行が追加されています。
//= require jquery //= require jquery_ujs //= require foundation //= require_tree . $(function(){ $(document).foundation(); });
アプリケーションのCSSファイルが、ジェネレータによって生成されたfoundation_and_overridesファイルをrequireしています。これがFoundationフレームワークをロードし、変数を設定してカスタマイズすることができます。このファイルは長過ぎるのでここでは示しませんが、そのほとんどは変数のカスタマイズ方法を説明したコメントです。ファイルの最後でFoundationフレームワークをimportしていて、すべてのカスタマイズはこの行の前で行ないます。生成されるファイルの最後はレイアウトファイルです。古いバージョンのInternet Explorerに対応するための便利なデフォルト設定が入っていて、:titleプレイスホルダを使ってページタイトルを設定でき、必要に応じてJavaScriptとCSSファイルをincludeします。
Foundationのグリッドシステムを利用する
アプリケーションの外観を示します。悪くはないですが、改善の余地はたくさんあります。ページを構造化して、右側に“about us”の内容を含んだサイドバーを追加します。
これをおこなうためにはFoundationのグリッドシステムを理解する必要があります。12のコラムで設定されていて、CSSクラスで定義をおこないます。elementsクラスで行と列を定義すると自動でレイアウトされます。カラムを使用してサイドバーを追加し、メインコンテンツとサイドバーをそれぞれ1カラムずつにあてるので、そのようにレイアウトファイルを修正します。rowというクラスを付けたdivで行を定義し、large-8 columnsとlarge-4 columnsというクラスでそれぞれメインコンテンツとサイドバーをラップします。これによって、main contentがsidebarの2倍の幅に設定されます。
<body> <div class="row"> <div class="large-8 columns"> <%= yield %> </div> <div class="large-4 columns"> <h2>About Us</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <%= javascript_include_tag "application" %> </body>
ページをリロードすると、サイドバーが設定されています。
ここでは大きなスクリーン向けの幅の広いカラムを使用しました。ウィンドウの幅を小さくするとカラムは縦に並んで表示されるので、モバイルデバイスでは“about us”のセクションはメインコンテンツの下に表示されます。そのようにしたくない場合は、代わりに小さなカラムを使用するとすべてのデバイスで横に並ぶように表示できます。次にページの上部にナビゲーションバーを追加します。Foundationではこれは簡単で、ネストされたメニューを追加することもできます。そのためには構造を定義したクラスを含むHTMLを追加するだけです。ページのトップにメニューを追加します。
<nav class="top-bar"> <ul class="title-area"> <li class="name"> <h1><%= link_to "Awesome Store", products_path %></a></h1> </li> </ul> <section class="top-bar-section"> <ul class="right"> <li class="divider"></li> <li><%= link_to "Browse Products", products_path %></li> <li class="divider"></li> <li><%= link_to "Price List" %></li> <li class="divider"></li> <li><%= link_to "Contact Us" %></li> <li class="divider"></li> <li><%= link_to "Cart" %></li> </ul> </div> </nav>
ここでもナビゲーションの各エリアを個別のクラスで定義します。ページをリロードすると、ナビゲーションが表示されます。
見た目はとてもよくなりましたが、まだカスタマイズの余地はあります。例えば背景色を変えることもできます。またカラムがページの端に近すぎるので修正します。これらの修正は、foundations_and_overridesスタイルシートで行ないます。ここにはトップバーに関連するいくつかの変数があるので、使用したいものを非コメント化して修正します。グリッドのスペースに関する変数は最上部近くにあり、それらを使ってスペースを修正する方法が複数あります。row-widthを小さくするか、column-gutterを修正することができます。今回は後者を使うことにして、gutterを60pxに設定します。
$topbar-bg: #212D48 !default; $column-gutter: emCalc(60px);
変更を確認するためにページをリロードすると、SCSSがリコンパイルされるので少し時間がかかった後に表示されます。トップバーとカラムのpaddingが修正されているのを確認できます。
ページをさらにカスタマイズする
Foundationを使ってできることはまだまだあります。その概要がドキュメントのkitchen sinkのセクションにうまくまとまっています。ここを見ると、スタイルを使って追加できるもの、例えばアラート、ボタン、動画の埋め込みなどが紹介されています。これらはすべてクラスを設定することで制御できます。例えばヘッダの“About Us”を少し細くするには、subheaderクラスを追加します。また、商品ページの“new product”のリンクを、丸角のボタンにすることもできます。
<%= link_to 'New Product', new_product_path, class: "button radius" %>ページをリロードすると変更を確認できます。
次に商品を新規作成するページを見てみます。商品名と価格のテキストフィールドは、今はページのメインセクションの幅全体をとっていて、その上にラベルがあります。ラベルがフィールドと同じ行になるよう変更するために、レイアウトで使ったのと同じグリッドシステムを使います。つまりグリッドシステムはネストすることができます。今は各フィールドはfieldクラスのdivでラップされています。これをrowに変更することでグリッドシステムを利用するようになり、ラベルとテキストフィールドをまとめて一つのdivでラップします。同じようなclassを使用してラベルとテキストフィールドに必要なスペースを定義し、ラベルを右寄せにします。submitボタンにもグリッドシステムを使用しますが、ここではoffsetクラスを使用してボタンをテキストフィールドの下に配置します。
<div class="row"> <div class="small-3 columns"> <%= f.label :name, class: "right inline" %> </div> <div class="small-9 columns"> <%= f.text_field :name %> </div> </div> <div class="row"> <div class="small-3 columns"> <%= f.label :price, class: "right inline" %> </div> <div class="small-9 columns"> <%= f.text_field :price %> </div> </div> <div class="row"> <div class="small-9 small-offset-3 columns"> <%= f.submit %> </div> </div>
ページをリロードすると見た目は改善されましたが、各ラベルとテキストフィールドの間が開きすぎているようです。これは、前にカラムのgutterの値を大きく設定したからです。行にgutterが不要な場合は、collapseクラスを使って削除することができます。これによって内側のグリッドのpaddingがすべて削除されるので、新しいスタイルシートに手作業でいくつか戻します。
label.right { padding-right: 10px; }
ページをリロードすると、希望通りに変更されています。
Tooltip
今回のエピソードで最後に紹介するのが、フォームの操作で特に便利なtooltipという機能です。ラベル上にhoverしたときに詳細情報を表示するために使用します。title属性の中にテキストを入力して、tooltipというdata属性の値をtrueに設定します。
<div class="row collapse"> <div class="small-3 columns"> <%= f.label :price, class: "right inline", title: "Price in USD", data: {tooltip: true } %> </div> <div class="small-9 columns"> <%= f.text_field :price %> </div> </div>
ページをリロードしてカーソルをラベル上にhoverするとtooltipが表示されます。
Foundationを軽量化する
Foundationには多くの機能がありますが、それらをすべては使わないという場合もあるでしょう。不要な機能を削除してクライアントに送信されるJavaScriptとCSSを減らすために、foundation_and_overrides.cssにある@import 'foundation';の行を修正して、必要最小限のものだけをimportするようにします。作業はとても簡単です。GithubのFoundationプロジェクトにアクセスしてscssディレクトリを見るとfoundation.scssファイルがあります。このファイルは、フレームワークのすべての個別の部品をimportしているので、これをコピーして手元のファイルにペーストします。その上で、アプリケーションで使用しないセクションを削除します。
JavaScriptについても同じ操作を行ないます。/js/foundationディレクトリでindex.jsファイルを探します。これはSprocketsの機能のひとつです。ディレクトリをrequireしている場合、index.jsファイルが見つかったら自動的にロードされます。CSSのときと同じように、このファイルの内容を今回はapplication.jsファイルにコピーして、//=require foundationの行と置き換えて、使用しないセクションを削除します。
クライアントに送信されるJavaScriptの量を減らすもう一つの方法として、jQueryをZepto.jsに置き換えることができます。このファイルはとても小さく、Foundationにも対応しています。
