Rails+Markdown でなにかつくるー Step1:Markdown エディタ Step2:Markdown メモ
Ruby/ Ruby on Rails ビギナーズ勉強会 第 8 回2015/10/24 平田智子
about me•平田智子(ひらたともこ)
•新潟県生まれ、大阪出身です
•普段は vb.net で開発しています• web 勉強歴はもうすぐで1年
• Facebook:hirata.tomoko• blog:http://tomoko-tsubasa.hateblo.jp/
agenda•Step1. Markdown エディタ• RoR ビギナーズ勉強会 第 7 回
•Step2. Markdown メモ• RoR ビギナーズ勉強会 第 8 回
•Step3. Markdown からスライド作成• RoR ビギナーズ勉強会 第 9 回 ( 予定)
Markdown とは
Markdown (マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。もとはプレーンテキスト形式で手軽に書いた文書から HTML を生成するために開発された。 現在では HTML のほかパワーポイント形式や LaTeX 形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。
[Markdown - ウィキペディア ](https://ja.wikipedia.org/wiki/Markdown )
簡単な設計
View
Controller
ModelAngularjs
RubyonRails
Step 1 marked.js
Step 2 RedCarpet
使用する 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.
参考にしたサイト
• Step1 参考
• Step2 参考
AngularJS で markdown のリアルタイムプレビュー機能を軽く作ってみる Link
Rails Markdown サンプルアプリ Link
rails generate で大枠を作成します。
rails _4.1.1_ new note_mdcd note_mdrails g scaffold Page body:textrake db:migrate
必要な gem,js を入れます
• Gemfile
• \vendor\assets\javascripts• \app\assets\javascripts\application.js
gem "redcarpet"," ~> 2.3.0"gem "marked-rails"
angular.min.jsangular.min.js.mapmarked.jshighlight-8.8.0.js
実際は他に CSS 系の gem とかもいれます
//= require angular.min //= require app //= require marked //= require highlight-8.8.0
AngularJS を使う準備をします
• \app\assets\javascripts\app.coffeeapp= angular.module('sampleApp', [])
Redcarpet を使う準備をします
• \app\helpers\application_helper.rbmodule 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 endend
Markdown で表示できるようにします
• \app\views\pages\show.html.erb
• \app\views\pages\_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 >
表示する部分
入力する部分
リアルタイムで表示する部分
リアルタイムプレビュー用の js を書きます( angularjs)• \app\assets\javascripts\controllers\
parsedMarkdownCtrl.coffeeangular.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
Demo
今後の課題
①Rails と Angular を使うときはすみ分けを考える必要がある(らしい)
② レイアウトをほとんど編集していないので貧弱
③ 一覧ページに表示させる、各メモのタイトルも登録できるようにしたい