読者です 読者をやめる 読者になる 読者になる

ぞえの技術めも

Ruby on Rails勉強中

【31日目】【1日20分のRailsチュートリアル】【第5章】Homeページにナビゲーションや画像リンクを追加する

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

今日は「5.1.1 ナビゲーション」の途中から。

5.1.1 ナビゲーション

今後登場するスタイル要素を利用できるようにするために、home.html.erbビューに特別な要素をいくつか追加します。

app/views/static_pages/home.html.erb

<div class="center jumbotron">
  <h1>Welcome to the Sample App</h1>

  <h2>
    This is the home page for the
    <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
    sample application.
  </h2>

  <%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %>
</div>

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

Homeページのテンプレートを上記の内容でコピペ。

<a href="#" class="btn btn-lg btn-primary">Sign up now!</a>

上で挙げたdivタグのCSSクラスjumbotronや、signupボタンのbtnクラス、btn-lgクラス、btn-primaryクラスはすべて、Bootstrapにおいて特別な意味を持ちます。

Bootstrap利用するときに使うクラス名って覚えておかないといけないのかな。。。それは無理だな…。

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

このコードでリンク付き画像が挿入できるらしい。
画像が要るね。

Cloud IDEUnix系のOS (Max OS Xなど) を使っている場合は、次のようにcurlコマンドで簡単に取得できます。

せっかくなのでコマンドで取得しよう。

$ curl -OL http://railstutorial.jp/rails.png
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 13036  100 13036    0     0  28127      0 --:--:-- --:--:-- --:--:-- 28155
$ mv rails.png app/assets/images/

1個目のコマンドで画像取得したらrootに置かれるので、2個目のコマンドでimagesフォルダに移動。

ちゃんと取得できて移動できましたー。

f:id:kt_zoe:20160901123222p:plain

Cloud IDEを使っていると、(筆者にも理由は分からないのですが) ときどき2行目のmvコマンドで失敗することがあるようです。

あら、そうなんだ。私はCloud IDE使ってるけど大丈夫だった。

さて、これでナビゲーション追加したりはできたので動作確認。

サーバー起動して

$ rails server -b $IP -p $PORT

f:id:kt_zoe:20160901123239p:plain

Homeページの基礎ができました。

ちょっと早いけどキリがいいので今日はここまで。
今日の作業時間は【18分】

次は「5.1.2 BootstrapとカスタムCSS」から。