rails generate controller のあとにコントローラ名、アクション名と続きます。一覧ペー

では、

app/controllers/products_controller.rb を見てみましょう。

class ProductsController < ApplicationController def index

end end

データが何もないので、booksコントローラと同じようにBookデータの一覧を設定します。

class ProductsController < ApplicationController def index

@books = Book.all end

end

そして、ルーティングは、先ほどのコマンドで設定されたものがあります。

Rails.application.routes.draw do get 'product/index'

(中略) end

アクセスするURLは、以下のようになり、自動的にアクションにも紐づいています。便利ですね。

username:~/workspace (master) $ rails routes | grep product products_index GET /products/

index(.:format) products#index

これだけでもいいのですが、このページはドメインだけのURLで表示するようなroot（いわゆるトップページまたはメインページ）にしたいので、

config/routes.rb

に以下の設定も追加しておきます。

Rails.application.routes.draw do get 'products/index'

root to: 'products#index' # 追加 (中略)

end

username:~/workspace (master) $ rails routes | grep product product_index GET /product/

index(.:format) product#index root GET

/ products#index

複数のURLから一つのアクションにアクセスすることは問題ありません。どちらも置いておきます。

これでrootにアクセスしてみてください。（configフォルダを修正しましたので、rails

server を起動していたら必ず再起動してください。）

products#index

が表示されました。でもこのレイアウトは管理者用のメニューですね。

一旦ここでコミットをしておいて、次の項でレイアウトを分けるように修正しましょう。

commit

②　レイアウトの分け方

管理画面のメニューなどのレイアウトをどこで設定したか覚えていますか？

app/views/layouts/application.html.erb

でしたね。実は、このレイアウトファイルを増やして、コントローラでどのレイアウトを使うか指定することができます。

app/

controllers/products_controller.rb

を開いてください。見えるところに設定はありませんが、各アクションのデフォルトレイアウトは application と決められていて、

何もない場合は下の書き方と同じことをしています。

class ProductsController < ApplicationController def index

@books = Book.all

render layout: 'application' # デフォルト end

end

ですので、ここで別の名前のレイアウトを指定すれば、違うデザインで表示することができます。商品一覧ページのレイアウトをfrontとして、コントローラは修正しておきます。

class ProductsController < ApplicationController def index

@books = Book.all

render layout: 'front' # 変更 end

end

いま仮に以下のようなレイアウトファイルを用意します。このレイアウト用に、cssと javascriptも分離しておいた方がいいので、一旦、マニフェストファイルapplication.

cssとapplication.jsをfrontという名前にして、それぞれ丸ごとコピーしておいてください。

app/views/layouts/front.html.erb

<!DOCTYPE html>

<html>

<title>Monka</title>

<%= csrf_meta_tags %>

<%= stylesheet_link_tag 'front', media: 'all',

'data-turbolinks-track': 'reload' %>

<%= javascript_include_tag 'front', 'data-turbolinks-track': 'reload' %>

</head>

<body>

<%= yield %>

</body>

</html>

usernamey:~/workspace (master) $ cp app/assets/stylesheets/

application.css app/assets/stylesheets/front.css

usernamey:~/workspace (master) $ cp app/assets/javascripts/

application.js app/assets/javascripts/front.js

もう一つ大事な設定があります。cssやjavascriptなどは、aseetsprecompile というRails独自の機能によってまとめて圧縮されるのですが、いま、商品一覧ページ用にマニフェストファイルを分けましたので、それも含めて圧縮するように指示をしなければいけません。次の2行を config/initializers/assets.rb の最後に追加してください。

Rails.application.config.assets.precompile += %w( front.css ) Rails.application.config.assets.precompile += %w( front.js )

アプリを再起動して、以下のように真っ白になればOKです。ここまできて元に戻ったように見えますが、これで新しいデザインに思い切り対応できます。

commit

③　デザインの適応

デザイナーさんからのデザインとして、sample_front_designフォルダをダウンロードしてください。この

front.html

が一般ユーザーが見るページです。

jumbotron-narrow.css

は、このページ専用のcssです。

まず、assetsのファイルから整理しましょう。いまのcssのフォルダは以下のとおりです。

username:~/workspace (master) $ ls app/assets/stylesheets/

application.css books.scss dashboard.css front.

css products.scss taggings.scss tags.scss

マニフェストファイルでcssを分けましたが、これではどれが何かわかりにくいですね。フォルダにまとめてしまいましょう。ここにapplicationとfrontというフォルダを作成して、

cssファイルを以下のように移動してください。

usernamey:~/workspace (master) $ ls app/assets/stylesheets/

application/ application.css front/ front.css usernamey:~/workspace (master) $ ls app/

assets/stylesheets/application

books.scss dashboard.css taggings.scss tags.scss

usernamey:~/workspace (master) $ ls app/assets/stylesheets/front

ファイルの場所が変わりましたから、マニフェストファイルも修正します。

app/assets/stylesheets/application.css

*= require bootstrap.min

*= require_directory ./application # 変更

*= require_self

app/assets/stylesheets/front.css

*= require bootstrap.min

*= require_directory ./front # 変更

*= require_self

require_tree .

で階層全体を指していましたが、これからはapplicationフォルダとfrontフォルダそれぞれを対象とします。そして、先ほどの jumbotron-narrow.css を app/assets/stylesheets/front へコピーしてください。

javascriptファイルの追加はないようですので、app/assets/javascripts は一旦このままにしておきます。stylesheetsフォルダと同じように変更してもかまいません。

ここまでで一旦Railsを起動して、管理側のデザインが正しく機能していることを確認しておくといいでしょう。

では、

front.html

のhtmlをコピーしていきます。まずはブラウザで見たりhtml全体を俯瞰して、どこまでをレイアウトファイルにするかを決めます。上部にメニュー、その下にアイキャッチエリアがありますから、以下の部分は app/views/products/index.

html.erb

にして、その他をレイアウトファイルにしましょう。

<h3>Rubyist Magazine</h3>

<p>日本Rubyの会</p>

</div>

headタグ内はすでにレイアウトファイルにあるもので対応できそうですから、ボディタグ内のjavascriptタグを削除したものを丸ごと移せば良さそうです。

app/views/layouts/front.html.erb

<!DOCTYPE html>

<html>

<title>Monka</title>

<%= csrf_meta_tags %>

<%= stylesheet_link_tag 'front', media: 'all', 'data-turbolinks-track': 'reload' %>

<%= javascript_include_tag 'front', 'data-turbolinks-track': 'reload' %>

</head>

<body>

<nav>

<li role="presentation" class=""><a href="/about">About</a></li>

</ul>

</nav>

<h3 class="text-muted">Monka</h3>

</div>

<p class="lead">This site is the test shop of my favorite books.</p>

<p class="lead">Enjoy and select your favorite books!</p>

</div>

<%= yield %>

</footer>

</div>

</body>

</html>

これができたら、app/views/products/index.html.erb を編集しましょう。よくわからない人は app/views/books/index.html.erb を参考にしながら編集してみてください。編集後の状態は以下のようになります。

app/views/products/index.html.erb

<% @books.each do |book| %>

<p><%= number_to_currency(book.try(:price), precision:

0, unit: "円") %></p>

<% end %>

</div>

これでrootページが以下のように見えればOKです。

（全体を見せるためにブラウザで縮小表示しています。）

commit

(2) . テストコード作成

ドキュメント内 Rails1.indd (ページ 108-117)