Rubyで動くCMS、「RefineryCMS」を動かしてみた話

3行で言うと…


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

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


ミーティングのひとコマ

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

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

1. RefineryCMSの紹介

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

また、ざっと調べた限りですと、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がイマイチ(日本語がそのまま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です!


管理画面のCustom slug(赤字箇所)に入力した値がURLに適用される

Custom slugに入力した値がURLになる

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へもう一度アップロードしてみてください。

参考

4. 所感

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

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

参考

こちらの記事もオススメです!
ドキュメント生成ツール「MkDocs」でRedmine Guide日本語訳のWebサイトを作ってみた
オープンソースのドキュメント生成ツール「MkDocs」でドキュメントサイトが簡単に作れます。
コーディング作業で使用しているVisual Studio CodeとVim
Remdineの開発業務にVSCodeとVimを使っています。VSCodeは動作が軽くて使いやすいのが良いです。
2台持ちだからできるApple Watchで睡眠分析と心拍数測定
2台のApple Watchを使って睡眠分析や心拍数測定に活用しています。
英語を書くのが少し楽になった、GrammarlyとGoogle翻訳による英文チェック
文法に誤りはないか、意味が通じるかをチェックすることで英文を書くのが楽になりました。
初めてのプレゼン資料作成にも嬉しいkeynote便利機能
RubyWorld Conferenceで初めてプレゼン発表をしました。keynoteで作成して気づいた便利な機能を紹介します。
ファーエンドテクノロジーからのお知らせ(2019/07/18更新)
毎月開催、オライリー本の全冊公開のお知らせ(もくもく勉強会も同時開催)
ファーエンドテクノロジーが所蔵するオライリー本の全冊を公開します。あわせて当社セミナールームにて「もくもく勉強会」を開催します。
Redmine 4.0.4 / 3.4.11でファーエンドテクノロジーが開発したパッチ11件が採用
Redmine 4.0.4 / 3.4.11でファーエンドテクノロジーによるパッチが11件採用されました。
「FAREND NEWS」2019年第3号 発行
広報紙「FAREND NEWS」2019年第3号を発行しました。弊社サービスの運用・サポートに携わっているスタッフや弊社の取り組みをご紹介します。
Redmineの最新情報をメールでお知らせする「Redmine News」配信中
新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け