Metro UI CSSをRailsで使ってみる

Windows8のモダンUI風なWebページを作るMetro UI CSSというライブラリがあります。

このMetoro UI CSSと、去年末に見つけた"たった3行のコードでひたすらアイドル水着画像をあつめる(Rubyだよ)"
の影響を受け、集めた画像やURLを、タイル内に表示するサンプルをRailsで作ってみました。

画面はこんな感じです。タイル内の画像などは、一定周期ごとに切り替わります。
f:id:UnderSourceCode:20130127164902j:plain

以下、作成手順のポイントです。

1.Metoro UI CSSのライブラリを配置する
Metro UI CSSよりライブラリをダウンロードし、
cssjavascriptフォルダ内の全ソースを、それぞれapp/assets/stylesheets・app/assets/javascriptsにコピーします。


2.モデルの作成
モデルではNEVERまとめより、画像と新着まとめを持ってきます。

matome.rb

require 'open-uri'

class Matome < ActiveRecord::Base
def self.find
odais = [
"2131960244357489001",
"2133187527849800801",
"2135350364969742801",
"2134983281942631801",
"2133873338011786701"
]
matomes = Hash::new
odais.each{|odai|
matomes[odai] = getMatome(odai)
}
return matomes
end

private
def self.getMatome(odai)
url = "http://matome.naver.jp/odai/" + odai
return open(url).read.scan(%r{})
end
end

chumoku.rb

require 'open-uri'
class Chumoku < ActiveRecord::Base
def self.find
url = "http://matome.naver.jp/topic/1LxqM"
datas = open(url).read.scan(%r{

.+

})
chumokus = Hash::new
datas.each{|data|
chumokus[data.scan(%r{a\shref=\"(.+)"\s})[0][0]] = data.scan(%r{data-na=\"NL:title\">(.+)})[0][0]
}
return chumokus
end
end


3.コントローラの作成
コントローラは単純で、上で作成したモデルのメソッドを呼び出し、取得した値をビューに渡します。

class MatomesController < ApplicationController
def index
@matomes = Matome.find
@chumokus = Chumoku.find
end
end


4.ビューの作成
Metro UI CSSのデモページ を参考に、タイルで表示できるようにビューを作成しました。
ベースとなるindex.html.erb、画像を表示する_matome.html.erb、注目まとめを表示する_chumoku.html.erb
で構成しています。

index.html.erb

<:div class="page secondary fixed-header">

<:div class="page-header">
<:div class="page-header-content">
<:h1>Matome UI CSS - Tiles<:/h1>
<:/div>
<:/div>

<:div class="page-region">
<:div class="page-region-content tiles style="width:6540px">
<:div class="tile-group tile-drag" style="width:500px">
<:% @matomes.each_value do |matome| %>
<:%= render 'matome', :matome => matome %>
<:% end %>
<:/div>
<:div class="tile-group tile-drag" style="width: auto; max-width: 500px;">
<:div class="tile double bg-color-green" data-role="tile-slider" data-param-period="3000">
<:% @chumokus.each do |key, value| %>
<:%= render 'chumoku', :url => key, :title => value %>
<:% end %>
<:/div>
<:/div>
<:/div>
<:/div>
<:/div>

_matome.html.erb

<:div class="tile image-slider" data-role="tile-slider" data-param-period="3000">
<:% matome.each {|m| %>
<:div class="tile-content">
<:%= raw m %>
<:/div>
<:% } %>
<:/div>

_chumoku.html.erb

<:a href="<:%= url %>" class="tile-content double outline-color-green" target="_blank">
<:h3><:%= title %><:/h3>
<:p><:%= url %><:/p>
<:/a>

ポイントは以上です。ソースは以下のGitHubに上げてあるので、詳細が知りたい場合は
参考にしてください。
https://github.com/UnderSourceCode/Matome_UI_CSS