Metro UI CSSをRailsで使ってみる

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

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

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

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

1.Metoro UI CSSのライブラリを配置する
Metro UI CSSよりライブラリをダウンロードし、
css・javascriptフォルダ内の全ソースを、それぞれ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