Youtube Data API を使って、動画情報を取得

9423 ワード
Rails YoutubeDataAPIv3 Rails テキストリンク

実装した機能

・フォームにキーワードを入力し、そのキーワードでyoutubeの動画検索を行い、view　に検索結果を表示する。

準備

・Youtube Data APIに登録し、APIキーを取得する。

1,フォームの作成

こちらは、検索結果と検索フォームを表示しているビューになります。
formの送り先はsearch_microposts_pathというアクションです。formによって送られた検索キーワードをsearch_microposts_pathが受取、このアクション内で検索結果を取得します。
また、search_micropostパーシャルは、検索結果を表示するビューです。

input.html.erb
<% provide(:title, "micropost/search") %>
<h1>Search</h1>
<div class="row">
    <div class="col-md-6"> 
        <h3 class="non-items">検索結果</h3>
        <div id="search-micropost-template">
            <%= render 'search_micropost' %>
        </div>
    </div>
    <div class="col-md-3 col-md-offset-3 search-form">
        <%= form_tag( search_microposts_path, remote: true) do %>
            <label for="keyword">検索keyword</label>
            <%= text_field_tag :keyword %>
            <%= submit_tag "検索" %>
        <% end %>
    </div>
</div>

2,アクションの作成

microposts_controller.rb

    def search
        if !params[:keyword].blank?
            require 'google/apis/youtube_v3'
            youtube = Google::Apis::YoutubeV3::YouTubeService.new
            youtube.key = "APIキー"
            youtube_search_list = youtube.list_searches("id,snippet", type: "video",
                                                                    q: params[:keyword],
                                                                    max_results: 5)
            search_result = youtube_search_list.to_h
            @movies = search_result[:items]
            if !@movies.nil?
                respond_to do |format|
                    format.html { render 'input'}
                    format.js
                end
            else
                flash[:warning] = "検索結果はありません"
                respond_to do |format|
                    format.html { render 'input'}
                    format.js
                end
            end
        else 
            flash.now[:warning] = "検索に空白は使えません"
            respond_to do |format|
                format.html { render 'input'}
                format.js
            end
        end
    end

検索がブランクでない時に、youtube data apiを使って、データを取得する作業をします。

 require 'google/apis/youtube_v3'

こちらのコードで、youtube_v3を読み込みます。

youtube = Google::Apis::YoutubeV3::YouTubeService.new

こちらのコードでyoutubeという新しいインスタンスを生成しています。

youtube.key = "APIキー"

このように書くことで自分で取得した、APIキーを適用させることができます。

youtube_search_list = youtube.list_searches("id,snippet", type: "video", q: params[:keyword], max_results: 5)

youtube data apiに予め組み込まれている list_searchesというインスタンスメソッドを使って、データーを取得することが出来ます。
また、公式サイトで設定できるパラメーターの一覧を確認できます。
https://developers.google.com/youtube/v3/docs/search/list?hl=ja
qの部分は、formで送信したキーワードを挿入しています。

search_result = youtube_search_list.to_h
@movies = search_result[:items]

検索結果をハッシュ化したものがsearch_resultです。
ハッシュ構造をしているsearch_resultのitemというキーに対応するvalueから配列構造になった動画情報を取得出来ました。

3, ビューに表示させる。

取得できた動画情報をインスタンス変数に代入して、それをビューで表示させます。

_search_micropost.html.erb
.
.
.

    <% @movies.each do |movie| %>
        <li class="movies-item">
            <ul>
                <li>
                    <%= link_to movie[:snippet][:title], "https://www.youtube.com/watch?v=#{movie[:id][:video_id]}", target: "_blank", class: "search-movie-title"  %>
                </li>
                <li>
                    <%= image_tag(movie[:snippet][:thumbnails][:default][:url], alt: "thumbnail", class: "thumbnail") %>
                </li>
            </ul>
        </li>
    <% end %>
.
.
.

こちらは、取得したデータを表示させているパーシャルです。

<%= link_to movie[:snippet][:title], "https://www.youtube.com/watch?v=#{movie[:id][:video_id]}", target: "_blank", class: "search-movie-title"  %>

こちらは、動画名を表示させて、リンクのurlは動画の再生画面になります。
movie[:snippet][:title]やmovie[:id][:video_id]などの
データの表示ですが、https://developers.google.com/youtube/v3/docs/search?hl=ja
この公式サイトを参考にしました。
また、movie(ハッシュのキー指定なし）をビューに表示させてデータの構造を確認すると、

このようになり、複数のハッシュの入れ子構造になっている事が分かりました。

4,参考にさせて頂いた記事

https://qiita.com/taptappun/items/a217b7017316881d6459
公式サイト
https://developers.google.com/youtube/v3/docs/search?hl=ja

フィルタを* ngforに適用する方法
Jqueryダイナミックに画像のサムネイルを行う