Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
agenda
•Step1. Markdownエディタ
• RoRビギナーズ勉強会 第7回
•Step2. Markdownメモ
• RoRビギナーズ勉強会 第8回
•Step3. Markdownからスライド作成
• RoRビギナーズ勉強会 ...
Markdownとは
Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつ
である。
もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発され
た。
現在ではHTMLのほかパワーポイント形...
簡単な設計
View
Controller
Model
Angularjs
RubyonRails
Step 1 marked.js
Step 2 RedCarpet
使用するMarkdownパーサー
• Redcarpet
• marked.js
Redcarpet is a Ruby library for Markdown processing that
smells like butterflies ...
参考にしたサイト
• Step1 参考
• Step2 参考
AngularJSでmarkdownのリアルタイムプレビュー機能を軽く
作ってみる Link
Rails Markdownサンプルアプリ Link
rails generateで大枠を作成します。
rails _4.1.1_ new note_md
cd note_md
rails g scaffold Page body:text
rake db:migrate
必要なgem,jsを入れます
• Gemfile
• vendorassetsjavascripts
• appassetsjavascriptsapplication.js
gem "redcarpet"," ~> 2.3.0"
gem "m...
AngularJSを使う準備をします
• appassetsjavascriptsapp.coffee
app= angular.module('sampleApp', [])
Redcarpetを使う準備をします
• apphelpersapplication_helper.rb
module ApplicationHelper
@@markdown = Redcarpet::Markdown.new
Redcarp...
Markdownで表示できるようにします
• appviewspagesshow.html.erb
• appviewspages_form.html.erb
<% = markdown @page.body %>
<%= f.text_are...
リアルタイムプレビュー用のjsを書きます
(angularjs)
• appassetsjavascriptscontrollersparsedMarkdownCtrl.coffee
angular.module('sampleApp').co...
Demo
今後の課題
①RailsとAngularを使うときはすみ分けを考える必要
がある(らしい)
②レイアウトをほとんど編集していないので貧弱
③一覧ページに表示させる、各メモのタイトルも登録で
きるようにしたい
Upcoming SlideShare
Loading in …5
×

Rails+Markdownでなにかつくる

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

  • Login to see the comments

Rails+Markdownでなにかつくる

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

×