ProtoThickBox

［１３］ProtoThickBox

１．ProtoThickBox
画像をブラウザ上で効果的に見せるThickBoxというライブラリを紹介します。

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

1-2.protothickboxのインストール
(1) protothickboxのダウンロード
http://labs.spookies.co.jp/2007/12/26/protothickbox-js-3-1-release/より【downloadはこちら】を選択し、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にコピーします。

(5) ライブラリの修正

/public/javascripts/protorhinkbox.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";

　　：

　　：

1-3.モデルの作成
(1) モデルの生成
NetBeansで生成を選択します。
　　　　ジェネレータ(G): model
　　　　引数(A): Gallery

実行結果
      exists  app/models/

      exists  test/unit/

      exists  test/fixtures/

      create  app/models/gallery.rb

      create  test/unit/gallery_test.rb

      create  test/fixtures/galleries.yml

      create  db/migrate

      create  db/migrate/20100218051321_create_galleries.rb

(2) マイグレーションのプログラム修正

/db/migrate/20100218051321_create_galleries.rb
class CreateGalleries < ActiveRecord::Migration

  def self.up

    create_table :galleries do |t|

      t.string :title

      t.string :filename

      t.string :content_type

      t.integer :size

      t.timestamps

    end

  end

 
  def self.down

    drop_table :galleries

  end

end

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

実行結果
(in D:/Rails_Projects/Appli020)

==  CreateGalleries: migrating ================================================

-- create_table(:galleries)

   -> 0.1250s

==  CreateGalleries: migrated (0.1250s) =======================================

(4) モデルの編集

/app/models/gallery.rb
class Gallery < ActiveRecord::Base

  MAX_FILE_SIZE = 1.megabyte
  validates_presence_of :filename, :message => 'Please choose a file.'

  validates_inclusion_of :size, :in => (1..MAX_FILE_SIZE),

    :message => "File size is too big or 0. Maximum size is #{MAX_FILE_SIZE} bytes."
  def file=(file)

    self.filename = file.original_filename if file.respond_to?(:original_filename)

    self.content_type = file.content_type if file.respond_to?(:content_type)

    self.size = file.size if file.respond_to?(:size)

    @tmp = file

  end
  def after_save

    File.open(filepath, "wb") { |f|

      f.write @tmp.read

    }

  end

  

  def after_destroy

    File.delete filepath if File.exist? filepath

  end

  

  def filepath

    "public/galleries/#{self.id}_#{self.filename}"

  end

end

1-4.コントローラの作成
(1) コントローラの生成
NetBeansで［生成］を選択します。
　　　　ジェネレータ(G): controller
　　　　名前(N): galleries
　　　　ビュー(V): index, new, create, destroy

実行結果
      exists  app/controllers/

      exists  app/helpers/

      create  app/views/galleries

      exists  test/functional/

      create  test/unit/helpers/

      create  app/controllers/galleries_controller.rb

      create  test/functional/galleries_controller_test.rb

      create  app/helpers/galleries_helper.rb

      create  test/unit/helpers/galleries_helper_test.rb

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

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

      create  app/views/galleries/create.html.erb

      create  app/views/galleries/destroy.html.erb

(2) コントローラの編集

/app/controllers/galleries_controller.rb
class GalleriesController < ApplicationController

  def index

    @folders = Folder.find(:all)

  end
  def new

  end

  

  def create

    @gallery = Gallery.new(params[:upload])

    if @gallery.valid? then

      @gallery.save

      redirect_to :action => 'index'

    end

  end
  def destroy

    @gallery = Gallery.find(params[:id])

    @gallery.destroy

    redirect_to :action => 'index'

  end

end

1-5.ビューの編集
(1) index.html.erb

/app/views/galleries/index.html.erb
<h1>Index</h1>

<table><% i=0 -%><% @galleries.each do |gallery| -%><% i+=1 -%><% i=1 if i>5 -%><% if i==1 then -%>

  <tr><% end -%>

    <td>

    <img src=<%=h "galleries/#{gallery.id}_#{gallery.filename}" -%> width=100><br/>

    <%= link_to('[D]',

                {:action => 'destroy',

                 :id => gallery.id}) -%>

    <%=h "#{gallery.title}" -%>

    </td><% if i==5 then -%>

  </tr><% end -%><% end -%><% if i==0 then -%>

  <tr><% end -%><% if i<5 then -%>

  </tr><% end -%>

</table><%= link_to('new', {:action => 'new'}) -%>

(2) new.html.erb

/app/views/galleries/new.html.erb
<h1>New</h1><% form_tag({:action => 'create'}, :multipart => true) do %>

  Title:<%= text_field('upload', 'title') %><br/>

  <br/>

  File: <%= file_field('upload', 'file') %><br/>

  <br/>

  <%= submit_tag('upload') %><br/><% end %>

<br/><%= link_to('index', {:action => 'index'}) %>

(3) create.html.erb

/app/views/galleries/create.html.erb
<h1>Create</h1><%= error_messages_for :gallery %><%= link_to('index', {:action => 'index'}) %>

(4) 不用なビュープログラムの削除
/app/views/galleries/destroy.html.erb

(5) レイアウトファイルの作成
HTMLのヘッダー部分など各ページ共通に利用される表示要素を作成します。
今回はprotothickboxも使用するための準備もします。

/app/views/layouts/galleries.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="en" lang="en">

<head>

  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

  <title>Appli020: <%= controller.action_name %></title>

  <%= stylesheet_link_tag 'thickbox' %>

  <%= javascript_include_tag :defaults %>

  <%= javascript_include_tag 'protothickbox' %>

</head>

<body><%= yield %>
</body>

</html>

1-6.ファイル格納先の作成
(1) galleriesディレクトリーの作成
/public/の直下にgalleriesディレクトリーを作ります。
公開ディレクトリー上で右クリックして[新規]→［フォルダ．．．］を選択し、フォルダ名(N)：にgalleriesを設定します。

(2) ファイルの格納先
/public/galleries/[id]_[original_filename]

1-7.動作確認
http://127.0.0.1:3000/galleries/を起動し動作を確認します。

1-8.thickboxへの対応
(1) index.html.erb

/app/views/galleries/index.html.erb
<h1>Index</h1>

<table><% i=0 -%><% @galleries.each do |gallery| -%><% i+=1 -%><% i=1 if i>5 -%><% if i==1 then -%>

  <tr><% end -%>

    <td>

    <% fn = "../galleries/#{gallery.id}_#{gallery.filename}" -%>

    <%= link_to(image_tag(fn, :width=>"100", :border=>'0'),

                  fn,

                  :class=> 'thickbox',

                  :title=> gallery.title) -%><br/>

    <%= link_to('[D]',

                 {:action => 'destroy', :id => gallery.id}) -%>

    <%=h "#{gallery.title}" -%>

    </td><% if i==5 then -%>

  </tr><% end -%><% end -%><% if i==0 then -%>

  <tr><% end -%><% if i<5 then -%>

  </tr><% end -%>

</table><%= link_to('new', {:action => 'new'}) -%>

1-9.動作確認
画像の上でマウスクリックします。

← ファイルのアップロードとダウンロード | index | ディレクトリとファイルの操作 →