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

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

ただいまの
回答率

90.52%

  • Ruby on Rails 4

    2434questions

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

  • Ajax

    1090questions

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

  • CoffeeScript

    140questions

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

  • Markdown

    79questions

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

  • Qiita:Team

    7questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 711

lapi

score 50

前提・実現したいこと

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

Markdownプレビューサンプル

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/23 23:59

    ご回答ありがとうございます。
    確かに今の状態だとネットワークリソースの無駄遣いになってしまうかと思います。
    turbgraphics200が仰るように改善してみようと思います。

    分かりやすいサンプルコードも記載して頂いてありがとうございます。
    Railsにうまく組み込んで試みてみます。

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Ruby on Rails 4

    2434questions

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

  • Ajax

    1090questions

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

  • CoffeeScript

    140questions

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

  • Markdown

    79questions

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

  • Qiita:Team

    7questions

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