Kohei Shimizu

 参考Github「google-api-ruby-client」公式

https://github.com/googleapis/google-api-ruby-client

→今回はこの中の「google-apis-youtube_v3」だけ使用したかったので、Youtubeだけのgemを使用した。上のGituhubのパスは、 google-api-ruby-client/generated/google-apis-youtube_v3

https://rubygems.org/gems/google-apis-youtube_v3/versions/0.56.0
実装などは下記を参考。

https://zenn.dev/ganmo3/articles/de7084e2a77b1f

Kohei Shimizu

 APIキーを有効にする自分はGoogleAPIキーなどはすでにdeviseのGoogleログイン実装時に取得済みだったので、入るだけでマイページが表示された。

GoogleAPIコンソール内の検索窓から「YouTube Data API v3」を検索し有効にした。

検索した画面（これを有効化します）
後の２項目はこれを参考。

https://note.com/koresugo/n/n45c88fed036b

 APIキーを生成するそのあと、「APIとサービス」画面に移動。検索バーの下のところにある「＋認証情報を作成」から「API」を選択。APIキーを生成する。

 APIキーに制限をかけるその後、生成したAPIキーの行にある「操作」の三点リーダーから「APIキーを編集」をクリック。

「APIの制限」の項目から、「キーを制限」をクリック。プルダウンから「YouTube Data API v3」を選択肢。「保存」を押す。

Kohei Shimizu

gemのインストール

gemをインストールします。YoutubeAPIだけ使いたかったので、gemは下記にしてインストールします。

gem 'google-apis-youtube_v3', '~> 0.56.0'

参考：https://rubygems.org/gems/google-apis-youtube_v3/versions/0.56.0

Kohei Shimizu

APIキーを自分のアプリに記載する

生成したAPIキーを.envやcredentials.ymlなどに記載しておきましょう。
私はcredentials.ymlで今までやってきたので、下記でエディタを起動し記載しました。

# dockerコンテナで作成しているなら、docker compose exec web bashを実行し、コンテナ内で書きを実行すること！

EDITOR="vi" bin/rails credentials:edit

# 書き込む際は、iキーを押して、インサートモードに。
# インサートモードから抜ける際は、escキー。
# 書き込んだ内容を保存して、viエディタを抜けたい場合はインサートモードを抜けた状態で「:wq」を入れてEnter。
# dockerコンテナから抜けたい場合は、「exit」を入力してEnter。

私はこんな感じで記載していますよ！

google:
  youtube_api_key: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Kohei Shimizu

 そもそも何を送ったら、目的のものが取得できるのか？私は今回「動画タイトル」を取得したかった。
でも、APIの仕組みがわかっておらず、youtubeAPI君にどんなものを送れば取得できるかがわからなかった。

なので、APIレスポンスを確認できるPostmanを使用して確認した。
Postman参考：Postman で便利だと思った機能をご紹介

https://qiita.com/t-kurasawa/items/cfdf82a757e4aac0604a
動画情報取得のAPIは、
https://www.googleapis.com/youtube/v3/videos・・・・・・・・・
この後に何が続くかは、取得したい動画のIDとpart、apiキーを入れればOK。

Postmanはクエリパラメーターがあるので、その欄に入れれば勝手にURLを入れてくれる。
↓↓↓実際に入力した値はこちら↓↓↓


キー
値


id
アドレスバーの「v=」以降の値を入れる

part
snippet

key
先ほど生成したAPIキー

これをいれるとこんな感じのURLになる
https://www.googleapis.com/youtube/v3/videos?id=7XvMAuniqVQ&part=snippet&key=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
自分が作業BGMにしていたDnBのライブ動画をGETしてもらったらこんな感じで返ってきた。

つまり、ここでいうTITLEを取得すればOKということが理解できた！

キー	値
id	アドレスバーの「v=」以降の値を入れる
part	snippet
key	先ほど生成したAPIキー

Kohei Shimizu

 Helperに書くか、Serviceに書くか。参考記事だと、ブラウザのアドレスバーにあるURLからIDを導き出すコードをHelperに記載している。

参考記事から下記コードを引用）Rails】YouTube Data APIを使用し動画情報を取得

https://zenn.dev/ganmo3/articles/de7084e2a77b1f
module ApplicationHelper
  # YouTubeの動画リンクからビデオIDを抽出するメソッド
  def extract_youtube_video_id(link)
    # もしリンクが提供されていない場合、ビデオIDは存在しないので nil を返す
    return nil if link.nil?
    
    # URLを解析してビデオIDを取得する
    uri = URI(link)  # リンクのURLをURIオブジェクトに変換
    query = URI.decode_www_form(uri.query)  # URLのクエリパラメータをデコードして取得
    query_hash = Hash[query]  # クエリパラメータをハッシュに変換
    query_hash["v"]  # ハッシュからキー"v"に対応する値、ビデオIDを返す
  end
end
Helperに書いても技術的に問題は無いが、

ServiceにもかけるAPIの処理を書けることをリサーチしていたら気づいたので、どちらに書くか迷った。
同期にYoutubeAPIを実装していた方がいたのでご相談したり、記事を見たりで検討した結果、責任分離を明確にしたほうが良いという結論になった。以下、HelperとServiceの責任範囲。
Helperは、Viewに共通する処理をまとめられる。表示用に簡単な条件付けをするならHelperでも可。（例えば、秒数で上がってきたものを時刻表示にするなど）
Serviceは、Controllerに共通する処理をまとめられる。複数箇所で使われる処理（APIなど）。将来的に拡張性のある内容。
上記のように整理したときに、APIはServiceに書くべきだと思ったので、今回はServiceに書くことにした。

Kohei Shimizu

Service内の書き方

Serviceフォルダを作成し、youtube_service.rbを作成。
内容はデバックなどで出てくる値を確認しつつ、以下のように記述した。
今回はTitleを取得したいのが目的のため、get_movie_titleメソッドを作成。

service/youtube_service.rb

require 'google/apis/youtube_v3'

class YoutubeService
  def initialize
    @youtube = Google::Apis::YoutubeV3::YouTubeService.new
    @youtube.key = Rails.application.credentials.dig(:google, :youtube_api_key)
  end

  def get_movie_title(video_id)
    response = @youtube.list_videos("snippet", id: video_id)
    response.items[0].snippet.title #←これが`get_movie_title`メソッドで最終的に返る値
  end
end

Kohei Shimizu

自分の制作環境内におけるIDの抜き出し方

自分のアプリは、投稿者にYoutubeの共有URLを貼り付けてもらう方式を取っている。
そのため、そこからIDを割り出す。処理は一旦modelに以下のように記載している。

models/techinique.rb

# source_urlに投稿者が貼り付けたURLが入っている。
  def only_id_from_youtube_url
    # IDだけを抜き出し
    embed_id_from_youtube_url.split("?").first
  end

これで取り出した値を、アプリの投稿詳細画面で使用したかったので、controllerのshowに下記のように記載する。

controller/techiniques/youtube_controller.rb

  def show
    @technique = Technique.find(params[:id])

    youtube_service = YoutubeService.new
    @movie_title = youtube_service.get_movie_title(@technique.only_id_from_youtube_url)
  end

Kohei Shimizu

viewファイルの書き方

残るは投稿詳細画面のviewファイルにどう書いて、tilteを取り出すかになってくる。
方法はとても簡単で、投稿詳細画面（showファイル）で以下のように記述するだけ。

<%= @movie_title %> # youtube_controllerのshowで作成した@movie_titleインスタンスをココで呼び出しするだけ

実際の画面はこんな感じになる。動画下のtitleがAPIから抜き出したタイトルです。