Railsで画像をスクレイピングして表示させる


したいこと

コンビニの新着商品ページから画像などをスクレイピングしてDBなどに保存したりせずに直接表示させたい



準備

MechanizeというGemをインストール

gem 'mechanize'
$ bundle install



Controllerに記述

def index
    agent = Mechanize.new
  #getの引数にデータを取得したいサイトのURLを渡す
    from_lawson = agent.get("https://www.lawson.co.jp/recommend/original/dessert/")
    @lawson_new_items = from_lawson.search('article#dessert li').first(4) 
end


searchメソッドはcssを指定する要領で要素を指定できます、デベロッパーツールを開いてDOMツリーを見ながらやるといい感じです



viewに表示

<% @lawson_new_items.each do |item| %>
  <div>
     // imgタグのsrcを確認してパスがフルで指定されていない場合、自分で一度画像を開くなどしてurlを確認し補ってあげます
    <%= link_to 'https://www.lawson.co.jp/' + item.search('a').attribute('href'), target: '_blank' do %>
      <img src="https://www.lawson.co.jp/<%= item.search('img').attribute('src') %>" />
    <% end %>
    <div>
      <p>
        <small><%= item.search('img').attribute('alt') %></small><br>
        <small><%= item.search('p.price').inner_text %></small>
      </p>
    </div>
  </div>
<% end %>


タグ内のalt, href,srcなどの属性はattribute()メソッドを使って取得します 。



参考

【rails】webサイトからスクレイピングしたデータをデータベースに保存する方法 - Qiita

【Rails】mechanizeを使えばrailsスクレイピングが余裕な件 - Qiita

Rails スクレイピング手法 Mechanizeの使い方 - Qiita

開発予定のwebアプリの機能一覧

開発予定のコンビニスイーツSNSに実装予定の機能

SNSアプリだけど一番実装したいのは新着商品をスクレイピングして取得する機能

 

 認証機能

  • サインアップ
  • ログイン/ログアウト
  • 管理者
  • 簡単ログイン

ユーザーの機能

  • 画像を投稿
  • 自身の投稿にひとことつける
  • 自身の投稿の作成、編集、削除
  • 他人の投稿にコメントをつける
  • 他人の投稿にいいねをつける
  • 自身のプロフィールの編集
  • プロフィールのアバター画像を変更

 管理者

  • 任意のユーザーの投稿の削除

 

トップページ

  • いいねの数を投稿の横に表示
  • いいねの数でソートして表示
  • 総合いいね順
  • 週間いいね順
  • 新着順
  • それぞれに全て見るで一覧ページへのリンク
  • スクレイピングして各コンビニの新着スイーツを取得して表示

全て見る一覧ページ

  • ページ機能

ユーザーの投稿一覧ページ

  • 投稿一覧
  • ページ機能
  • プロフィール編集機能

投稿ページ

  • コメント一覧
  • (投稿者のみ)投稿編集機能

 

 

チーム開発を意識して

  1. GithubのIssueに次に追加する機能を書く
  2. ローカルでFeatureブランチを切って機能開発
  3. リモートのDevelopにプッシュしてプルリク

の流れで開発する

 

余力があればデザインをTailwindcssで作りたい。