Googleサイトで作るグループウェア（49）ーYouTubeライブTVをつくる【GoogleTV編②】ー

2023年6月8日 15:35

この記事を読んで欲しい方

Youtubeをよく見ている方
Googleサイトに興味を持っている方
GoogleTVに興味がある方

①PortalTV沖縄 on GoogleTVの画面構成

GoogleTVで使用するブラウザーであるPuffinTVでの画面構成ですが、マウスを使わずに、リモコンでマウスポインタを動かすため、操作性に難があります。

基本的には、マウスポインタは上下左右にしか動きませんし、ホイールも使えません。
そのため、画面の上下左右の端で、画面スクロールせずに止まるように画面をぴったり作る必要があります。
クリックする部分は、チャンネル分類の切り替えは最下部、個々のチャンネルは映像表示の左右に入ります。
メニューは基本的に使いません。

映像表示部分は、Youtubeの画面がそのまま埋め込まれ、操作性も同じものです。

②Googleサイトのページ構成

Googleサイトのページは、チャンネル番号(１〜１０）と枝番号（１〜）で構成しています。枝ページはナビゲーション不可視にしています。

実際には、チャンネル番号と枝番号の数だけ、ページを作成していきますので、全体で100ページ近くになり、量がかなりありますが、ほぼすべてのページが同じ構成ですので、時間はかかりますが難しくはありません。
GoogleTVで画面を作る場合は、あくまでもリモコンでの操作性重視で、機能はあまり重視されません。
複雑な機能を作っても利用しづらいだけで、使われないからです。

③プレイリストの選択問題

さて、画面はできましたが、こんどはYouTubeの映像表示部分の操作性が問題になってきます。
最も使いにくいのはプレイリストを選択する部分です。リモコンではホイールが使えないため、表示された６つのリスト以外は選択できません。

また、映像画面の下のコントロールで、「次へ」を選択しても時間がかかります。

そのため、いままで懸案だった自動シャッフル再生機能をつけることにしました。

④プレイリストの自動シャッフル再生

以下が、プレイリストを自動シャッフル再生するためのHTMLコードです。
変更する部分は、画面下の方にある　
// プレイリストIDを入れる list:'PL2TPQGoyDTJRMGWxdFqQPgbxltTvHOaWA',
のPL＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊を、表示させたいプレイリストのIDと入れ替えるだけです。

	<!DOCTYPE html>
	<html lang="ja">
		<head>
			<meta charset="UTF-8">
				<style type="text/css">
					body {
					  font-family: sans-serif;
					}
					body::-webkit-scrollbar {
					  display: none;
					}
					a {
					  text-decoration: none;
					}
					.iframe-wrapper {
					  position: relative;
					  padding-bottom: 56.25%;
					  height: 0;
					  overflow: hidden;
					}
					.iframe-wrapper iframe {
					  position: absolute;
					  top: 0;
					  left: 0;
					  width: 100%;
					  height: 100%;
					}
				</style>
		</head>
		<body>
		<center>
			<div class="iframe-wrapper">
				<div id="player"></div>
			</div>
		</center>
		<script>
	        // 2. This code loads the IFrame Player API code asynchronously.
	        var tag = document.createElement('script');
	
	        tag.src = "https://www.youtube.com/iframe_api";
	        var firstScriptTag = document.getElementsByTagName('script')[0];
	        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	
	        // 3. This function creates an <iframe> (and YouTube player)
	        //    after the API code downloads.
	        function onYouTubeIframeAPIReady() {
	        	// 初期Index値に乱数発生、プレイリスト最大数に応じて50の部分をを変更
	            var numPl = Math.floor((Math.random() * 50) + 1);
	            var player = new YT.Player("player", {
	                height: '315',
	                width: '560',
	                playerVars: {
	                    listType:'playlist',
	                    // プレイリストIDを入れる
	                    list:'PL2TPQGoyDTJRMGWxdFqQPgbxltTvHOaWA',
	                    index: numPl,
	                    autoplay: 1,
	                    loop:1,
	    			},
	                events: {
	                    'onReady': function (event) {
	                        setTimeout(function() {
	                            event.target.setShuffle({'shufflePlaylist' : true});
	                        }, 1000);
	                    }
	                }
	            });
	        }
		</script>
		</body>
	</html>

このコードを埋め込むと、再生位置がランダムで、さらにリストの並べかえもランダムになって再生が始まります。
また、再生リストの最後が終わっても、ループ再生を指定しているため、ランダムなリストの最初から再生が始まります。
これは、画面がリロードされるたびに実行されるため、毎回初期表示の画面が異なります。

次に、細かい設定ですが、中程にある
// 初期Index値に乱数発生、プレイリスト最大数に応じて50の部分を変更
var numPl = Math.floor((Math.random() * 50) + 1);
の部分です。
これは、やってもやらなくても良いのですが、ランダム発生に違和感がある場合に調整して下さい。プレイリストの動画数が100あれば、100にすれば良いです。

⑤自動再生と音の問題

前にもお話しましたが、映像を自動再生するとミュートしなければなりません。音を聞くためには、ミュートを解除する必要があります。
ですが、リモコン操作で、ミュート解除するのは一苦労です。
そのため、以下のように①自動再生＆ミュートするチャンネルと②手動再生＆音が出るの２つの画面を用意することにしました。

①は主に、画面の表示だけで音が不要なもの、例えば色々な場所のライブカメラの映像などです。
②は、ニュースのように画面を見ながら、音も一緒に聞くものです。これは、画面を手動クリックすれば、再生＆音が出ます。
これを上手く組み合わせることで、ミュート解除の手間を極力省いています。

今回は、これで終わりです。（続く）