作ったもの
小説家になろうのアドレスを入力、
ボタンを押すと入力先のタイトル、詳細を取得してきてajaxで表示。
概要
【jqueryでRailsコントローラの関数を呼んで、変数を画面に送り返す】
というやり方は見かけなかったので貴重かなと思っています。
【概要】
URL入力欄のURLをjqueryで感知
↓
コントローラの独自関数に送る
↓
関数内でスクレイピング、インスタンス変数に情報を入れる
↓
画面上に送り返す
↓
jqueryでid指定などをして情報を画面に表示
ソースの説明
今回操作する画面は
Matomeモデルのshow画面上となります。
コントローラに関数を定義。スクレイピングは以下を参照してください。
Rails スクレイピング手法 Mechanizeの使い方
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に関数名が入りうまくいかないです。
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という単語を入れています。
<%= @novel_title %>delimiter<%= @novel_description %>
このjsは
・コントローラに情報を送る
・コントローラから情報を受け取って表示する
の２つを行なっています。
送るときは、
urlに関数名、
data内にコントローラに送りたい情報を書いてください。
**params[:url]**のような形でコントローラ内で取り出すことができます。
success: function(data)のdataにjs.erbファイルに書いた内容が入ってきます。
タイトルとあらすじの間にdelimiterという単語を挟んでおいたので、
それで分けてjqueryでフォームに入力しています。
URLが想定したものと違う時は
画面上にアラートを出すようになっています。
$("#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すごい。
これ、コントローラを経由するから色々と応用できそうで楽しみすぎる。