BootstrapとカスタムCSS5.1.1では、多くのHTML要素にCSSクラスを関連付けました。しておくことで、CSSベースでレイアウトを構成する際に高い柔軟性を与えてくれます。5.1.1で述べたように、これらのクラスの多くは、Twitterが作成したフレームワークであるBootstrap特有のものです。Bootstrapを使うと、洗練されたWebデザインとユーザーインターフェイス要素を簡単にHTML5アプリケーションに追加することができます。この節では、サンプルアプリケーションにスタイルを追加するために、カスタムCSSルールとBootstrapを組み合わせて使います。できるということです。これにより、どの端末でアプリケーションを閲覧しても、ある程度見栄えをよくすることができます。5.5で示しているようにBootstrapを追加しましょう。gemを使ってRailsアプリケーションに導入できます9。そのため、bootstrap-sassは、LESSをSassへ変換し、必要なBootstrapファイルを現在のアプリケーションですべて利用できるようにします10。installを実行して、Bootstrapをインストールします。すべてのCSSを1つにまとめる方針を採っています。カスタムCSSを動かすための最初の一歩は、カスタムCSSファイルを作ることです。他のコマンドでも問題ありません。このディレクトリ名とファイル名は、どちらも重要です。(5.2)の一部であり、このディレクトリに置かれたスタイルシートはapplication.cssの一部としてWebサイトのレイアウトに読み込まれます。ファイル名のcustom.scssには.scssという拡張子も含まれています。gemが動作するためのおまじないとして必要です)。CSSのフレームワークを導入しています。導入後、Webサーバを再起動させると、アプリケーションに反映させることができます。serverコマンドを打ってWebサーバを起動してください)。5.5のような結果になります。テキストの配置は今ひとつで、ロゴにはスタイルもありませんが、色使いとsignupボタンはなかなかよい感じになってきました。5.7に示したように、Webサイト全体にわたってレイアウトと個別のページにスタイルを与えるためのCSSを追加します。5.7には多数の記述ルールがあります。CSSの記述ルールを把握するためには、関心のある箇所をコメントアウトして表示を確認することをお勧めします。コメントアウトできるので、調べてみたいコードをこれで囲い、表示がどのように変わるかを確認してみてください。5.7のCSSの形式は一貫しています。CSSルールでは一般に、クラス、id、HTMLタグ、またはそれらの組み合わせ、のいずれかを指定します。その後ろにスタイリングコマンドのリストを記述します。60px;}ページ上部に60ピクセルの余白を追加します。2.0から変更されたため、現在の淡色の代わりにダークな色調にしたい場合はnavbar-inverseクラスを使う必要があります)。centerプロパティを関連付けています。言い換えると、.center冒頭のドット.は、このルールがクラスに対してスタイルを適用することを示しています。5.9に示したように、冒頭がポンド記号#で始まる場合は、そのルールがCSSのidに対してスタイルを適用することを示します。5.2が実際の使用例です)。5.8のようにカスタムCSSルールを追加し、テキストの見栄えを変えてみましょう。今回追加するルールはHomeページのすべてで適用されるとは限りませんが、サンプルアプリケーションの他の場所でも使われます。5.7で確認することができます。タイポグラフィースタイルを追加する最後に、いくつかのルールをサイトロゴに追加します。app」だけが表示されているシンプルなものです。idを使っていますが、代わりにクラスを使うこともできます)。#fffは、ロゴの色を白に変更します。コード化することができます。本来は#ffffffと書いて3色すべてを最大にする必要がありますが、上のコードでは#fffという#ffffffの短縮形を使っています。ちなみにCSS標準では、HTMLの色には別名も多数定義されています。先ほどの#fffは、whiteと書くこともできます。5.8のようになっていれば成功です。5.10を参考にして、5.1.1.1で使ったネコ画像をコメントアウトしてみてください。ブラウザのHTMLインスペクタ機能を使って、コメントアウトするとHTMLのソースからも消えていることを確認してみてください。5.11のコードをcustom.scssに追加し、すべての画像を非表示にしてみてください。うまくいけば、Railsのロゴ画像がHomeページから消えるはずです。先ほどと同様にインスペクタ機能を使って、今度はHTMLのソースコードは残ったままで、画像だけが表示されなくなっていることを確認してみてください。その目的を果たしていますが、まだ少々散らかっています。shimだけで3行も占有していますが、もしこれをうまく隠すことができたらどんなによいでしょう。HTMLヘッダーは論理的な単位として分けられるため、一箇所にまとめた方が便利です。いう機能でこのような課題を解決できます。shimのスタイルシート行を置換しています。テンプレート内でRubyの式を評価するための埋め込みRuby記法であることを思い出してください。評価した結果がテンプレートに挿入されます)。先頭にあるアンダースコアに注目してください。このアンダースコアは、パーシャルで使う普遍的な命名規約であり、また、一目見ただけでディレクトリ中のすべてのパーシャルを識別することが可能になります。パーシャルが動作するためには、それに対応するファイルとコンテンツを記述しなければなりません。5.1のわずか3行のshimコードだけです。5.14のパーシャルに移動し、renderを呼び出してレイアウトに挿入することができます。(パーシャルでは、自動生成せずに、テキストエディタを使って手動で作成するのが一般的です。</div></header>これでパーシャルの作成方法がわかりましたので、今度はヘッダーに対応するフッタを同じ方法で追加しましょう。置けばよいということが分かると思います13。</nav></footer>ヘッダーの場合と同様に、フッターの中でもlink_toメソッドを使って、AboutページとContactページへの内部リンクを追加してあります。(headerタグと同様、footerタグもHTML5で新たに追加された要素です)。5.17でスタイルを若干追加しましょう。5.18のようにrenderに置き換えてみてください。単純に削除してしまうと後でパーシャルを1から書き直す必要が出てくるので、削除する前にどこかに退避しておきましょう。redになっているはずです。実際にテストを実行して確認してみましょう。戻ることを確認しましょう。Pipeline)」です。このセクションでは、アセットパイプラインの概要と、素晴らしいCSS生成ツールである「Sass」の使い方について説明します。アセットパイプラインRails開発者の視点からは、アセットディレクトリ、マニフェストファイル、プリプロセッサエンジンという、3つの主要な機能が理解の対象となります14。それぞれを順に見ていきましょう。アセットディレクトリRailsのアセットパイプラインでは、静的ファイルを目的別に分類する、標準的な3つのディレクトリが使われています。サードパーティのアセットこれらのディレクトリには、それぞれのアセットクラス用のサブディレクトリがあります。app/assetsの場合、次のような画像用、JavaScript用、CSS用のサブディレクトリがあります。stylesheets/上記の説明から、5.1.2で取り上げたカスタムCSSが配置された場所と、その理由について理解することができると思います。custom.scssはサンプルアプリケーション固有のアセットなので、app/assets/stylesheetsに配置されていたのです。上記の場所へそれぞれ配置すれば、マニフェストファイルを使って、それらをどのように1つのファイルにまとめるのかをRailsに指示することができます。実際にアセットをまとめる処理を行うのはSprocketsというgemです。マニフェストファイルはCSSとJavaScriptには適用されますが、画像ファイルには適用されません。*/上の行で重要な部分は、実はCSSコメントの中にあります。コメント内の次の部分は、Sprocketsが適切なファイルを読み込むために使われます。中のすべてのCSSファイルが、アプリケーションCSSに含まれるようにしています。require_selfCSSの読み込みシーケンスの中で、application.css自身もその対象に含めています。Railsには実用的なデフォルトのマニフェストファイルが付属しているので、Railsチュートリアルでは変更を加える必要がありませんが、もし必要な場合は、Railsガイドの「アセットパイプライン」で詳細な情報を参照できます。プリプロセッサエンジン必要なアセットをディレクトリに配置してまとめた後、Railsはさまざまなプリプロセッサエンジンを介してそれらを実行し、ブラウザに配信できるようにそれらをマニフェストファイルを用いて結合し、サイトテンプレート用に準備します。Railsはどのプリプロセッサを使うのかを、ファイル名の拡張子を使って判断します。(なお本書では詳しく説明しませんが、CoffeeScriptはエレガントかつ簡潔な言語で、JavaScriptにコンパイルしてくれるJavaScriptの拡張言語です)。foobar.js.coffee上の拡張子の場合、CoffeeScriptプロセッサ経由で実行されます。(コードは右から左へと実行されますので、この例ではCoffeeScriptが最初に実行されます)。Pipelineの最大のメリットの1つは、本番のアプリケーションで効率的になるように最適化されたアセットも自動的に生成されることです。読みやすいフォーマットに整えていました。これは、プログラマにとっては便利な方法ですが、本番環境にとっては非効率です。(読み込み時間は、ユーザー体験の質に影響を与える重要な指標の1つです)。Pipelineを使うと、この「開発効率と読み込み時間のどちらを重視するか」という問題について悩む必要がなくなります。Pipelineを使ってファイルを最小化すればよいのです。不要な空白やインデントを取り除く処理を行い、ファイルサイズを最小化してくれます。結果として、開発環境と本番環境という、2つの異なった状況に対してそれぞれ最高の環境を提供してくれます。スタイルシートを記述するための言語であり、CSSに比べて多くの点が強化されています。この節では、Sassが提供する2つの重要な機能、ネストと変数について説明します。(3つ目の重要な機能であるミックスインについては、7.1.1で紹介します。(.scssという拡張子はSCSSであることを表します)。SCSSは厳密な意味で、CSS本体を抽象化したフォーマットです。SCSSはCSSに新しい機能を追加しただけで、全く新しい構文を定義したようなものではないということです15。このため、有効なCSSファイルは、すべてSCSSファイルとしても扱うことができ、既存の記法ルールを使っているプロジェクトにとっても互換性のある便利なフォーマットになっています。本書の例では、Bootstrapの恩恵を得るために、私達は最初からSCSSを使っています。Railsのアセットパイプラインは、.scssという拡張子を持つファイルをSassを使って自動的に処理してくれます。このため、custom.scssファイルはSassプリプロセッサによって前処理され、その後ブラウザへの配信に備えてパッケージ化されます。ネストスタイルシート内に共通のパターンがある場合は、要素をネストさせることができます。h1の両方に対してルールがあります。10px;}上のルールは、Sassを使って次のように書き換えることができます。}}上の例では、ネストの内側にあるh1というルールは、.centerのルールを継承しています。今度は、もう少し異なるルールに対してネスト機能を使う例を見てみましょう。5.9には次のコードがあります。none;}上のコードでは#logoというidが2回使われています。(なおhover属性は、該当する要素の上にマウスポインタをかざしたときの表示を定義します)。2つ目のルールをネストするためには、親属性である#logoを参照する必要があります。このような場合、SCSSでは次のようにアンパーサンド&を使って実現できます。}}Sassは、SCSSをCSSに変換する際に、&:hoverを#logo:hoverに置き換えています。これらのネスト機能は、フッターのCSSでも使えます。5.17のコードは、SCSSを使って次のように書き換えることができます。(実際に5.2.2.3でも取り入れてみました)。変換後にも、CSSが適切に動作していることを確認してみましょう。変数Sassでは、冗長なコードを削除し、より自由な表現を可能にするために、変数が定義できるようになっています。5.17を見てみると、同じ色を繰り返し参照している箇所があります。#777;}上のコードの#777は薄い灰色を指しています。Sassでは、このような値を変数として定義し、次のように変数名を与えることができます。#777;この機能を使って、SCSSを次のように書き直すことができます。$light-gray;}$light-grayのような変数名は、#777のような値よりも分かりやすいので、たとえその変数が繰り返し使われないとしても、変数名を与えることは多くの場合有用です。実際、Bootstrapフレームワークでは、多くの色に対して変数名を定義しています。定義されている変数はBootstrapページの「LESS変数一覧」で参照することができます。このWebサイトでは、SassではなくLESSを使って変数が定義されていますが、bootstrap-sassというgemを使えば、Sassでも同様の変数が使えるようになります。LESSではアットマーク@を使っているのに対して、Sassはドルマーク$を使っていることはすぐにわかります。話を戻して、Bootstrapの変数の一覧表を見ると、薄い灰色に対して次の変数名が与えられることに気が付きます。#777;これはつまり、bootstrap-sassというgemを使えば、SCSSでも同様に$gray-lightという変数が使えることを意味しています。先ほど定義した$light-grayというカスタム変数の代わりに、用意された変数を使ってみましょう。5.20のようになります。footerタグのルールが、劇的に向上していることを確認してみてください。5.20を書き直しました。Sassを使うことによって、素晴らしいスタートを切ることができました。演習5.2.2で提案したように、footerのCSSを手作業で変換してみましょう。5.20のようにしてみてください。レイアウトのリンクサイトのレイアウトが美しく仕上がったので、今度は'#'で代用していたリンクを書き換えてみましょう。次のようにリンクを直接記述することもできます。href="/static_pages/about">About</a>しかし、上の記法はRails流ではありません。Railsでは次のようなコードでは名前付きルートを使うのが慣例となっています。%>上のようにすることでコードの意味がわかりやすくなり、about_pathの定義を変えればabout_pathが使われているすべてのURLを変更できるため、柔軟性が高まります。3.4.4で最初のルートは設定済みですが、それ以外のルートについても同様に実装していきます。(第8章で本格的に実装します)。Contactページまずは、第3章の演習で取り上げたContactページについて追加しましょう。3.24で使われているテストのパターンに従ったものです。redになっているはずです。testアプリケーションコードは、3.3のAboutページへの追加と良く似ています。