はじめに

Railsで記事の作成/編集/削除を行うブログを実装することは簡単です。以下のようにscaffoldコマンドを実行するだけで、ブログに必要なコントローラー、モデル、マイグレーション、ビュー、ルーティングが作成されます。

$ rails generate scaffold Article title:string content:text

しかし、scaffoldコマンドで作成されるのはあくまでブログの基本的な機能だけです。例えば記事に設定するタグやアイキャッチ画像のような機能はscaffoldコマンドだけでは作成することができません。そうすると自分で実装する必要があるのですが、そういった機能の実装ははっきり言って面倒です。

本記事では、Headless CMSであるContentfulを使ってRailsで簡単にブログを実装する方法について説明します。

Headless CMSについて

ヘッドレスコンテンツ管理システム、またはヘッドレスCMSは、主にコンテンツリポジトリとして機能するバックエンドのみのコンテンツ管理システムです。ヘッドレスCMSは、組み込みのフロントエンドまたはプレゼンテーション層なしで、任意のデバイスで表示するためにAPIを介してコンテンツにアクセスできるようにします。 ウィキペディア（英語)

要するに「WordPressからブログの表示機能を削って編集画面とAPIだけ残したようなサービス」のことをHeadless CMSといいます（受け売りですがわかりやすい説明だったので引用）。

Contentfulについて

Contentfulとは、ドイツのスタートアップ会社が開発しているHeadless CMSです。Headless CMSの中で最も人気があり、世界中で使われているため情報も集まりやすいです。フリープランでは英語かドイツ語しか選べませんが、わかりやすいUIなのであまり操作に困るということはないでしょう。

Contentfulでは記事を作成/編集/削除できますが、記事を閲覧することはできません（プレビューは除く）。Contentfulから記事の情報（タイトルや本文）を別のアプリケーションで取得して表示する必要があります。

RailsでContentfulを使う

Contentfulの準備

記事の作成

Contentfulで適当な記事を作成しておきます。今回は以下のような記事を作成しました。

API keyの取得

上部のメニューから「Settings」をクリックし、「API keys」をクリックします。

API設定画面で「Add API key」ボタンをクリックします。

適当な名前を入力し、「Space ID」と「Access token」をコピーしておきます。

Contentfulの設定

ContentfulのGemをRailsに追加します。Gemfileに以下を追記し、bundle installを実行します。テストサーバーを起動している場合は再起動してください。

gem 'contentful'

Contentfulのクライアントを作成するためのヘルパーメソッドを作成します。application_helper.rbに以下を追記します。

module ApplicationHelper
  # 以下を追記
  def contentful
    @client ||= Contentful::Client.new(
      access_token: Rails.application.credentials.contentful[:access_token],
      space: Rails.application.credentials.contentful[:space_id],
      dynamic_entries: :auto,
      raise_errors: true
    )
  end
end

以下のコマンドを実行して、Credentialsを起動します。

$ EDITOR=vi rails credentials:edit

ContentfulのAPI設定で作成したアクセストークンとスペースIDを以下のように設定します。テストサーバーを起動している場合は再起動してください。

contentful:
  access_token: *******************************************
  space_id: ************

ルーティングの設定

今回は記事を作成/編集/削除するルーティングは必要ないので、記事の一覧と詳細を表示するルーティングのみを追加します。config/routes.rbに以下を追記します。

Rails.application.routes.draw do
  # 以下を追記
  resources :articles, only: [:index, :show]
end

コントローラーの設定

以下のコマンドを実行して、記事のコントローラーを作成します。

$ rails generate controller Articles index show

作成したコントローラーに以下を追記します。コントローラーからヘルパーメソッドを使う場合は先頭にview_contextを記述する必要があります。ビューからヘルパーメソッドを使う場合はそのままメソッド名だけで使えます。

class ArticlesController < ApplicationController
  def index
    @articles = view_context.contentful.entries(content_type: 'article')
  end

  def show
    @article = view_context.contentful.entry(params[:id])
  end
end

Contentful APIの詳細は以下のAPIリファレンスを参照してください。

ビューの設定

記事の一覧ページarticles/index.html.erbを作成し、以下を記述します。

<h1>記事一覧</h1>
<ul>
  <% @articles.each do |article| %>
    <li><%= link_to article.title, article_path(article.id) %></li>
  <% end %>
</ul>

記事の詳細ページarticles/show.html.erbを作成し、以下を記述します。

<h2><%= @article.title %></h2>
<%= @article.content %>

Markdownの設定

今回は本文をMarkdown記法で記述しているので、今のままだとMarkdown記法のままプレーンテキストとして表示されてしまいます。そこで、本文をMarkdownで装飾した形式に変換します。

Markdown装飾を有効にするGemを追加します。Gemfileに以下を追記し、bundle installを実行します。テストサーバーを起動している場合は再起動してください。

gem 'redcarpet'

redcarpetのヘルパーメソッドを作成します。markdown_helper.rbを作成し、以下を記述します。

module MarkdownHelper
  def markdown(text)
    unless @markdown
      options = {
        filter_html: true,
        autolink: true,
        space_after_headers: true,
        no_intra_emphasis: true,
        fenced_code_blocks: true,
        tables: true,
        hard_wrap: true,
        xhtml: true,
        lax_html_blocks: true,
        strikethrough: true
      }
      renderer = Redcarpet::Render::HTML.new(options)
      @markdown = Redcarpet::Markdown.new(renderer)
    end

    @markdown.render(text).html_safe
  end
end

記事の詳細ページarticles/show.html.erbを以下のように修正します。

<h2><%= @article.title %></h2>
# 以下を修正
<%= markdown(@article.content) %>

動作確認

テストサーバーを起動していない場合は起動し、http://localhost:3000/articlesにアクセスします。

リンクをクリックすると記事の詳細ページに遷移します。

Contentfulで記事の修正や追加をしてからRailsアプリを更新してみてください。Contentfulで行った変更がRailsアプリで即時反映されることを確認できるかと思います。

まとめ

記事の作成/編集/削除といった機能をHeadless CMSに移譲することでRailsアプリで実装する必要がなくなり、Railsアプリの開発速度向上が期待できます。また、すべてのRailsアプリで操作画面を統一できるというメリットもあります。

本記事を参考にして、Rails + Contentfulでブログを実装していただければと思います。