月別アーカイブ: 2018年10月

マルチウィンドウYouTubeプレーヤー

YouTubeを自前で扱う

ユーチューブに動画を作成して投稿すれば世界中の人々に見てもらえます。投稿規定を守れば投稿のための料金はかかりません。

投稿規定といっても公序良俗に反しなければ特に問題はないと思われます。

ユーチューバーに登録し精力的な活動をして思いがけないほどの閲覧者が現れて多額の広告収入が得られるかも知れません。

この記事はこれらから少し離れて、発表済みのユーチューブ動画をYouTube Player APIを用いて自前でYouTubeを取り扱うことを目指しました。JavaScriptの中に、公開されたAPIを呼んできめ細かな動画システムを作り上げることを目標にしています。

動画をマルチウィンドウで見る

YouTube Player APIの詳細な説明は『iframe 組み込みの YouTube Player API リファレンス』などに述べられており、参照させていただきました。また、『YouTubeプレーヤーAPIでYouTubeを複数設置する』では、YouTubeをマルチウィンドウで閲覧する例を具体的に解説されています。

ここでは、運動会シーズンに因んで、4台のカメラを集中して管理する運営本部が1台のカメラを特化して大画面で放映するような様を想定しています。

雰囲気だけですが、小学生が社会見学で訪れる右写真のようなテレビスタジオの副調整室を真似ています。

操作法

起動すると4画面が表示されます。それぞれ、画面中央の▶周辺をクリックするとライブ中継が開始されます。

4シーンを同時に描画することができます。❶~❹の白抜き数字をクリックすると数字の左側の画面が拡大されて描画されます。

元のマルチ画面に戻すには右下のホームボタンをクリックします。4画面は停止状態にあり、再生する場合は再びクリックします。

動作例と動作環境

4台のWebカメラによるインターネットライブカメラの作り方は難しくありませんが、にわかには準備できないのでネット上にある既存のものを使わせていただきました。



イベント会場のありさまをライブ配信するシステムを自作するには、Webサイト上で24時間ライブ配信を行う方法が参考になります。頑張ってライブ配信システムを構築して、運動会、野球、サッカー大会、ピアノ演奏会の模様を、いつも成長を見守ってくれる遠くの家族にオンライン中継することが可能になります。

モダーンブラウザではおおむね、思い通りの動作が得られましたがIE11ではしっくりしません。edgeの利用が望まれます。

4ライブカメラの設置場所

❶静岡市さった峠 広重の富士山
❷ミヤギテレビ情報カメラ・仙台マークワン屋上
❸カナダ・ケベック港
❹イタリア・ヴェニス港

世界で今、まさに起きているライブ風景を居ながらにして見ることができます。大画面に拡大して表示すれば、車や船の動きが一目瞭然です。

ライブ配信システム自作の薦め

インターネットにまつわる技術革新は秒進分歩(日進月歩)です。ライブ配信システムは手軽に自作できます。ウェブ上には自作集が山積みされています。

趣味の領域ならば2000円ほどのウェブカメラでも十分であり、使わなくなったスマホなどを利用すれば10000円以下で構築できるでしょう。

少しばかりのハードウェアの知識とHTML、JavaScriptによるプログラミングの知識はおいおい備わります。

 

紅葉前線2018

四季の恵み

日本は四季に恵まれた国と言えましょう。寒い冬に備えなければならないことは余分な仕事とも言えますが、それは人々に緊張感を植え付けます。

人は怠けものの動物なのでだらだらと過ごしがちです。夏の暑さにはしゃいでもいいけれどはしゃぎっぱなしはいかんと、自然はそこを叱りつけてくれます。

『赤とんぼ』作詞:三木露風、作曲:山田耕筰

花を愛でる

山間・寒冷地帯を除けば、日本では梅、桃、桜の順に花が咲きます。また、秋にはイチョウやもみじが鮮やかに紅葉します。

春には桜前線、秋には紅葉(こうよう、もみじ)前線と呼ばれ季節の風物として毎年、語られます。

桜前線は南から、紅葉前線は北から移動すると言われますが、ヒートアイランド現象のせいでしょうか、南よりも首都圏で先に桜が咲くことがあります。自然や月、太陽をあがめて日々、暮らす大衆の生活は日本独特なのでしょうか。

行楽

レジャー、リクリエーションなどの用語は戦後、欧米からの取り入れと思われますが野点(のだて)、茶会、花見などは古来から使われています。

他にも江戸時代、地方でも黒川能、越谷薪能、伊勢歌舞伎、こんぴら歌舞伎などが盛会に催されました。

今回は果物や木々に咲く花にまつわる楽しみについて語ります。

狩るの言葉

鷹狩、ウサギ狩り、罪人を捕らえるのに狩るという言葉を使いますが、花や草木を観賞するために尋ね探すとの意味にも狩るを用います。

果樹園などに入場料を払ってリンゴ狩り、ミカン狩り、ブドウ狩りをします。料金の対価になにがしかの果物を入手してきます。

一方、秋の観光の一つに紅葉狩りがあります。勘違いはどこにも誰にもあるもので、紅葉狩りに出かけ押し葉にするもみじの葉を山ほど持ち帰る人もいるそうです。

自然の美しさを鑑賞するのに、一方は花見、他方は紅葉狩りというのも妙なものです。花見と言っても桜見とはめったに言いません。我が国では花と言えば桜なのでしょうか。

春の華やいだ花見は心が浮き立ちますが、秋のイチョウやもみじの紅葉もまた、格別です。甲乙つけがたいとはこのようなことをいうのでありましょう。

紅葉名所

鮮やかな紅葉の出現には条件があるようです。昼夜の気温差が大きく、葉に十分な直射日光があたること、適度な湿度があって夏の気温が高く雨量が多い年ほど美しい紅葉が期待できると言われています。

全国の色づき情報・紅葉名所が公開されています。気の早い向きには北に出かけたり、少し高い山に出かけ、晩春にならなければ時間が取れない人には南西に出かけるとよいでしょう。

一年を通じて防寒具など要しないというのも気が楽でいいですが、少し辛抱した人には褒美として見事な紅葉が見られます。四季のある我が国ならではの特権です。今年も凶暴な自然に悩まされました。穏やかな季節には美しい自然に浸って次の活力にしたいものです。

雁の隊列


作詞:佐々木信綱、作曲:ウェーバー、原曲名「魔弾の射手」序曲、『秋の夜半』

渡り鳥と四季

渡り鳥は、棲みやすい環境を求めて移動します。人間は衣服をまとったり住環境を整えて定住を試みます。

余裕のある人は沖縄、軽井沢、北海道と小移動します。もっとお金持ちになるとカナダやタイなどに大移動します。

我が国は四季がはっきりしており、大衆は暑さ寒さをぼやいたり、愚痴をこぼしながら雨風や暑さをしのいで連綿と文化を築いてきたとの自負もあるのです。

時節柄、新国劇十八番「国定忠治」よりの一節を縦書きで表わしてみました。


赤城の山も今宵限り、
生まれ故郷の国定村や、
縄張りを捨て、国を捨て、
可愛い乾分こぶん手前てめぇたちとも、
別れ別れになる首途かどでだ。
新国劇十八番「国定忠治」より一節

しばしのお別れ

渡り鳥、雁の隊列です。鳥の群れはV字隊列を作って集団が消耗するエネルギーを最小にするという習性があるようです。スピードスケート競技のチームパシュートのように順番を交代するのだろうか。

 

フェードインとフェードアウト

音声の制御

音声を再生する場合は一般には再生ボタンを押すのでびっくりすることは少ないです。一方、音声のほとんどは音声オブジェクトの終了で停止します。最後は音声レベルがゼロになるように作られています。

つまり、上図のように音声オブジェクトにおいてフェードイン、フェードアウトを考慮したオブジェクトになっているのがほとんどですが、長いBGMが流れているときに別の要因で音声を停止するとき、緩やかに音声が消えるようになるのが理想です。音が鳴り響くときは徐々に大きくなり、停止する場合は徐々にすぼまることをフェードイン/フェードアウトと言っています。

人の会話のように、話の間、接ぎ穂など細かな会話の技法の代わりになるのがフェードイン/フェードアウト操作です。そのやり方がaudioの音をフェードイン・フェードアウトさせるに解説されていましたので参考にさせて頂きました。

ねらいと手法

audio要素にcontrolsを指定すると再生ボタンなどのインターフェースを表示させることができ、addEventListenerにより、playとpauseイベント関数を設定することができます。その関数でvolume属性を0~1.0に制御するねらいを立てました。

これはplayイベントではねらいどおりになりましたが、pauseではすぐに音声が停止されるのでフェードアウトされず、プチっと音が消えるので不採用になりました。

そこで参考サイトにあるようにbutton要素でplayとpauseのクリックイベントで処理するのがオーソドックスな手法のようです。

play-play、pause-pauseなど誤った操作を処理するのを省くために、一つのクリックボタンをシーソースイッチのように扱ってフェードインとフェードアウトを制御します。

フェードインとフェードアウトの動作コード

<!DOCTYPE html>
<html>
<body>
<audio id="bgm" src="http://aidesign.lolipop.jp/wp-content/uploads/2014/09/yorunowaltz.mp3"></audio>   <!-- 56sec -->
<button type="button" id="play" style="color:blueviolet; font-weight:bold;">&#9205;</button>
<progress id="prog" max="100" value="0"></progress>&nbsp;<span id="outp"></span>
<span style='font-size:12px;color:navy;font-weight:bold;'>&emsp;&copy;TacM,2018 Ver0.02</span><BR>参照音楽:『甘茶の音楽工房』《夜のワルツ》
<script type="text/javascript" charset="Shift_JIS">
const baseVol = 1.0;		//audioのベース音量
const fadeInSpeed = 400;	//フェードインのスピード
const fadeOutSpeed = 1500;	//フェードアウトのスピード
var count=0;				//シーソースイッチに利用
var music = document.getElementById('bgm');		// audioの作成, 音声ファイルの指定
	var audio_func = setInterval(function() {	//audioのオブジェクトの進捗度
		document.getElementById('outp').innerHTML = HourMinSec(music.currentTime) + " / " + HourMinSec(music.duration);
		document.getElementById('prog').value = Math.round(music.currentTime / music.duration * 100);
	}, 100);

music.addEventListener("ended", function(){		//音声完了
	clearInterval(audio_func);
	music.currentTime=0;
}, false);

document.getElementById('play').addEventListener('click', function() {	//audioの再生, audioの停止
	document.getElementById('play').innerHTML = "\u23F8\u23F5".substr(count%2, 1);	//表示する文字を変更
	if(++count % 2)	feedInFunc();				//フェードイン関数
	else			feedOutFunc();				//フェードアウト関数
}, false);

function feedInFunc(){		//フェードイン関数, fadeInSpeedでフェードイン
	  music.volume = 0;
	  music.play();
	  var start_func = setInterval(function() {	//フェードイン関数, fadeInSpeedでフェードイン
	    music.volume = music.volume + (baseVol / 100);
		if(music.volume >= baseVol - (baseVol / 100)) {
		   music.volume = baseVol;
		   clearInterval(start_func);
		}
	  }, fadeInSpeed * baseVol / 100);
}
function feedOutFunc(){		//フェードアウト関数, fadeOutSpeedでフェードアウト
    var end_func = setInterval(function() {
        music.volume = music.volume - (baseVol / 100);
        if(music.volume <= (baseVol / 100)) {
            //music.volume = baseVol;			//Ver0.02で削除
            music.pause();
            clearInterval(end_func);
        }
    }, fadeOutSpeed * baseVol / 100);
}
function HourMinSec(t){		//audioのオブジェクトの進捗度を整えて表示
	if(t<3600)	return(letter2(Math.floor(t/60)) + ":" + letter2(Math.round(t%60)));	//一時間以上は次の機会に
	else		return("no support");
}
function letter2(num) {return ('0' + num).slice(-2);}	//1桁の数字の先頭に0を付加する
</script>
</body>
</html>

 

フェードインとフェードアウトの動作例

フェードインは400ミリ秒、フェードアウトは1.5秒に設定しています。大音量を好み、心臓を大切にされる方はfadeInSpeedの値を大きくしてください。緩やかに立ち上がります。再生と一時停止を何度かクリックしてフェードインとフェードアウトの効果を試してください。

太古の昔、食事は栄養の補給でしたが、そのうち、食事を楽しむ余裕が生まれて豊かな生活へと進んだことでしょう。フェードインとフェードアウトの効果がその一翼を担えたら幸いです。

   ©TacM,2018 Ver0.02
参照音楽:『甘茶の音楽工房』《夜のワルツ》

注意

上の動作例は一度、動作完了して再実行するようには配慮されていません。その場合には再読み込みして実行してください。また、フェードアウトの最後にカツッとノイズが入るブラウザがありますが、それはブラウザの好まざる特徴と思われます。少なくもChromeとOperaでは発生しません。

Ver0.02でsetIntervalとclearIntervalにおけるブラウザ間の微妙な挙動の違いを吸収しています。この改訂でノイズの発生は避けられた模様です。(2018-10-10追記)

映像への応用

この手法は映像に応用することができます。img要素にopacity属性を絡めて制御すれば、映像を薄い表示から濃い表示にすることができます。

また、一つが消え去りつつ、他方が緩やかに現れるクロスフェードのような描画も可能になります。限りない可能性を大切にしてください。

 

消費の殿堂

食品提供のリーダー・スーパーの役割

かつて、デパートへの買い物はディズニーランドやユニバーサル・スタジオ・ジャパン(USJ)に出かけるようなワクワク感がありました。由緒あるデパートの包み紙は贈答品を一段と格上げしたものです。

デパートは、外国の著名画家の作品を展示するなど教養のメッカと言えるほどでした。

今日、食料品の提供ではスーパーが健闘しています。当節、イートインコーナーにおいて買った食品を食べることができます。スーパーは大型化し購入品の決済に時間がかかり自動化などが図られつつあります。

店内の見える化

『小人閑居して不善をなす』と言われます。店内が暗かったり乱雑であると不善をなす不心得者が増えます。

不正対策に店内を常時、録画しています。その上、録画した店内情景をモニタ画面に大写ししています。この策は不正防止に役立っているものと思われます。

人間の感情として『あなたは監視されています』との牽制策は気分がよいものではありません。そこで店内を映し出す以外に、スーパーからのお知らせなどを織り交ぜて表示する販売促進策を考えてみました。具体例を以下に示しまし。

スーパーからのお得情報

この節の内容は少し長い時間ですが、新機軸の営業策です。最後にあなたの勇姿がモニタ画面に大写しになるかも知れません。



新しい形態の案内を上図に示します。大きく分けて6つのお知らせから成り立っています。すでに直下において動作が開始されています。再読み込みボタンをクリックすれば、先頭から実行できます。

☟アンカー名:次世代の高札☟

考察

監視カメラの普及は世界的に目覚ましいものがありますが、不正対策だけに大型モニタを使うのは消費者の反感を買いかねません。

これから挙動不審な行動は進化したAIが担当するので四六時中、監視していますよと利用者をけん制する必要はなくなるでしょう。

大型モニタは文化の殿堂として、消費者とのコミュニケーションのツールに利用したいものです。

余談

今回の記事は分量は大したことはありませんが含まれる内容は大きなものがあります。ひとつは音楽や映像の自動再生です。Chromeでは自動再生は原則中止になり、他のブラウザも同様の動きになる模様です。その顛末はautoplayの小調査にまとめました。

次の難敵はセキュリティの問題です。異なるサイトを参照するにはきちんとした手順を踏まなければなりません。

記事を公開するとき、ローカル環境にて校正しますが他ページ参照の場合、これが効きません。ページ参照にはwindow.openとiframeを利用しますが、後者の方が制限が少なく何かと使いやすかったです。かかった労力からすれば今回の作品は超大作と言えます。

小売業において嵩を少しずつ小さくして利益を確保する策は限界にさしかかっているのではないだろうか。ここらあたりで抜本策を講じてはいかがでしょうか。