Hatena::Grouprubyist

うんたらかんたらRuby RSSフィード

2010-03-01Web App Themeを試してみた

Web App Themeを試してみた

| Web App Themeを試してみた - うんたらかんたらRuby を含むブックマーク はてなブックマーク - Web App Themeを試してみた - うんたらかんたらRuby

やっぱ角丸CSSとかrailsアプリに組み込みたいよなぁ、などと思っていたところ

Web App Themeを試していなかったのを思い出したので

やってみた。


pilu's web-app-theme at master - GitHub

Web App Theme

→デモ。右のサイドバーでテーマを変更して確認できる。


install

gemとpluginが用意されているが、とりあえずプロジェクト依存なのでpluginでインストール。

gemの場合はenvironment.rbへversion追記)

sudo gem install web-app-theme -s http://gemcutter.org
script/plugin install git://github.com/pilu/web-app-theme.git

Theme Generator

まぁ、readmeに載ってますが。

layout

第1引数はlayout名。引数無しなら、application.html.erbとなる。

script/generate theme

(application.html.erbとして使用する場合は、各モデル用のlayoutファイルを削除)


theme

テーマ名を指定。

script/generate theme --theme="drastic-dark"

上のデモと同等のhtml

vendor/plugins/web-app-theme/index.html

にあるので、そこでテーマ名が確認できます。(現在12種)

上記コマンドを再度入力することで途中で変更も可能。

public/stylesheets/themes 以下にcssがそれぞれ格納されます。


アプリケーション名
script/generate theme --app_name="My New Application"

Themed Generator

テーマ用のviewに(デモページのように)書き換えてくれます。


model名の複数形をcontroller名にしている場合(scaffoldなど通常のrailsの場合)は

第1引数にcontroller名を設定する。

script/generate themed posts # you have a model named Post and a controller named PostsController

modelとcontrollerが違う場合は

第1引数にcontroller名、第2引数にmodel名を設定する。

script/generate themed items post

will_paginate

なんとwill_paginate用のオプションも用意されています。

script/generate themed items post --with_will_paginate

エラーメッセージをform内にしたい場合

environment.rb

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance| 
  if html_tag =~ /<label/
    %|<div class="fieldWithErrors">#{html_tag} <span class="error">#{[instance.error_message].join(', ')}</span></div>|
  else
    html_tag
  end
end|

など、一部端折りましたが

初期から導入するのがいいんじゃないでしょうか。

こんな感じで。

rails 〜
script/generat scaffold hoge 〜
rake db:migrate
script/plugin install git://github.com/pilu/web-app-theme.git
script/generate theme --app_name="My New Application"
script/generate themed hoges


#以下、pagingが必要であれば
script/generate themed hoges --with_will_paginate
#ってやって、
#後は通常のpaginateの実装にしてやればok。

#environment.rb
require 'will_paginate'

#controller
@hoges = Hoge.paginate(:per_page => 10, :page => params[:page])

参考

Railsのクールなデザインを一瞬で自動生成する「Web App Theme」がステキ - 医者を志す妻を応援する夫の日記