2. ruby による Web アプリケーションの構築

2006.07.31　株式会社四次元データ　岡本和也

本章では前章で作成した簡単な Web アプリケーションに ruby を用いて手を加えていきます。 そのため、2.1節では1.2節の簡単なおさらいと日本語を扱う際の注意点について述べます。 2.2節では1.2節で作成した Web アプリケーションに ruby を用いて手を加えることで、日記として質を高めていきます。

2.1. 1.2節のおさらい

1章では簡単な Web アプリケーションとしてタイトルと記事が入力できる日記を作成しました。 まず、データベースモデルとして3つの列 (id, title, text) を持つ単純なテーブル(テーブル名は items )を1つ MySQL で作成し、

$ rails diary

というコマンドで Web アプリケーションの雛形としてディレクトリ・ファイルを生成してパーミションを設定しました。 次に、生成されたフォルダの中で最上部の親にあたる diary フォルダに移動し、

$ cd diary

config フォルダ内にある database.yml ファイルを書き換え、作成したデータベースを Web アプリケーションが利用できるようにしました。そして、

$ ruby script\generate model Item

というコマンドで、テーブルを扱う Item というモデルを生成し、

$ ruby script\generate scaffold Item

というコマンドで、Web アプリケーションの単純なコントローラとビューを作成しました。詳しくは1.2節を参照して下さい。

2.2. ruby による Web アプリケーションの構築

では、作成した Web アプリケーションに少し手を加えてみましょう。diary フォルダから app フォルダに移動します。

$ cd app

app フォルダにはモデル・コントローラ・ビューがあります。さらに views フォルダに移動し、 コントローラ名に対応した items フォルダに移動します。

$ cd views\items

すると、list.rhtml ファイルがありますので、list.rhtml ファイルの1行目を

<h1>Listing items</h1>

から

<h1>ブログ</h1>

と書き換えてみましょう。ファイルの保存は UTF-8 で行ってください。テーブルに格納される文字と 文字コードを合わせるためです。Ruby on Rails に付属の WEBrick サーバを立ち上げて（本文書では port 番号は3000とする）

http://localhost:3000/items/

にブラウザでアクセスすると変更が反映されているのがわかると思います。また、表示をもう少し日記らしくしてみましょう。 今度は list.rhtml ファイルを以下のように書き換えてしまいます。

 1:<h1>ブログ</h1>
 2:<%= link_to 'New item', :action => 'new' %>
 3:<hr />
 4:<% @items.each do |@item| %>
 5:  <h3><%= @item.title %></h3>
 6:  <%= @item.text %>
 7:  <br />
 8:  <%= link_to 'Show', :action => 'show', :id => @item.id %>
 9:  <%= link_to 'Edit', :action => 'edit', :id => @item.id %>
10:  <%= link_to 'Destroy', { :action => 'destroy', :id => @item.id }, :confirm => 'この記事を消去していいですか？', :post => true %>
11:  <br />
12:  <hr />
13:<% end %>

書き換えたら、ブラウザで閲覧してみてください。少しは日記らしくなってきたでしょうか。
さて、少しコードの説明を行いましょう。<% %>, <%= %> というタグは ERb タグです。これらのタグの中には Ruby コードが 記述されます。この２つのタグの違いは <%= %> タグは HTML ドキュメントに値を代入するのに対し、<% %> タグは値を代入しない ということです。4行目から13行目は繰り返しとなっており、@items という配列に入っている値が1つずつ @item に代入され 評価されています。@items という配列は \diary\app\controllers\items_controller.rb に定義されています。 実は、ブラウザを通してユーザから要求が与えられた際に、コントローラであるこのファイルに要求が投げられます。
このファイルの一部を見てみましょう。

def list
  @item_pages, @items = paginate :items, :per_page => 10
end

という3行があるのがわかると思います。この部分は list というアクションが起きた際に実行されます。 コントローラでアクションを処理し終わると、View ファイルにある list.rhtml ファイルを用いて ユーザインタフェースが表示されることになります。 真ん中の行に注目すると paginate という関数が用いられています。 paginate 関数は2つの集合を返し、@item_pages と @items に代入されています。 具体的には日記の記事が10件取り出されています。 日記は最新のものから表示されるのが望ましいので、 真ん中の行に少し書き加えて最新のものから表示されるようにします。

def list
  @item_pages, @items = paginate :items, :per_page => 10, :order => 'id DESC'
end

さらに、記事ごとに自動的に日付を振ることにしましょう。記事に日付を振るために items テーブルの列を 1つ増やす必要があります。そこで、MySQL にアクセスして列の追加を行いましょう。下記のコードをコマンドラインで 実行してください。

$ mysql -u root -p
Enter password: ****

mysql> use diary
Database Changed

mysql> alter table items add
    -> postingdate date
    -> ;

これでテーブルの列を1つ追加することができました。次に、記事を追加した際に自動的に日付が items テーブルに 記載されるようにしましょう。diary\app\controllers\items_controller.rb ファイルに1行追加します。 このファイルで create というアクションが定義されている部分を見てください。

1:def create
2:  @item = Item.new(params[:item])
3:  if @item.save
4:    flash[:notice] = 'Item was successfully created.'
5:    redirect_to :action => 'list'
6:  else
7:    render :action => 'new'
8:  end
9:end

2行目で items テーブルの行に追加する要素値を代入し、3行目でセーブすることで items テーブルに書き込んでいます。 そこで、2行目と3行目の間に以下の1行を追加します。

@item.postingdate = Time.now

これにより、postingdate 要素に記事を書いた日付が自動的に記録されます。 そして、記録した postingdate 要素を表示させなければならないので、 \app\views\items\list.rhtml という View ファイルにもコードを追加し、タイトルと本文の下に表示されるようにします。

1:<h3><%= @item.title %></h3>
2:<%= @item.text %>
3:<br />
4:<%= @item.postingdate %>
5:<br />

3行目と4行目が追加した行です。だいぶ日記らしくなってきたと思います。次の章では画像ファイルをアップロードして ブログのように各記事ごとに表示させます。

---

---