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
-, ,

執筆者:

関連記事

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

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

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

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

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

vimでcoffee scriptの開発環境を整える~vim-coffee-script

環境 CentOS5.8にnodebrewでnode.jsをインストールを参考にubuntu server 12.04にnode v0.6.20をインストールした 目次1 coffee scriptの …

no image

位置情報通知の使いみちアイデアメモ

    ここまでHTML5とGoogle Mapsを使った位置情報通知を試してきたけど、その使いみちについてメモしておきたい 目次1 カレログ的なサービス2 宝探し的なイベント3 …