7
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Rails:jqueryでコントローラのactionを叩き、jqueryに変数を戻す方法

Last updated at Posted at 2018-06-28

##作ったもの
小説家になろうのアドレスを入力、
ボタンを押すと入力先のタイトル、詳細を取得してきてajaxで表示。
7c8654ba4856e6489e0dad4c2870677b.gif

##概要
【jqueryでRailsコントローラの関数を呼んで、変数を画面に送り返す】
というやり方は見かけなかったので貴重かなと思っています。

【概要】
URL入力欄のURLをjqueryで感知

コントローラの独自関数に送る

関数内でスクレイピング、インスタンス変数に情報を入れる

画面上に送り返す

jqueryでid指定などをして情報を画面に表示

##ソースの説明

今回操作する画面は
Matomeモデルのshow画面上となります。

コントローラに関数を定義。スクレイピングは以下を参照してください。
Rails スクレイピング手法 Mechanizeの使い方

app/controllers/matomes_controller.rb
  def scraping_novel
    require 'mechanize'

    agent = Mechanize.new
    page = agent.get(params[:url])
    @novel_title = page.at('.novel_title').inner_text
    @novel_description = page.at('#novel_ex').inner_text

    respond_to do |format|
      format.js
    end
  end

新しいルートを追加
ルートを追加しないと、なぜかidに関数名が入りうまくいかないです。

config/routes.rb
Rails.application.routes.draw do
  get "matomes/scraping_novel"
  resources :novels
  resources :matomes
  devise_for :users
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  root 'matomes#index'
end

新しいjsファイルを作成。
コントローラ内に作った関数と同じ名前のjs.erbファイルをviews/コントローラ以下に作成してください。
コントローラから取得した2つのインスタンス変数をパース、
分けるために間にdelimiterという単語を入れています。

app/views/matomes/scraping_novel.js.erb
<%= @novel_title %>delimiter<%= @novel_description %>

このjsは
・コントローラに情報を送る
・コントローラから情報を受け取って表示する
の2つを行なっています。

送るときは、
urlに関数名、
data内にコントローラに送りたい情報を書いてください。
**params[:url]**のような形でコントローラ内で取り出すことができます。

success: function(data)のdataにjs.erbファイルに書いた内容が入ってきます。
タイトルとあらすじの間にdelimiterという単語を挟んでおいたので、
それで分けてjqueryでフォームに入力しています。

URLが想定したものと違う時は
画面上にアラートを出すようになっています。

app/assets/javascripts/application.js
  $("#get-novel-info-button").click(function(){
      $.ajax({
          url: "scraping_novel",
          type: "GET",
          data: { url : $("#modal-novel-url").val()
                  },
          dataType: "html",
          success: function(data) {
              console.log('success');
              console.log(data);
              // app/views/matomes/scraping_novel.js.erb
              //上記ファイルの中身を文字列"delimiter"で分ける
              var split_datas = data.split("delimiter");
              $("#modal-novel-title").val(split_datas[0]);
              $("#modal-novel-description").val(split_datas[1]);
          },
          error: function(data) {
              console.log('error');
              alert("URLが不正、もしくはこのURLには対応していません。");
          }
      });
  });

##感想
めっちゃ感動した。
スクレイピングすごい。ajaxすごい。
これ、コントローラを経由するから色々と応用できそうで楽しみすぎる。

##参考URL
RailsでjQueryからajax
jQuery内からRailsのActionを叩く

7
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?