【Ruby on Rails5】RubyでGoogleサジェストAPIを利用する方法

技術Ruby

Ruby on Rails5の勉強を進めています。なかなか難しいですが、一人で静かに続けていてもメリハリがないので、一旦自分の書いたものをまとめておこうと思います。

【Ruby on Rails5】RubyでGoogleサジェストAPIを利用する方法

「Ruby on Rails 5 超入門」

使用している参考書

Googleサジェストについて

GoogleサジェストAPIはGoogleが提供する検索候補キーワードを取得できるAPIです。

検索窓にキーワードを打ち込むと「検索候補」が出てきますよね。その候補を取得できるAPIです。使い方はアドレスバーに打ち込めば使うことができます。

アドレス例:
https://www.google.com/complete/search?hl=en&output=toolbar&q=%E3%82%AA%E3%83%AA%E3%83%B3%E3%83%94%E3%83%83%E3%82%AF

形式はxmlです。

サジェストAPIのほかにubersuggest.orgというものがあります。

ubersuggestを使うと「あ~ん、A~Z」に関連するキーワードを網羅的に取得することができます。用途によって使うものを切り替えるといいと思います。今回やりたい事はサジェストAPIで十分なのでサジェストAPIを使っていこうと思います。

プログラムリスト

index.html.erb

<h1>Ajax#index</h1>
<p>※Ajaxによるgoogleサジェスト取得サンプル。</p>
<p id="ajax">jQueryは動作していません。</p>
<table>
<%= form_tag({controller:'ajax', action:'data'}, remote:true) do %>
<tr><th>検索ワード</th>
<td><%= text_field_tag :input1 %></td></tr>
<tr><th></th>
<td><%= submit_tag "送信" %></td></tr>
<% end %>
</table>
<hr>
<div id="result">no information...</div>

<script>
$('#ajax').text('jQueryは、動作しています!')
</script>
<script>
var f = function(){
$.ajax({
type: 'GET',
url: '/ajax/data'
});
};
setTimeout(f, 600000);
f();
</script>

 

ajax.html.erb

<!DOCTYPE html>
<html>
<head>
<title>Cards</title>
<%= csrf_meta_tags %>

<%= stylesheet_link_tag 'ajax', 'data-turbolinks-track': 'reload' %>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

<body>
<div class="card">
<%= yield %>
</div>
</body>
</html>

 

data.js.erb

var data = <%= @data %>;
console.log(data);
var result = '<table class="info">';
result += '<tr><th class="title">googleサジェスト取得テスト</th></tr>';
result += '<tr><td class="desc">googleサジェスト取得テスト</td></tr>'
data.toplevel.CompleteSuggestion.forEach(function(e){
result += '<tr><td class="item"><a href="https://www.google.com/search?q=' + e.suggestion.data + '" target="_blank">' + e.suggestion.data + '</a></td></tr>';
});
result += '</table>'
$('#result').html(result);

 

ajax_controller.erb

class AjaxController < ApplicationController
layout 'ajax'
require 'net/https' # この一行を追加する
def index
end

def data
if request.post? then
logger.info 'postテスト開始'
logger.info params['input1']
logger.info URI.escape('http://www.google.com/complete/search?hl=en&output=toolbar&q=' + params['input1'])
#logger.info URI.parse URI.encode 'http://www.google.com/complete/search?hl=en&output=toolbar&q=' + params['input1']
url2 = URI.escape('http://www.google.com/complete/search?hl=en&output=toolbar&q=' + params['input1'])
url = URI(url2)
https = Net::HTTP.new(url.host,443)
https.use_ssl = true
https.ca_file = 'GTE_CyberTrust_Global_Root.pem'
https.verify_mode=OpenSSL::SSL::VERIFY_NONE
https.verify_depth = 5
response = https.get(url)
@data = Hash.from_xml(response.body).to_json.html_safe
#logger.info @data
else
url = URI('https://www.google.com/complete/search?hl=en&output=toolbar&q=%E6%B2%B3%E9%87%8E')
https = Net::HTTP.new(url.host,443)
https.use_ssl = true
https.ca_file = 'GTE_CyberTrust_Global_Root.pem'
https.verify_mode=OpenSSL::SSL::VERIFY_NONE
https.verify_depth = 5
response = https.get(url)
@data = Hash.from_xml(response.body).to_json.html_safe
#logger.info @data
end
end

end

 

routes.rb

Rails.application.routes.draw do

get 'ajax/index'
get 'ajax',to:'ajax#index'
get 'ajax/data'
post 'ajax/data'

end

コントローラー名はajaxで作成しています。

画面

googlaサジェスト取得サンプル

検索ワードに文字を打ち込むと、画面下部にxmlの結果が表示されます。リンクも貼られるようにしたので、クリックしたら別タブでその文字の検索を見ることができます。

所感

結構苦戦しましたが、非同期で検索結果を取得することができましたね。

とりあえず自分はおむすびみたいなツールを作成したいと思っているので、また一歩進んだという感じです。早く公開できるくらいまで持っていければなと思います。

 

[adsense]

技術Ruby

Posted by sensiki