Rodhos Soft

備忘録を兼ねた技術的なメモです。Rofhos SoftではiOSアプリ開発を中心としてAndroid, Webサービス等の開発を承っております。まずはご相談下さい。

チュートリアルをやってみる。レイアウト作成編

以下はチュートリアルをやってみたログである。

railstutorial.jp

レイアウトの構想

  1. 真ん中にタイトルとボタン、右上にHelpとか、Signin
  2. 右下にAboutとかnewsがある。

全体レイアウトを変更

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="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="navbar-inner">
        <div class="container">
          <%= link_to "sample app", '#', id: "logo" %>
          <nav>
            <ul class="nav pull-right">
              <li><%= link_to "Home",    '#' %></li>
              <li><%= link_to "Help",    '#' %></li>
              <li><%= link_to "Sign in", '#' %></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

html5で記述

三つのcssクラス、navbar navbar-fixed-top navbar-inverseを指定

クラス navbar-innerとcontainer

埋め込みコード

<%= link_to "sample app", '#', id: "logo" %>

link_to関数の第1引数は表示されるテキスト、第2番目の'#'はURLだが、今はスタブURLとして'#'を入れてある。
第3引数のid:"logo"はオプションハッシュ、リンクでcssのidとして"logo"を指定している。

    クラス nav、pull-rightが指定されている。Bootstrapで意味がある。

    containerクラスもBootstrapで意味を持つ。

    homeページを変更

    app/views/static_pages/home.html.erb

    <div class="center hero-unit">
      <h1>Welcome to the Sample App</h1>
    
      <h2>
        This is the home page for the
        <a href="http://railstutorial.jp/">Ruby on Rails Tutorial</a>
        sample application.
      </h2>
    
      <%= link_to "Sign up now!", '#', class: "btn btn-large btn-primary" %>
    </div>
    
    <%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>
    

    hero-unitクラスはBootstrapで意味がある。

    <%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>

    link_toの第1引数にimage_tagヘルパを使った。このヘルパでalt属性も指定できている。
    以下のようになる

    <img alt="Rails" src="/assets/rails.png" />
    

    画像はapp/assets/images/に置く。

    Bootstrapを用意

    Gemfileにbootstrap-sassを追加

    gem 'bootstrap-sass', '2.3.2.0'
    gem 'sprockets', '2.11.0'
    

    Sprocketsも入れておく。

    bundle install

    ここで

    You have requested:
      sprockets = 2.11.0
    
    The bundle currently has sprockets locked at 2.12.4.
    Try running `bundle update sprockets`

    が出たので、

    bundle update sprockets

    した。

    カスタムCSSの格納場所作成

    app/assets/stylesheets/custom.css.scss

    app/assets/stylesheets以下に置かれたスタイルシート
    application.cssの一部として自動的にインクルードされる。

    app/assets/stylesheets/custom.css.scssに

    @import "bootstrap";
    

    と記述する。Bootstrap CSSフレームワークが導入される。

    ローカルサーバで確認。

    rails server

    BootStrapが適用されていることを確認。

    全体のcssをいじってみる。

    app/assets/stylesheets/custom.css.scss

    @import "bootstrap";
    
    /* universal */
    
    html {
      overflow-y: scroll;
    }
    
    body {
      padding-top: 60px;
    }
    
    section {
      overflow: auto;
    }
    
    textarea {
      resize: vertical;
    }
    
    .center {
      text-align: center;
    }
    
    .center h1 {
      margin-bottom: 10px;
    }
    
    /* typography */
    
    h1, h2, h3, h4, h5, h6 {
      line-height: 1;
    }
    
    h1 {
      font-size: 3em;
      letter-spacing: -2px;
      margin-bottom: 30px;
      text-align: center;
    }
    
    h2 {
      font-size: 1.2em;
      letter-spacing: -1px;
      margin-bottom: 30px;
      text-align: center;
      font-weight: normal;
      color: #999;
    }
    
    p {
      font-size: 1.1em;
      line-height: 1.7em;
    }
    
    /* header */
    
    #logo {
      float: left;
      margin-right: 10px;
      font-size: 1.7em;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: -1px;
      padding-top: 9px;
      font-weight: bold;
      line-height: 1;
    }
    
    #logo:hover {
      color: #fff;
      text-decoration: none;
    }
    
    body

    上部に60pxのパディング。この場合headerのnavbar-fixed-topの下が60px空くことになる。

    .center

    centerクラスへのスタイルを適用

    #logo

    idとしてlogoへのスタイル指定

    レイアウトファイルをpartial機能ですっきりさせる。

    app/views/layouts/application.html.erbのヘッダーは記述が多いのでこれをrenderメソッドで隠すことができる。

    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="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
      </head>
      <body>
        <header class="navbar navbar-fixed-top navbar-inverse">
          <div class="navbar-inner">
            <div class="container">
              <%= link_to "sample app", '#', id: "logo" %>
              <nav>
                <ul class="nav pull-right">
                  <li><%= link_to "Home",    '#' %></li>
                  <li><%= link_to "Help",    '#' %></li>
                  <li><%= link_to "Sign in", '#' %></li>
                </ul>
              </nav>
            </div>
          </div>
        </header>
        <div class="container">
          <%= yield %>
        </div>
      </body>
    </html>
    

    を以下のようにする。
    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 %>
        <%= render 'layouts/shim' %>
      </head>
      <body>
        <%= render 'layouts/header' %>
        <div class="container">
          <%= yield %>
        </div>
      </body>
    </html>
    


    次の二つ
    <%= render 'layouts/shim' %>
    <%= render 'layouts/header' %>
    がポイント。
    <%= render 'layouts/shim' %>で、app/views/layouts/_shim.html.erb というファイルの中身が埋め込まれる。
    先頭に_をつけているのがパーシャル機能を使っているという目印になる。

    app/views/layouts/_shim.html.erb

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    

    app/views/layouts/_header.html.erb

    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="navbar-inner">
        <div class="container">
          <%= link_to "sample app", '#', id: "logo" %>
          <nav>
            <ul class="nav pull-right">
              <li><%= link_to "Home",    '#' %></li>
              <li><%= link_to "Help",    '#' %></li>
              <li><%= link_to "Sign in", '#' %></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    

    同様にフッターもパーシャルで追加してみる。

    app/views/layouts/_footer.html.erb

    <footer class="footer">
      <small>
        <a href="http://railstutorial.jp/">Rails Tutorial</a>
        by Michael Hartl
      </small>
      <nav>
        <ul>
          <li><%= link_to "About",   '#' %></li>
          <li><%= link_to "Contact", '#' %></li>
          <li><a href="http://news.railstutorial.jp/">News</a></li>
        </ul>
      </nav>
    </footer>
    

    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 %>
        <%= render 'layouts/shim' %>
      </head>
      <body>
        <%= render 'layouts/header' %>
        <div class="container">
          <%= yield %>
          <%= render 'layouts/footer' %>
        </div>
      </body>
    </html>
    

    フッターのスタイルの追加
    app/assets/stylesheets/custom.css.scss

    .....
    
    /* footer */
    
    footer {
      margin-top: 45px;
      padding-top: 5px;
      border-top: 1px solid #eaeaea;
      color: #999;
    }
    
    footer a {
      color: #555;
    }
    
    footer a:hover {
      color: #222;
    }
    
    footer small {
      float: left;
    }
    
    footer ul {
      float: right;
      list-style: none;
    }
    
    footer ul li {
      float: left;
      margin-left: 10px;
    }
    

    これでローカルサーバで確認してみる。

    rails server