Twitter/Xの引用機能をつくろう

ゴール

GeekSalonの教材「7-9. タグ機能をつけてみよう」の補助教材としてindexページの投稿一覧に対応するタグを表示し、そのタグをクリックすることでタグのついた投稿一覧に飛べるようにします。

開発環境

Controller
tweetsController
Model
TweetModel
テーブル
tweetsテーブル
GeekSalonの教材3章を最後まで完了していることを前提にしています。

実装

twitter_url カラムを追加

コマンドプロンプト

rails generate migration AddTwitterUrlToTweets twitter_url:string
#Tweetsテーブルにtwitter_urlを追加
rails db:migrate
end

newページに twitter_url を入力できるようにする

app/views/tweets/new.html.erb

#省略

<%= form_for @tweet do |f| %>

#省略

#追加
  <%= f.label :twitter_url %>
  <%= f.text_field :twitter_url, size: 140 %>
#ここまで

#省略

  <%= f.submit "投稿" %>
<% end %>

twitter_urlの情報を引っ張ってこれるようにtweetsコントローラーのparamsに:twitter_urlを追記する

app/controller/tweets.controller.rb

#省略

private
      def tweet_params
        params.require(:tweet).permit(:body,#ここから　:twitter_url　#ここまで追加)
      end

ヘルパーにツイートIDを抽出するメソッドを作成

app/helpers/tweets_helper.rb

module TweetsHelper

#省略

#追加
  def find_tweet_id(twitter_url)
   regex = /(twitter\.com|x\.com)\/\w+\/status\/(\d+)/
   match = twitter_url.match(regex)
   match[2] if match
  end
#ここまで

#省略

end

ツイートを表示するViewを作成(ここでは例としてindexページに表示させます)

app/views/tweets/index.html.erb

module TweetsHelper

#省略

#追加
  <% if t.twitter_url.present? %>
   <% tweet_id = find_tweet_id(t.twitter_url) %>
   <blockquote class="twitter-tweet">
     <a href="https://twitter.com/i/status/<%= tweet_id %>"></a>
   </blockquote>
     <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    <% else %>
      <p>TwitterのURLが登録されていません。</p>
   <% end %>

#ここまで

#省略

end