ビューをいじる

RoRアプリケーションのビュー関連のファイル(テンプレート)はapp/viewsフォルダに入っている。
拡張子が.rhtmlとなっているが、SmartyのtplやJavaのjsp同様、HTMLに独自の記法が加わっているものだ。

まずは、トップページの簡単な部分からいじっていこうか。

トップページの日本語化

トップページ(Listing articles)のテンプレは、app/views/articles/list.rhtmlにある。
これとは別にヘッダーやフッターを書いたapp/views/layouts/articles.rhtmlも存在するが、
ひとまずこちらは今回はいじらない。

さて、list.rhtmlの中身はこちら

<h1>Listing articles</h1>

<table>
  <tr>
  <% for column in Article.content_columns %>
    <th><%= column.human_name %></th>
  <% end %>
  </tr>
  
<% for article in @articles %>
  <tr>
  <% for column in Article.content_columns %>
    <td><%=h article.send(column.name) %></td>
  <% end %>
    <td><%= link_to 'Show', :action => 'show', :id => article %></td>
    <td><%= link_to 'Edit', :action => 'edit', :id => article %></td>
    <td><%= link_to 'Destroy', { :action => 'destroy', :id => article }, :confirm => 'Are you sure?', :method => :post %></td>
  </tr>
<% end %>
</table>

<%= link_to 'Previous page', { :page => @article_pages.current.previous } if @article_pages.current.previous %>
<%= link_to 'Next page', { :page => @article_pages.current.next } if @article_pages.current.next %> 

<br />

<%= link_to 'New article', :action => 'new' %>

%で始まっているタグが、RoR用の特殊なタグで、Smartyの{}みたいなもの。
おそらく内容については、記事をリスト表示しているループの部分以外難しいことはないと思うので、この中の日本語にできる部分を日本語化した。
ちなみに、文字コードは「UTF-8」

ついでに、「新規投稿」用のリンクを一番上に移動した。

<h1>掲示板</h1>

<%= link_to '新規投稿', :action => 'new' %>

<table>
  <tr>
  <% for column in Article.content_columns %>
    <th><%= column.human_name %></th>
  <% end %>
  </tr>
  
<% for article in @articles %>
  <tr>
  <% for column in Article.content_columns %>
    <td><%=h article.send(column.name) %></td>
  <% end %>
    <td><%= link_to '読む', :action => 'show', :id => article %></td>
    <td><%= link_to '編集', :action => 'edit', :id => article %></td>
    <td><%= link_to '削除', { :action => 'destroy', :id => article }, :confirm => '削除しますか?', :method => :post %></td>
  </tr>
<% end %>
</table>

<%= link_to '前のページ', { :page => @article_pages.current.previous } if @article_pages.current.previous %>
<%= link_to '次のページ', { :page => @article_pages.current.next } if @article_pages.current.next %> 

<br />

現在の様子

テーブルでのリスト表示をやめる

記事がこのようにリスト表示されているのは微妙なので、
普通の掲示板のように一件ずつ縦に並ぶようにする。

リストの部分のコードは

<table>
  <tr>
  <% for column in Article.content_columns %>
    <th><%= column.human_name %></th>
  <% end %>
  </tr>
  
<% for article in @articles %>
  <tr>
  <% for column in Article.content_columns %>
    <td><%=h article.send(column.name) %></td>
  <% end %>
    <td><%= link_to '読む', :action => 'show', :id => article %></td>
    <td><%= link_to '編集', :action => 'edit', :id => article %></td>
    <td><%= link_to '削除', { :action => 'destroy', :id => article }, :confirm => '削除しますか?', :method => :post %></td>
  </tr>
<% end %>
</table>

なのだが、これは各カラムをforループでまわして表示しているので、
このままでは目的の項目を目的の場所に表示することができない。

そこで別の方法を試す。
各オブジェクトのパラメータの内容は

<%=h article.カラム名 %>

のような形で表示させることができるので、下記のようなコードに書き換えてみた。

<h1>掲示板</h1>

<%= link_to '新規投稿', :action => 'new' %>

<!--ここから記事一覧-->
<% for article in @articles %>
	<div class="article">
		<h3><%=h article.title %></h3>
		<span class="name"><%=h article.name %></span>
		<span class="updated_at"><%=h article.updated_at %></span>
		<p><%=h article.body %></p>
		<ul>
			<li><%= link_to '読む', :action => 'show', :id => article %></li>
			<li><%= link_to '編集', :action => 'edit', :id => article %></li>
			<li><%= link_to '削除', { :action => 'destroy', :id => article }, :confirm => '削除しますか?', :method => :post %></li>
		<ul>
	</div>
<% end %>
<!--ここまで記事一覧-->

<%= link_to '前のページ', { :page => @article_pages.current.previous } if @article_pages.current.previous %>
<%= link_to '次のページ', { :page => @article_pages.current.next } if @article_pages.current.next %> 

<br />

現在の様子

スタイルシートをいじる

このままではまだ見た目がよろしくないので最後にスタイルシートを修正する。
scaffoldで生成されたアプリケーションのスタイルシートは
public/stylesheets/scaffold.cssになるので、
このファイルを変更する。
(今後別にscaffoldでプログラムを追加する場合は、ファイル名を変更して使用したほうがよいかも)

public/stylesheets/scaffold.cssに以下を追加(bodyは上書き)

body {
	background-color: #eee; color: #333;
	text-align : center;
}
div.article{
	background-color : #fff;
	border : 2px solid #888;
	margin : 30px;
	text-align : left;
}
div.article h3{
	background-color : #666;
	color : #fff;
	padding : 0px;
	line-height : 30px;
	height : 30px;
	font-size : 14pt;
	margin : 0px;
}
div.article p{
	padding : 20px;
}
div.article ul{
	list-style : none;
	height : 30px;
}
div.article ul li{
	float : left;
	margin-right : 20px;
}