心はいつもAirPucci (空元気でもいいから)

毎日がPucciを着ているような気分

RailsTutorial4.0を高速で復習する。5章。

   


さてRailsTutorial4.0も5章に入ります。まだ序の口です。5章ではbootstrup追加するなど、最初の方にまとめてやっておいたほうがいい作業が出てきます。

5.1構造を追加する、です。
とりあえず、ブランチ作っておきます。

git checkout -b filling-in-layout

5.1.1ナビゲーション、です。レイアウトファイルにヘッダーナビをつけます。
リスト5.1 構造を追加したWebサイトのレイアウト。
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>

変わったのは、

  • IE互換のコードが入ったところ
  • と、

  • ヘッダーナビ
  • <%= yield %>がcontainerで囲まれたこと

の3点ですね。

ちなみにRailsやるならHTML/CSSはできていないと、また一つハードルがあがることになると思うので、先にマスターした方がいいと思います。

ムダなdivタグが多いように見えますが、これがbootstrupで提供されるタグなのでいたしかたありません。

Railsのヘルパーメソッド

<%= link_to "Home", '#' %>が
Homeに変換される訳です。見づらいし、わかりづらいし、むしろ長くなっているし、嫌だなあと最初は思いました。

でも、htmlの最初と最後を同じタグで囲む、っていうのもそもそも2度手間が前提でムダですね。

link_toがRailsのヘルパーメソッドです。

Railsのヘルパーメソッドの一覧が見たい!と思うのですが、なかなかいい資料がありません。
RailsのAvtiveView::Helpersのドキュメントを見ろ!ってことだそうです。

今のところ、使っているヘルパーメソッドは、
stylesheet_link_tag
javascript_include_tag
csrf_meta_tags
link_to
くらい?

トップページを成形

Homeが実はトップページになるよ、とネタバレしながら進めております。ここで、Homeのコーディングもおなおしです。
リスト5.2 ログインページへのリンクがあるHomeページ。
app/views/static_pages/home.html.erb

<div class="center hero-unit">
  <h1>Twiliサービスへようこそ</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/' %>
  • コンテンツがcenter hero-unitタグでくるまれたこと
  • その外にrails.pngへのリンクができたこと
  • h2コンテンツができたこと
  • その下にSign up now!へのリンクができたこと

の4点が変わったところですね。

Sign up now!は、サービス未登録ユーザーへの登録ページ入り口リンクです。まだリンク先は仮です。

画像の置き場

Railsの画像置き場は
app/assets/images/ディレクトリ
だそうです。
http://rubyonrails.org/images/rails.png の画像をこっちにコピペしておきます。名前やサイズの変更はありません。

ページを確認してみる

http://localhost:3000/static_pages/home
にアクセスしてページ確認します。

スクリーンショット 2014-01-21 20.24.09

できました。

長くなったので、このあたりでいったんコミットしておきます。
次は
5.1.2BootstrapとカスタムCSS
です。

 - テクニカル ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
RailsTutorial4.0を高速で復習する。6.2.1章。

6.2.1最初のユーザーテストです。ユーザーモデルをrails g modelで …

no image
Mavericksでruby2.0 rails4.0.0のGem

MacBookAirにMavericksインストールして初めてのrails ne …

no image
RailsTutorial4.0を高速で復習する。9.4.2章。

9.4.2 destroyアクション、です。 テストを書く FactoryGir …

no image
MacBookAirは壊れるの?

1ヶ月ぶりにWindows機を立ち上げています。HDDのカリカリ言う音が冷や汗も …

no image
RailsTutorial4.0を高速で復習する。5.3.4章。

5.3.4RSpecを洗練させる、です。 確かに、名前付きルートに書き換えていて …

初めてのRuby2章「配列とハッシュ」

Railsだってgemの一種!ってことで、Rubyの文法からちゃんとやりたいです …

no image
Everyday Rails3章 バリデーションをテストする

さっき、Aaronを削除したらテスト失敗することを確認しましたが、名前入力無しの …

no image
Railsの%

Rubyの%じゃなくてRailsの%です。 RailsではSQLを生成するwhe …

RailsTutorial4.0を高速で復習する。11章。

第11章ユーザーをフォローする、です。ようやく最終章。1週間でできるつもりが3週 …

民●党批判したら検索順位が落ちたのか?

このブログ、airpucciのドメインも元のwww.airpucci.comに戻 …