Google API | ウダ2Blog https://uda2.com/blog 大阪でフリーランスとしてWEB制作している管理人が気になった技術をメモったり、作ったツールの紹介などを綴っているブログです。 Fri, 07 Jul 2023 07:01:42 +0000 ja hourly 1 https://wordpress.org/?v=6.9 Youtube配信スイッチング「zappin’」 https://uda2.com/blog/zappin/ https://uda2.com/blog/zappin/#respond Mon, 21 Sep 2020 13:02:39 +0000 https://uda2.com/blog/?p=2505 6月末から初めたDEAD BY DAYLIGHTで吊られまくってます。コロナの影響でゲーム実況をはじめた芸能人も増え、日々Youtubeのゲーム実況動画を見てるのですがコラボされたときに一つのチャンネルしか見ていないと、

The post Youtube配信スイッチング「zappin’」 first appeared on ウダ2Blog.]]> 6月末から初めたDEAD BY DAYLIGHTで吊られまくってます。
コロナの影響でゲーム実況をはじめた芸能人も増え、日々Youtubeのゲーム実況動画を見てるのですがコラボされたときに一つのチャンネルしか見ていないと、他のチャンネルで盛り上がってるシーンを見逃す事が多々あります。
そこで2窓・3窓しても見やすいようなプレーヤーを作ってみました。
zappin’ – Youtube Live Switcher –

Youtube Data APIでトップページの「人気のライブ実況」を検索表示（5分以内はキャッシュしてます。）
視聴するページでは同じくYoutube Data APIで動画の情報を確認して実況中かを判断したりタイトルの抜き出しをした上で
YouTube Player APIでプレイヤーを用意してチャットをインラインフレームで並べています。

画面サイズの問題でPC向けには作っていたのですが一応タブレットやスマホでもChrome経由だとなんとか見れる場合もありますが負荷が大きいのでまともに動作しないかと思います。
Androidではチャットが表示されない場合は「PC版サイト」にチェックを入れると見れるかもしれません。
URLの追加の度にリロードしないようにJavascriptで追加できるようにしつつSNS等で伝えやすいように実況動画の追加削除をURLに反映しています。
チャット上のチャンネル名をクリックすると動画が切り替わりますが、内部でプレイヤーを2つ用意して切り替えた際に新しい動画の準備が整ったら切り替わるようになっていてプリロードのギリギリまで前の動画を視聴いただけるようになってます。
PCでは左に動画右にチャットの画面構成になりますが上の赤いバーを移動させる事で調整できます。
音声はそれぞれ設定を保存するようにしていますので一度設定するとチャンネルによって音のばらつきに悩まされる事も少なくなります。
あとGoogleのAPIの利用は有料化されてるので利用は制限させていただいております。

The post Youtube配信スイッチング「zappin’」 first appeared on ウダ2Blog.]]> https://uda2.com/blog/zappin/feed/ 0 音エモンPLAYLIST by Youtube https://uda2.com/blog/otoemon/ https://uda2.com/blog/otoemon/#respond Wed, 03 Jun 2015 20:23:40 +0000 http://uda2.com/blog/?p=1979 仕事中はテレビをBGM代わりにしてたが、電気代が高いと気づき、Youtubeで音楽を流すことにした。 だが普段音楽を聴く習慣が無いといい曲を探すのに何をとっかかりにすればいいのか分らない。 音楽番組「音エモン」に目をつけ

The post 音エモンPLAYLIST by Youtube first appeared on ウダ2Blog.]]> 仕事中はテレビをBGM代わりにしてたが、電気代が高いと気づき、Youtubeで音楽を流すことにした。
だが普段音楽を聴く習慣が無いといい曲を探すのに何をとっかかりにすればいいのか分らない。
音楽番組「音エモン」に目をつけた、関西以外の人はご存じないかもしれないが「音エモン」は関西の深夜枠で10年以上イケてるミュージックビデオを紹介し続けている御長寿音楽番組です。
そんな「音エモン」で紹介された曲をYoutubeで連続再生する事にした。

まずは音エモンの公式サイトからWebスクレイピング（情報収集）してタイトルと歌手名を抽出した。
それからYoutubeを検索するのだけど、これはGoogleが用意してるYouTube Data API (v3)にお任せする。

Googleの多くのAPIはAPIキーが必要で下記の手順でキーを取得した。
1. Google Developers Consoleでプロジェクトを作成する。
2. 作成したプロジェクトで「APIと認証」の「API」から「YouTube Data API」の承認を許可する。
3. 「APIと認証」の「認証情報」から公開APIへのアクセスで新しいキーを作成する。ちなみに今回はPHPで検索するので「サーバーキー」を使う。

個人的にはIPアドレスを間違えて「There is a per-IP or per-Referer restriction configured on your API key and the request does not match these restrictions. Please use the Google Developers Console to update your API key configuration if request from this IP or referer should be allowed.」とエラーが動かなかったので多くのサーバーを管理してる人は間違えないように。

APIキーが手に入ったらPHPで検索機能の実装ですがgoogle/google-api-php-clientという専用のライブラリが用意されてるのでこれをダウンロードしておく。
YouTube Data API: PHP コード サンプルを参考にコードを書いたが「Class ‘Google_Service’ not found」とか言われて動かない。ダウンロードしたライブラリの方のサンプルを覗くとまず最初に「Google/autoload.php」を読み込んでいるようなので同じように読み込ませると正常に動作するようになった。

最後に動画を連続再生したかったので方法を模索してるとコレもGoogleが用意したiframe 組み込みの YouTube Player APIのcuePlaylistに動画IDを登録すると順番に再生してくれるらしい。

結局Google APIに頼りっきりだが完成した。
音エモンPLAYLIST by Youtube

The post 音エモンPLAYLIST by Youtube first appeared on ウダ2Blog.]]> https://uda2.com/blog/otoemon/feed/ 0