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

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

ただいまの
回答率

90.62%

  • Ruby

    7296questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    6960questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • スクレイピング

    305questions

スクレイピングした画像の情報を画像で表示したい

解決済

回答 1

投稿 編集

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

renren643

score 194

スクレイピングした画像の情報を得て、それをブラウザで画像として表示させたのですがどうしたらいいでしょうか?
確かに、画像の情報は得ることができたのですが、それをviewを通してブラウザ上で表示させるやり方がわかりません。
ブラウザではこのように(https://rr.img.naver.jp/mig?src=http%3A%2F%2Fimgcc.naver.jp%2Fkaze%2Fmission%2FUSER%2F20170612%2F75%2F7720595%2F17%2F256x256x4d8de341c5dbec486ff4fd34.jpg&twidth=60&theight=60&qlt=80&res_format=jpg&op=sc)文字で出力されます。

コントローラー

class HomeController < ApplicationController
  def top
      require "open-uri"
      require "nokogiri"

      url = "http://〜〜〜〜〜〜"

      user_agent = 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.63 Safari/537.36'
      charset = nil
      html = open(url, "User-Agent" => user_agent) do |f|
        charset = f.charset
        f.read
      end

      doc = Nokogiri::HTML.parse(html, nil, charset)


     doc.xpath('//li[@class="mdTopMTMList01Item"]').each do |node|
        # imgに関する情報が帰ってくる
        @titles= node.css('img')
      end
  end
end


ビュー

<% @titles.each do |title| %>
     <div>
          <%= title.attribute('src').value %>
      </div>
<% end %>   

ビューをこのように変えればいいのかと思いやって見ましたがどうやら違うようでした。

<% @titles.each do |title| %>
     <div>
          <a herf="<%= title.attribute('src').value %>"></a>
      </div>
<% end %>   

どのようにしたら画像が表示されるのか教えてください

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

何が分からないのかイマイチ分かりませんが(汗

ビューを見ると単純にタグを間違えてるだけではないでしょうか?

画像をブラウザに表示させるのはimgタグです。
aタグはリンクするタグなのですが上のソースだとリンクさせる対象がありません。

<a href="リンク先">(ここにリンクさせる文字や画像を入れる)</a>

画像を表示させたいなら

<img src="表示させたい画像のURL">

aタグとimgタグを調べてみて下さい

私が根本的に質問を勘違いしてるならごめんなさい

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/29 09:34

    回答ありがとうございます。ビューを以下のようにしたらできました。
    おっしゃる通り単純にaタグとimgタグを勘違いしていただけでした。
    <% @titles.each do |title| %>
    <div>
    <img src="<%= title.attribute('src').value %>">
    </div>
    <% end %>
    また、この書き方だと、
    [画像]
    [画像]
    [画像]
    .
    .
    .
    [画像]
    と表示されなく、ブラウザを更新するたびに画像が切り替わっていくという感じになってしまいます。
    each文に代入される画像を一覧としてブラウザ上に表示するにはどうしたらいいのでしょうか?

    キャンセル

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

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

関連した質問

  • 解決済

    rubyでdef化する方法について

    下記ブログを参考にスクレイピングの練習をしてみようと思うのですが、仮にこのコードの内容をメソッドにして実行する場合、defを使ってどのような書き方ができるでしょうか? 参考ブ

  • 解決済

    RailsのMechanizeメソッドを使ったスクレイピングについて

    ruby on railsのmechanizeメソッドでスクレイピングをしたいと考えております。 以下のようなHTMLがあります。 <table> <t

  • 解決済

    Nokogiri、anemone、open-uriを使って、指定したサイトをクロール、スクレイピング

    前提・実現したいこと Nokogiri、anemone、open-uriを使い、指定したウェブサイトをクローリング、スクレイピングして、画像リンクURLを取得し、そのURLから画

  • 解決済

    [Ruby]webスクレイピング

    webスクレイピングで、<span>の中身をとりだしたいんですが、上手く実行されません。 HTML内で求めるspanが何番目にあるか数えたり、検索機能で調べたり、コード内の変数

  • 解決済

    記事の一番先頭をスクレイピングしたい

    Rubyでyahooのトップページの記事一覧から一番先頭をスクレイピングをしたいのですが、このコードのどこが間違えているのでしょうか? ファイル名.rbを作成し、ruby ファ

  • 解決済

    スクレイピングできるサイトとできないサイトがある

    スクレイピングをできるサイトとできないサイトがあります。 例えばヤフーの記事一覧を取得するなら、 1、記事一覧の一番上の記事を検証し、css(xpath)を抜き出す 2、記事一覧の

  • 解決済

    each文が反映されない

    スクレイピングした結果をブラウザ上で表示したいのですが、each文がうまく指定できなく、一行しか帰って きません。タイトルをブラウザ上で全て表示するようにしたいのですがどうしたいい

  • 受付中

    ページを推移させスクレイピングする方法

    このサイトを参考に1ページ毎にページ推移し、そのページをスクレイピングして、ブラウザ上に表示させたいのですが、うまくいきません。 スクレイピング先の記事一覧は、 https:/

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

  • Ruby

    7296questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails

    6960questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • スクレイピング

    305questions