TECH MEMO

rails に jquery cycle を使ってみた。

限られたスペースで複数の画像を効果的に表示させる為、
jQuery Cycle を使ってみたのでメモ。

jquery-1.4.2.min.js を以下から download する。
jquery-1.4.2.min.js
jquery.cycle.zip を以下から download する。
jquery.cycle.zip

download した jquery-1.4.2.min.js を public/javascripts 配下へ置く。

cp jquery-1.4.2.min.js rails/demo/public/javascripts

download した jquery.cycle.zip を展開して public/javascripts 配下に設置する。

unzip jquery.cycle.zip
cp jquery.cycle.min.js rails/demo/public/javascripts/

cycle用 function を cycle.js という名前で public/javascripts に作成。
'.slideshow' は、呼び出す時の div の class で使うことを頭に入れておく。

$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});

head に以下を追加。

<%= javascript_include_tag("jquery-1.4.2.min.js") %>
<%= javascript_include_tag("jquery.cycle.min.js") %>
<%= javascript_include_tag("cycle.js") %>

body に以下を追加。img の src を見せたい url に変更する。

以上で完了。
後は、画像を変えたり、fade を変えたりすればいいわけですね。
すごく簡単ですね。

【Railsの最新記事】

投稿者：tech｜17:33 ｜Rails

2010年05月28日

ruby rand を使って配列要素をランダムに取得する。

ruby でランダムに配列要素を取得する。 rand.rb という名前で以下を作成する。

array = [ "a", "b", "c", "d", "d" ]

p array[rand(array.length)]

実行結果

% ./rand.rb
"d"
% ./rand.rb
"d"
% ./rand.rb
"c"
% ./rand.rb
"b"
% ./rand.rb
"a"

実行する度に値が変わっている。

投稿者：tech｜14:34 ｜Ruby

2010年05月27日

rails ERB のエイチ("<%=h") とかハイフン("-%>")について。

エイチ("<%=h") とかハイフン("-%>")てなんだっけ？となるのでメモ。

html 的には、何もしない。

<% "moji" %>

html に展開して表示する。

<%= "moji" %>

html に展開する時に "<" や ">" を特殊文字(<とか>)にエスケープする。

<%=h "moji" %>

html に展開した文字列等の最後に改行を入れない。

<%= "moji" -%>

コメントする時。

<%# "moji" -%>

投稿者：tech｜15:35 ｜Rails

2010年05月26日

rails テーブル名を複数系にする機能。

rails では、generate で table を作成する時、
テーブル名の単数系で指定すると複数系にしたテーブル名でテーブルを作成してくれる。
単純に最後に "s" を付けてるのかなと思って、単純にいかないケースでやってみた。

"company" の複数形は、"companies" である。
generate してみた。

ruby script/generate scaffold company company_code:string company_name:string

migration ファイルを見ると "companies" になっている。

class CreateCompanies < ActiveRecord::Migration
def self.up
create_table :companies do |t|
t.string :company_code
t.string :company_name

t.timestamps
end
end

def self.down
drop_table :companies
end
end

このまま、rake すれば複数形のテーブル名で作成されますね。
おりこうさんですね。

同じ事を "hogehoge" でやってみると "hogehoges" となった。
さらに "hogyhogy" でやってみると "hogyhogies" となった。

綴りの語尾数文字を見て判断してるんでしょうかね。
たまに意図しない変換になるかもしれませんので注意は、しておいた方が良さそうですね。

投稿者：tech｜19:12 ｜Rails

2010年05月25日

rails redirect_to でリダイレクトする。

別のコントローラーに渡してあげたい時は、以下を使う。

redirect_to :controller => 'controller_name'

投稿者：tech｜11:26 ｜Rails

2010年05月23日

rails に jquery tablesorter を実装してみた。

views のコンテンツが増える度にソート機能の実装をするのが面倒だったので jquery でやってみた。

tablesorter を download する。
tablesorter.zip

展開すると中身が以下のようになっている。

ls tablesorter/
addons
build
build.xml
changelog
docs
jquery-latest.js
jquery.metadata.js
jquery.tablesorter.js
jquery.tablesorter.min.js
tests
themes

本家のドキュメントをみる限り jquery.tablesorter.js, jquery-latest.js があれば動くように見える。
rails の public/javascripts/ 配下に設置する。

cp tablesorter/jquery-latest.js ~/rails/demo/public/javascripts/
cp tablesorter/jquery.tablesorter.js ~/rails/demo/public/javascripts/

自作のテーブル用の function として mytable.js を以下の様に作成して、
public/javascripts/ に設置する。"mytable" と table の id が結びつくことを頭に入れておく。

$(function() {
  $("#mytable").tablesorter({
    sortList: [[0,0]],
    widgets: ["zebra"],
    headers: { 0: { sorter:"digit"}}
  });
});

見栄えの為の css を public/stylesheets 配下に設置する。(必須ではない)

cp -r tablesorter/themes ~/rails/demo/public/stylesheets/tablesorter

top ページの head のタグ内に js と css を実装する。

<%= stylesheet_link_tag 'tablesorter/blue/style.css' %>
<%= javascript_include_tag("jquery-latest.js") %>
<%= javascript_include_tag("jquery.tablesorter.js") %>
<%= javascript_include_tag("mytable.js") %>

table 側には、table id="xxxx" , thead, tbody を使って実装する。

<h1>Listing customers</h1>

<table id="mytable" border="0" cellpadding="0" cellspacing="1">
<thead>
  <tr>
    <th>Customer</th>
    <th>Customer name</th>
  </tr>
</thead>
<tbody>
<% @customers.each do |customer| %>
  <tr>
    <td><%=h customer.customer_id %></td>
    <td><%=h customer.customer_name %></td>
    <td><%= link_to 'Show', customer %></td>
    <td><%= link_to 'Edit', edit_customer_path(customer) %></td>
    <td><%= link_to 'Destroy', customer, :method => :delete %></td>
  </tr>
<% end %>
</tbody>
</table>

<br />

<%= link_to 'New customer', new_customer_path %>

投稿者：tech｜15:52 ｜Rails

2010年05月23日

rails javascript_tag を使ってみた。

rails のヘルパー javascript_tag を使ってみた。

<%= javascript_tag "alert('Hello JavaScript on Rails')"%>

HTML 出力

ブロックで実装してみる。

<%= javascript_tag do
"alert('Hello JavaScript on Rails')"%>
<% end %>

HTML 出力

投稿者：tech｜13:04 ｜Rails

2010年05月22日

rails javascript_include_tag を使ってみた。

javascript_include_tag というヘルパーがあるのでを使ってみた。

実体は、以下にある。

ls public/javascripts/
application.js controls.js dragdrop.js effects.js prototype.js

:all で実装してみる。

<-- javascript start -->
<%= javascript_include_tag(:all) %>
<-- javascript end -->

html出力結果

<-- javascript start -->
<scriptlt;script src="/javascripts/prototype.js?XXXXXXXXXX" type="text/javascript"></script>
<scriptlt;script src="/javascripts/effects.js?XXXXXXXXXX" type="text/javascript"></script>
<scriptlt;script src="/javascripts/dragdrop.js?XXXXXXXXXX" type="text/javascript"></script>
<scriptlt;script src="/javascripts/controls.js?XXXXXXXXXX" type="text/javascript"></script>
<scriptlt;script src="/javascripts/application.js?XXXXXXXXXX" type="text/javascript"></script>
<-- javascript end -->

:defaults で実装してみる。

<-- javascript start -->
<%= javascript_include_tag(:defaults) %>
<-- javascript end -->

html出力結果

:all と :defaults は、同じみたい。

application だけ実装してみる。

<-- javascript start -->
<%= javascript_include_tag("application") %>
<-- javascript end -->

html出力結果

<-- javascript start -->
<scriptlt;script src="/javascripts/application.js?XXXXXXXXXX" type="text/javascript"></script>
<-- javascript end -->

投稿者：tech｜21:54 ｜Rails

2010年05月21日

rails string のカラムを数値としてソートさせる。

string のカラムを数値としてソートさせる。

string のカラムに対して order しても文字列としてソートしてしまう。
いろいろ調べたけどみつからず、適当にやってみたらできましたのでメモ。

def index
  name = 'customer_code'
  @customers = Customer.all.sort{|a,b| a.attributes[name].to_i <=> b.attributes[name].to_i }

  respond_to do |format|
    format.html # index.html.erb
    format.xml { render :xml => @customers }
  end
end

投稿者：tech｜18:23 ｜Rails

2010年05月21日

rails migration の型変換 change_column を使ってみる。

あるカラムを integer から string の型に変更してみた。
まず、デモ用の環境を作成。

ruby script/generate scaffold customer customer_id:integer customer_name:string

実行する。

rake db:migrate

テストサーバを起動

ruby script/server

ブラウザで以下にアクセスして、値を適当に入れる。

http://localhost:3000/customers

変更の為の migration ファイルを作成する。
追加、削除の用な書式は無いのでわかるように作成しておく。

ruby script/generate migration change_customer_id_type_to_customer

以下の様に編集する。

class ChangeCustomerIdTypeToCustomer < ActiveRecord::Migration
  def self.up
    change_column :customers, :customer_id, :string
  end

  def self.down
    change_column :customers, :customer_id, :integer
  end
end

実行してみる。

rake db:migrate
(in /Users/rails/demo)
== ChangeCustomerIdTypeToCustomer: migrating =================================
-- change_column(:customers, :customer_id, :string)
-> 0.0159s
== ChangeCustomerIdTypeToCustomer: migrated (0.0161s) ========================

ブラウザで確認すると値が維持されたままです。素晴らしい。
この反対(string -> integer)は、数字できない値は、"0" に置き換えられるので注意。
ちなみに、直前の状態に戻すなら以下を実行する。

rake db:rollback

投稿者：tech｜12:48 ｜Rails

<<　前へ >>次へ