Railsアプリ内にマークアップのプレビュー環境を作る

RailsでのWebアプリ作成時、マークアップのプレビュー環境どうしてますか？
一般的なのは、HTMLコーダーとRailsエンジニアが居て、HTMLコーダーにHTMLをばーっと書いてもらってそれをRailsエンジニアがErb化して…みたいな流れと思われます。

ですが

• コーディング環境との差異を限りなく少なくするために、Railsと同じ静的ファイルを使ってマークアップしてもらいたい
• headerとかの共通パーツ、 layouts/*.html.erb 使って共通化してほしい
• Rails上でCSS, JSの簡単な修正を行う時に一々マークアップ環境立ち上げて修正してそのファイルをRailsにコピーして…とかが嫌だ
• とかをViewヘルパーに書き換えるの面倒くさい。。。

みたいなお気持ちになると思います。
そこで、簡単に以上を解決できる方法をご紹介します。

マークアッププレビュー用の環境をRails内に作る

作りましょう。

マークアッププレビュー用のcontroller, routesを実装する

まずはcontroller, routesから実装します。

app/controllers/markup_preview_controller.rb

class MarkupPreviewController < ApplicationController
  def home
    page_name = params[:page_name]

    if page_name.nil?
      path = "#{File.expand_path('../../views/markup_preview', __FILE__ )}/"

      @page_list = Dir.glob(path + '*')
                     .map { |file_name| file_name.sub(/\.html\.erb/, '').sub(/#{path}/, '') }
                     .select { |file_name| file_name != 'home' }
                     .sort
    else
      render "markup_preview/#{page_name}.html.erb"
    end
  end
end

config/routes.rb

Rails.application.routes.draw do
  get 'markup_preview', to: 'markup_preview#home'
end

こんな感じです。

少し気遣いがあり、viewファイルを作るごとにroutes.rbを書いてもらうのはなんだか面倒なので、 /markup_preview にアクセスした時、自動で app/views/markup_preview にある erb ファイルをリストで表示するような作りになっています。

erb一覧表示用のviewを作る

その一覧表示用のviewを最後に作りましょう。

app/views/markup_preview/home.html.erb

<h2>マークアップ ページ一覧</h2>

<ul>
  <% @page_list.each do |page_name| %>
    <li>
      <a href="/markup_preview?page_name=<%= page_name %>"><%= page_name %></a>
    </li>
  <% end %>
</ul>

装飾したい人はcssとか適当につければよいでしょう.

使い方

1. app/views/markup_preview 内にerbファイルを作ってもらう。
2. 以上！

〆

たったこれだけの実装で簡単にRailsアプリ内にマークアップ環境を作ることが出来ました。
冒頭で挙げたような問題点も解決できていて、いい感じですね。
ぜひご活用ください。