(cache) RailsのViewを自在にカスタマイズするための「Cosme」gem

	サイバーよしだ
	yoの技術メモ
	rick blog
	dera_memo
	note
	Pour l'écriture automatiq...
	mayaの記事
	中西のメモ帳
	φ(・ω・ )メモメモ
	Web Tech Notes

＞＞投稿者一覧

< Comableを支える技術〜できるだけコ... | ブログ記事一覧 | rails3のログ解... >

: 2015.10.01; カテゴリ：; RailsのViewを自在にカスタマイズするための「Cosme」gem

DoRubyの最新情報をTwitterでも配信してます

既存のViewに手を加えずカスタマイズするためのRails向けgem「Cosme」を紹介します。

■ はじめに

Railsには便利なgemがたくさんあり、この中にはロジックだけでなく画面のデザインであるViewを含んだものが数多くあります（たとえばActiveAdminやDevise、Comableなど）。これらをこのまま利用できれば楽ですが、認証のための項目を増やしたいとか商品価格の横には定価を載せたいとか、やりたいことが増えてくるとその一部に手を加えたくなるケースが少なからずあります。

通常Viewは一部分だけを変更することが不可能で、カスタマイズを行う場合はファイルを丸ごと置き換える形で対応することになります。ただしこの手法には、gemのバージョンアップの際にViewの更新を追うことができなくなってしまう、という欠点があります。

今回はこの欠点を補いつつ既存のViewをカスタマイズするためのgem「Cosme」を紹介します。

■ 使い方

1. gemのインストール

bundlerを利用している場合は下記の行を Gemfile に追加します。

gem 'cosme'

2. JavaScriptライブラリの読み込み

`app/assets/javascripts/application.js` に下記の行を追加します。

//= require cosme

3. ヘルパメソッドの組み込み

`app/views/layouts/application.html.erb` の <body> タグ直下に下記の行を追加します。

<%= cosmeticize %>

4. カスタマイズ内容を定義

カスタマイズ用のViewとメタ情報を記載した設定ファイルを `app/cosmetics` ディレクトリに設置します。

カスタマイズの定義を行うために `Cosme.define` というメソッドを呼び出します。

「target」はカスタマイズ対象で、jQueryのHTMLセレクタと同じ役割を果たします。

「action」はカスタマイズ方法で、「before」「after」「replace」をいずれかを指定します。

# app/cosmetics/after_example.rb
Cosme.define(
  target: '.example',
  action: :after
)

<%# app/cosmetics/after_example.html.erb %>
<h2>After Example</h2>

■ 結果

これで、すべての `example` というCSSクラスを持つHTML要素の後に「After Example」と表示されるようになりました。

例えば `app/views/layouts/application.html.erb` が下記のように `example` クラスを持つ要素を含んでいたとすると、最終的には「Example」のあとに「After Example」が表示されるようになります。

<%# app/views/layouts/application.html.erb %>
<html>
  <head>
    <title>Example</title>
    <%= stylesheet_link_tag '/application'/, media: '/all'/ %>
    <%= javascript_include_tag '/application'/%>
  </head>
  <body>
    <%= cosmeticize %>
    <div class="example">
      <h1>Example</h1>
    </div>
  </body>
</html>

上記の結果、<body> タグ内は下記のようになります。

<div class="example">
  <h1>Example</h1>
</div>
<h2>After Example</h2>

■ しくみ

CosmeはHTMLの置換処理を JavaScript 上で行っています。そのため動作速度や非JavaScript環境での動作を求める方にはあまりオススメできません。その一方でとてもシンプルな実装になっているためすべてのテンプレートエンジンに柔軟に対応できます。

同じことを実現できる「deface」というgemがありますが、こちらはActionViewを拡張することで実装されているため対応テンプレートエンジンが限定されており、またその一部にバグがある*1状態です（*1 2015/10/1現在: slimにおいてブロック内の要素がHTMLエスケープされてしまう https://github.com/spree/deface/issues/133 ）。ただし、動作速度を求めていてバグにも引っかからない場合はこちらのgemをオススメします。