railsを少しずつ勉強する - 2. シンプルなブログ
前の記事の続きです。
シンプルなブログwebアプリを作成していきたいと思います。
シンプルなブログ の仕様
- 記事を新規作成、編集、削除ができる
- 記事に対して、コメントを新規作成、編集、削除ができる
モデルの設計
ブログ記事とコメントのモデルを設計してみます。
まずはCacooで設計などをしておき、必要な属性や関連などを洗い出す。
こんな感じ。
次に英語に直します。
もし英単語が分からない場合はgoo辞書などで調べると良いです。
記事のモデル
Article - title - body
コメントのモデル
Comment - article_id - body
railsのアプリ作成
railsでアプリを作成します。"sinsoku-blog"がアプリの名前になります。
- -T はデフォルトのTest::Unitを使わないようにします。RSpecを使うので、指定しています。
- --skip-bundle はアプリ作成後のbundle installを抑止します。
$ rails new sinsoku-blog -T --skip-bundle
Gemfileを編集します
Gemfileにはアプリで使用するrubyライブラリ(gem)が書かれています。
このファイルを追記・修正します。
- "therubyracer" はCoffeeScript関連で必要になるため、コメントアウトになっているのを外します
- "rspec-rails" はテストでRSpecを使うため、追加します
Gemfile
@@ -15,7 +15,7 @@ group :assets do gem 'coffee-rails', '~> 3.2.1' # See https://github.com/sstephenson/execjs#readme for more supported ru - # gem 'therubyracer', :platforms => :ruby + gem 'therubyracer', :platforms => :ruby gem 'uglifier', '>= 1.0.3' end @@ -36,3 +36,7 @@ gem 'jquery-rails' # To use debugger # gem 'debugger' + +group :test, :development do + gem 'rspec-rails' +end
変更後、bundlerでgemをインストールします。
$ bundle install --path vendor/bundle
railsのscaffold
rails generator（gに省略可）を使い、RESTful*2になるようなMVC（Model,View,Controller）の各ファイルを生成することができます。
$ rails g scaffold Article title:string body:text
$ rails g scaffold Comment article:belongs_to body:text
テーブルの作成
まだDBにテーブルが作成されていないため、テーブルを作成します。
データベースを作成
$ bundle exec rake db:create
マイグレーションを実行
$ bundle exec rake db:migrate
簡単な動作確認
rails server（sに省略可）を使い、サーバを立ち上げてみます。
$ rails s
サーバ起動後、http://localhost:3000/articles にアクセスすると、記事のページが表示されます。
関連（belongs_to）の所のview修正
belongs_to のあるモデルをscaffoldで作成しても、Commentの新規作成の所でエラーが発生してしまいます。
これを修正します。
app/models/comment.rb
@@ -1,4 +1,4 @@ class Comment < ActiveRecord::Base belongs_to :article - attr_accessible :body + attr_accessible :body, :article_id end
app/views/comments/_form.html.erb
@@ -12,8 +12,8 @@ <% end %> <div class="field"> - <%= f.label :article %><br /> - <%= f.text_field :article %> + <%= f.label :article_id %><br /> + <%= f.text_field :article_id %> </div> <div class="field"> <%= f.label :body %><br />
これで記事のidを入力することで、記事とコメントを紐付ける事ができるようになります。
twitter-bootstrap-railsで画面を整える
twitter-bootstrap-railsを使います。
GithubのREADMEに従って、インストール・セットアップをする。
Gemfileにgemを追加する
Gemfile
@@ -40,3 +40,5 @@ gem 'jquery-rails' group :test, :development do gem 'rspec-rails' end + +gem "twitter-bootstrap-rails"
そして、インストール。
$ bundle install
bootstrapに必要なファイルを生成する
$ rails g bootstrap:install
$ rails g bootstrap:layout application fluid
- fixed: 画面の大きさ固定。
- fluid: 画面の大きさ可変。スマホっぽい画面になります。
ナビゲーションバー、サイドバーの修正
自動生成されたナビゲーションバー、サイドバーを修正する。
app/views/layouts/application.html.erb
@@ -31,9 +31,8 @@ <a class="brand" href="#">SinsokuBlog</a> <div class="container nav-collapse"> <ul class="nav"> - <li><%= link_to "Link1", "/path1" %></li> - <li><%= link_to "Link2", "/path2" %></li> - <li><%= link_to "Link3", "/path3" %></li> + <li><%= link_to "記事一覧", "/articles" %></li> + <li><%= link_to "コメント一覧", "/comments" %></li> </ul> </div><!--/.nav-collapse --> </div> @@ -51,9 +50,8 @@ <h3>Sidebar</h3> <ul class="nav nav-list"> <li class="nav-header">Sidebar</li> - <li><%= link_to "Link1", "/path1" %></li> - <li><%= link_to "Link2", "/path2" %></li> - <li><%= link_to "Link3", "/path3" %></li> + <li><%= link_to "記事一覧", "/articles" %></li> + <li><%= link_to "コメント一覧", "/comments" %></li> </ul> </div><!--/.well --> </div><!--/span-->
コメントを記事の下に表示する
記事とコメントが別の画面に表示されても微妙ですので、同じ画面に表示されるようにします。
app/views/articles/show.html.erb
@@ -10,6 +10,12 @@ <dd><%= @article.body %></dd> </dl> +<ul> + <% @article.comments.each do |comment| %> + <li><%= comment.body %></li> + <% end %> +</ul> + <div class="form-actions"> <%= link_to t('.back', :default => t("helpers.links.back")), articles_path, :class => 'btn' %>
動作確認
サーバを起動させ、http://localhost:3000/articles にアクセスすると、下記のような画面が表示されるようになります。
$ rails s
記事一覧の画面
記事にコメントが表示されている様子
