目次
この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
社会人2年目も中盤にさしかかっている中西です。
今回は、railsに導入可能なMarkdown用のエディタについて紹介します。
環境
Rails 4.1.4
Ruby 2.1.2
Markdownとは
Markdownとは、ジョン・グルーバー（John Gruber）によって2004年に開発され、その後、多くの開発者の手を経ながら発展してきた文章の書き方です。
「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML（もしくはHTML）文書へと変換できるフォーマット」として作成されています。
このMarkdown文章を書く場合のルール（記法）をMarkdown記法と呼びます。
詳しい記法については、下記を参照してください。
Daring Fireball: Markdown: Syntax
Markdown用エディタ
Markdownにもとづいた文章を、HTMLへ変換するgemはたくさんの種類が存在しています。
また、Markdown記法で入力を行えるエディタも存在しています。
しかし、Markdown記法での入力をサポートするようなエディタとなると、なかなか見つかりません。
今回は、そんなMarkdown記法での入力をサポートするエディタであり、railsに簡単に導入できるgemである「pagedown-bootstrap-rails」を紹介します。
pagedown-bootstrap-railsとは
「pagedown-bootstrap-rails」というgemは、「pagedown-bootstrap」をもとにrails用にgem化されたものです。
Markdown記法での入力をサポートするために、主要なMarkdown記法をボタン１つで適用することができます。
また、実際の表示がどうなるのか分かるように、入力内容をリアルタイムでプレビュー表示をしてくれます。
導入方法
まず下記のように、Gemfileのgemの宣言を追加します。
Gemfile
gem 'bootstrap-sass'
gem 'font-awesome-rails'
gem 'simple_form'
gem 'pagedown-bootstrap-rails'
「pagedown-bootstrap-rails」以外のgemについては、前提条件として必要となります。
次に、css及びjsを追加します。
application.css
/*= require pagedown_bootstrap */
application.js
//= require pagedown_bootstrap
//= require pagedown_init
sccの場合は下記のようになります。
application.css.scss
@import "pagedown_bootstrap";
SimpleFormをもちいて表示の変換部分を作成します。
app/inputs/pagedown_input.rb
class PagedownInput < SimpleForm::Inputs::TextInput
def input(wrapper_options)
out = "\n"
html_options = input_html_options.merge(class: 'wmd-input', id: "wmd-input-#{attribute_name}")
out << "#{@builder.text_area(attribute_name, merge_options(html_options, wrapper_options)) }"
if input_html_options[:preview]
out << ""
end
out.html_safe
end
private
def merge_options(html_opts, wrapper_opts)
html_opts.merge(wrapper_opts) { |_key, first, second| first + ' ' + second }
end
end
後は、エディタを表示したい部分に、下記のように記述するだけでエディタが表示されます。
<%= simple_form_for(@article) do |f| %>
<%= f.input :body, as: :pagedown, input_html: { preview: true, rows: 20 } %>
<% end %>
[マークダウン用エディタ.png:image]
まとめ
今回は、Markdown記法での入力をサポートするエディタである、「pagedown-bootstrap-rails」を紹介しました。
railsでブログサイト等を作成するときに、Markdown記法で記事を作成したい場合にはぜひ導入を検討してみてください。
