Help us understand the problem. What is going on with this article?

Railsでpublic以下の静的ページ(404.htmlといったエラーページ等)をデプロイ時に生成するgemを作った

はじめに: 404.htmlや500.htmlといったエラーページをhtmlで直接書くのって面倒じゃないですか?

Railsでは独自デザインの404ページや500ページをpublic/404.htmlpublic/500.htmlに置くことができます。
ただし、このファイルは静的なファイルなので、HTMLやCSSも静的にしなければなりません。
そのためデザインをサイト全体で合わせようとして、以下のようにHTML内にがんばって静的なCSSを埋め込んだりしているケースもあるのではないでしょうか?

public/404.html
<html>
  <head>
    <style type="text/css">
      // コンパイル済みのapplication.cssからコピペした自前のCSSが何百行も並んだり
      // ...
      // ...
      // ...
    </style>
    <!-- もしくはpublic以下に専用のcssファイルを用意したり -->
    <link rel="stylesheet" media="all" href="/css/errors.css" />
  </head>
  <body>
    <h1>404 Not found</h1>
    <p>ページが見つかりません。</p>
  </body>
</html>

この問題を解決するために、hanmotoというgemを作りました。
このgemは弊社ソニックガーデンの複数のプロジェクトで1年以上、本番利用されてきた実績があります。

今回の記事ではこのgemの概要と使い方を紹介します。

何が出来るの?

  • hamlやslimを使って静的ページが書ける
  • WebpackerやSprocketsで生成したcssをそのまま使える
  • Layoutファイルを使ってエラーページをDRYに管理できる
  • link_to等のヘルパーが使える
  • public以下にファイルが吐き出されるので、railsが死んでも表示出来る

インストール

Gemfile
gem 'hanmoto'
$ bundle install

使い方

404.htmlの例

レイアウトを用意

app/views/layouts/public.html.haml
!!!
%html
  %head
    %title #{yield(:title)} | MyAPP
    = stylesheet_pack_tag 'application', media: 'all'
    = favicon_link_tag '/favicon.ico'
  %body
    = yield

ビューを用意

app/views/public_pages/404.html.haml
- provide(:title, 'Not found')
%h1 Not found
%p This webpage is not found.
%p= link_to 'Home', root_path

public以下にファイルを生成

$ rake assets:precompile

OR

$ rake hanmoto:publish

.gitignorepublic/404.htmlを追加しておいて、デプロイ時にrake assets:precompileまたはrake hanmoto:publishを実行するという使い方を想定しています。

出力結果

public/404.html
<!DOCTYPE html>
<html>
<head>
<title>Not found | MyAPP</title>
<link rel="stylesheet" media="all" href="/packs/css/application-cc5b8b21.css" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
</head>
<body>
<h1>Not found</h1>
<p>This webpage is not found.</p>
<p><a href="/">Home</a></p>
</body>
</html>

htmlファイル以外の例

robots.txtを動的に生成する場合

app/views/public_pages/robots.text.erb
<% unless Rails.env.production? %>
User-Agent: *
Disallow: /
<% end %>

設定

config/initializers/hanmoto.rb
Hanmoto.configure do |config|
  # ビューファイルを置くディレクトリを変更したい場合は指定してください
  # config.view_dir = 'public_page'

  # レイアウトファイルを変更したい場合はファイルタイプ別に指定してください
  # config.layouts = {
  #   html: 'public',
  # }
end

その他

仕組み

Herokuでも使える?

RailsアプリをHerokuにデプロイすると自動的にrake assets:precompileが実行されるので、特に意識する必要なく利用できます。

gemの名前の由来

publicに書き出す -> publisher -> 版元

リポジトリ

https://github.com/aki77/hanmoto

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした