心はいつも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

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

  関連記事

格安で真央ごもりする浅田真央システム完成

さいたまスーパーアリーナでの世界選手権で、浅田真央ちゃんのショートプログラム世界 …

パーフェクトRuby 3章制御構造/メソッド/組み込み関数 3-1演算子

パーフェクトRuby2章の後は6章をやろうと思っていましたが、やっぱり順番にやっ …

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

9.2.2正しいユーザーを要求する、です。 テストを書く 自分以外の人がプロフィ …

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

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

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

第7章ユーザー登録、です。 6章でuserモデルを作ったので、7章はwebでの登 …

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

6.3セキュアなパスワードを追加する、です。 パスワードはセキュアであるべきと思 …

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

8.2.5ユーザー登録と同時にサインインする、です。 ユーザーが登録を行った後、 …

no image
Mac OS Xでftp × Cyberduck

WordPressにプラグインを入れたくてダウンロードしてきました。 そういえば …

文字化けもするし、、

自作テンプレ作ったはいいですが、問題が、、。 関連しそうな記事 iTunesをM …

WordPress子テーマの作り方

デザイン変更したairpucci、TwentyTwelveというWordPres …