この記事を読むのに必要な時間は約 5 分です。
どうも、トッドです。
自身でWEBサイトまたはブログを運営している人、尚且つYouTubeもやっているよ！っていう方であれば「iframe」での動画の埋め込み機能による共有を使い、ブログとかに掲載するやり方を行うと思います。
それでも良いんですけど、毎回この作業をするんだと思うとため息がでちゃったり出なかったり・・・
へへっ
簡単な話。自分がYouTubeに投稿した動画情報をまとめて取得しちゃえば、YouTubeで公開している動画の一覧を自分のWEBサイトに反映させられます。
シンプルに「YouTube Data APIを使って自分がYouTubeに投稿した動画の一覧情報を取得し、JavaScriptを使って整えよう」というのがこの記事でお送りする内容です。
ということで「こういうヤツ」が出来ます↓
はい、という感じでちょっと長めの動画でしたが、動画内でのHTMLとCSSの部分はJavaScriptで取得したデータをいい感じに見せるための設定であって大事なところはJavaScript(jQuery)の部分ですので、そこを重点的に話して行きたいと思います。
APIキーを取得し、YouTube Data API を有効化する
YouTube Data API とは何なんだ？ってなると思います。
簡単に述べると、YouTubeに投稿された動画(それだけではない)の「サムネイル・タイトル・概要・動画Id」といった情報を引き出せる。そういうヤツです。
詳しくは本家を見て欲しい。
まずは、APIキーを取得しよう！ということなんですが、そのためにはGoogleアカウントが必要になるので持っていない方は作っておきましょう。
APIキーの取得。そして、YouTube Data API 有効化の方法はYouTube Data API の概要で公開されているのでここでは割愛させていただきます。
YouTube Data APIを有効化済みのAPIキーの取得
これで最低限の準備が整いましたので、ここから動画内で紹介している内容の解説に移りたいと思います。
動画内で語られるJavaScriptのコードについて
最初に見せました、動画の１１分０７秒あたりからJavaScriptの記述が始まります。そこでマウスカーソルを使って何かニュアンスを告げている場面があるのですが、そこの説明をしたいと思います。
まず、これが何をしているのか？というと、playlistIdの取得になります。その為には、自分のYouTubeチャンネルIDとAPIキーが必要になるんですよ。
YouTubeチャンネルIDは、自分のチャンネルトップ画面を表示した時のURLの部分を見るとわかります。
動画内のコードの５行目にコメントアウトされたURLがあります。それをブラウザの検索欄に放り込んでみるとJSONファイル形式の情報群を見ることができます。
そこにuploadsと書かれている箇所があります。それが、playlistIdです。
それを使って組み直したURLが９行目の部分です。以下のURLを使ってYouTubeの動画情報を引っ張っています。
var URL =
"https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=プレイリストID&maxResults=15&key=取得したAPIキー";もちろん、自分で取得したAPIキー。そして、取得したいチャンネルのplaylistIdに書き換えてあげないといけませんよ。
あとは動画の通りにやれば、自分のYouTubeチャンネルの動画一覧をwebページ反映させることができます。
