2006.02.25

Ruby Rails

まだまだ連載: Ruby on Rails on MacOSXでWebアプリ開発〜第四回 サイト全体のデザインを統一する〜

さて、前回の連載ではデザインについてあまり触れませんでしたが、よくよく考えるとそれはちょっと辛いかな〜?ということで、今回はサイトのデザインを統一するまでを書きたいと思います。

Railsでサイトを構築するさいにはrhtml形式のテンプレートファイルを編集・作成することになります。

app/views/layout/コントローラ名.rhtml

を書き換えることでコントローラごとのテンプレートを作ることも可能ですが、
app/views/layout/application.rhtml

app/views/layout/scaffold.rhtml

の二つで、Login後のテンプレートをapplication.rhtmlというファイルにまとめてしまうほうが管理は楽です。
またサイト全体で共通のスタイルシートとして、scaffold.cssというファイルがありますので、スタイルシートもこれを編集すればOKです。

scaffold.cssとapplication.rhtml

まずは
public/stylesheets/scaffold.css
を書き換える。無駄に長くなるので、CSSファイルはこちらからどうそ

次に

app/views/layout/application.rhtml

というファイルを作成し、ファイルに
ここにあるファイルの内容をコピー。その後
app/views/layout/

内のscaffold.rhtml以外のファイルを削除(もしくはリネーム)してください。scaffold.rhtmlはLoginSystemControllerが呼び出しますので、残しておいて下さい。
ここまででLoginSystem以外のすべてのコントローラから、application.rhtmlがテンプレートファイルとして読み込まれます。
application.rhtmlでは
<%= render_component(:controller => 'sidemenu', :action => 'display_menu') %>

という部分でSidemenuコントローラのdisplay_menuメソッドを呼び出しているのですが、これは全ての画面でサイドバーにユーザ情報などを表示するためのものです。こいつを定義していないと画面にもエラーが出てくるので、PROJECT_ROOTに移動して
./script/generate controller sidemenu display_menu

として、SidemenuControllerを作成してください。
その後
app/views/

以下にsidemenuというフォルダを作成し、そのフォルダの中に下記のように記述しておきましょう。
<div class="sidebar">
<h2>menu1</h2>
<ul>
<li>menu1-1
<li>menu1-2
</ul>
<h2>menu2</h2>
<ul>
<li>menu2-1
<li>menu2-2
</ul>
</div>

と記述しておいてください。
ここまでで画面はこうなっているはず。
screenshot.jpg

さて、次はUserControllerまわりとSideMenuControllerまわりを整備しましょう。では次回!!

連載一覧