【Rails】Rails + Contentfulで簡単にブログを実装

はじめに

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でブログを実装していただければと思います。

関連記事

【Ruby】Bundlerを使ってRubyGemsを作成/公開する方法
# はじめに Bundlerを使ってRubyGemsを作成および公開する方法について説明します。Bundlerを使わずにRubyGemsを作成/公開する方法については以下の記事を参照してください。 <iframe class="hatena [...]
2022年7月12日 23:18
【Ruby】RubyGemsを作成/公開する方法
# はじめに RubyGemsを作成および公開する方法について説明します。Bundlerを使ってRubyGemsを作成する方法については以下の記事を参照してください。 <iframe class="hatenablogcard" style [...]
2022年7月11日 21:52
【Rails】M1チップ搭載MacでRuby on Railsの開発環境構築
# はじめに M1チップ搭載MacにRuby on Railsの開発環境を構築する手順を記載します。 - MacBook Air (M1, 2020) - macOS Monterey 12.3.1 # Homebrew ## [...]
2022年5月5日 11:56
【Rails】Rakeタスクの基本情報と作成・実行方法
# はじめに Railsには標準でRakeというGemが同梱されています。RakeはRubyで実装されたMake(UNIX系のOSで使用できるコマンド)のようなビルド作業を自動化するツールです。Ruby Make、略してRakeというわけですね。 [...]
2022年3月7日 22:12
【Rails】モデルに外部キーを設定する方法とよく起こるエラー内容について
# はじめに Railsでモデルに外部キーを設定する方法について説明します。 # モデルに外部キーを設定する ## リレーションシップ 今回は1つのブログ記事は複数のコメントを持つ1対多のリレーションシップを例に説明します。現在は` [...]
2022年2月10日 14:18
【Rails】Capybaraのfill_inメソッドを実行すると「既存レコードの内容+指定した内容」がセットされる事象の原因と対処【RSpec】
# はじめに RSpec + Capybaraを使用して、Railsアプリの統合テストを実装しています。とあるモデルの編集画面において、入力フォームの内容を書き換えた上で送信し、レコードが更新されることを確認します。 入力フォームの内容を書 [...]
2022年1月27日 21:22
【Rails】GitHubのセキュリティアラートで発見された脆弱性を解消する方法
# はじめに GitHubにはセキュリティアラートという機能があります。セキュリティアラートはリポジトリに含まれるライブラリやパッケージの脆弱性を定期的にチェックし、脆弱性のあるライブラリやパッケージが発見されたらアラートで知らせてくれるという機 [...]
2022年1月16日 10:36
【Rails】devise-two-factorを使った2段階認証の実装方法【初学者】
# はじめに Railsアプリで2段階認証を実装するには、「rotp」というGemを使う方法の他に、「devise-two-factor」というGemを使う方法があります。「devise-two-factor」はその名の通り、IDとパスワードによ [...]
2021年12月12日 17:58