開発者にとって一番難儀なのがデザインではないだろうか。いや、そうじゃないという人もいるだろうが筆者はそうだ。いつもデザインで悩んで、あげくの当てに放棄してしまう。そんな中、便利に使っているのがWeb App ThemeというRailsプラグインだ。HTMLファイルもあるのでRailsアプリケーションに限らず利用はできるが、ここではプラグインとして便利に使う方法を紹介したい。

まず最初はプラグインのインストールだ。

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

Initialized empty Git repository in #{RAILS_ROOT}/vendor/plugins/web-app-theme/.git/

remote: Counting objects: 72, done.

remote: Compressing objects: 100% (59/59), done.

remote: Total 72 (delta 15), reused 9 (delta 0)

Unpacking objects: 100% (72/72), done.

From git://github.com/pilu/web-app-theme

* branch HEAD -> FETCH_HEAD

これだけでインストールは完了する。次にテーマの生成になる。

$ ./script/generate theme

exists app/views/layouts

create public/stylesheets/themes/default/

create app/views/layouts/application.html.erb

create public/stylesheets/web_app_theme.css

create public/stylesheets/web_app_theme_override.css

create public/stylesheets/themes/default/style.css

この状態でサーバを立ち上げてアクセスすると以下のように表示される（元々のindex.htmlは削除して、ルーティングの設定も変更されている必要がある）。なお、ファイルの内容は修正済なのでご注意いただきたい。

これが最も基本的なスタイルだ。次にテーマを変更する場合。テーマは全部で9種類用意されている。「bec-green」「bec」「blue」「djime-cerulean」「drastic-dark」「kathleene」「orange」「reidb-greenish」「warehouse」をテーマとして指定すれば良いだけだ。

$ ./script/generate theme –theme=blue

exists app/views/layouts

create public/stylesheets/themes/blue/

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

force app/views/layouts/application.html.erb

identical public/stylesheets/web_app_theme.css

identical public/stylesheets/web_app_theme_override.css

create public/stylesheets/themes/blue/style.css

そうすれば次のようにテーマが変更されて表示される。

もしapplication.html.erbが嫌であれば、Layoutを指定して変更できる。

$ ./script/generate theme application2 # ここではapplication2.html.erbを指定。

exists app/views/layouts

exists public/stylesheets/themes/default/

create app/views/layouts/application2.html.erb

identical public/stylesheets/web_app_theme.css

identical public/stylesheets/web_app_theme_override.css

identical public/stylesheets/themes/default/style.css

これだけで手軽にテーマに対応したデザインができてしまう。デザイン自体、メニューがあったり、サブメニューがある、テーブルやフォームも考慮されており、さらにメッセージや2カラムフォームも利用できる。リストやログイン画面なども考慮されている等、デザインで厄介になりそうなポイントはきちんと押さえられている。これならば大抵のWebサイトの雛形として使えるのではないだろうか。

実際に使ってみた感じでは、フッターが左側のカラムについているので、幅広のフッターにしたい時にちょっと苦労するといった程度だ。それ以外はとても手軽に使えて、見栄えもよく、開発する気を損なわないで済む。デザインで苦労した経験のある方はぜひ使ってみて欲しいライブラリだ。

その他画面は詳細にて。

(続きを読む…)