見出し画像

SHOXXXX 8 の配信を振り返る Part 02

YUKI.SHX

[はじめに]

前回からSHOXXXX 8の配信を振り返り始めました。今回は第2回になります。前回の記事をまだ読んでいない方は以下からどうぞ。

[カメラの配置]

さて前回のお話の続きをする前に、今回SHOXXXX 7までとカメラの位置がガラリと変わってDJブースをアップで撮影する形となりました。
元々の予定では前回と同じ配置の予定だったのですが、会場となるunique LABORATORY様がこのような状況だったんですね。

この状況でいつも通りのアングルで撮影した場合、照明がビニールに反射してDJが映らないのではないか、という問題が発生しました。また、お客さんが写り込むのもNGとなっていました。そこでビニールの影響を受けないようにブースに取り付けようという案が出ました。
最終的に11月からステージのビニールは取り外されたため、この問題は解消されたのですが、折角ですのでそのままで行くことにした、という流れでした。
これが実現できたのはGoProの超広角レンズならではかもしれませんね。なにせこのGoPro、バッテリー(リチウムイオン電池の方)を入れておらずモバイルバッテリーからの給電のみで動かしています。一眼で撮ろうとするとこうはいかないでしょうからここはアクションカメラならではかなと思います。

[ブラウザソース]

それでは前回の続きです。改めてもう1度配信画面を見てみましょう。

画像1

画像2

前回でいうところの①・②・③・④、そしてその他４となっていた2枚目の画像。これらがブラウザソースになります。ブラウザというくらいですので、HTML+javascript+CSSです。
①～③＋その他４については1つのHTML内で。④だけはリクエストタイム時に非表示にする可能性を考慮して単独のHTMLとしてありました。

[CSSアニメーション]

②・③・その他４は左右だったり上下だったりへの文字のアニメーションを一定の間隔で入れてありました。これらのアニメーションは自作したものではなく、Animate.cssのアニメーションを利用させていただきました。

ただし常に同じアニメーションでも面白くないのでそれぞれ何パターンか選択肢を設けてアニメーションをつける際にランダムで選択されるようになっていました。リクエストタイムの曲表示だけは固定アニメーションです。
DJ名・曲名表示エリアは
2.5秒で画面INアニメ→10秒間表示→2.5秒で画面OUTアニメ
タイマーはそれぞれ独立、となっていました。

リクエストタイムについてはVJもモニターに曲名等を表示するのが定番になっていましたので、配信でも何かしら演出として出したいなと考えていました(寧ろ元々は他のDJでの曲名表示は考えていなかった)。
今回のフライヤーが会場をそのままモデルにしており、バーカウンターのドリンクを見たときに、ソーダを画面に注いでいくような演出とか面白いかなと考えました。そこで注ぐアニメをモノクロの映像で用意。フライヤーのイメージを元に緑・黄色・水色の３色を上からCSSで足して動画と一緒に動かすことで色つきの映像が動いているかのように見せてみました。中々うまくいったんじゃないかなと思っています。

こんな感じで実は表示エリア外に操作パネルを用意しておいてそこから制御していました。この辺はjavascriptのお仕事ですね(当日と異なる環境で撮ったのでフォント等が若干違っていますが気にしない)。

リクエストタイムを除くといつでも事前にセットリストが出来上がっているというわけではないので(ことSHOXXXXにおいては寧ろ決まっていないことの方が多いので)、必ずしも曲名表示できるわけではありませんが今後も表示できるときはやっていこうかと思います。リクエストタイムとそれ以外での演出の差異も今後も継続するつもりです。

今回はこの辺で。次回は①のツイート表示周りのお話をする予定です。
(ちなみに⑦のスペクトラムアナライザーについてはこのブログ内でこれ以上触れる予定はありません)
それではまた次回もお楽しみに。

いいなと思ったら応援しよう！