はじめに

Rails で静的ページを作成する方法について調べて、thoughtbot/high_voltage に辿り着いたので使い方を整理した。

TL;DR

• Gemfile に gem 'high_voltage' を追加して bundle でインストール
• app/views/pages/ 配下に静的ページ用の view ファイルを作成
• link_to 'About', page_path('about') のようにすると静的ページへのリンクを生成可能

目次

1. はじめに
2. TL;DR
3. 環境・条件
4. 詳細
   1. セットアップ
   2. view ファイルの作成
   3. 静的ページへのリンク
   4. ルーティング階層の変更
      1. トップレベル
   5. レイアウトファイルの変更
5. まとめ
6. その他・メモ
7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11

$ ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-darwin18]

$ bundle info rails
* rails (5.2.3)

$ bundle info slim-rails
* slim-rails (3.2.0)

$ bundle info high_voltage
* high_voltage (3.1.2)

詳細

セットアップ

Gemfile に追記してインストール。

1
2

...
gem 'high_voltage'

1

$ bundle

view ファイルの作成

app/views/pages ディレクトリがなければ作成。

1

$ mkdir -p app/views/pages

app/views/pages/ 配下に静的ページ用の view ファイルを作成する。今回は About ページを想定、slim を使うことが多いので about.html.slim を作成しているが、erb を使うのであれば about.html.erb とする。

1

$ touch app/views/pages/about.html.slim

app/views/pages/about.html.slim を編集、内容は何でも良いので適当

1

h1 This is about page by high_voltage

静的ページへのリンク

rails routes で確認すると page というパスが増えているのが分かる。

1
2
3

$ bundle exec rails routes
Prefix Verb URI Pattern    Controller#Action
  page GET  /pages/*id     high_voltage/pages#show

つまり page_path('about') とすることで、/pages/about へのリンクが生成される。

1
2

= link_to 'About', page_path('about')
# => <a href="/pages/about">About</a>

このリンクにアクセスすると、app/views/pages/about.html.slim の内容が表示される。

ルーティング階層の変更

トップレベル

デフォルトだとリンク先が https://your.web.page/pages/about のようになる。

これを https://your.web.page/about のようにしたい場合は、config/initializers/high_voltage.rb を作成する。

config/initializers/high_voltage.rb

1
2
3

HighVoltage.configure do |config|
  config.route_drawer = HighVoltage::RouteDrawers::Root
end

上記ファイルを作成するとルーティングが変更される。

1
2
3

$ bundle exec rails routes
Prefix Verb URI Pattern    Controller#Action
  page GET  /*id           high_voltage/pages#show

レイアウトファイルの変更

静的ページ用のレイアウトファイルを利用したい場合は、config/initializers/high_voltage.rb に設定を追加する。

app/views/layouts/static.html.slim をレイアウトファイルとする場合は以下のように設定。

1
2
3

HighVoltage.configure do |config|
  config.layout = 'static'
end

まとめ

• Gemfile に gem 'high_voltage' を追加して bundle でインストール
• app/views/pages/ 配下に静的ページ用の view ファイルを作成
• link_to 'About', page_path('about') のようにすると静的ページへのリンクを生成可能

その他・メモ

• 通常通り Ruby/Rails のメソッドが呼べるので、content_for とか使えばタイトルも指定可能

参考文献

• Rails で静的ページを作る簡単な方法 - machida
• thoughtbot/high_voltage: Easily include static pages in your Rails app.

関連記事

• Rails で rambulance を使ってエラー種別ごとに動的にエラーページを切り替える
• Rails で favicon の設定
• Rails で OGP を content_for で設定する方法
• Rails で簡易的な年齢認証(年齢確認)を導入する方法
• Rails で既存の DB を利用するアプリケーションの作成方法(DB 参照のみ)
• Rails で Devise と論理削除を両立する方法
• JavaScript で URL のクエリパラメータを操作する方法
• jQuery Select2 で、初期値の設定と選択状態のクリア