はじめに
今回はポートフォリオでYouTube APIを活用したいと思い、その流れについて備忘録として本記事を作成しております。また、基本的には様々な記事を見て実装しておりますので、間違い等ございましたら、コメントいただければと思います。
現状
技術スタック
OS: macOS Sonoma 14.6.1
Docker: 24.0.2
Docker Compose: v2.18.1
Ruby: 3.1.4
Rails: 7.0.8.1
データベース: PostgreSQL 12.18
CSSフレームワーク: Bootstrap 5
CircleCI: 継続的インテグレーション（CI/CD）を導入
今回の実装で、これらの技術スタックが影響を与えることはないと思いますが、念の為記載しております。
手順
１ APIキーの取得
Google API Consoleにてプロジェクトを作成し、「APIとサービスを有効にする（翻訳によっては文字が多少異なる）」から、「YouTube Data API v3」を選択して有効ボタンを押してください。
私はこちらの記事を参考にしました。
２ Gemfileの追加
gem 'google-api-client'
上記のように記述している記事が多く、RubyGems公式ページで確認したところ、2021年以降リリースが止まっていました。ですので調べたところ個別のAPIごとにgemが作成されていたので、今回はそちらを使用していきます。
-gem 'google-api-client'
+gem 'google-apis-youtube_v3', '~> 0.53.0'
bundle installを実行してください。
3 APIキーの設定
今回はYouTube APIを動画一覧画面やユーザごとのおすすめなど様々な箇所で活用していきたいと考えています。そのため、活用するごとにAPIキーの設定を行うのは大変なので、config/initializersに記述していきたいと思います。
require 'google-apis-youtube_v3'
youtube = Google::Apis::YoutubeV3::YouTubeService.new
youtube.key = ENV['YOUTUBE_API_KEY']
上記のように設定します。youtubeの中にクラスから作成されたインスタンスが入り、それを活用してAPIキーを取得しています。ここで一点気になったのが、requireは外部ライブラリを読み込むために記述するものなので、Gemfileにてすでに明記しているgoogle-apis-youtube_v3を記述する必要があるか疑問でした。なので、今回はこの１文を削除して進めていこうと思います。
youtube = Google::Apis::YoutubeV3::YouTubeService.new
youtube.key = ENV['YOUTUBE_API_KEY']
このままでは、youtubeは他のファイルでは使用できないので、Rails.application.configに独自設計を作成していこうと思います。作成したい設計は上記に記載している２行です。
Rails.application.config.youtube_service = Google::Apis::YoutubeV3::YouTubeService.new.tap do |youtube|
youtube.key = ENV['YOUTUBE_API_KEY']
end
この記述で独自設計ができました。少し解説をすると、Rails.application.configでyoutube_serviceを作成し、その中は先ほどのコードを記載しています。tapはnewで作成したオブジェクトをメソッド内で使用するので、それを活用してkeyの作成もしています。
４ Controllerの作成
rails g controller Videos index
Videosコントローラーを作成し、そこに以下の記述をしていきます。
class VideosController < ApplicationController
def index
youtube = Rails.application.config.youtube_service
if params[:query].present?
search_query = params[:query]
@videos = search_youtube_videos(query, youtube)
end
end
private
def search_youtube_videos(query,youtube)
response = youtube.list_searches(
'snippet',
q: query,
max_results: 1
)
end
response.items.map do |item|
{
title: item.snippet.title,
video_id: item.id.video_id,
thumbnail_url: item.snippet.thumbnails.default.url
}
end
end
youtubeにはRails.application.configを入れております。そして、この後に作成する「検索」にデータがあれば、search_youtube_videosメソッドを実行する流れです。このメソッドの流れについては、youtube.list_searchesでどのような情報（snippet）をどのような（キーワード）で何個取得（max_results）するかという流れです。そして、取得したデータをresponseに入れて、その次に詳細を取得しています。
５ index.html.erbの作成
<h1>YouTube動画検索</h1>
<%= form_with url: videos_path, method: :get, local: true do |f| %>
<%= f.text_field :query, placeholder: '検索キーワードを入力' %>
<%= f.submit '検索' %>
<% end %>
<% if @videos.present? %>
<h2>検索結果</h2>
<% @videos.each do |video| %>
<div>
<h3><%= video[:channel_title] %></h3>
<p><%= video[:title] %></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/<%= video[:video_id] %>" frameborder="0" allowfullscreen></iframe>
</div>
<% end %>
<% else %>
<p>動画が見つかりませんでした。</p>
<% end %>
これはとりあえず画面に出るか確認したかったので、またサイトの状況に応じて修正をしていこうと思います。
おわりに
ここまで長い道のりでしたが、なんとか動画を実装することはできました。初心者で色々な記事などを見ながら実装しているため、全てが理解できているわけではないですが少しずつ理解しながら進めていこうと思います。ここまで閲覧いただき誠にありがとうございました。