ProtoThickBox （RAILS OF RUBY ON RAILS /著者：Plan de Sens, 清水智雄 /発行：毎日コミュニケーションズをベースに学ぶ−１−）

いままで様々なRuby on Railsの持っている機能を学んできましたので、これらを駆使して少し実用的なアプリケーションを作ってみましょう。
ベースとしてRAILS OF RUBY ON RAILS /著者：Plan de Sens, 清水智雄 /発行：毎日コミュニケーションズを使わせて頂きました。2008年5月15日初版発行です。

１．プロジェクトの生成
　　NetBeansで［新規プロジェクト］を選択します。

　　[ステップ１]プロジェクトを選択
　　　カテゴリ(C): Ruby
　　　プロジェクト(P): Ruby on Rails アプリケーション
　　[ステップ２]名前と場所
　　　プロジェクト名(N): proj502
　　　プロジェクトの場所(l): D:\Rails_Projects
　　　プロジェクトフォルダ(D): D:\Rails_Projects\proj502
　　　Rubyプラットフォーム(P): Ruby 1.8.7-p72
　　　サーバー(S): WEBrick
　　[ステップ３]データベース構成
　　　データベースアダプタ(P): mysql
　　　データベース名(D): proj502_development
　　　ユーザー名(M): root
　　　パスワード(W): *******
　　[ステップ４]Railsのインストール
　　　Railsのバージョン: 2.2.2

２．日本語環境の設定
　　・/config/environment.rbを編集します。
　　・/app/controllers/application.rbを編集します。

３．データベースの作成
　　NetBeansで［Rakeタスクを実行］を選択します。

　　フィルタ(F):
　　パラメータ(P)：
　　一致するタスク(M)：db:crate

４．モデルProductの作成
　　NetBeansで［生成］を選択します。

　　ジェネレート(G)：model
　　引数(A)：Product （モデル名の先頭文字は大文字にすること）

５．マイグレーションファイルの修正

/db/migrate/yyyymmddhhmmss_create_products.rb



class CreateProducts < ActiveRecord::Migration

  def self.up

    create_table :products do |t|

      t.string  :title

      t.string  :code

      t.string  :image

      t.integer :price

      t.text    :description

      t.timestamps

    end

  end
  def self.down

    drop_table :products

  end

end

６．マイグレーション実行
NetBeansで［データベースマイグレーション］→［現在のバージョンへ］を選択

７．プラグインFileColumnのインストール

コマンドプロンプト

D:\Rails_Projects\proj502>ruby script/plugin install http://filecolumn.googlecode.com/svn/tags/file_column

./CHANGELOG
./README
./Rakefile
./TODO
./init.rb
./lib/file_column.rb
./lib/file_column_helper.rb
./lib/file_compat.rb
./lib/magick_file_column.rb
./lib/rails_file_column.rb
./lib/test_case.rb
./lib/validations.rb
./test/abstract_unit.rb
./test/connection.rb
./test/file_column_helper_test.rb
./test/file_column_test.rb
./test/fixtures/entry.rb
./test/fixtures/invalid-image.jpg
./test/fixtures/kerb.jpg
./test/fixtures/mysql.sql
./test/fixtures/schema.rb
./test/fixtures/skanthak.png
./test/magick_test.rb
./test/magick_view_only_test.rb

８．FileColumnの修正
　　このままでは実行時にエラーが発生するのでFileColumnのプログラムを修正します。

/vender/plugins/file_column/lib/file_column.rb



require 'fileutils'

require 'tempfile'

require 'magick_file_column'
module FileColumn # :nodoc:

    ：

    ：

    def file_column(attr, options={})

      options = DEFAULT_OPTIONS.merge(options) if options

      

      my_options = FileColumn::init_options(options, 

                                            self.name.to_s.underscore,

                                            attr.to_s)

    ：

    ：

    end

    ：

    ：

end

９．モデルProductにfile_columnの指定を追加
　　file_columnの指定とともに項目の検証も付けておきます。

/app/models/product.rb



class Product < ActiveRecord::Base

  file_column :image

  

  validates_presence_of :title, :code, :price, :image

  validares_numericality_of :price

  validates_uniqueness_of :code

end

１０．ActiveScaffoldのインストール

１１．admin用のlayoutファイルの作成

/app/views/layouts/admin.html.erb



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




<html xmlns="http://www.w3.org/1999/xhtml"

　　　xml:lang="ja" lang="ja">

　<head>

　　<meta http-equiv="Content-Type"

　　　　　content="text/html; charset=utf-8"/>

　　<title>ショップ管理画面</title>

　　<%= javascript_include_tag :defaults %>

　　<%= active_scaffold_includes %>

　</head>

　<body>




<%= yield %>




　</body>

</html>

１２．コントローラproductsの作成
　　NetBeansで［生成］を選択します。

　　ジェネレート(G)：controller
　　名前(N)：admin/products
　　ビュー(V)：

実行結果



      create  app/controllers/admin

      create  app/helpers/admin

      create  app/views/admin/products

      create  test/functional/admin

      create  app/controllers/admin/products_controller.rb

      create  test/functional/admin/products_controller_test.rb

      create  app/helpers/admin/products_helper.rb

１３．コントローラadmin/productsの編集

/app/controllers/admin/products_controller.rb



class ProductsController < ApplicationController

  layout 'admin'

 

  active_scaffold do |config|

    config.columns = [:title, :code, :image, :price, :description]

  end
end

１４．ActiveScaffoldの日本語化
（１４−１．amatsuda-i18nのインストール）

１４−２．i18nによる日本語リソースファイルの生成

コマンドプロンプト



D:\Rails_Project\proj502>ruby script/generate i18n ja

debug updating environment.rb ...

debug fetching ja.yml fro rails-i18n repository...

exists config/locales

update config/environment.rb

create config/locales/ja.yml

debug 1 models found.

debug 0 translation keys found in views.

debug translating activerecord.attributes.product.title ...

debug translating activerecord.attributes.product.code ...

debug translating activerecord.attributes.product.image ...

debug translating activerecord.attributes.product.price ...

debug translating activerecord.attributes.product.description ...

debug took 1.61 secs to translate.

create config/locales/translation_ja.yml

１４−３．日本語リソースファイルの編集
(1) /config/locales/ja.ymlの最後尾にactive_scaffoldのブロックを追加します。

(2) /config/locales/translation_ja.ymlを修正します。

/config/locales/translation_ja.yml

ja:
activerecord:
models:
product: "商品管理" #g

attributes:
product:
title: "商品名" #g
code: "コード" #g
image: "イメージ" #g
price: "価格" #g
description: "商品概要" #g

１５．動作確認
　　NetBeansで［実行］を選択します。
　　ブラウザでhttp://127.0.0.1:3000/admin/products/を入力します。

１６．コントローラproductsの生成
　　NetBeansで［生成］を選択

　　ジェネレート(G)：controller
　　名前(N)：products
　　引数(A)：index show

実行結果



      exists  app/controllers/

      exists  app/helpers/

      create  app/views/products

      exists  test/functional/

      create  app/controllers/products_controller.rb

      create  test/functional/products_controller_test.rb

      create  app/helpers/products_helper.rb

      create  app/views/products/index.html.erb

      create  app/views/products/show.html.erb

１７．商品一覧の表示

/app/controllers/products_controller.rb



class ProductsController < ApplicationController

  layout 'products'



  def index

    @products = Product.find(:all)

  end  

  def show

  end
end

/app/views/index.html.erb



<h1>商品一覧</h1>

<div id="content">

　<%- @products.each do |product| -%>

　　<%= link_to(

　　image_tag(url_for_file_column(product, :image), :width=>"100", :border => '0'),

　　:action => 'show', :id => product.id

　　) -%>

　<%- end -%>

</div>

１８．商品の表示

/app/controllers/products_controller.rb



class ProductsController < ApplicationController

  layout 'products'

  

  def index

    @products = Product.find(:all)

  end 



  def show

    @product = Product.find(params[:id])

  end

end

/app/views/show.html.erb



<div id="item">

　<h1><%= @product.title %></h1>

　<%= image_tag(url_for_file_column(@product, :image), :width=>"200") %>

</div>

<div id="description">

　<%= h(@product.description) %>

</div>

<div id="detail">

  <p>価格：<%= h @product.price %> (税込) </p>

</div>

１９．動作確認
　　NetBeansで［実行］を選択します。
　　ブラウザでhttp://127.0.0.1:3000/products/を入力します。

２０．ライブラリprotothickboxのダウンロード
　　(1) http://labs.spookies.jp/product/protothickbo/よりprotothickbox-js-3.1.4.zipをダウンロードします。




　　(2) protothinkbox.jsのコピー
　　ダウンロードしたファイルを展開しjavascriptsフォルダにあるprotothinkbox.jsを/public/javascriptsにコピーします。

　　(3) http://jquery.com/demo/thinkbox/より２ファイルをダウンロード




　　(4) ThickBox.css、loadingAnimation.gifのコピー
　　ダウンロードしたThickBox.cssを/public/stylesheetsにコピーします。
　　またダウンロードしたloadingAnimation.gifは/public/imagesにコピーします。

２１．ライブラリの修正

/public/javascripts/protothinkbox.js



/*

 * Thickbox 3.1 - One Box To Rule Them All.

 * By Cody Lindley (http://www.codylindley.com)

 * Copyright (c) 2007 cody lindley

 * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php

 * 

 * Protothickbox 3.1.4

 * Modified By Spookies Labs(http://labs.spookies.jp)

 * depends on prototype.js 1.6 or later + effects.js

 */

var tb_pathToImage = "/images/loadingAnimation.gif";

　　：

　　：

２２．ProtoThickBox使用のためのテンプレートの修正

/app/views/layouts/products.html.erb



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




<html xmlns="http://www.w3.org/1999/xhtml"

　　　xml:lang="ja" lang="ja">

　<head>

　　<meta http-equiv="Content-Type"

　　　　content="text/html; charset=utf-8"/>

　　<title>ショップ画面</title>

　　<%= stylesheet_link_tag 'thickbox' %>

　　<%= javascript_include_tag :defaults %>

　　<%= javascript_include_tag 'protothickbox' %>

　</head>

　<body>




<%= yield %>




　</body>

</html>

２３．ProtoThickBoxへの対応

/app/views/show.html.erb



<div id="item">

  <h1><%= @product.title %></h1>

  <%= link_to(image_tag(

      url_for_file_column(@product, :image), :width=>"150", :border => '0'),

      url_for_file_column(@product, :image),

      :class => 'thickbox',

      :title => @product.title) %>

</div>

<div id="description">

  <%= h(@product.description) %>

</div>

<div id="detail">

  <p>価格：<%= h @product.price %> (税込) </p>

  <%= link_to 'カートに入れる', '#' %>

</div>

２４．動作確認
　　NetBeansで［実行］を選択します。
　　ブラウザでhttp://127.0.0.1:3000/products/を入力します。