Zenn
🐇

NodeCGでスポーツコーダ#6:ワンショット表示を作る(2:テロップ画面を作る)

2024/11/26に公開
CSS 3
HTML 5
NodeCG
tech

概要

NodeCGを使ってスポーツコーダが作れるか検証していきます。
今回はワンショットテロップの実装のうち、テロップ画面を作ります。
まずはHTMLとCSSを使いデザインを完成させます。なお、通常のWebサイトを作るわけではないので、自分の環境でのみ正しく動けばOKです。

フォルダ構成

今回はバンドル内のgraphicsフォルダを使います。ファイルがないときは作成してください。

[bundle_name]
└── graphics
    ├── index.html
    ├── index.js
    ├── style.css

HTML

ワンショットテロップのHTMLコードを記述します。

HTMLの設定ポイント

  • index.jsとstyle.cssのリンクを忘れずにしてください
  • div.appが画面全体、div.app__safetyはセーフティーマージンを考慮した表示領域です
  • div.one-shotはワンショットテロップ全体を表しており、simple-introはシンプルな名前表示テロップを表しています。
  • テロップの表示・非表示を制御するにはdiv.one-shotに追加したクラスが.one-shot--enableのときは表示、one-shot--disableのときは非表示にします
  • 初期値はダミー値を入力します(最終的に削除します)

HTMLコード

graphics/index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="app">
      <div class="app__safety">
        <div class="one-shot one-shot--enable">
          <div class="simple-intro">
            <span class="simple-intro__title">MC</span>
            <span class="simple-intro__name">山田 太郎</span>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="./index.js"></script>
  </body>
</html>

CSS

続いてワンショットテロップのCSSです。私はSCSSを使用していますがCSSに変換されたコードを掲載します。

CSSの設定ポイント

  • ブラウザ(Chrome)の初期マージンを取るためbody{margin:0}をしています
  • 画面サイズは1080P、セーフティーは95%で設定しています。セーフティとは視聴者のTVやディスプレイごとにテロップが見切れないように考慮した表示限界エリアのことをいい、現在は95%が主流です。
  • セーフティエリアの位置は画面の縦横で中央にしています。
  • ワンショットテロップの表示位置は、セーフティの縦方向下、横方向中央にしています。微調整をしたいときはtransform: translate(##px, ##px)で設定してください(##は数値です)
  • テロップを画面に表示するときはone-shot--enableクラス、非表示にするときはone-shot--disableクラスを追加することで制御します。非表示の方法はいくつかありますが今回はopacityを使いました。手動でHTMLに追加して、表示・非表示が正しく動作するか確認してください。
  • テロップのデザインはsimple-introクラスになります。ここの設定は一例ですので自由に変更してみてください

CSSコード

graphics/style.css
.body {
  margin: 0;
}

.app {
  width: 1920px;
  height: 1080px;
  position: relative;
}
.app__safety {
  width: 95%;
  height: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.one-shot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.one-shot--enable {
  opacity: 1;
}
.one-shot--disable {
  opacity: 0;
}

.simple-intro {
  width: 400px;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
}
.simple-intro__title {
  width: 100%;
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5em;
  background-color: black;
  border-radius: 20px 20px 0 0;
}
.simple-intro__name {
  width: 100%;
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  background-image: linear-gradient(0deg, rgb(233, 233, 233), rgb(172, 172, 172));
  border-radius: 0 0 20px 20px;
}

テロップ送出で変更になる箇所を確認する

今後ダッシュボードから送信された情報を反映するため、値が変わる箇所を確認します。
また、値ではないですが表示・非表示の切り替えも考慮する必要があるので確認します。

値が変わる箇所

  • 肩書
  • 名前

値ではないが考慮する箇所

  • テロップの表示・非表示

動作確認

ルートフォルダに移動してNodeCGを起動しますnodecg start。http://localhost:9090にアクセスするとダッシュボードが表示されるので、画面の右上にあるGraphicからINDEX.HTMLを開くことで作成したテロップの確認ができます。

留意点や感想など

  • CSSの記述はSCSSを使うことで効率的になります。たくさんの方が解説しているので調べてみてください。
  • クラス名のつけ方はBEMを使用しています。現在BEM勉強中ですがこれといった答えが見つからない状況です(慣れの問題かな?)
  • 画面の中央に配置したりするなど位置調整やデザインに苦労するのはCSSあるあるですが、慣れるとテロップ用の画像ソフトを使うより楽だと思います
  • 次回はレプリカントの作成とダッシュボードのデザインをする予定です

Discussion