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

/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>