【57日目】【1日20分のRailsチュートリアル】【第7章】プロフィールページのレイアウト調整とユーザー登録フォーム作成の準備

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

今日は「Gravatar画像とサイドバー」のレイアウト整えるところから。

7.1.4 Gravatar画像とサイドバー

図7.1のモックアップに近づけるために、ユーザーのサイドバーの最初のバージョンを作りましょう。

プロフィール画像を左寄せにする感じかな。デフォルトは中央なので。

ユーザー表示ビューを修正。

app/views/users/show.html.erb

<% provide(:title, @user.name) %>
<div class="row">
  <aside class="col-md-4">
    <section class="user_info">
      <h1>
        <%= gravatar_for @user %>
        <%= @user.name %>
      </h1>
    </section>
  </aside>
</div>

<aside>タグって馴染みがなかったんだけどHTML5からの要素なんだね。。

HTML要素とCSSクラスを配置したことにより、プロフィールページ (とサイドバーとGravatar) にSCSSでリスト7.11のようにスタイルを与えることができるようになりました。

追加したHTML(とクラス)についてスタイルを追加。

app/assets/stylesheets/custom.css.scss

  :

/* sidebar */

aside {
  section.user_info {
    margin-top: 20px;
  }
  section {
    padding: 10px 0;
    margin-top: 20px;
    &:first-child {
      border: 0;
      padding-top: 0;
    }
    span {
      display: block;
      margin-bottom: 3px;
      line-height: 1;
    }
    h1 {
      font-size: 1.4em;
      text-align: left;
      letter-spacing: -1px;
      margin-bottom: 3px;
      margin-top: 0px;
    }
  }
}

.gravatar {
  float: left;
  margin-right: 10px;
}

.gravatar_edit {
  margin-top: 15px;
}

サーバーを起動して動作確認。

$ rails server -b $IP -p $PORT

左寄せになりました！

7.2 ユーザー登録フォーム

ユーザー情報を表示するページが作成できたので次はいよいよユーザー登録ページを作成します。

Web経由でユーザーを作成する機能をこれから追加しますので、6.3.4で作成したユーザーをここで削除しておきましょう。

消しちゃうんだ。。。

下記コマンドでデータベースのリセット。

$ bundle exec rake db:migrate:reset

ユーザーが削除されたか念のため確認する。
Railsコンソールでユーザーの数を確認。

$ rails console
>> User.count
   (0.1ms)  SELECT COUNT(*) FROM "users"
=> 0

いませんね。

今日の作業時間は【20分】。

次は「7.2.1 form_forを使用する」から。