ぞえの技術めも

Ruby on Rails勉強中

【30日目】【1日20分のRailsチュートリアル】【第5章】レイアウトにナビゲーションを追加する

Ruby on Railsチュートリアル(第3版)

ようやく30日目！ 今日から「第5章 レイアウトを作成する」です。

第5章 レイアウトを作成する

パーシャル、Railsのルーティング、Asset Pipelineについて学び、さらにSassについても紹介します

Sassについても知りたかったのでちょうどいいかも。

5.1 構造を追加する

RailsチュートリアルはWeb開発のための本であり、Webデザインの本ではありませんが、だからといって何のスタイルもない寒々しい外観のアプリケーションでいつまでも作業を続けていると憂鬱になってしまいます。

個人的には機能面が実装できたらそれでいいんだけど、きれいなUI作れたらそれはそれでやる気出るのかも？

この章では、 主に3.2で紹介したサイトロゴ、ナビゲーションヘッダー、サイトフッターを含む静的ページを開発します。
これらのページの中で最も重要な、Homeページのモックアップを図5.1に示します。

画面イメージ大事ですね。

Gitでバージョン管理をしているのであれば、これまでと同様、この時点で新しいブランチを作成するのがよいでしょう。

ブランチ作った。

$ git checkout master
$ git checkout -b filling-in-layout

5.1.1 ナビゲーション

レイアウトファイル(app/views/layouts/application.html.erb)にナビゲーション追加する。

まずは下記をそのままコピペ。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag 'application', media: 'all',
                                           'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
      </script>
    <![endif]-->
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <%= link_to "sample app", '#', id: "logo" %>
        <nav>
          <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "Home",   '#' %></li>
            <li><%= link_to "Help",   '#' %></li>
            <li><%= link_to "Log in", '#' %></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

3.4.1でも簡単に説明しましたが、RailsはデフォルトでHTML5を使用します (<!DOCTYPE html>というdoctypeでそのことが示されています)。

へー。
HTML5はIEが鬼門ですよね…。

<!--[if lt IE 9]>

IE9より古いIEの場合にJavaScriptファイルの読み込みを行う、ということらしい。
この辺はRails関係なくってHTML寄りの話かな。

headerタグとかクラスの話は知ってるのでさくっと読んで終わり。

ここで付与しているクラスはBootstrapと関連してるらしい。詳細は後々分かるかな。

結構長いので今日はレイアウトの解説が終わったとこまで。
今日の作業時間は【25分】。

次は「5.1.1 ナビゲーション」のhome.html.erbビューに特別な要素をいくつか追加するところから。