HOME / Docs & Support

Ruby のブログを 10 分で作成

執筆: Brian Leonard、管理: Chris Kutler
2008 年 4 月 [リビジョン番号: V6.1-1]

このチュートリアルでは、NetBeans IDE での Ruby サポートを使用して、簡単なデータベース Web アプリケーションを作成し、実行します。このチュートリアルの手順に従うことで、次の作業を行う方法を学ぶことができます。

Rake タスクとマイグレーションファイルを使用して、データベース表を作成および更新する
スキャフォールドジェネレータを使用して、作成、読み取り、更新、削除 (CRUD) を行う基本的なデータベース Web アプリケーションを生成する
ビューを編集して Web ページを調整する

このチュートリアルを完了するには、次のソフトウェアが必要です。

ソフトウェアまたはリソース	必須バージョン
Ruby サポートを含む NetBeans IDE	version 6.1
MySQL データベースサーバー	version 5.0

Ruby on Rails アプリケーションの作成

まず、Ruby on Rails プロジェクトを作成します。デフォルトでは、アプリケーションは、Ruby on Rails プロジェクトのアプリケーション用規則に準拠したディレクトリ構造内に作成されます。

NetBeans IDE で、「ファイル」>「新規プロジェクト」を選択します。
次の図に示すように、「カテゴリ」リストから「Ruby」、「プロジェクト」リストから「Ruby on Rails アプリケーション」を選択します。
「次へ」をクリックし、プロジェクトの名前と場所を指定します。
次の図に示すように、「プロジェクト名」テキストボックスに「rubyweblog」と入力します。

このページのほかの設定はデフォルト設定のままにします。
次の条件を満たす場合は手順 8 に進みます。
- デフォルトの root ユーザー名を使用している
- root にパスワードが必要ない
- MySQL データベースサーバーを使用している
IDE では、デフォルトでこれらの条件が想定されます。
「次へ」をクリックしてデータベースアクセスを設定します。
「データベース情報を直接指定」オプションを選択し、データベースアダプタを選択し、ユーザー名とパスワードを入力します。「データベース名」は空にしておきます。
「完了」をクリックして新しいプロジェクトを作成します。

プロジェクトと同じ名前のプロジェクトディレクトリが作成され、database.yml ファイルが編集領域で開きます。開発構成のデフォルトのデータベース名は rubyweblog_development です。
開発セクションのアダプタ、データベース、ユーザー名、およびパスワードの設定が正しいことを確認し、「database.yml」タブにある小さい「x」ボタンをクリックしてファイルを閉じます。

スキャフォールドの作成

このブログアプリケーションは、ブログ投稿のインスタンスを保存する Post モデルに基づいています。ここでは、Rails スキャフォールドジェネレータを使用してモデルとそのコントローラ、また index (リスト)、show、new、edit の各ビューを作成します。

ジェネレータでは、モデルのデータベース表を作成するためのマイグレーションファイル、単体テスト、およびモデルテストを記述するためのフィクスチャースタブも作成されます。

次の図に示すように、「プロジェクト」ウィンドウで「rubyweblog」プロジェクトノードを右クリックし、「生成」を選択します。
次の図に示すように、「Rails ジェネレータ」ダイアログで、「生成」ドロップダウンリストから「scaffold」を選択します。
「モデル名」テキストボックスに「Post」と入力します。
「属性ペア」テキストボックスに「title:string」と入力し、「了解」をクリックします。

スキャフォールドジェネレータによって作成、更新されるファイルは「出力」ウィンドウに表示されます。

データベースの作成

この節では、Rake タスクを使用して rubyweblog_development データベースを作成します。次に 001_create_posts.rb マイグレーションファイルを使用して posts 表をデータベースに追加します。

「プロジェクト」ウィンドウで「rubyweblog」プロジェクトノードを右クリックし、ポップアップメニューから「Rake タスクの実行」>「db」>「create」を選択します。

database.yml ファイルの定義に従って、Rake によって開発構成用のデータベースが作成されます。

注: 「出力」ウィンドウにエラーメッセージが表示される場合は、database.yml ファイルの開発セクションにあるユーザー名とパスワードが正しいことを確認してください。また、データベースサーバーが実行中であることも確認してください。
「プロジェクト」ウィンドウで「データベースマイグレーション」を展開し、「migrate」を展開します。
次の図に示すように、「001_create_posts.rb」ノードをダブルクリックしてファイルを編集領域で開きます。

ファイルが開き、次のコード例に示すように、posts という表を作成する self.up メソッド、および posts 表を破棄する self.down メソッドが作成されます。
```
class CreatePosts < ActiveRecord::Migration
 def self.up
 create_table :posts do |t|
 t.string :title

 t.timestamps
 end
 end

 def self.down
 drop_table :posts
 end
end
```
create_table メソッドはデフォルトで id 列を追加し、timestamps メソッドは created_at 列と updated_at 列をデータベース表に追加します。
次の図に示すように、「プロジェクト」ウィンドウで「rubyweblog」ノードを右クリックし、「データベースマイグレーション」>「現在のバージョンへ」を選択します。

このアクションによってデータベースが更新され、posts 表が取り込まれます。次の図に示すように、マイグレーションが完了したら「出力」ウィンドウにメッセージが表示されます。

アプリケーションの実行

次にアプリケーションをテストします。

「プロジェクト」ウィンドウで「構成」ノードを展開し、routes.rb をダブルクリックしてエディタで開きます。
次のコメントを探します。
```
# map.root :controller => "welcome"
```
この行のコメントを解除し、次に示すようにコントローラを "posts" に変更します。
```
map.root :controller => "posts"
```
「プロジェクト」ウィンドウで「公開」ノードを展開し、「index.html」を右クリックして、ポップアップメニューから「削除」を選択します。

index.html ページはデフォルトの開始ページを表示しますが、これは表示したいページではありません。index.html を削除すると、Rails では表示するページが routes.rb 内で確認されます。
メインメニューから「ファイル」>「すべてを保存」を選択します。
ツールバーにある「主プロジェクトを実行」ボタンをクリックします。

このアクションによって WEBrick サーバーが起動し、次のページがブラウザに表示されます。このサーバーは、Ruby で記述され、Ruby on Rails フレームワークに付属する Web サーバーです。

注: 別のサーバーを使用するようにプロジェクトを構成できます。WEBrick 以外のサーバーを使用している場合は、ブラウザのアドレステキストボックスに「http://localhost:3000/posts」と入力して Enter キーを押す必要がある場合があります。
「New post」リンクをクリックして、次の図に示すアプリケーションの 2 ページ目を表示します。
タイトルを入力し、「Create」をクリックします。

次の図に、サンプルのブログ投稿を示します。
「Back」リンクをクリックして投稿の一覧に戻ります。

表への別の列の追加

ここでは、各ブログエントリのテキストを保持する body 列を posts 表に追加します。

「データベースマイグレーション」ノードを右クリックし、ポップアップメニューから「生成」を選択します。

「生成」ドロップダウンリストでマイグレーションが選択された状態の「Rails ジェネレータ」ダイアログが開きます。
次の図に示すように、「引数」テキストボックスに「AddBodyToPost body:text」と入力します。
「閉じる」をクリックします。

IDE によってバージョン付きマイグレーションスクリプト 002_add_body_to_post.rb が作成されます。ファイルが開き、次のコード例に示すように、body 列を追加する self.up メソッド、および列を削除する self.down メソッドが表示されます。生成されたコードで最初の引数 AddBodyToPost から表の名前を抽出している方法を確認します。
```
class AddBodyToPost < ActiveRecord::Migration
 def self.up
 add_column :posts, :body, :text
 end

 def self.down
 remove_column :posts, :body
 end
end
```
「rubyweblog」ノードを右クリックし、ポップアップメニューから「データベースマイグレーション」>「現在のバージョンへ」を選択します。

またはソースファイルで右クリックし、ポップアップメニューから「実行」を選択します。
「プロジェクト」ウィンドウで「ビュー」>「posts」の順に展開し、「edit.html.erb」をダブルクリックしてファイルを編集領域で開きます。
次のコード例でボールドで示している文を edit.html.erb ファイルに追加します。

また、カーソルを Title の  タグの前に置き、段落の末尾の  タグまでドラッグし、Ctrl+Shift+ 下矢印キーを押して行を複製します。Title を Body に置き換え、f.text_field :title を f.text_area :body に置き換えます。
```
<h1>Editing post</h1>

<%= error_messages_for :post %>

<% form_for(@post) do |f| %>
 
 Title 
 <%= f.text_field :title %>
 

 
 Body 
 <%= f.text_area :body %>
 

 
 <%= f.submit "Update" %>
 
<% end %>

<%= link_to 'Show', @post %> |
<%= link_to 'Back', posts_path %>
```
「new.html.erb」をダブルクリックしてファイルを編集領域で開きます。

次のコード例でボールドで示している文を new.html.erb ファイルに追加します。また、手順 6 に示したように Ctrl+Shift+ 下矢印キーを使用して Title の段落を複製し、複製したコードを編集することもできます。

<h1>New post</h1>

<%= error_messages_for :post %>

<% form_for(@post) do |f| %>
  <p>
    <b>Title</b><br />
    <%= f.text_field :title %>
  </p>

  <p>
    <b>Body</b><br />
    <%= f.text_area :body %>
  </p>

  <p>
    <%= f.submit "Create" %>
  </p>
<% end %>

<%= link_to 'Back', posts_path %>

「show.html.erb」をダブルクリックしてファイルを編集領域で開きます。
次のコード例でボールドで示している文を show.html.erb ファイルに追加します。また、手順 6 に示したように、Ctrl+Shift+ 下矢印キーを使用して Title の段落を複製し、Title: を Body: に、@post.title を @post.body に変更することもできます。
```

 Title:
 <%=h @post.title %>



 Body:
 <%=h @post.body %>


<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>
```
メインメニューから「ファイル」>「すべてを保存」を選択します。
ブラウザに戻って「New post」リンクをクリックし、次の図のような新しい「Body」欄を確認します。
さらにいくつかのブログエントリを作成します。

終了したら、「Back」をクリックして「Listing posts」ページに戻ります。

入力の検査

ここでは Post クラスにコードを追加し、ユーザーが「Title」と「Body」の両フィールドに値を入力していることを確認できるようにします。

「プロジェクト」ウィンドウで「モデル」ノードを展開し、「post.rb」をダブルクリックしてエディタでファイルを開きます。
クラス定義の中で行を追加し、「vp」と入力してから Tab キーを押します。
vp トリガーが置換され、パラメータを使用する次のコードテンプレートに変わります。
```
validates_presence_of :attribute
```
「title, :body」と入力して Enter キーを押します。このコードは次のようになるはずです。
```
validates_presence_of :title, :body
```
ファイルを保存し、ブラウザに戻り、「New post」をクリックして「Create」をクリックします。

これで、アプリケーションで「Title」と「Body」を空白にできないことが表示されるようになりました。

一覧をブログのような外見にする

ここでは、index.html ビューを編集して、次の図に示すようにブログ一覧の外見を一般的なブログのようにします。

「プロジェクト」ウィンドウで「ビュー」>「posts」を展開し、「index.html.erb」をダブルクリックしてファイルを編集領域で開きます。

このビューには、ブログエントリの一覧が表示されます。

<h1> 要素と <table> 要素を削除し、次のボールドで示すコードに置き換えます。

<h1>The Ruby Blog</h1>
<% for post in @posts %>
  <h2><%= post.title %></h2>
  <p><%= post.body %></p>
  <small>
    <%= link_to "permalink",
      :action => "show",
      :id => post %>
  </small>
  <hr>
<% end %>

<br />

<%= link_to 'New post', new_post_path %>

このコードは、post アクションの各インスタンスで Title、Body、および Permalink を作成します。

変更を保存し、アプリケーションを実行して Post モデルの新しいインタフェースを確認します。
ブログの最新のエントリを先頭に表示するには、追加したコードを編集し、次に示すように .reverse メソッドへの呼び出しを追加して、ソート順序を逆にします。
```
<% for post in @posts.reverse %>
```
ファイルを保存してブラウザを再表示し、一覧が逆の順序で表示されることを確認します。

応用

この課題で学んだスキルを使用して、タスク一覧の Web プロジェクトを作成します。スキャフォールドジェネレータを使用して、title:string フィールドと description:text フィールドを使用して Task モデルの周りにスキャフォールドを構築します。Rake を使用してデータベースを作成し、次に「データベースマイグレーション」を使用して表を作成します。ルートを対応付けるように route.rb ファイルを編集し、index.html ファイルを必ず削除します。