LoginSignup
0
0

More than 1 year has passed since last update.

Rails 検索ツイートを直接表示させる

Last updated at Posted at 2022-05-28

概要

ツイート検索機能に加えて検索ツイートを以下のように直接表示させる
※クリック時に該当ツイートに直接飛ぶようにする。

取得.png

Rails5.2.8使用

事前準備

・Twitter APIを取得(省略)

以下などを参考にしてください

・Gemfileに必要な記述を追加

環境変数記述用に以下を

gem 'dotenv-rails'

twitterAPI使用のために以下を

gem 'twitter'
bundle install
.env
TWITTER_API_KEY=取得したキーを入れてください
TWITTER_API_SECRET_KEY=取得したキーを入れてください
TWITTER_ACCESS_TOKEN=取得したキーを入れてください
TWITTER_ACCESS_SECRET_TOKEN=取得したキーを入れてください

記述

config/routes.rb
get '/tweets/search' => 'tweets#search'

キーワード検索機能用にcontrollerファイルに以下記述

app/controllers/tweets_controller.rb
class TweetsController < ApplicationController
  def search
    client = Twitter::REST::Client.new do |config|
      # 事前準備で取得したキーのセット
      config.consumer_key        = ENV['TWITTER_API_KEY']
      config.consumer_secret     = ENV['TWITTER_API_SECRET_KEY']
      config.access_token        = ENV['TWITTER_ACCESS_TOKEN']
      config.access_token_secret = ENV['TWITTER_ACCESS_SECRET_TOKEN']
    end
    since_id = nil
    # 検索ワードが存在していたらツイートを取得
    if params[:keyword].present?
      # リツイートを除く、検索ワードにひっかかった最新10件のツイートを取得する
      @tweets = client.search(params[:keyword], count: 10, result_type: 'recent', exclude: 'retweets', since_id: since_id)
    end
  end
end
app/views/tweets/search.html.erb
# ツイート検索部分
<%= form_tag('/tweets/search', method: :get) do %>
  <%= text_field_tag :tweet, nil,  id: "tweet_search", name: "keyword", required: true, placeholder: "キーワードを打ち込んでください", style: "width: 400px;"%>
  <button title="ツイート検索" type="submit" id ="button1">検索</button>
<% end %>

# 取得ツイート結果表示部分
<% if @tweets.present? %>
  <h2>"<%= params[:keyword] %>"の最新ツイート検索結果</h2>
  <% @tweets.first(10).each_with_index do |tweet, i| %>
    ツイート<%= i+1 %></br>
    <iframe frameborder="0" allowtransparency="true" allowfullscreen="true" src="https://platform.twitter.com/embed/Tweet.html?dnt=false&amp;id=<%= tweet.id %>"></iframe>
    <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  <% end %>
<% end %>

「id=<= tweet.id %>」の部分をeachメソッドで回すことで
検索して取得した複数ツイートを直接表示させることができます。
controllerファイルにbinding.pryを埋め込んでインスタンス変数で取得したものの中身を調べたときに分かりますが
「id」が各ツイートを識別するパラメータとなってます。

0
0
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
0
0