こんにちは、虎の穴ラボの磯江です。
虎の穴ラボでは、コロナ禍でもオンラインLT会を定期的に開催しています。

2020/6/24にも「フリーテーマLT」をYouTubeLiveで実施しました。

待機画面の役割

YouTube配信では、配信の始めや休憩中に待機画面があると便利です。
裏でLT会の準備を進めたり、連絡事項の伝達をすることができます。

CSSアニメーションで待機画面を作る

完成品

今回の完成品は、LT会のタイトル画像の前でメイドちゃんがぴょんぴょんする形にしました。

f:id:toranoana-lab:20200625121258g:plain

利用するメイドちゃんは虎の穴ラボで配布している素材です。
LTスライドにぜひご利用ください。

yumenosora.co.jp

なぜCSSアニメーションを利用するのか

一般的にアニメーションの作成には動画編集が必要です。
それには専用ソフトとそれを扱う知識が必要です。

動画編集を新たに習得するのも面白いですが、LT会の開催は待ってくれません。

そこでエンジニアとしての知識を活用できるCSSアニメーションを利用することにしました。待機画面なので凝ったアニメーションである必要もありません。

CSSアニメーションの設定

YouTube配信に利用している配信ソフトOBSには、Webブラウザ機能が含まれています。
このブラウザ機能は、ローカルファイルを表示することも可能です。そのためHTMLファイルとCSSファイルは適当なローカルディレクトリに作成して読み込ませることができます。

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>とらのあなLT待機画面</title>
</head>
<body>
  <div class="main-area">
    <div class="banner-area">
      <img id="banner-img" src="image/202006フリーテーマLTバナー.jpg" alt="banner">
    </div>
    <div class="maid1-area">
      <img class="maid-img maid1-img" src="image/1_Introduction.png" alt="">
    </div>
    <div class="maid2-area">
      <img class="maid-img maid2-img" src="image/2_Introduction2.png" alt="">
    </div>
  </div>
</body>
</html>

CSSファイル内で @keyframes を利用してアニメーション設定を行います。
メイドちゃんはそれぞれ横軸の位置が異なるので、それぞれ別のアニメーションを設定します。

body {
  width: 100%;
  height: 100%;
  background-color: rgb(255, 240, 108);
}

.main-area {
  width: 100%;
  height: 100%;
  position: relative;
}

.banner-area .maid1-area .maid2-area {
  width: 100%;
  height: 100%;
}

.banner-area {
  z-index: 1;
}

#banner-img {
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(20%) translateX(-50%);
}

.maid1-area {
  z-index: 2;
}

.maid2-area {
  z-index: 3;
}

.maid-img {
  position: absolute;
  width: 30%;
}

.maid1-img {
  transform: translateX(240%) translateY(50%);
}

.maid2-img {
  transform: translateX(5%) translateY(50%);
}

@keyframes maid1-jump {
  0% { transform: translateX(240%) translateY(50%); }
  50% { transform: translateX(240%) translateY(45%); }
  100% { transform: translateX(240%) translateY(50%); }
}

.maid1-img { animation: maid1-jump 1s linear 0s infinite;}

@keyframes maid2-jump {
  0% { transform: translateX(5%) translateY(50%); }
  50% { transform: translateX(5%) translateY(45%); }
  100% { transform: translateX(5%) translateY(50%); }
}

.maid2-img { animation: maid2-jump 1s linear 0s infinite;}

OBS（配信ソフト）にCSSアニメーションを追加する

OBSのソースウィンドウの「＋」ボタンを押して「ブラウザ」を選択します。 f:id:toranoana-lab:20200625143601p:plain

「ローカルファイル」にチェックを入れることでローカルファイルの参照設定が可能です。
カスタムCSSは空にしてください。 f:id:toranoana-lab:20200625145433p:plain

上記で設定は完了です。あとはYouTube配信中に追加したCSSアニメーションを表示するだけです。

まとめ

CSSアニメーションを利用することで、動画編集のスキルがなくてもYouTube配信で利用できる待機画面を作ることができました。今後も継続してLT会を開催しますのでぜひご参加ください。

過去にもCSSアニメーションに関する記事がありますので、合わせてお読みください。

toranoana-lab.hatenablog.com

イベント情報

7月10日には定例開催している会社説明会をオンライン開催します。どなたでも参加できるので、とらラボがどんなところか聞いてみたいという人は是非参加してください。 yumenosora.connpass.com

P.S

虎の穴ラボでの開発に少しでも興味を持っていただけた方は、採用説明会やカジュアル面談という場でもっと深くお話しすることもできます。ぜひお気軽に申し込みいただければ幸いです。
カジュアル面談では虎の穴ラボのエンジニアが、開発プロセスの内容であったり、「今期何見ました？」といったオタクトークから業務の話まで何でもお応えします。

カジュアル面談や採用情報はこちらをご確認ください。
yumenosora.co.jp

また、毎週火曜、木曜にはTora-Lab Meetup!と称して虎の穴ラボのエンジニア・採用担当とお話できる機会を設けさせていただくことになりました。
虎の穴ラボに興味がある、エンジニアや採用担当に質問したいことがある、などどなたでもご参加下さい。
news.toranoana.jp

さらに、弊社では新型コロナウイルス感染症終息後もフルリモートを継続導入することになりました！
地方在住のまま働きたい人など、上記Meetupやカジュアル面談、面接すべてリモート対応していますので、ご興味のある方はぜひいずれか応募してみてください！ prtimes.jp

虎の穴ラボ技術ブログ

虎の穴ラボ株式会社所属のエンジニアが書く技術ブログです

【LT会の裏側】YouTube配信にCSSアニメーションで作った待機画面を取り込む