スポンサードリンク

どうも。未経験からWebエンジニアに転身したストウダイキです。

YouTubeのAPIを使ってViewに動画を表示する方法をご紹介したいと思います。

公式のドキュメントはこちら

YouTubeAPI公式ドキュメント

スポンサードリンク

まず、APIキーを取得する

YouTubeAPIを使うためにはAPIキーを取得する必要があります。

で、これを取得するのにGoogleアカウントが必要なのでアカウントを持っていない人は作っておきましょう。

Googleアカウントの作成はこちら

 

APIキーの取得に関しては次の記事が参考になるので是非。

YouTube APIを触ってみよう【導入編】

Controlerの記述

class 〇〇Controller < ApplicationController DEVELOPER_KEY = "ここにAPIキーを書く" YOUTUBE_API_SERVICE_NAME = "youtube" YOUTUBE_API_VERSION = "v3" def get_service client = Google::APIClient.new( application_name: 'BayApp', application_version: '1.0.0' ) client.key = "AIzaSyCLz-dwMYxPnifQUfZPFnUr5ZcdJLnmuMU" client.authorization = nil result = client.execute( api_method: client.discovered_api(:plus).activities.list, parameters: { collection: "public", userId: 101748015513264110691 } ) youtube = client.discovered_api(YOUTUBE_API_SERVICE_NAME, YOUTUBE_API_VERSION) return client, youtube end def index get_data("検索するキーワードを書く") end def test return a=1 end def get_data(keyword) #require 'cheer.rb' opts = Trollop::options do opt :q, "Search term", :type => String, :default => keyword
      opt :max_results, "Max results", :type => :int, :default => 5
      opt :order, "order", :type => String, :default => "date"
      opt :regionCode, "region", :type => String, :default => "JP"
    end

    client, youtube = get_service
    begin
    #  @youtube = get_service

      search_response = client.execute!(
        :api_method => youtube.search.list,
        :parameters => {
          :part => "snippet",
          :q => opts[:q],
          :maxResults => opts[:max_results],
          :order => opts[:order],
          :regionCode => opts[:regionCode]
        }
      )
       @videos = []
         search_response.data.items.each do |search_result|
         @videos << search_result.id.video_id end #@movies = search_response.data.items rescue Google::APIClient::TransmissionError => e
      puts e.result.body
    end
  end
end

viewの記述

<% (@videos).each do |videoId| %>
 <iframe src="https://www.youtube.com/embed/<%= videoId %>" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
 <% end %>

キーワードで検索した上位5つの動画が表示される

このコードをそのままコピーしてコントローラーとコントローラに紐づくViewに書くと、検索キーワードに関連する動画の上位5つが表示されます。

デザインなどはHTMLやCSSを弄ってご自身でカスタマイズしてもらえればと思います。

 

スポンサードリンク
おすすめの記事