Ruby/ Ruby on Railsビギナーズ勉強会 第8回資料です

1. Rails+Markdownでなにかつくる
ーStep1:Markdownエディタ Step2:Markdown メモ
Ruby/ Ruby on Railsビギナーズ勉強会 第8回
2015/10/24 平田智子

2. about me
• 平田智子（ひらたともこ）
• 新潟県生まれ、大阪出身です
• 普段はvb.netで開発しています
• web勉強歴はもうすぐで１年
• Facebook:hirata.tomoko
• blog:http://tomoko-tsubasa.hateblo.jp/

3. agenda
•Step1. Markdownエディタ
• RoRビギナーズ勉強会 第7回
•Step2. Markdownメモ
• RoRビギナーズ勉強会 第8回
•Step3. Markdownからスライド作成
• RoRビギナーズ勉強会 第9回(予定）

4. Markdownとは
Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつ
である。
もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発され
た。
現在ではHTMLのほかパワーポイント形式やLaTeX形式のファイルへ変換するソフト
ウェア（コンバータ）も開発されている。
[Markdown - ウィキペディア](https://ja.wikipedia.org/wiki/Markdown )

5. 簡単な設計
View
Controller
Model
Angularjs
RubyonRails
Step 1 marked.js
Step 2 RedCarpet

6. 使用するMarkdownパーサー
• Redcarpet
• marked.js
Redcarpet is a Ruby library for Markdown processing that
smells like butterflies and popcorn.
A full-featured markdown parser and compiler, written in
JavaScript. Built for speed.

7. 参考にしたサイト
• Step1 参考
• Step2 参考
AngularJSでmarkdownのリアルタイムプレビュー機能を軽く
作ってみる Link
Rails Markdownサンプルアプリ Link

8. rails generateで大枠を作成します。
rails _4.1.1_ new note_md
cd note_md
rails g scaffold Page body:text
rake db:migrate

9. 必要なgem,jsを入れます
• Gemfile
• vendorassetsjavascripts
• appassetsjavascriptsapplication.js
gem "redcarpet"," ~> 2.3.0"
gem "marked-rails"
angular.min.js
angular.min.js.map
marked.js
highlight-8.8.0.js
実際は他にCSS系のgemとかもいれます
//= require angular.min
//= require app
//= require marked
//= require highlight-8.8.0

10. AngularJSを使う準備をします
• appassetsjavascriptsapp.coffee
app= angular.module('sampleApp', [])

11. Redcarpetを使う準備をします
• apphelpersapplication_helper.rb
module ApplicationHelper
@@markdown = Redcarpet::Markdown.new
Redcarpet::Render::HTML,
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
def markdown(text)
@@markdown.render(text).html_safe
end
end

12. Markdownで表示できるようにします
• appviewspagesshow.html.erb
• appviewspages_form.html.erb
<% = markdown @page.body %>
<%= f.text_area :body, "ng-model" => "body" , "ng-change" =>
"pars e Markdown()" %>
<div class='right' id='previ ew'></div >
表示する部分
入力する部分
リアルタイムで表示する部分

13. リアルタイムプレビュー用のjsを書きます
（angularjs)
• appassetsjavascriptscontrollersparsedMarkdownCtrl.coffee
angular.module('sampleApp').controller "parsedMarkdownCtrl" ,
($scope) ->
$scope.init= ->
$scope.body= $("#page_body").val()
$scope.parseMarkdown()
$scope.parseMarkdown= ->
marked.setOptions langPrefix: ''
$("#preview").html(marked($scope.body))
$('#preview pre code').each (i, e) ->
hljs.highlightBlock e, e.className
return

14. Demo

15. 今後の課題
①RailsとAngularを使うときはすみ分けを考える必要
がある（らしい）
②レイアウトをほとんど編集していないので貧弱
③一覧ページに表示させる、各メモのタイトルも登録で
きるようにしたい