1. Rails Girls アプリのコメント機能

1.1.Comment の scaffold をする

Coachより: scaffold とはどんなものか簡単に説明してください。

railsgirls アプリのideas へコメントができるような追加をします。
Rails のインストールと ideas アプリ構築についての手順は、こちらを参照ください。

Comment のコメント者名、コメント本文(コメント内容)、Idea テーブルへの関係 (idea_id) を scaffold しましょう。

rails generate scaffold comment user_name:string body:text idea_id:integer

これで新しくコメントテーブルが作成された事をデータベースに教えてあげるためのマイグレーションファイルが作成されました。
マイグレーションを実行するには下記のコマンドを実行します。

rails db:migrate

1.2.モデルに関係 (relations) を追加する

ideas と comments オブジェクト間の接続を Rails に認識させる必要があります。
一つの idea はたくさんの comments を所有することができるものとして、Idea モデルに認識させます。
app/models/idea.rb を開いて、

app/models/idea.rb

class Idea < ApplicationRecord

この下の行に、次のコードを追加します。

app/models/idea.rb

has_many :comments

また、comment は、ある idea に属するものとして認識させます。
app/models/comment.rb を開いて、

app/models/comment.rb

class Comment < ApplicationRecord

この下の行に、次のコードを追加します。

app/models/comment.rb

belongs_to :idea

1.3.コメントフォームの表示と編集

app/views/ideas/show.html.erb を開いて、

app/views/ideas/show.html.erb

<p>
  <strong>Picture:</strong>
  <%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %>
</p>

この下の行に、次のコードを追加します。

app/views/ideas/show.html.erb

<h3>Comments</h3>
<% @comments.each do |comment| %>
  <div>
    <strong><%= comment.user_name %></strong>
    <br />
    <p><%= comment.body %></p>
    <p><%= link_to 'Delete', comment_path(comment), method: :delete, data: { confirm: '削除してもよろしいですか？' } %></p>
  </div>
<% end %>
<%= render 'comments/form', comment: @comment %>

app/controllers/ideas_controller.rb の show action の、

app/controllers/ideas_controller.rb

def show
end

この部分を以下のように書き換えます。

app/controllers/ideas_controller.rb

def show
  @comments = @idea.comments.all
  @comment = @idea.comments.build
end

app/views/comments/_form.html.erb を開いて、

app/views/comments/_form.html.erb

<div class="field">
  <%= form.label :body %>
  <%= form.text_area :body %>
</div>

この下の行に、次のタグを追加します。

app/views/comments/_form.html.erb

<%= form.hidden_field :idea_id %>

最後にこちらを削除します。

app/views/comments/_form.html.erb

<div class="field">
  <%= form.label :idea_id %>
  <%= form.number_field :idea_id %>
</div>

これだけで、今加えた idea アプリケーションが表示され、comment 挿入・削除フォームが見えるはずです。

Coachより: ブラウザを更新して、commentを投稿してみよう。

2. HTML & CSS を使ってデザインしてみよう

アプリケーションは完成しましたが、まだ scaffold で自動生成した状態です。いくつかのデザインを追加してよく見かける Web サイトのようにしてみましょう。このチュートリアルが終わった時に、あなたのアプリケーションはこのようになるはずです。

2.1. アプリケーションのレイアウトを適用してみよう

最初に bootstrap.min.css を使って簡単なデザインをあなたのアプリケーションに適用してみましょう。

次に app/assets/stylesheets/scaffolds.scss を削除します。これは Rails が標準で作成するファイルで私達にはもう必要の無いものです。

ここまで来たら、http://localhost:3000/ideasをリロードしてみましょう。何かが変わったことが確認出来ると思いますが、格好良くするためにはまだやることがありそうです。

2.2. ナビゲーションを良くしよう

"idea" はアプリケーションの中で重要なものなので、"New Idea"ボタンはナビゲーションバーに常に表示するようにしてみましょう。

app/views/layouts/application.html.erbを開いて以下の行の下に

app/views/layouts/application.html.erb

<li class="nav-item active">
  <a class="nav-link" href="/ideas">Ideas</a>
</li>

下の行を追加します。

app/views/layouts/application.html.erb

<li class="nav-item">
  <%= link_to 'New Idea', new_idea_path, class: "nav-link" %>
</li>

2.3. アイデアリストをデザインしよう

さあ、idea リストのページを本格的にする時がきました。そのためにはまずテーブルで作られているレイアウトを div タグで置きかえてみましょう。

app/views/ideas/index.html.erb を開いて以下の内容に置きかえます。

app/views/ideas/index.html.erb

<h1>Listing ideas</h1>

<% @ideas.in_groups_of(3) do |group| %>
  <div class="row">
    <% group.compact.each do |idea| %>
      <div class="col-md-4">
        <%= image_tag idea.picture_url, width: '100%' if idea.picture.present? %>
        <h4><%= link_to idea.name, idea %></h4>
        <%= idea.description %>
      </div>
    <% end %>
  </div>
<% end %>

ページをリロードしてみましょう! ナイスな idea リストのページが見えるはずです。さらに "New Idea" ボタンをクリックすると、文章や写真と一緒に idea を追加することができます。このページはコンテンツをより良くするためのページです。モダンな Web デザインの基本はコンテンツによって飾り付けられるということがあります。

2.4. idea の詳細ページをデザインしてみよう

idea のタイトルをクリックすると、idea の詳細画面を見ることができます。今はまだ Rails によって作られた scaffold ページのままです。さあ、これをもっとよくしてみましょう。

app/views/ideas/show.html.erb をテキストエディタで開いて、以下の内容で全てを置きかえます。

app/views/ideas/show.html.erb

<p id="notice"><%= notice %></p>

<div class="row">
  <div class="col-md-9">
    <%= image_tag(@idea.picture_url, width: '100%') if @idea.picture.present? %>
  </div>

  <div class="col-md-3">
    <p><b>Name: </b><%= @idea.name %></p>
    <p><b>Description: </b><%= @idea.description %></p>
    <p>
      <%= link_to 'Edit', edit_idea_path(@idea) %> |
      <%= link_to 'Destroy', @idea, data: { confirm: 'Are you sure?' }, method: :delete %> |
      <%= link_to 'Back', ideas_path %>
    </p>
  </div>
</div>

Coachより: ブラウザを更新して変化を確認してみよう。

3. Carrierwave を使ってサムネイルを作ってみよう

3.1.ImageMagickのインストール

Rails アプリケーションの Gemfile を開いて

Gemfile

gem 'carrierwave'

の下に
Windowsの場合は、

Gemfile

gem 'mini_magick', '4.10.1'

Macの場合は

Gemfile

gem 'mini_magick'

を追加します。その後に Terminal で以下のコマンドを実行します。

bundle install

3.2. 画像をアップロードした時にサムネイルを作成しよう

app/uploaders/picture_uploader.rb を開いて、以下の行を探しましょう。

app/uploaders/picture_uploader.rb

  # include CarrierWave::MiniMagick

# を使うと rbファイルでコメントアウトを行うことができます。コメントアウトとは、コードを読み込まないようにする機能です。

上の行のコメントアウトをはずすために # を削除します。

削除した場所のすぐ下に以下を追加します。

app/uploaders/picture_uploader.rb

version :thumb do
  process :resize_to_fit => [50, 50]
end

これで画像をアップロードするとリサイズするようになりました。

3.3.サムネイルを表示してみよう

app/views/ideas/index.html.erb を開いて、もし画像がアップロードされていればリサイズした画像を表示するようにしましょう。

app/views/ideas/index.html.erb

<%= image_tag idea.picture_url, width: '100%' if idea.picture.present? %>

を下のように変更します。

app/views/ideas/index.html.erb

<%= image_tag idea.picture_url(:thumb) if idea.picture.present? %>

これで、idea の一覧を開いた時にサムネイルが表示されるようになりました。
注: しかし、もうアップロード済みの画像は変更されません。もう一度 idea を編集して画像をアップロードし直してください。
注: Gemfileを追加した際にはアプリケーションを再起動してください。(ctrl-Cして, rails server)

Coachより: ブラウザを更新して変化を確認してみよう。

4. 質問タイム

Coachより: Basic2, 3を通して一番わからなかったことはなんですか?