JavaScript

Rails4でMarkdownをリアルタイムプレビュー〜vue.js&marked.js

投稿日:

vue.jsとは

vue.jsはインタラクティブなウェブインターフェイスのための軽量なJavascriptのフレームワーク.
angularぽいけど、より簡単/軽量という評判.

公式
vuejs.org/

このサンプルを参考にRails4のtextareaフィールドでmarkdownをリアルタイムプレビューできるようにしてみた
vuejs.org/examples/index.html

Hello vue.js

まずはGetting Startedを参考にTodoアプリをつくってみる

Gemfile

bundle

application.js

main#index

routes.rb

index.html.erb

index.js.coffee

できた

おおざっぱにいうと、
– 基本は、 new View({el: '#demo'}) の部分で、親になるhtml要素にオブジェクトを結びつける
– data要素以下で、データの設定ができる
– method要素以下で、動作の設定ができる、その他、自前のフィルターなども設定できる
– ディレクティブという独自のhtml用をViewに書き込む
– v-modelはデータと同期する
– v-repeatは複数のデータの数だけ繰り返す
– v-onはイベントが起きた時に対応する処理をする
– ほかにmustacheテンプレートを使うこともできる
– somethng | filterでフィルターをかますこともできる

screenshot

サンプル準備〜Redcarpet導入など

サンプルscaffold

rake db:migrate

Gemfile

redcarpetはサーバーサイドでmarkdownをレンダリングするgem

#272 Markdown with Redcarpet

Markdown記法チートシート(redcarpet)

application_helper.rb

Rails Markdown サンプルアプリを参考に.

show.html.erb

確認

screenshot

vue.jsでリアルタイムプレビュー

textareaのフォームの隣にプレビュー画面をつける

Gemfile

application.js

posts_helper.rb

サンプルをみると、text_areaにv-modelプロパティ、プレビュー部にv-htmlプロパティをつける必要がある.
やっつけでhelperをつくってみる.
gsubで無理やりに入れ込んでる

_form.html.erb

posts.js.coffee

posts.css.scss

できた

意外に簡単に設定できた
screenshot

ただし、vue.jsは値を永続化するにはあまり向かなさそう
値を永続化するときは、backbone-on-railsやanguler-resourcesを使ったほうが簡単そう.

-JavaScript
-, ,

執筆者:

関連記事

Ruby+guardでSass+Compass+CoffeeScriptの自動コンパイル環境を整える

    Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript すでにCoffeeScriptを自動Mak …

RailsでHTML5対応のvideoプレイヤーを利用してみる~flowplayer5.0.0

  参考 flowplayer.org/ Flowplayerのサイトからバージョン5.0.0がダウンロードできる flowplayer-gemのバージョンは3.2.4 バージョン5では基本 …

Rails4でMarkdownをリアルタイムプレビュー〜backbone-on-rails&marked.js

By: Kool Cats Photography over 2 Million Views – CC BY 2.0 目次1 前回2 サンプルアプリ3 Gemfile4 generate5 …

文字をダブルクリックしてそのままフォーム編集するやつのメモ~in place edit

By: the Italian voice 目次1 Best in place2 Mercury editor3 create.js4 スクラッチで5 X-editable Best in place …

no image

Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript

  github.com/guard/guard github.com/guard/guard-livereload 目次1 自動make2 ブラウザの自動更新 自動make guardの準 …