FileColumn - challenge Ruby on Rails

［１１］FileColumn

１．FileColumn
データファイルや画像ファイルなどファイルの扱いがＷｅｂ上で簡単にできるFileColumnを紹介します。

1-1.プロジェクトの生成
(1) プロジェクトAppli016を生成する
(2) 日本語環境の設定
(3) データベースの作成

1-2.file_columnのインストール
(1) プラグインの導入



コマンド プロンプト
D:\Rails_Projects\Appli016>

      ruby script/plugin install &3104;ttp://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

(2) file_columnプラグインの修正
このまま利用すると、実行時にエラーをするため、一部プログラムを修正します。



/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

1-3.アプリケーションの作成
(1) scaffoldの利用
NetBeansで［生成..］を選択します。
　　　　ジェネレータ(G): scaffold
　　　　モデル(N):Address
　　　　属性ペア（フィールド型）(A): namae:string yubin:string jusho:string denwa:string



コマンド プロンプト
      exists  app/models/

      exists  app/controllers/

      exists  app/helpers/

      create  app/views/addresses

      exists  app/views/layouts/

      exists  test/functional/

      exists  test/unit/

      create  test/unit/helpers/

      exists  public/stylesheets/

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

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

      create  app/views/addresses/new.html.erb

      create  app/views/addresses/edit.html.erb

      create  app/views/layouts/addresses.html.erb

      create  public/stylesheets/scaffold.css

      create  app/controllers/addresses_controller.rb

      create  test/functional/addresses_controller_test.rb

      create  app/helpers/addresses_helper.rb

      create  test/unit/helpers/addresses_helper_test.rb

       route  map.resources :addresses

  dependency  model

      exists    app/models/

      exists    test/unit/

      exists    test/fixtures/

      create    app/models/address.rb

      create    test/unit/address_test.rb

      create    test/fixtures/addresses.yml

      create    db/migrate

      create    db/migrate/20100216023604_create_addresses.rb

(2) 項目の追加
NetBeansで［生成..］を選択する
　　　　ジェネレータ(G):migration
　　　　引数(A)：add_image_to_addresses image:string



コマンド プロンプト
      exists  db/migrate

      create  db/migrate/20100216023855_add_image_to_addresses.rb

(3) マイグレーションの確認



/db/migrate/20100216023855_add_image_to_addresses.rb
class AddImageToAddresses < ActiveRecord::Migration

  def self.up

    add_column :addresses, :image, :string

  end
  def self.down

    remove_column :addresses, :image

  end

end

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



コマンド プロンプト
(in D:/Rails_Projects/Appli016)

==  CreateAddresses: migrating ================================================

-- create_table(:addresses)

   -> 0.1250s

==  CreateAddresses: migrated (0.1250s) =======================================
==  AddImageToAddresses: migrating ============================================

-- add_column(:addresses, :image, :string)

   -> 0.2650s

==  AddImageToAddresses: migrated (0.2650s) ===================================

(5) モデルの修正



/app/models/address.rb
class Address < ActiveRecord::Base

  

  file_column :image

  

end

(6) ビューの修正



/app/views/index.html.erb
<h1>Listing addresses</h1>
<table>

  <tr>

    <th>Namae</th>

    <th>Yubin</th>

    <th>Jusho</th>

    <th>Denwa</th>

    <th>Image</th>

  </tr><% @addresses.each do |address| %>

  <tr>

    <td><%=h address.namae %></td>

    <td><%=h address.yubin %></td>

    <td><%=h address.jusho %></td>

    <td><%=h address.denwa %></td>

    <td><%=h address.image %></td>

    <td><%= link_to 'Show', address %></td>

    <td><%= link_to 'Edit', edit_address_path(address) %></td>

    <td><%= link_to 'Destroy', address, :confirm => 'Are you sure?', :method => :delete %></td>

  </tr><% en %>

</table>
<br/><%= link_to 'New address', new_address_path %>



/app/views/new.html.erb
<h1>New address</h1>
<% form_for(@address, :html => {:multipart => true}) do |f| %>

  <%= f.error_messages %>
  <p>

    <%= f.label :namae %><br/>

    <%= f.text_field :namae %>

  </p>

  <p>

    <%= f.label :yubin %><br/>

    <%= f.text_field :yubin %>

  </p>

  <p>

    <%= f.label :jusho %><br/>

    <%= f.text_field :jusho %>

  </p>

  <p>

    <%= f.label :denwa %><br/>

    <%= f.text_field :denwa %>

  </p>

  <p>

    <%= f.label :image %><br/>

    <%= f.file_field :image %>

  </p>

  <p>

    <%= f.submit 'Create' %>

  </p><% end %><%= link_to 'Back', addresses_path %>



/app/views/edit.html.erb
<h1>Editing address</h1>
<% form_for(@address, :html => {:multipart => true}) do |f| %>

  <%= f.error_messages %>
  <p>

    <%= f.label :namae %><br/>

    <%= f.text_field :namae %>

  </p>

  <p>

    <%= f.label :yubin %><br/>

    <%= f.text_field :yubin %>

  </p>

 
  <p>

    <%= f.label :jusho %><br/>

    <%= f.text_field :jusho %>

  </p>

  <p>

    <%= f.label :denwa %><br/>

    <%= f.text_field :denwa %>

  </p>

  <p>

    <%= f.label :image %><br/>

    <%= f.file_field :image %>

  </p>

  <p>

    <%= f.submit 'Update' %>

  </p><% end %><%= link_to 'Show', @address %> |<%= link_to 'Back', addresses_path %>



/app/views/show.html.erb
<p>

  <b>Namae:</b>

  <%=h @address.namae %>

</p>
<p>

  <b>Yubin:</b>

  <%=h @address.yubin %>

</p>
<p>

  <b>Jusho:</b>

  <%=h @address.jusho %>

</p>
<p>

  <b>Denwa:</b>

  <%=h @address.denwa %>

</p>
<p>

  <b>Image:</b>

  <%=h @address.image %>

</p>
<%= link_to 'Edit', edit_address_path(@address) %> |<%= link_to 'Back', addresses_path %>

(7) 動作確認
実際にプログラムを実行してみると、ファイル名が英字の場合はうまくアップロードされますが、漢字の場合うまくいきません。
・（アップロードするファイル名が「冬景色_Winter.jpg」の場合）

・（アップロードされたファイル名が「_______Winter.jpg」となってしまう）

(8) file_columnプラグインプログラムの修正
日本語のファイル名も使用できるようにするために、ふたたびfile_columnを修正します。



/vender/plugins/file_column/lib/file_column.rb
require 'fileutils'

require 'tempfile'

require 'magick_file_column'
module FileColumn # :nodoc:

    ：

    ：

  

  def self.sanitize_filename(filename)
    filename = File.basename(filename.gsub("\\", "/")) # work-around for IE

    filename.gsub!(/[^\w\.\-\+_]/,"_")

    filename = "_#{filename}" if filename =~ /^\.+$/

    filename = "unnamed" if filename.size == 0

    filename
  end

  

end

(9) 動作確認
これで日本語のファイル名も扱うことができます。
・（アップロードするファイル名が「日の入り_Sunset.jpg」の場合）

・（アップロードされたファイル名も「日の入り_Sunset.jpg」となる）

(10) 画像の表示
さらに画像についてはファイル名ではなく画像を表示させましょう。



/app/views/show.html.erb
<p>

  <b>Namae:</b>

  <%=h @address.namae %>

</p>
<p>

  <b>Yubin:</b>

  <%=h @address.yubin %>

</p>
<p>

  <b>Jusho:</b>

  <%=h @address.jusho %>

</p>
<p>

  <b>Denwa:</b>

  <%=h @address.denwa %>

</p>
<p>

  <b>Image:</b>

  <%= image_tag url_for_file_column(@address, :image) %>

</p><%= link_to 'Edit', edit_address_path(@address) %> |<%= link_to 'Back', addresses_path %>

（実際に画像を表示した場合）

(11) 画像の拡大縮小



/app/views/show.html.erb
<p>

  <b>Namae:</b>

  <%=h @address.namae %>

</p>
<p>

  <b>Yubin:</b>

  <%=h @address.yubin %>

</p>
<p>

  <b>Jusho:</b>

  <%=h @address.jusho %>

</p>
<p>

  <b>Denwa:</b>

  <%=h @address.denwa %>

</p>
<p>

  <b>Image:</b>

  <%= image_tag url_for_file_column(@address, :image), :size=>"50x50" %>

</p><%= link_to 'Edit', edit_address_path(@address) %> |<%= link_to 'Back', addresses_path %>

なお、ここで:size=>"50x50"を:width=>"50"や:hight=>"50"と書くことができます。これにより横幅を揃えたり、高さを揃えたりします。

・（縮小された画像を表示）

← ActiveResource | index | ファイルのアップロードとダウンロード →