はじめに

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

TL;DR

  • Gemfilegem '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

まとめ

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

その他・メモ

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

参考文献

関連記事