Ruby on Rails Academy 4 | Avintonジャパン株式会社

Ruby on Rails Academy #4

サイドバー

多くのページでは、メニューやオプションの表示領域としてページを区切っています。上部メニューバーや左右サイドバーなどです。見た目も綺麗になるので作りましょう。
Bootstrapではグリッドシステムという仕組みが実装されていて、比較的簡単かつレスポンシブ（ユーザーの画面の大きさに合わせて表示が調整されること）にレイアウトを調整することが出来るようになっています。

グリッドシステムはCSSのclassを利用して調整され

<div class="row">~</div>

を一つの段の区切りとみなし、その中を

<div class="col-大きさ-列数"></div>

のように区切ります。列数は合計で12になるようにし、大きさはxs,sm,md,lgが用意されています。

詳しくはhttp://getbootstrap.com/css/を参照してください。

exercise 1

グリッドシステムを用いて、サイドバーを作りましょう。（まだ実用的な機能はなくて構いません。）

パーシャル

上記のような、どのページにも使う要素は毎回書くのは（たとえコピーするとしても）面倒ですし、コードに同じ部分を繰り返す場所が増えます。
そのようなパーツはパーシャル（部分テンプレート）として切り分け、使うとき呼び出すのみにするのが効率的です。
views/layoutフォルダーに _sidebar.html.erb という新しいファイルを作り、サイドバーの中身を移しましょう。
必ずしもアンダースコアで始める必要はありませんが、わかりやすくするためにつけるのが一般的です。

できたら

<%= render :partial => "./layouts/sidebar" %>

をサイドバーのあったところに書くと、_sidebar.html.erb の内容が表示されます。

exercise 2

フッターも非常に一般的な構成要素です。
西暦の年表示が入ったフッターをパーシャルとして追加しましょう。

レイアウト

今までのページ（index.html.erb等）で、<html>、<body>のようなHTMLの基本的な構成要素を書いてこなかったと思います。これはRailsのファイルシステムでテンプレートが自動で適用されるようになっているからです。
デフォルトでは、views/layouts フォルダー内のapplication.html.erbがテンプレートとして使われます。
先ほど作ったパーシャルは毎回表示されてほしいので、ここに加えましょう。

exercise 3

特定のページにのみ適用されるレイアウトを作り、コントローラーで指定し、適用しましょう。

Git Committing

gitへのコミットは論理的なまとまりに基づいてコミットします。
その方があとでログを見た時にわかりやすく、探したい変更を探しやすいためです。
今回でいえば、サイドバー、フッター、レイアウトfor〇〇　のような具合です。

また、開発用gemと同様にgitも様々なツールが用意されています。
その中でも、「 Tig 」は非常に便利なツールですので是非入れておきましょう。
https://jonas.github.io/tig/

レイアウト調整