主な内容 - Blogシステムを作る（続き）
Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）（続き）
- 新しい機能（Comment）を追加させましょう
- Scaffoldでは自動生成してくれたModel、DBの設定、Controller、URL、Controllerのメソッド、Viewを自力で作ります。
仕様（再確認）
- Post（記事を投稿、編集、削除できる機能）
- Comment（記事に対してコメントを投稿、削除できる機能）
作成の流れ
- blogプロジェクトを作成
- Modelを作成
- DB
- Controllerの作成
- URLの作成（ルーティングの設定）
- Controllerのメソッドの作成
- メソッドに対応するViewを作成
- 2〜7を機能分繰り返す
8. 機能分、2〜7を繰り返す
Post機能が完成しました。もう一つ機能を追加したくなったら2〜7をその機能に対して順にやっていくだけです。
2. Commentモデルの作成
$ rails g model Comment commenter:string body:text post:references
SECURITY WARNING: No secret option provided to Rack::Session::Cookie.
This poses a security threat. It is strongly recommended that you
provide a secret to prevent exploits that may be possible from crafted
cookies. This will not be supported in future versions of Rack, and
future versions will even invalidate your existing user cookies.
Called from: /Users/shiraihiroki/.rbenv/versions/1.9.3-p125/lib/ruby/gems/1.9.1/gems/actionpack-3.2.3/lib/action_dispatch/middleware/session/abstract_store.rb:28:in `initialize'.
invoke active_record
create db/migrate/20140317044238_create_comments.rb
create app/models/comment.rb
invoke test_unit
create test/unit/comment_test.rb
create test/fixtures/comments.yml
セキュリティ警告が出ていますが、これは最新のRailsを使用していないことが原因なので無視します。
post:referencesは、CommentをPostオブジェクト一つ一つとと紐づけるといった意味合いになります。ひとつの投稿ごとにコメント機能を付けたいのでこのようにします。これを指定してrake db:migrateすると、commentsテーブルにpostと紐づけるためのフィールドが自動生成されます。
次に、PostモデルとCommentモデルのリレーションシップ（関係）について設定する必要があります。一つのPostに複数のCommentが属している、つまりここには1対多のリレーションシップがあります。このような場合、それぞれのモデルにその関係性を示してあげる必要があります。所有しているテーブル側のモデルにはhas_manyを、所属している側のモデルにはbelongs_toを指定します。
Commentモデルにはモデル作成時にreferencesを指定してあげることで、belongs_to :post（ポストに属している）という関係設定が追加されています。
しかし、Postモデルには追加されません。してくれればいいのにとも思いますが笑（なにか理由があるのかな？）
ということで、Postモデルにも追加します。
class Post < ActiveRecord::Base
attr_accessible :content, :title
# titleは入力が必須（presence -> 存在していることが必須）
validates :title, :presence => true
# titleは入力が必須かつ、文字数の長さが最低５は必須
validates :content, :presence => true,
:length => { :minimum => 5 }
# PostオブジェクトはたくさんのCommentオブジェクトを持つ
has_many :comments
end
3. データベースに反映
$ rake db:migrate
== CreateComments: migrating =================================================
-- create_table(:comments)
-> 0.0705s
-- add_index(:comments, :post_id)
-> 0.0005s
== CreateComments: migrated (0.0712s) ========================================
commentsテーブルが作成され、オプションで指定したcommentsとpostとの紐付けがくわえられたことがわかります。紐付けはpost_idで行っていることになります。
4. Commentsコントローラの作成
$ rails g controller Comments
SECURITY WARNING: No secret option provided to Rack::Session::Cookie.
This poses a security threat. It is strongly recommended that you
provide a secret to prevent exploits that may be possible from crafted
cookies. This will not be supported in future versions of Rack, and
future versions will even invalidate your existing user cookies.
Called from: /Users/shiraihiroki/.rbenv/versions/1.9.3-p125/lib/ruby/gems/1.9.1/gems/actionpack-3.2.3/lib/action_dispatch/middleware/session/abstract_store.rb:28:in `initialize'.
create app/controllers/comments_controller.rb
invoke erb
create app/views/comments
invoke test_unit
create test/functional/comments_controller_test.rb
invoke helper
create app/helpers/comments_helper.rb
invoke test_unit
create test/unit/helpers/comments_helper_test.rb
invoke assets
invoke coffee
create app/assets/javascripts/comments.js.coffee
invoke scss
create app/assets/stylesheets/comments.css.scss
5. URLの作成（ルーティング）
Blog::Application.routes.draw do
# Post機能のルーティング
resources :posts do
# postレコードに関連づけられたComment機能のルーティング
resources :comments
end
#ルート（/）にアクセスしたらpostsコントローラーのindexメソッド実行する
root :to => 'posts#index'
# The priority is based upon order of creation:
# first created -> highest priority.
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
中略
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
commentsのルーティング設定をpostsのdo 〜 endで囲ってあげると、commentsがそれぞれpostsテーブルのpostレコードに関連づけられたURLを生成してくれます。
$ rake routes
post_comments GET /posts/:post_id/comments(.:format) comments#index
POST /posts/:post_id/comments(.:format) comments#create
new_post_comment GET /posts/:post_id/comments/new(.:format) comments#new
edit_post_comment GET /posts/:post_id/comments/:id/edit(.:format) comments#edit
post_comment GET /posts/:post_id/comments/:id(.:format) comments#show
PUT /posts/:post_id/comments/:id(.:format) comments#update
DELETE /posts/:post_id/comments/:id(.:format) comments#destroy
posts GET /posts(.:format) posts#index
POST /posts(.:format) posts#create
new_post GET /posts/new(.:format) posts#new
edit_post GET /posts/:id/edit(.:format) posts#edit
post GET /posts/:id(.:format) posts#show
PUT /posts/:id(.:format) posts#update
DELETE /posts/:id(.:format) posts#destroy
root / posts#index
生成されたURLがpostに関連づけられているのが確認できました。
6. 7. Controller内のMethod、それに対応するViewを作成
show
コメントに関するView、Controllerを作っていきます。
View
コメントはポスト表示ページ（show）につけたいので、show.html.erbにコメントを入力するフォームと、コメントを表示する部分を作っていきます。
<%# ヘッダー（記事のタイトル） %>
<h1><%= @post.title %></h1>
<%# 記事の内容 %>
<p><%= @post.content %></p>
<%# ヘッダー（コメント） %>
<h2>Comments</h2>
<%# 順序無しリスト %>
<ul>
<%# コメントがあったら %>
<% if @post.comments.any? %>
<%# コメント数ループ %>
<% @post.comments.each do |comment| %>
<%# リストの内容 %>
<li>
<%# コメント本文 (by コメンター) %>
<%= comment.body %> (by <%= comment.commenter %>)
</li>
<% end %>
<%# コメントが無かったら %>
<% else %>
<%# no comment yet. %>
<li>no comment yet.</li>
<% end %>
</ul>
<h2>Add a comment</h2>
<%# @postに対するコメントフォーム %>
<%= form_for([@post, @comment]) do |f| %>
<%# commenterに対するテキストフィールド %>
<div class = "field">
<%# commenterに対するテキストフィールド %>
<%= f.label :commenter %>
<%= f.text_field :commenter %>
</div>
<%# bodyに対するテキストエリア（５行分） %>
<div class = "field">
<%= f.label :body %>
<%= f.text_area :body, :rows => 5 %>
</div>
<%# 送信ボタン（createメソッドへ） %>
<div class = "actions">
<%= f.submit %>
</div>
<% end %>
<%# HOME（index）へ戻るリンク %>
<%= link_to 'home', posts_path %>
<% @post.comments.each do |comment| %>
commentsはPostオブジェクトに関連づけられているので、このようにするだけでデータが取得できます。
<%= form_for([@post, @comment]) do |f| %>
何かに関連づけられたものに対するフォームは<%= form_for([所有されているオブジェクト, 所属しているオブジェクト) do |f| %>のようにしてフォームを生成します。
Controller
# coding: utf-8
class PostsController < ApplicationController
# indexメソッド
def index
# Postから全てのデータを引っ張りだし、インスタンス変数postsに代入
@posts = Post.all
end
# showメソッド
def show
# PostモデルのfindメソッドにparamsでURLから受け取ったIDを引数として与え、
# そのデータが見つかったらインスタンス変数postに代入
@post = Post.find(params[:id])
# Postオブジェクトのidと紐付けられているcomments
@comment = Post.find(params[:id]).comments.build
end
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
中略
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
end
動作確認
どれでも良いのでポストへアクセスします。
http://localhost:3000/posts/1
レイアウトはかなり残念ですが、表示されました。
Comments欄はコメントがまだ入っていないので「no comment yet.」が表示されていることが確認できます。
create
では、つぎにCreate Commentを押したときのコメント作成メソッドを作成していきます。コメントに関する処理なので、commentsコントローラに書いていきます。
class CommentsController < ApplicationController
# createメソッド
def create
# idで指定したPostオブジェクトをデータベースから取得
@post = Post.find(params[:post_id])
# フォームに入力されたデータをidで指定したPostオブジェクトに
# 関連するコメントオブジェクトを作成し、データベースに登録
# .create == (.new + .save)
@comment = Post.find(params[:post_id]).comments.create(params[:comment])
# 指定したポスト表示ページにリダイレクト
redirect_to post_path(@post)
end
end
.createはオブジェクトをインスタンス化（作成）する.newと作成したインスタンスオブジェクトをデータベースに登録する.saveを一度にやってくれる便利なメソッドです。
動作確認
なにか入力して、Create Commentをクリックします。
きちんとコメントが登録、表示できていることが確認できました。
バリデーションの設定、バリデーションエラーの表示
バリデーションの設定
Postと同じルールにします。
class Comment < ActiveRecord::Base
belongs_to :post
attr_accessible :body, :commenter
# commenterは入力が必須（presence -> 存在していることが必須）
validates :commenter, :presence => true
# bodyは入力が必須かつ、文字数の長さが最低５は必須
validates :body, :presence => true,
:length => { :minimum => 5 }
end
commentのcreateメソッドを変更
バリデーションを追加したので、動作にも変更を加えます。コメントがデータベースに保存されたらコメントしたポストにリダイレクト、バリデーションエラーで保存できなかったらコメント入力に戻ります。
class CommentsController < ApplicationController
# createメソッド
def create
# idで指定したPostオブジェクトをデータベースから取得
@post = Post.find(params[:post_id])
# フォームに入力されたデータをidで指定したPostオブジェクトに関連するコメントオブジェクトを作成
@comment = Post.find(params[:post_id]).comments.new(params[:comment])
# もしデータベースへの保存が成功したら
if @comment.save
# 指定したポスト表示ページにリダイレクト
redirect_to post_path(@post)
# もしデータベースへの保存が成功しなかったら
else
# メソッド処理後にクライアントに返すhtmlのテンプレートをshowに指定
render :template => "posts/show"
end
end
end
render :template => "posts/show"は、createメソッド処理後にレンダリングするViewテンプレートを指定しています。標準でcomments/create.html.erbをレンダリングしようとするので、これがないとmissingエラーになります。今回はshow.html.erbをレンダリングしてほしいので、指定します。
renderに関してはこのサイトが大変参考になります。
Viewも変更
バリデーションエラーを表示させたいので、show.html.erbにも変更を加えます。ポスト作成、編集フォームでのバリデーションエラー表示コードと同じですね。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
前略
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
<h2>Add a comment</h2>
<%# @postに対するコメントフォーム %>
<%= form_for([@post, @comment]) do |f| %>
<%# もし@commentにエラーがあったら %>
<% if @comment.errors.any? %>
<%# 順序無しリスト %>
<ul>
<%# エラーの数だけループ %>
<% @comment.errors.full_messages.each do |msg| %>
<%# メッセージの内容を表示 %>
<li><%= msg %></li>
<% end %>
</ul>
<% end %>
<%# commenterに対するテキストフィールド %>
<div class = "field">
<%# commenterに対するテキストフィールド %>
<%= f.label :commenter %>
<%= f.text_field :commenter %>
</div>
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
中略
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
動作確認
コメントをわざと短くし、Create Commentしてみます。
バリデーションエラーが表示されました。
- Commenterは空にはできない。
- bodyが短すぎる。（最小は５文字）
設定したバリデーションの通りエラーがでました。
つぎに、COmmenterに名前を、Bodyに５文字以上入力してからCreate Commentしてみます。
コメントがきちんと反映されました。
destroy
ポストと同じようにコメントにも削除機能をつけます。
View
まずは削除リンク、Ajaxのためにリスト項目へidを付加し、さらにjQueryで指定したidのコメントをフェードアウトさせる処理を書きます。
index.html.erbとほとんど同じです。
<%# ヘッダー（記事のタイトル） %>
<h1><%= @post.title %></h1>
<%# 記事の内容 %>
<p><%= @post.content %></p>
<h2>Comments</h2>
<%# 順序無しリスト %>
<ul>
<%# コメントがあったら %>
<% if @post.comments.any? %>
<%# コメント数ループ %>
<% @post.comments.each do |comment| %>
<%# リストの内容 %>
<li id = "comment_<%= comment.id %>">
<%# コメント本文 (by コメンター) %>
<%= comment.body %> (by <%= comment.commenter %>)
<%# コメント削除リンク %>
<%= link_to "Delete", [comment.post, comment],
# 確認メッセージ
:confirm => "Sure?",
# 実行するHTTPメソッド
:method => :delete,
# Ajaxを有効化（非同期処理）
:remote => true %>
</li>
<% end %>
<%# コメントが無かったら %>
<% else %>
<%# no comment yet. %>
<li>no comment yet.</li>
<% end %>
</ul>
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
中略
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
<%# HOME（index）へ戻るリンク %>
<%= link_to 'home', posts_path %>
<script>
$(function() {
//deleteメソッドの処理が成功したらfunction内を実行
$('a[data-method = "delete"]').on('ajax:success', function(event, data, status, xhr) {
//comment_***のidを持った要素をゆっくりフェードアウト
$('#comment_'+data.comment.id).fadeOut("slow");
});
});
</script>
<%= link_to "Delete", [comment.post, comment]commentはpostに属しているので、属しているpostオブジェクトのアドレスも保持しています。なのでcomment.postとすると、postを指定したことになります。
Controller
destroyメソッドを実装します。postsコントローラのdestroyメソッドとほとんど同じですね。
class CommentsController < ApplicationController
# createメソッド
def create
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
中略
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
end
# destroyメソッド
def destroy
# idで指定したオブジェクトを取得
@comment = Comment.find(params[:id])
# オブジェクトの削除
@comment.destroy
# json形式で@commentの内容をcommentとしてViewに渡す
render json: { comment: @comment}
end
end
動作確認
Taroのコメントを削除してみます。Deleteリンクをクリックします。
確認メッセージが確認できました。OKをクリックします。
ぬるぬるっとTaroのコメントがフェードアウトし、削除されたことが確認できました。
View
一覧（index）にポストごとにコメント数を表示させてみます。ポストタイトルのすぐ横が良いですね。postに属するコメント配列の大きさ（数）をsizeメソッドを使って取得しています。
<%# 一時通知メッセージ %>
<div id="notice"><%= notice %></div>
<%# ヘッダー %>
<h1>Posts</h1>
<%# 順序無しリスト %>
<ul>
<%# ループ %>
<% @posts.each do |post| %>
<li id = "post_<%=post.id%>">
<%# 記事のタイトルにリンクを張ってリスト表示 %> <%# postに属するコメント数を取得 %>
<%= link_to post.title, post_path(post) %>(<%= post.comments.size %>)
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
中略
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
動作確認
コメント数が表示されたのが確認できました。
8. アプリケーションの日本語化
日本語化パッチをダウンロード
Rawを右クリックしてリンク先を別名で保存
config/localesフォルダに保存
設定
アプリケーション全体の設定ファイルに変更を加えます。
クラスの中であればどこでも良いのでconfig.i18n.default_locale = :jaを追加します。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
中略
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
# Configure the default encoding used in templates for Ruby 1.9.
config.encoding = "utf-8"
config.i18n.default_locale = :ja
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
中略
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
end
end
i18nはinternationalization（国際化）の略で、iとnの間に18文字あるのでこのような表記になっています。
動作確認
バリデーションエラーやフォームボタンが日本語化されていることが確認できました。
以上、これで終了です。
さすがはドットインストールさん、作っていてとても楽しいですね。それはrubyのおかげでもあるのかな？
とにかくお疲れ様でした。
メモ一覧
#01 Ruby on Railsとは何か？
#02 必要となるツールを揃えよう
- Ruby on Railsはこんなものですよ
- 必要な情報はここら辺で集まりますよ
- 必要な知識にはこんなものがありますよ
- 開発環境はこんな感じですよ
- Ruby on RailsはMVCフレームワークですよ
- MVCはこんなものですよ
#04 はじめてのRailsプロジェクト
#05 ファイル構成をみていこう
アプリケーションを作成する基本的な流れを覚えましょう#06 Webサーバーを立ち上げよう
作成したWebアプリケーションをどうささせてみましょう#07 scaffoldを使ってみよう (1)
#08 scaffoldを使ってみよう (2)
DB、Model、View、Controllerの作成、URLの設定をしてみましょう
#09 ブログシステムを作ろう
#10 新しいプロジェクトを作ろう
#11 Postモデルを作ろう
#12 Postsコントローラーを作ろう
#13 ルーティングの設定をしよう
Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）
プロジェクト、Model、Controllerを作成し、ルーティングの設定をしよう
#14 デバッグに使えるコンソールについて
#15 コントローラーのメソッドについて
#16 記事の一覧を表示する (1)
#17 記事の一覧を表示する (2)
#18 リンクを貼ってみよう
#19 HTMLテンプレートを変更しよう
#20 ロゴ画像を表示させてみよう
#21 記事一覧画面をrootにしてみようScaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）（続き）
rails consoleとか、rails dbconsoleなんかの便利なツールがありますよ
コントローラーのメソッドと、それに対応するViewを作っていきましょうScaffoldでは自動生成してくれたModel、DBの設定、Controller、URL、Controllerのメソッド、Viewを自力で作ります。（まずは１つ）
#22 記事の詳細を表示する (1)
#23 記事の詳細を表示する (2)Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）（続き）
- コントローラーのメソッドと、それに対応するViewを作っていきましょう（続き）
- Scaffoldでは自動生成してくれたModel、DBの設定、Controller、URL、Controllerのメソッド、Viewを自力で作ります。（続き - show）
#24 新しい記事を追加しよう (1)
#25 新しい記事を追加しよう (2)
#26 新しい記事を追加しよう (3)
#27 バリデーションを設定しよう
#28 バリデーションエラーを表示しよう
#29 フラッシュメッセージを表示する
#30 メッセージをjQueryで消す
Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）（続き）
- コントローラーのメソッドと、それに対応するViewを作っていきましょう（続き）
- Scaffoldでは自動生成してくれたModel、DBの設定、Controller、URL、Controllerのメソッド、Viewを自力で作ります。（続き - new,create）
記事のタイトル一覧を表示するindexメソッド、その記事を表示するshowメソッドは完成したので次はその記事を表示するページが欲しいですね。ということでnewメソッド（新規作成フォーム）を作ります。また、フォームから送信されたデータを処理して新しい記事を作成するcreateメソッドも作成します。
バリデーション（検査）の設定をやってみよう（実践的）
#31 記事を更新してみよう (1)
#32 記事を更新してみよう (2)
#33 記事を更新してみよう (3)
Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）（続き）
- コントローラーのメソッドと、それに対応するViewを作っていきましょう（続き）
- Scaffoldでは自動生成してくれたModel、DBの設定、Controller、URL、Controllerのメソッド、Viewを自力で作ります。（続き - edit, update）
記事のタイトル一覧を表示するindexメソッド、その記事を表示するshowメソッド、記事の新規作成フォームを作成するnewメソッド、記事を作成するcreateメソッドは完成したので次はその記事を編集するページが欲しいですね。ということでeditメソッド（記事編集フォーム）を作ります。また、フォームから送信されたデータを処理して記事を上書きするupdateメソッドも作成します。
#34 記事を削除してみよう
#35 削除処理をAjax化しよう (1)
#36 削除処理をAjax化しよう (2)
Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）（続き）
- コントローラーのメソッドと、それに対応するViewを作っていきましょう（続き）
- Scaffoldでは自動生成してくれたModel、DBの設定、Controller、URL、Controllerのメソッド、Viewを自力で作ります。（続き - destroy）
記事のタイトル一覧を表示するindex、その記事を表示するshow、記事の新規作成フォームを作成するnew、記事を作成するcreate、記事を編集するeditは完成したので次はその記事を削除するページが欲しいですね。ということでdestroyを作ります。
#37 Commentモデルを作ろう
#38 Commentsコントローラーを作ろう
#39 コメントを表示させよう
#40 コメントを投稿してみよう (1)
#41 コメントを投稿してみよう (2)
#42 バリデーションを設定しよう
#43 コメントを削除してみよう (1)
#44 コメントを削除してみよう (2)
#45 コメント件数を表示してみよう
#46 Railsを日本語化しよう
Scaffoldを使わずに、一からブログアプリケーションを作成しよう（実践的）（続き）
- 新しい機能（Comment）を追加させましょう
- Scaffoldでは自動生成してくれたModel、DBの設定、Controller、URL、Controllerのメソッド、Viewを自力で作ります。