Ruby on Rails資料一覧

更新日:2008/10/25

対応ソフトウェア:Ruby on Rails 2.1.1

Ruby on Railsのインストール、及び簡単なWebアプリケーションの作成手順を示す。

公式サイト

準備

あらかじめインストールしておくもの

Ruby
RubyGems

導入OS

Fedora 9

インストール

% sudo gem install rails
% sudo gem install sqlite3-ruby

(*) proxyサーバ経由の場合は「-p :<ポート>」を付加する。

% gem list --local

*** LOCAL GEMS ***

actionmailer (2.1.1)
actionpack (2.1.1)
activerecord (2.1.1)
activeresource (2.1.1)
activesupport (2.1.1)
rails (2.1.1)
rake (0.8.3)
sqlite3-ruby (1.2.4)

サンプルWebアプリケーション作成

ここでは時系列にメモを記録していくアプリを作ってみる。

アプリ名

memo

データベーススキーマ

1. item ... メモ内容(string)

初期設定

アプリケーションに必要な各種ファイルを作成する。

% rails memo
% cd memo

scaffold作成

scaffold(足場)を作成し、モデル/コントローラ/ビューを作成する。

DBに作りたいカラムを指定しておけば自動生成されるスキーマ定義に組み込まれる(この例ではstring型のitemカラムが組み込まれる)。

% script/generate scaffold Memo item:string

データベース作成

データベースを作成し、scaffold作成時に自動生成されたスキーマ定義を用いて実テーブルを作成する。

作成されるデータベースはconfig/database.ymlのdevelopmentで定義されているデータベースである。データベース名を変えたい場合はこのファイルを編集する。

データベース作成
% rake db:create
db/development.sqlite3
実テーブル作成
% rake db:migrate
-- create_table(:memos)
   -> 0.0023s

データベースの中身を確認してみる。

% sqlite3 db/development.sqlite3
sqlite> .tables
memos              schema_migrations

sqlite> .schema memos
CREATE TABLE "memos" ("id" INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL, "item" varchar(255), "created_at" datetime, "updated_at" datetime);

以下のカラムが定義されていることが分かる。

id

レコード番号 (自動採番)

item

メモ内容

created_at

レコード作成日時

updated_at

レコード更新日時

日時データはUTCで保存されるので取得時にJSTに変換したい場合はapp/controllers/application.rbに以下の行を追加すればよい。

Time.zone = 'Tokyo'

動作確認

Webサーバ起動

まずRails付属のWebサーバを起動する。デフォルトの待ち受けポートは3000。

% script/server 
=> Booting WEBrick...
=> Rails 2.1.1 application started on http://0.0.0.0:3000
=> Ctrl-C to shutdown server; call with --help for options

接続確認

Webサーバが起動できたらブラウザで「http://localhost:3000/memos」にアクセスしてみる。

まずWebアプリの概要が表示されるので、リロードすると以下の画面が表示される。

Listing memos

Item

New memo

これでメモの入力や編集・削除が行えるようになる。

カスタマイズ

Ruby on RailsはMVCモデルを採用しているので見た目や制御、スキーマのカスタマイズが簡単に行える。

ここでは見た目(View)を変えてみる。

Viewに関する定義はapp/views配下に以下のファイルがあるのでこれらを編集する。

layouts/memos.html.erb

全ページのテンプレート

memos/index.html.erb

トップページ

memos/show.html.erb

一覧表示ページ

memos/new.html.erb

新規作成ページ

memos/edit.html.erb

更新ページ

例えばトップページを以下の内容に変更してみる。

テーブルレイアウトをやめてリスト表示にする
英語を日本語にする
各メモの更新日を表示する

(オリジナル)

<h1>Listing memos</h1>

<table>
  <tr>
    <th>Item</th>
  </tr>

<% for memo in @memos %>
  <tr>
    <td><%=h memo.item %></td>
    <td><%= link_to 'Show', memo %></td>
    <td><%= link_to 'Edit', edit_memo_path(memo) %></td>
    <td><%= link_to 'Destroy', memo, :confirm => 'Are you sure?', :method => :delete %></td>
  </tr>
<% end %>
</table>

<br />

<%= link_to 'New memo', new_memo_path %>

(変更後)

<h1>メモ</h1>

<ul>
<% for memo in @memos %>
  <li>
    <%=h memo.item %>
    (<%= h(memo.updated_at.strftime("%m/%d %H:%M")) %>更新)
    <%= link_to '詳細', memo %>
    <%= link_to '編集', edit_memo_path(memo) %>
    <%= link_to '削除', memo, :confirm => '削除してよろしいですか?', :method => :delete %>
  </li>
<% end %>
</ul>

<%= link_to 'メモを追加する', new_memo_path %>

変更の結果、トップページは以下のようになる(あらかじめメモを2件追加してある)。

(オリジナル)

Listing memos

Item

こんにちは、日本語使えます。 	Show 	Edit 	Destroy
文字コードはUTF-8です。 	Show 	Edit 	Destroy

New memo

(変更後)

メモ

  * こんにちは、日本語使えます。(10/24 21:21更新) 詳細 編集 削除
  * 文字コードはUTF-8です。(10/25 00:35更新) 詳細 編集 削除

メモを追加する

CSSはデフォルトでpublic/stylesheets/scaffold.cssが使われるので見栄えの調整はこのファイルを編集して行うか、テンプレートのapp/views/layouts/memos.html.erbを編集して任意のCSSを指定する。

コントローラの挙動を変更する場合はapp/controllers/memos_controller.rbを編集する。

また「http://localhost:3000/memos.xml」にアクセスすることでXMLでデータが取得できる。

<?xml version="1.0" encoding="UTF-8"?>
<memos type="array">
  <memo>
    <created-at type="datetime">2008-10-24T21:17:35+09:00</created-at>
    <id type="integer">3</id>
    <item>&#12371;&#12435;&#12395;&#12385;&#12399;&#12289;&#26085;&#26412;&#35486;&#20351;&#12360;&#12414;&#12377;&#12290;</item>
    <updated-at type="datetime">2008-10-24T21:21:21+09:00</updated-at>
  </memo>

  <memo>
    <created-at type="datetime">2008-10-24T21:20:02+09:00</created-at>
    <id type="integer">4</id>
    <item>&#25991;&#23383;&#12467;&#12540;&#12489;&#12399;UTF-8&#12391;&#12377;&#12290;</item>
    <updated-at type="datetime">2008-10-25T01:35:02+09:00</updated-at>
  </memo>
</memos>

関連情報(Google検索)