1. 開発環境

M1 Mac Monterey 12.0.1
ruby3.0
rails6.1.4.1

githubはこちらです。

オリジナルアプリにActionTextかMarkdownかで迷ったのでミニアプリを作って比べてみることにしました。

2. 実装開始

2.1 アプリ作成、初期設定

まずは新しいアプリの作成をしていきます。
rails _6.1.4.1_ new markdown-blog -d mysql

database.ymlの編集をします。

config/database.yml

default: &default
  adapter: mysql2
  # encoding: utf8mb4
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock

2.2 turbolinksの無効化

以下の2つのファイルを編集、修正していきます。

app/javascript/packs/application.js

import Rails from "@rails/ujs"
// import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>MarkdownBlog</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <!-- 'data-turbolinks-track': 'reload'を削除 -->
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_pack_tag 'application' %>
    <!-- ここまで -->

  </head>

  <body>
    <%= yield %>
  </body>
</html>

2.3 必要なもののインストール

まずは追記をします。

gemfile

gem 'image_processing', '~> 1.2'

続いてターミナルで以下を実行していきます。

bundle install
rails db:create
rails active_storage:install
rails db:migrate
yarn add simplemde
yarn add inline-attachment

ここでは

ActiveStorage(ファイルアップロードの機能)
SimpleMDE(ブラウザ上のtextareaタグをMarkdownエディタを変換するOSS)
Inline Attachment(ブラウザ上からドラッグ&ドロップでのAjaxでのファイル送信を簡単に実装)

を導入しています。

2.4 model, controller, viewの編集

scaffoldでサクッと作成していきます。
rails g scaffold post content:text
rails db:migrate

続いて以下のファイルを編集します。

app/views/posts/_form.html.erb

<!-- 追記（画面で読み込むjsを読み込む） -->
<%= javascript_pack_tag 'post' %>

<%= form_with(model: post) do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
        <% post.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :content %>
    <!-- 編集 -->
    <%= form.text_area :content, { id: "markdown-editar"} %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

続いてapp/javascript/packs配下にpost.jsを作成します。
そして以下のように記述していきます。ここではSimpleMDEの導入と、ドラッグ&ドロップの処理を記述しています。

app/javascript/packs/post.js

//インストールした機能をimportする
import "inline-attachment/src/inline-attachment";
import "inline-attachment/src/codemirror-4.inline-attachment";
import 'simplemde/dist/simplemde.min.css'
import SimpleMDE from "simplemde";
import Rails from '@rails/ujs'

window.onload = function () {
  // textareaをMarkdownエディタにする
  const simplemde = new SimpleMDE({
    element: document.getElementById("markdown-editar"),
  });
  // エディタに画像がドラッグ&ドロップされた際の処理
  inlineAttachment.editors.codemirror4.attach(simplemde.codemirror, {
    uploadUrl: "/posts/attach", // POSTする宛先Url
    uploadFieldName: "image", // ファイルのフィールド名(paramsで取り出す時のkey)
    allowedTypes: ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'],
    extraHeaders: { "X-CSRF-Token": Rails.csrfToken() }, // セキュリティ対策
  });
};

2.5 ajaxの処理

rails g model attachment
で以下のように編集します。

app/model/attachment.rb

class Attachment < ApplicationRecord
  has_one_attached :image
end

続いてはコントローラーの処理です。ここでjson形式にして値を返します。

app/controller/posts_controller.rb

class PostsController < ApplicationController
  before_action :set_post, only: %i[ show edit update destroy ]

  # GET /posts or /posts.json
  def index
    @posts = Post.all
  end

  # 略

  # Ajax通信の記述を追記
  def attach
    attachment = Attachment.create! image: params[:image]
    render json: { filename: url_for(attachment.image) }
  end
　　　　# ここまで

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_post
      @post = Post.find(params[:id])
    end

    # Only allow a list of trusted parameters through.
    def post_params
      params.require(:post).permit(:content)
    end
end

最後に以下を追記してください。

config/route.rb

post 'posts/attach', to: 'posts#attach'

これで画像の処理ができました。しかし、これではmarkdownがhtmlに変換されずに出力されてしまいますので直していきます。
まずは現状確認からしていきましょう。

2.6 redcarpetの導入

現状確認

ドラッグ＆ドロップしてみてください。

うまくアップロードできていますが、create postをクリックすると...

これはまずいですね。そのまま表示されています。
これからmarkdownがhtmlに変換していきます。gemで解決します。

以下を追記してください。

gemfile

gem 'redcarpet'

bundle install

これでひとまず導入が完了です。
続いてapp/helperにmarkdown_helper.rbファイルを作成します。さらに以下のように記述していきます。

app/helper/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

さらに詳細ページを編集していきます。

app/views/posts/show.html.erb

<p id="notice"><%= notice %></p>

<p>
  <strong>Content:</strong>
  <!-- ここを編集 -->
  <%= markdown(@post.content) %>
</p>

<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>

これでアップした画像が表示されるはずです。

これで完了です！