• Home
• コーポレートブログ
• Rubyで動くCMS、「RefineryCMS」を動かしてみた話

こんにちは。
好きな食べ物： カレー、ラーメン、ハンバーグ！
嫌いな食べ物： しいたけ。。。
味覚は子ども、見た目はおっさん、Rubyistの吉岡です！！

昨年の11月に入社し、サービス企画グループに所属しており、新サービスや社内システムの企画・開発をメインに業務を行っております。入社して３ヶ月近くが経ち、会社にも慣れてきた今日この頃です。

さて、突然話は変わります。CMSと言えば圧倒的にWordPressが有名かと思います。（私も実は好きです。）ただ、PHPで動いているので、せっかくならRubyで動くCMS（オープンソース）で良いものはないものかと思い探しました。

そこで見つけたのがRefineryCMSです。今回はRefineryCMSを利用してサイトを作りHerokuに公開してみましたので、その作業手順と感想をお伝えしたいと思います。

1. RefineryCMSの紹介

特徴は以下のようになります。

• ライセンスがMIT
• Railsのバージョンに追従している（2018/01/23時点では5.1に対応）
• 管理画面がシンプルで使いやすい
• 拡張性がモジュール式で拡張可能（公式のモジュールも多数あり）
• 日本語対応（モジュールが一部対応してないけど。。）
• ドキュメントが充実している
• RailsEngineの機能を利用しているため、既存のプロダクトへの組込も可能

また、ざっと調べた限りですと、Githubのスター数が3,627でRubyのCMSでは一番多そうなので、信用できそうです。

2. 設定方法

実行環境

Ruby 2.5.3
Rails 5.1.6.1
refinerycms 4.0

Refinery CMSのインストール・プロジェクト作成

# 公式に提供されているテンプレートを実行してプロジェクトの作成を行います。（Railsのバージョン指定も必要です）
$ rails _5.1.6.1_ new my_site -m https://www.refinerycms.com/t/4.0.0
$ cd my_site
$ bundle exec rails db:create
$ bundle exec rails db:migrate
$ bundle exec rails db:seed

サーバを起動してアクセスし、正常に動作しているか確認する。

$ bundle exec rails s

公開画面
http://localhost:3000

管理画面
http://localhost:3000/refinery
（初期ユーザの登録が必要です。）

アクセスが確認できれば、無事に初期設定は完了です。これでサイトの作成が可能です！！ただし、このままではデザインや設定が初期状態ですので、ここから編集していきたいと思います。

サイト名（title）の設定

ここで設定した名前はHTMLのソースのtitleタグの値に使用されます。

$ vi config/initializers/refinery/core.rb

# Site name
- # config.site_name = "Company Name"
+ config.site_name = "my site name"

# config.site_name = "Company Name" のコメントを外して、自分の好きなサイト名をつけます。

日本語化

初期状態では言語が英語のままなので、日本語化します。

$ vi config/initializers/refinery/i18n.rb

- # config.default_locale = :en
+ config.default_locale = :ja
- # config.current_locale = :en
+ config.current_locale = :ja
- # config.default_frontend_locale = :en
+ config.default_frontend_locale = :ja
- # config.frontend_locales = [:en]
+ config.frontend_locales = [:ja]

さらに、seeds.rbの行頭にlocaleの設定を追加します。（これをしないとトップページの初期データが日本語化せず、編集できなくなります。）

$ vi db/seeds.rb

+ I18n.locale = ::Refinery::I18n.default_locale

$ bundle exec rails db:migrate:reset
$ bundle exec rails db:seed

rails sでサーバ起動後に管理画面（http://localhost:3000/refinery）にアクセスし、日本語になっていたら完了です。

デザインテンプレートの設定

まずは、サイト作成に必要なテンプレートをジェネレートします。

# レイアウト作成
$ bundle exec rails refinery:override view=layouts/application.html
# ヘッダー作成
$ bundle exec rails refinery:override view=refinery/_header.html
# フッター作成
$ bundle exec rails refinery:override view=refinery/_footer.html
# ページのテンプレート作成
$ bundle exec rails refinery:override view=refinery/pages/show
# トップページのテンプレート作成
$ bundle exec rails refinery:override view=refinery/pages/home

あとは、ジェネレートしたテンプレートファイルをお好きに編集するだけです。

その他

Turbolinks削除

デフォルトの状態では、turbolinksが有効になりますので、必要ない場合は、読み込みを削除します。

$ vi app/assets/javascripts/application.js

//= require rails-ujs
- //= require turbolinks
//= require_tree .

URLのカスタマイズ

デフォルトだと上記画像のようにURLがイマイチ（日本語がそのままURLに入る）ので、custom slagをオンにする

$ vi config/initializers/refinery/pages.rb

# Set this to true if you want to override slug which automatically gets generated
# when you create a page
- # config.use_custom_slugs = false
+ config.use_custom_slugs = true

設定後、任意のURL名を入力したらOKです！

3. Herokuへデプロイ

注） 事前にHerokuのアカウント作成とheroku toolbelt のインストールを行ってください。

HerokuのDBはPostgreSQLを使用するので、productionではPostgreSQLを使用するように設定変更をします。

$ vi Gemfile

+ group :production do
+   gem 'pg'
+ end

変更後、Gemfile更新して、アプリをアップロードします。

$ bundle install
$ git add .
$ git commit -m "setup for Heroku"

Herokuへログインし（ブラウザを利用してログインできます。）、Herokuで動かすアプリを作成します。 [xxxxxxxx]は任意の値を入力してください。 また、PostgreSQLを利用しますので、addonを有効化も行います。

$ heroku login
$ heroku create [xxxxxxxx] --stack cedar
$ heroku addons:add heroku-postgresql

Herokuの設定が完了したら、いよいよアプリを公開します。

$ git push heroku master
$ heroku run rake db:migrate
$ heroku run rake db:seed

上記コマンドがエラーなく実行できましたら、下記のコマンドでサイトにアクセス可能です。

$ heroku open

もし、precompile関連でエラーが出る場合は下記の変更を試してみてください。

$ vi config/application.rb

class Application < Rails::Application
  # Initialize configuration defaults for originally generated Rails version.
  config.load_defaults 5.1

  # Settings in config/environments/* take precedence over those specified here.
  # Application configuration should go into files in config/initializers
  # -- all .rb files in that directory are automatically loaded.
+  config.assets.initialize_on_precompile = false
end

修正後、上記手順でHerokuへもう一度アップロードしてみてください。

参考

• https://www.refinerycms.com/guides/heroku
• https://devcenter.heroku.com/articles/getting-started-with-ruby

4. 所感

以上簡単ですが、RefineryCMSの設定方法をまとめてみました。基本機能を使うだけでしたら上記のとおり簡単に設定することが可能です。ですが、拡張を使用したりする場合、ドキュメントの通りに動かないケースもあるので、元のソースコードを読みながら設定する必要がありそうです。（場合によってはGemの修正も必要そうです。）また、機会がありましたら拡張設定などにも触れてみたいと思います。

今回この記事を書くためにRubyのCMSを設定してみて改めて思ったのは、Rubyでコードを書きながらサイトを作成するのは非常に楽しかったです！今後何かサイトを作る機会がありましたら利用を検討してみたいと思いました。この記事がRubyでウェブサイトを作って公開したいと言う人の役に立てば幸いです。

参考

• 公式サイト
  https://www.refinerycms.com/
• 公式ドキュメント
  https://www.refinerycms.com/guides
• 拡張一覧
  https://www.refinerycms.com/extensions
• リポジトリー
  https://github.com/refinery/refinerycms