Rails Tutorialをやってみよう06

第5章の続きからやっていきます。
第5章 レイアウトを作成する | Rails チュートリアル

5.4 ユーザー登録: 最初のステップ
1番目は、static_pages_controllerをgenerateコマンドにて作成しました。
参考：第3章

$ rails generate controller Users new

第3章 ほぼ静的なページの作成 | Rails チュートリアル

次は、2番目のコントローラであるUsersコントローラを作成しましょう。

$ rails generate controller Users new

　　　create  app/controllers/users_controller.rb
      route  get 'users/new'
      invoke  erb
      create    app/views/users
      create    app/views/users/new.html.erb
      invoke  test_unit
      create    test/controllers/users_controller_test.rb
      invoke  helper
      create    app/helpers/users_helper.rb
      invoke    test_unit
      create      test/helpers/users_helper_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/users.js.coffee
      invoke    scss
      create      app/assets/stylesheets/users.css.scss

ユーザー登録ページを持つ、コントローラをgenerateコマンドにて作成します。
ユーザー登録用のアクション名は、「new」としておきます。

ここで、rails generateコマンドの引数は、大文字且つ複数形で入力していることに注意です。

5.4.2 ユーザー登録用URL
新規ユーザー用の動作するページが/users/new にできました。
URLは/users/newではなく表のとおりに/signupに変更しておきます。

routes.rbファイルの

get 'users/new'

を以下のように修正します。

 get 'signup'  => 'users#new'

この意味は、もし URL/signupにアクセスがあったら、
userのアクションnewを呼び出せ、ということです。

トップページにあるsing up now!のリンクを結びつけます。

app/views/static_pages/home.html.erbの'#'を以下のように編集しましょう。

Rails.application.routes.draw do
  root             'static_pages#home'
  get 'help'    => 'static_pages#help'
  get 'about'   => 'static_pages#about'
  get 'contact' => 'static_pages#contact'
  get 'signup'  => 'users#new'
end

signt up now!をブラウザで押すと

うまく表示することができたと思います。

最初のユーザー登録ページを作成します。
app/views/users/new.html.erbの内容を編集します。

<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<p>This will be a signup page for new users.</p>

ブラウザで確認します。

うまく<% provide(:title, 'Sign up' %>が反映されていると思います。

5.5 最後に
Gitを使っている方は、この時点でmasterブランチに変更をマージしてください。

$ bundle exec rake test
$ git add -A
$ git commit -m "Finish layout and routes"
$ git checkout master
$ git merge filling-in-layout

続いて、Bitbucketにプッシュします。

$ git push

herokuへデプロイします。

$ git push heroku

herokuへデプロイされているかを確認します。

$ heroku open

次回へ続きます。

Rails Tutorialをやってみよう05

第5章の続きからやっていきます。
http://railstutorial.jp/chapters/filling_in_the_layout?version=4.2#sec-sass_and_the_asset_pipeline

5.2 SassとAsset Pipeline
Rails3.1以降と前のバージョンのファイル分類のちがいや
Sass構文のネストなどについて書かれていますが、詳細は本文に譲ります。

既に書いている
app/assets/stylesheets/custom.css.scss
を、Sassを使って書き直します。
比較のために修正前のファイルを載せておきます。

修正前のファイル

@import "bootstrap-sprockets";
@import "bootstrap";

/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
  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: #777;
  }

  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;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
}

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: 15px;
}

上記のファイルを
以下のようにSassを使って編集します。

@import "bootstrap-sprockets";
@import "bootstrap";

/* mixins, variables, etc. */

$gray-medium-light: #eaeaea;

/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: 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: $gray-light;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}


/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: white;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: white;
    text-decoration: none;
  }
}

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $gray-medium-light;
  color: $gray-light;
  a {
    color: $gray;
    &:hover {
      color: $gray-darker;
    }
  }
  small {
    float: left;
  }
  ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
  }
}

参考：getbootstrap.com

ネストや変数を使って初期のSCSSファイルを書き直した結果
ブラウザで確認すると、修正前と後でページが変化していないことを確認できたと思います。

5.3 レイアウトのリンク
今度は’#’で代用していたリンクを書き換えてみましょう。もちろん、以下のようにリンクを直接記述することもできます。
ファイル：app/views/layouts/_footer.html.erbの

<li><%= link_to "About",   '#' %></li>

を

<li><%= link_to "About", about_path %></li>

に修正します。

この修正をしたら、エラーがでたので、
とりあえず、
'#'に戻しておきました。

5.3.1 Contactページ

Contactページのルートを追加します。
config/routes.rbを以下のように編集します。

Rails.application.routes.draw do
  root 'static_pages#home'
  get  'static_pages/help'
  get  'static_pages/about'
  get  'static_pages/contact'
end

Contactページ用のアクションを追加する
app/controllers/static_pages_controller.rbにて

def contact
  end

Contactページのビューを追加する
app/views/static_pages/contact.html.erbを新規作成して、

$ touch app/views/static_pages/contact.html.erb

以下のように内容を編集します。

<% provide(:title, 'Contact') %>
<h1>Contact</h1>
<p>
  Contact the Ruby on Rails Tutorial about the sample app at the
  <a href="http://www.railstutorial.org/#contact">contact page</a>.
</p>

5.3.2 Railsのルート

getルールを使って変更すると、
GETリクエストが /help に送信されたときに
StaticPagesコントローラーのhelpアクションを呼び出してくれるようになります。

このgetルールを使うメリットは2つあります。
・/static_pages/help のような長いURLが /help のような短いURLになる。
・help_pathやhelp_urlといった「名前付きルート」が使える。

「名前付きルート」とは、
「パス_path」(ドメイン名より下のパスのみ)または「パス_url」(httpなどから始まるフルパス)という形式でURL形式を指定できます。たとえばContactページが/contactというパスにある場合、contact_pathまたはcontact_urlという名前付きルートを使用して指定できます。パスヘルパーやURLヘルパーとも呼ばれます。これにより、コード上でURL構造を意識せずにパスを指定できます。

なお似ているけど違うのは「名前付きスコープ」と「名前付きパラメータ」です。

参考：techracho.bpsinc.jp

5.3.3 名前付きルート

次に、
routes.rbをgetメソッドを使って編集したことにより、
名前付きルートが使えるようになりました。
layouts/_header.html.erbの'#'を編集しましょう。

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

同様に
layouts/_footer.erbの'#'を編集します。

<footer class="footer">
  <small>
    The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
    by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
  </small>
  <nav>
    <ul>
      <li><%= link_to "About",   about_path %></li>
      <li><%= link_to "Contact", contact_path %></li>
      <li><a href="http://news.railstutorial.org/">News</a></li>
    </ul>
  </nav>
</footer>

以下のように、ブラウザでaboutページを表示できたかと思います。

今日はこの辺で、次回へ続きます。

Rails Tutorialをやってみよう04

第5章からやっていきます。
http://railstutorial.jp/chapters/filling_in_the_layout?version=4.2#cha-filling_in_the_layout

gitのブランチを作成しておきます。

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

app/views/layouts/application.html.erb
を編集します。

<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>

ここで、

<head>
    <title><%= full_title(yield(:title)) %></title>

とするとエラーが発生したので、
とりあえず、

<head>
  <title>SampleApp</title>

としておきました。

次に
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/' %>

画像を表示するためには、rails.pngというRailsのロゴ画像ファイルを加える必要があります。Ruby on Rails公式ページの http://rubyonrails.org/images/rails.pngから画像をダウンロードして、app/assets/images/ディレクトリに置いてください。Cloud IDEやUnix系のOS (Max OS Xなど) を使っている場合は、次のようにcurlコマンドで簡単に取得できます。

$ curl -O http://rubyonrails.org/images/rails.png
$ mv rails.png app/assets/images/

bootstrapをレイアウトに用いるために、
gemfileを追加する。

Gemfileへbootstrap-sassを追加する

source 'https://rubygems.org'

gem 'rails',                '4.2.2'
gem 'bootstrap-sass',       '3.2.0.0'

bundle install

stylesheetsへcustom.css.scssという名称のファイルを作成する。

$ touch app/assets/stylesheets/custom.css.scss

上記のファイルを編集する。
app/assets/stylesheets/custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

サーバーを起動して、サイトにアクセスする。

bootstrapが適用できているかを確認する。

app/assets/stylesheets/custom.css.scss
をさらに編集する。

@import "bootstrap-sprockets";
@import "bootstrap";

/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

Webページを更新すると以下のようにスタイルが適応されているはずです。

またまた、
app/assets/stylesheets/custom.css.scssを編集します。
フォントのレイアウトを追加しましょう。

@import "bootstrap-sprockets";
@import "bootstrap";
.
.
.
/* 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: #777;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

さらにサイトロゴのレイアウトを追加します。
app/assets/stylesheets/custom.css.scssを編集します。

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

ここでCSSのカラーについて
参考：
HTML Color Names

5.1.3 パーシャル (partial)
railsでは、partialという昨日で、部品ごとにコードをまとめることができます。
1.shim
2.の

3.に

を追加

以上3つを、layouts/application.html.erbから分解して、
それぞれのファイルを新しく作って、
layouts/application.html.erbからrenderで参照できるようにしましょう。

1.app/views/layouts/application.html.erbのに

<%= render 'layouts/shim' %>

を追加します。

2.さらに
app/views/layouts/application.html.erbのの

を

<%= render 'layouts/header' %>

に置き換えます。

3.最後にタグの前に、

を追加しましょう。

<!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>

上記2つのコードで使われている<%= render ... %>
は、ヘルパーの呼び出しです。

(<%= ... %>は、テンプレート内でRubyの式を評価するための埋め込みRuby記法です。詳細はRails Tutorialの第4章を参考にしてください。)

さてここで、Webページを確認してみると
renderが参照しているファイルが見つからないのでエラーが発生するはずです。

２つのrenderのために、参照ファイルを２つ作成する必要があります。

1.
1つ目は、内のrenderのために
HTML shim用のパーシャル
app/views/layouts/_shim.html.erbを作成します。
コマンドラインにて、

$ touch app/views/layouts/_shim.html.erb

ファイルの中身をテキストエディタにて以下のように編集します。

<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>

2.
2つ目は、内のrenderのために
コマンドラインにて

$ touch app/views/layouts/_header.html.erb

app/views/layouts/_header.html.erbの中身を以下のように編集します。

<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>

3.
さらに、3つ目として内にを追加するために
render用のファイルを準備しておきます。

コマンドラインにて、

$ touch app/views/layouts/_footer.html.erb

<footer class="footer">
  <small>
    The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
    by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
  </small>
  <nav>
    <ul>
      <li><%= link_to "About",   '#' %></li>
      <li><%= link_to "Contact", '#' %></li>
      <li><a href="http://news.railstutorial.org/">News</a></li>
    </ul>
  </nav>
</footer>

ページをブラウザから確認してみます。

footerのレイアウト(CSS)を追加しておきます。
app/assets/stylesheets/custom.css.scssへ以下を追加します。

.
.
.
/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
}

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: 15px;
}

ブラウザで確認すると、以下のようになっているはずです。

今回はここまで。

Rails Tutorialをやってみよう(番外編) herokuを設定する

1.5.1 Herokuのセットアップ

group :production do
  gem 'pg',             '0.17.1'
  gem 'rails_12factor', '0.0.2'
end

をGemfileへ追加する。

本番環境のgemは開発環境へインストールされない。

$ bundle install --without production

リスト1.14で追加したgemは本番環境でしか使用しないので、このフラグを追加したコマンドを実行すると本番用gemはローカルに追加されません。今このコマンドを実行するのは、後の本番環境へのデプロイに備えてGemfile.lockを更新し、pg gemとrails_12factor gem、Rubyバージョンの指定をGemfile.lockに反映する必要があるためです。以下を実行して変更をコミットできます。

$ git commit -a -m "Update Gemfile.lock for Heroku"

$ heroku login

$ heroku keys:add

$ heroku keys:add

1.5.2 Herokuにデプロイする (1)

$ git push heroku master

ランダムなサブドメイン名を生成するためのコンパクトなコードを以下に記します。

('a'..'z').to_a.shuffle[0..7].join

Rubymineで行番号を表示させる

Preference > Editor > Appearance　にて、「Show line numbers」へチェックを入れる

vagrant の起動時にエラーが発生した

Failed to mount folders in Linux guest. This is usually because
the "vboxsf" file system is not available. Please verify that
the guest additions are properly installed in the guest and
can work properly. The command attempted was:

mount -t vboxsf -o uid=`id -u vagrant`,gid=`getent group vagrant | cut -d: -f3` vagrant /vagrant
mount -t vboxsf -o uid=`id -u vagrant`,gid=`id -g vagrant` vagrant /vagrant

The error output from the last command was:

/sbin/mount.vboxsf: mounting failed with the error: No such device

解決方法

Guest Additionsを入れ直すにはプラグイン「vagrant-vbguest」をインストールする。
vagrant-vbguestをインストールする。
vagrant haltした状態で、mac側のターミナルにて以下の操作をする。

$ vagrant plugin install vagrant-vbguest

再度、vagrant を立ち上げると治っている。

$ vagrant up
$ vagrant ssh

参考：qiita.com

Rails Tutorialをやってみよう03

第3章の途中から、引き続きやっていきます。
テストの部分は飛ばしてやっていきます。
http://railstutorial.jp/chapters/static_pages?version=4.2#sec-slightly_dynamic_pages

目次
3.4 少しだけ動的なページ

3.4.1 タイトルをテストする (Red)
3.4.2 タイトルを追加する (Green)
3.4.3 レイアウトと埋め込みRuby (Refactor)
3.4.4 ルーティングの設定

3.4 少しだけ動的なページ

まず、一時的にレイアウトファイルの名前を変更します。
レイアウトファイルの役割をよりわかりやすく説明するために、最初にレイアウトファイルを無効にしています。

$ mv app/views/layouts/application.html.erb layout_file   # temporary change