このブログは証明できない。

■[Rails]Railsのクールなデザインを一瞬で自動生成する「Web App Theme」がステキ

4歳の長女がプリキュアにハマっています。ピーチを目指しているんだそうです。ですが、普段から絞め技や関節技を教えているので、寝技からの腕ひしぎ十字固めを狙ってきます。そんなプリキュアはいません。キュア・ノゲイラですか。。。

Web App ThemeというRailsのプラグインがあるのですが、これがステキすぎるのです。クールなカンジのテーマ（レイアウト＆スタイル）を一瞬にして自動生成してくれます。お、落ち着いて。ゆっくり説明するから。とにかく聞いてください。

まず、Railsのプロジェクトを作ります。

$ rails memo_app
cd memo_app

手抜きするために、scaffoldを使います。で、db:migrateして、serverを起動。

$ zscript/generate scaffold memo title:string body:text
$ rake db:migrate
$ script/server

これで、memoアプリができました。やっぱ、Railsすげー。http://localhost:3000/memos/にアクセスすると、memoアプリが動いています。しかし、デザイン的には夢も希望もありません。そこで、Web App Themeの出番ですよ。

Web App Themeのインストール。

$ script/plugin install git://github.com/pilu/web-app-theme.git

さあ、テーマ（レイアウト＆スタイル）の生成。一瞬ですよ。app/views/layouts/memos.html.erbは、削除しておいてください。

$ script/generate theme
$ rm app/views/layouts/memos.html.erb

ここまでの結果。

テーブルのデザインがそのままなので、残念なカンジですね。app/views/memos/index.html.erbを修正します。tableタグにclass="table"を追加するのです。そう、追加するのです。ついでに、足りないも追加しておきましょう。

<table class="table">
  <tr>
    <th>Title</th>
    <th>Body</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>

おお。バッチリバチバチですね。

cssのclassとかは、public/stylesheetの中のcssを見ればいいカンジです。

調子に乗って、サイドバーを追加しましょう。app/views/memos/index.html.erbに書きました。

<% content_for :sidebar do %>
  <h3>Sidebar</h3>
  <div class="block">
    <%= "Web App Theme " * 20 %>
  </div>
<% end %>

あ。スクショ（スクール水着の小学生ではない）撮り忘れた。

気にせず、テーマを変更してみましょう。Becというテーマです。ついでに、タイトルを指定してない時のデフォルトタイトルをapp_nameで指定します。

$ script/generate theme application --app_name="My Memos" --theme="Bec" 

すでにapp/views/layouts/application.html.erbがあるので、上書きするか聞いてきます。yで上書きです。

overwrite app/views/layouts/application.html.erb? (enter "h" for help) [Ynaqdh]

おお。一瞬でテーマ変更完了。

用意されているテーマです。

• Default
• Bec
• Bec-Green
• Blue
• Djime-Cerulean
• Greenish
• Kathleene
• Orange
• Drastic Dark
• Warehouse

最後に、メニューを追加してみましょう。app/views/layouts/application.html.erbを修正します。

<div id="main-navigation">
  <ul>
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
  </ul>
  <div class="clear"></div></div>
</div>

完成ー。

あ。さっき「最後」って書きましたが、これが最後です。こんなカンジでテーマを生成できます。

$ script/generate themed memos memo --layout=application --with_will_paginate

今までは、app/views/layouts/application.html.erbを生成していました。このコマンドでは、app/views/layouts/memos.html.erbを生成します。Railsのルールでは、application.html.erbよりも、mamos.html.erbが優先されます。また、will_paginateが使えるようになっています。

@memos = Memo.paginate(:per_page => 10, :page => params[:page])

いやー。スゴイですね。ステキですね。

各テーマのデモはこちら。この記事のスクショ（スクール水着の小学生ではない）は小さすぎるので、こちらでホンモノを見てください。

• http://pilu.github.com/web-app-theme/

サイトのメインにも使えそうですが、何より、管理画面の作成がラクになるのではないかと思います。ステキ。ステキ。ムテキ。個人的には、ステキシリーズの中ではSinatraに匹敵するインパクトです。それは、言い過ぎか。なんにせよ、一本取られた。キュア・ノゲイラに。

• Rubyの軽量Webフレームワーク「Sinatra」がステキ - このブログは証明できない。

Permalink | コメント(1) | トラックバック(5) | 20:40