Serendip

Web Studio

Rails によるアジャイルWebアプリケーション開発 第3版 の『第9章 タスク D : Ajax の追加』の自由課題『カート内の新しい項目に、別の視覚効果を付ける方法』について。

最初にアイテムが追加される際にカートが blind_down で表示される効果と、既に表示されている項目の数量が増加する際の highlight 効果はそのまま残して、カートにアイテムが追加される場合（数量の増加ではなく、新規に追加される場合）にも視覚効果が実行されるようにする。
追加する視覚効果は grow （拡大）はいまいちだったので appear （フェードイン）にした。

視覚効果 appear を適用するために、カートに項目が追加される場合（cart_item.quantity が 1 の場合)に tr 要素のスタイルに display : none を設定する。
したがって tr 要素は以下の3つの場合に分けられる。

カート内で最後に更新された項目（個数の増加の場合）

<tr id="current_item">

カート内で最後に更新された項目（新規にカートに追加された場合）

<tr id="current_item" style="display:none;">

それ以外

<tr>

条件分けが複雑になるので、ビュー内にロジックを記述するのではなく、ヘルパーメソッドを作ることにする。

ヘルパーメソッドの作成

app/helpers/store_helper.rb に tr タグを作る item_tr_if メソッドを追加する。

def item_tr_if(is_current, quantity, attributes = {}, &block)
  if is_current
    attributes["id"] = "current_item"
    if quantity == 1
      attributes["style"] = "display: none"
    end
  end
  content_tag("tr", attributes, &block)
end

ヘルパーメソッドを使ってカート項目のビューを作る

app/views/store/_cart_item.html.erb にヘルパーメソッドを使ってカート項目を生成するよう記述する。

<% item_tr_if(cart_item == @current_item, cart_item.quantity) do %>
  <td><%= cart_item.quantity %> &times; </td>
  <td><%=h cart_item.title %></td>
  <td class="item-price"><%= number_to_currency(cart_item.price) %></td>
<% end %>

Ajax による視覚効果を付ける

以上の、条件によって変化するカート項目の tr タグ部分に視覚効果を付ける。
視覚効果は、新規追加の場合の appear と数量増加の場合の highlight の2種類となる。

app/views/store/add_to_cart.js.rjs に視覚効果の JavaScript を生成するコードを追加する。

if @current_item.quantity == 1
  page[:current_item].visual_effect :appear,
                                    :duration => 1.0
else
  page[:current_item].visual_effect :highlight,
                                    :startcolor => "#88ff88",
                                    :endcolor => "#114411"
end

以上で、新しい項目に視覚効果を付けることができた。
JavaScript を OFF にした場合でも問題なく動作している。

RailsによるアジャイルWebアプリケーション開発

posted with amazlet at 10.03.15

Sam Ruby David Heinemeier Hansson Dave Thomas
オーム社
売り上げランキング: 29946

Amazon.co.jp で詳細を見る