[初心者] Railsでyoutube APIを使って検索機能を実装してみた

はじめに

ポートフォリオ作成をするにあたりyoutube APIを使い、検索機能を追加したく、実装してみました。
不慣れで読みにくいかもしれませんが何卒ご了承ください。

YouTube APIは取得しているものとします。

主にこちらの記事を参考にしています。
Railsでyoutube APIを使ってみた
大変お世話になりました🙇‍♂️

開発環境

Rails:6.1.4
Visual Studio Code:1.61.2

実装してみる

youtube.controller

class YoutubeController < ApplicationController
  GOOGLE_API_KEY = ENV["API_KEY"]

  def find_videos(keyword, after: 1.months.ago, before: Time.now)
    service = Google::Apis::YoutubeV3::YouTubeService.new
    service.key = GOOGLE_API_KEY

    keyword = params[:search]

    next_page_token = nil
    opt = {
      q: keyword,
      type: "video",
      max_results: 6,
      order: :date,
      page_token: next_page_token,
      published_after: after.iso8601,
      published_before: before.iso8601,
    }
    service.list_searches(:snippet, opt)
  end

  def index
    @youtube_data = find_videos(@keyword)
  end
end

find_videosメソッドに keyword = params[:search]を追加し、indexメソッドから keyword を呼び出す。

あとはviewから form_tag を用いて、method: :getのHTTPメソッドを指定し、データを取得します。

view/youtube/index.html.erb

  <div class="search-form">
    <%= form_tag(youtube_index_path, method: :get) do %>
      <%= text_field_tag :search, "", placeholder:"材料をどうぞ" %>
      <%= submit_tag '検索' %>
    <% end %>
  </div>

    <div class="row row-cols-3">
      <% @youtube_data.items.each do |item| %>
        <div class="card-box">
          <div class="card border-dark mb-3">
            <div class="bd-placeholder-img card-img-top">
              <% @snippet = item.snippet %>
              <% @video_id = item.id.video_id %>
              <div class="embed-responsive embed-responsive-16by9">
                <div><iframe width="560" height="315" src="https://www.youtube.com/embed/<%= @video_id %>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
              </div>
              <div class="card-body">
                <h4>タイトル：<%= @snippet.title %></h4>
                <p>チャンネル名：<%= @snippet.channel_title %></p>
              </div>
            </div>
          </div>
        </div>
      <% end %>
    </div>

class="embed-responsive embed-responsive-16by9"で取得したYouTube動画のレスポンシブ対応をしています。

実装結果

最後に

とりあえずエラーが出ずに実装することができた程度なんで、もっと簡単な方法があればアドバイスいただけると嬉しいです😅

最後まで読んでいただき、ありがとうございました。