トップページ機能の追加

このセクションでは「scaffoldを用いた機能の追加」に続いて、ブログに投稿された記事を一覧表示する「トップページ機能」を追加する手順を解説します。

＜チュートリアルを進めるにあたって＞

・アプリケーション名は"blog"、アプリケーションのルートフォルダは、"c:¥rails_apps¥blog"とします

・アプリケーションのルートフォルダのパスは、"RAILS_ROOT"と記載します

・コマンドプロンプトを用いた操作は、特別な指定がない限り全て"RAILS_ROOT"に移動した状態で行います

Generatorを用いたコントローラークラスとビューの生成

追加するトップページに対応するコントローラークラスとビューを、Generatorを用いて作成します。

コマンドプロンプトで「rails generate controller home index」とタイプしてEnterキーを押下します。コマンドプロンプト上には、ファイル・フォルダが自動生成される様子が以下のように表示されます。

c:\rails_apps\blog>rails generate controller home index
      create  app/controllers/home_controller.rb
       route  get "home/index"
      invoke  erb
      create    app/views/home
      create    app/views/home/index.html.erb
      invoke  test_unit
      create    test/functional/home_controller_test.rb
      invoke  helper
      create    app/helpers/home_helper.rb
      invoke    test_unit
      create      test/unit/helpers/home_helper_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/home.js.coffee
      invoke    scss
      create      app/assets/stylesheets/home.css.scss

コントローラークラス　"HomeController"

コントローラクラスが、ファイル"RAILS_ROOT\app\controllers\home_controller.rb"に生成されます。

"HomeController"は、トップページにアクセスされた際のサーバ側処理を実装するコントローラクラスです。

class HomeController < ApplicationController
  def index
  end
end

ビュー　"RAILS_ROOT\app\views\home\index.html.erb"

ビューファイルが"RAILS_ROOT\app\views\home\index.html.erb"として生成されます。

このビューは、HomeController#indexで処理した結果を用いてトップページの画面を表示するためのビューになります。

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

※自動生成されたビューの中身には特別な意味はありませんので、削除しても問題ありません。

ルーティング情報

作成したプログラムのルーティング情報が、"RAILS_ROOT\config\routes.rb"に以下のように追加されます。 Railsのルーティングルールにより、「http://localhost:3000/home/index」へのアクセスはHomeControllerのindexメソッドで処理されるようになります。

 Blog::Application.routes.draw do
+  get "home/index"
　　　：
　　以下略

※行頭に"+" が付いた行が追加されたコードです。

コントローラの実装（記事データ取得）

トップページで表示する記事データを取得する処理を、Generatorで生成したコントローラークラスHomeControllerに実装します。

ここでは、記事データを扱うモデルクラス"Article"のallメソッドを使って記事データを全て取得し、コントローラーのインスタンス変数（@articles）に格納します。

 class HomeController < ApplicationController
   def index
+    @articles = Article.all  # 記事テーブルから全てのレコードを取得する
   end
 end

※行頭に"+" が付いた行が追加したコードです。

ビューの実装（記事データ表示）

コントローラーのインスタンス変数（@articles）に設定した記事データを表示させるための機能を、Generatorで生成したビュー"RAILS_ROOT\app\views\home\index.html.erb"に実装します。Railsのビューでは<%...%>で囲まれた部分にRubyコードを埋め込むことができます。また、Rubyコード中ではビューを使用しているコントローラーのインスタンス変数が利用できます。

下の例では<%...%>の中で、HomeControllerで設定した変数@articlesが解釈され配列内のデータを展開しています。また<%=...%>で囲むと、囲まれたコードの式を評価した結果を出力します。

なおこの実装例では、説明を簡略化する目的でHTMLタグ中にスタイルを定義していますが、実際のアプリケーション開発ではSCSSなどRailsの機能を用いてスタイルを定義することをお勧めします。

-<h1>Home#index</h1>
-<p>Find me in app/views/home/index.html.erb</p>
+<% @articles.each do |article| %>
+  <div style="width:500px;border:1px solid #ccc;margin:5px">
+    <div style="float:left">
+      <h2 ><%= article.title %></h2>
+    </div>
+    <div style="clear:both">
+      <pre><%= article.content %></pre>
+    </div>
+  </div>
+<% end %>

※行頭に"-" が付いた行が削除したコードです。
※行頭に"+" が付いた行が追加したコードです。

トップページ用のルーティング情報の追加

トップページのURL「http://localhost:3000/」にアクセスされた場合に、作成したコントローラクラスとビューを用いるようにするため、"RAILS_ROOT\config\routes.rb"の中のBlog::Application.routes.draw do ～ endの間に以下のルーティング情報を追加します。

Blog::Application.routes.draw do

get "home/index"

+ root :to => 'home#index'
以下略
end

※行頭に"+" が付いた行が追加したコードです。