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

#実装した機能
・フォームにキーワードを入力し、そのキーワードで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(ハッシュのキー指定なし）をビューに表示させてデータの構造を確認すると、
<img width="465" alt="検索結果１.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/299065/e2e8ad2d-705f-1878-e496-e0c5990e2cd1.png">
このようになり、複数のハッシュの入れ子構造になっている事が分かりました。

#4,参考にさせて頂いた記事
https://qiita.com/taptappun/items/a217b7017316881d6459
公式サイト
https://developers.google.com/youtube/v3/docs/search?hl=ja