Rails5でCKEditorを埋め込んで記事ソースを出力する

f:id:Wideplain:20170926182916p:plain RailsとCKEditor、Materializeで記事マークアップアプリを作りました。 名前は香ばしいですが、そこは気にせず技術的な話をしていきます。

概要

プレーンなテキストではニューサイトやブログをフレームワークで作った場合、段落管理(pタグ)や見出し管理(hタグ)、画像埋め込み(img)などがめんどくさいですよね。 CMS用のプラグインないしGemは色々あるようですが、今回はCKEditorを使います。 管理画面などにこれを埋め込むことでHTMLタグの自動マークアップをアプリが全部やってくれるようになります。 CKEditor自体はgithubで公開されているのでcloneして組み込んでいく方法もあると思います。今回は開発時間短縮のため全部Gemでやります。

最終目標

CKEditorを実際にform_forで実装した画面

f:id:Wideplain:20170926170627p:plain

出力結果

f:id:Wideplain:20170926170701p:plain ここではあえてプレーンなテキストとしてRawのHTMLマークアップを出力しています。この処理をどうにかすればブログ投稿などに応用できるでしょう。

開発開始

Rails newする

$ rails new editor

追加したGem

Gemfile

~省略~
gem 'materialize-sass' #見た目を整えるためCSSフレームワークを導入
gem 'devise' #ユーザー認証
gem 'carrierwave' #画像のアップデート
gem 'mini_magick'
gem 'ckeditor' #CKEditorそのもの
gem 'jquery-turbolinks' #jquery動かない対策 
~省略~

この時、一応CarrierwaveとMini_magickを入れないとCKeditorの全機能が使えず最悪動きません。

bundle install

ターミナル
$ bundle install

$ rake db:create

$ bundle update  # bundle updateしないとCKEditorが動かないらしい

コーディング

ターミナル
$ rails g scaffold post title body:text #記事を書けるようにTitleとbodyカラムを作る

$ rake db:migrate

$ rails generate ckeditor:install --orm=active_record --backend=carrierwave #ckeditorをRailsにインストール

本番環境でもCKEditorを動かせるようにproduction.rbに以下を記述

production.rb
Rails.application.configure do
# ~省略~
  config.assets.compile = true #記述をtrueにする
# ~省略~
  config.assets.precompile += Ckeditor.assets
  config.assets.precompile += %w( ckeditor/* )
  config.autoload_paths += %W(#{config.root}/app/models/ckeditor)
end

form_forに埋め込んでいく

ここではScafolldでできた_form.html.erbに書いていきます

_form.html.erb
 <%= form_for(post) do |f| %>
  <% if post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
      <% post.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>

  <%= form_for @post do |f| %>
  <div><%= f.cktext_area :body, class: "hogehoge" %></div>
  <div class="row new--post__submit">
  <%= f.submit "送信", class: "waves-effect waves-light btn" %>
  </div>
  <% end %>
<% end %>

ここのポイントはf.cktext_areaの一行。この記述があることでform_forでRailsにCKEditorを実装してパラメーターを送れます。

MaterializeでViewを整える

任意で各Viewファイルをデザインしていきます。今回は割愛。

プリコンパイルする

ターミナル
$ rake assets:precompile

これをしないと本番環境で動かない。

これでCKEditorの実装は終わり。 Githubに公開しているのでご自由に。

GitHub - wideplain/KamiEditor: 記事形式のテクストを出力するアプリケーション

Qiitaで初めて投稿した

内容はプログラミングではないですが

Qiitaで初めて投稿した。

qiita.com

Matzさんの講演会を走り書きでメモしたもの。走り書きにもかかわらず16もいいねがついていることにびっくりしています。やっぱみんなMatzさん好きなんすね〜。 ちょうど昨日今日明日と#RubyKaigiが行われております。Ruby初心者としては行ってみたかったのですが、広島は遠いので断念しました。

もっと実力がついたら行こうと思っています。

アウトプットの重要性

Matzさんはこの公演の中で、特にアウトプットの重要性を説かれていました。その通りだと思います。 勉強するだけだったら誰にでもできる。でもそれを何らかの形にして世に送り出すという行為は、案外難しいものです。Matzさんはその難しさを「心理的障壁」と呼んでおりました。こうしてBlogでモノを書くというのも、私自身高校からメディア運営したり色々とやってきましたがやはり続かないものです。Qiitaもエンジニアとして勉強しはじめてずっと読むことはやってきたけれども、書くこともないと思って今まで書きませんでした。

でも、インプットだけなら誰でもできる。恥ずかしがらずアウトプットもやった方が「生き残れる」可能性は限りなく高い。アウトプットまでやる人は案外少ないものです。

どこまで続くかわからないけれど、QiitaもBlogも沢山書いていきたいと思います。