質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Qiita:Team

Qiita:Teamは、社内向けの情報共有ツールです。Markdown記法に対応しており、プレーンテキストを容易に書くことができます。また、日報や議事録などの投稿用テンプレート作成も簡単です。さらに、コメント機能やメンション機能も搭載されています。

Q&A

解決済

1回答

3285閲覧

Ruby on Rails で Qiita::Markdown のプレビューを表示したい

lapi

総合スコア58

CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Markdown

Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Qiita:Team

Qiita:Teamは、社内向けの情報共有ツールです。Markdown記法に対応しており、プレーンテキストを容易に書くことができます。また、日報や議事録などの投稿用テンプレート作成も簡単です。さらに、コメント機能やメンション機能も搭載されています。

0グッド

0クリップ

投稿2017/02/23 11:24

###前提・実現したいこと
rails4.2.3.
ローカル環境

Qiita::Markdownのプレビューを同じページ内にライブプレビューで表示(teratailのようなプレビュー表示)を実装したいと思っています。

###発生している問題・エラーメッセージ
現在、一通りの実装を終えたのですが、肝心のプレビューがリアルタイムで反映されません。
イメージ説明
上記の画像は一度投稿した内容を編集する際の画像です。
画像のように投稿した内容はプレビューで表示されるのですが、内容を変更してもプレビューの表示は変わりません。

今回実装するために考えた作成方法は、
textareaでのkeyup,changeイベントをキャッチしてtextareaの内容を得る。
その内容をパラメータに設定して、変換結果を得る。
その変換結果をプレビューに設定して表示する。
といったものです。

###該当のソースコード
app/controllers/plugins_controller.rb

class PluginsController < ApplicationController include ApplicationHelper before_action :set_plugin, only: [:edit, :update, :destroy] def index @plugins = Plugin.all @q = Plugin.ransack(params[:q]) @plugins = @q.result(distinct: true) end def new @plugin= Plugin.new end def edit end def create @plugin = Plugin.new(plugins_params) respond_to do |format| if @plugin.save format.html { redirect_to plugins_path, notice: '投稿しました。' } format.json { render :show, status: :created, location: @plugin } else format.html { render :new } format.json { render json: @plugin.errors, status: :unprocessable_entity } end end end def update respond_to do |format| if @plugin.update(plugins_params) format.html { redirect_to plugins_path, notice: '編集しました。' } format.json { render :show, status: :ok, location: @plugin } else format.html { render :edit } format.json { render json: @plugin.errors, status: :unprocessable_entity } end end end def destroy @plugin.destroy respond_to do |format| format.html { redirect_to plugins_path, notice: '削除しました。' } format.json { head :no_content } end end def api_markdown markdown = qiita_markdown(params[:text]) pp markdown render text: markdown end private def plugins_params params.require(:plugin).permit(:title, :content) end def set_plugin @plugin = Plugin.find(params[:id]) end end

config/routes.rb

Rails.application.routes.draw do 省略 resources :plugins, only: [:index, :new, :create, :edit, :update, :destroy] post 'api_markdown' => 'plugins#api_markdown'

app/views/plugins/_form.html.erb

<%= form_for(@plugin) do |f| %> 省略 <%= f.label :機能 %> <%= f.text_field :title, class: 'form-control' %> <div class="field"> <%= f.label :説明 %> <%= f.text_area :content, cols: 70, rows: 10 %> </div> <%= f.submit 'Create' %> <% end %> <div id="preview"><%= qiita_markdown(@plugin.content) %></div> <%= link_to "Back", plugins_path %>

app/assets/javascripts/plugins.coffee

$ -> update_preview = (text) -> $.ajax url: '/api_markdown' type: 'POST' data: {text: text} success: (data) -> $('#preview').html(data) return error: (xhr, status, err) -> $('#preview').html 'エラー発生 ' + err return $('#plugin_content').on 'keyup change', -> update_preview($(this).val()) return

以上が今回記述したコードです。
何か誤りや修正点、またはアドバイスでもいいのでご教授頂けると助かります。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

たぶん、サーバーでパースしHTMLに変換したものを返し、プレビューに反映してると思いますが、これだと、ネットワークが切れているときはプレビューが機能しなくなってしまいますし、ネットワークリソースの無駄遣いです。
ですので、パース→プレビューへの反映はクライアントで行い、
サーバーへの送信は、一定時間アイドルになったときに自動保存の時に行います(もちろん投稿時も)。

Markdownプレビューサンプル

投稿2017/02/23 14:22

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lapi

2017/02/23 14:59

ご回答ありがとうございます。 確かに今の状態だとネットワークリソースの無駄遣いになってしまうかと思います。 turbgraphics200が仰るように改善してみようと思います。 分かりやすいサンプルコードも記載して頂いてありがとうございます。 Railsにうまく組み込んで試みてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問