Rails+Markdown でなにかつくるー Step1:Markdown エディタ Step2:Markdown メモ

Ruby/ Ruby on Rails ビギナーズ勉強会 第 8 回2015/10/24 平田智子

about me•平田智子（ひらたともこ）

•新潟県生まれ、大阪出身です

•普段は vb.net で開発しています• web 勉強歴はもうすぐで１年

• 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 を使うときはすみ分けを考える必要がある（らしい）

② レイアウトをほとんど編集していないので貧弱

③ 一覧ページに表示させる、各メモのタイトルも登録できるようにしたい