印象に残る表現
新しい技術というわけではありませんが最近、テレビの世界で短い文章を四角の枠で動的に囲んで描画する方式が目立ちます。
NHKやテレビ朝日のニュース番組で使用されています。画像を使わずテキストだけで表示できないものかと調査していました。
左図はこれまでの静的表現四角枠です。上に挙げたオレンジ色の四角枠は上下左右に伸縮し、曲線を含まず直線だけから成るので、animationやtransitionを使えば、CSSだけで表現できることが判りました。
しかし、直線でありながらカクカクとした表示でなく滑らかに変化させるにはかなりのプログラムコード量を要しました。
テレビ表示のように違和感なくするために、四角の上線を左から右へ、次に右線を上から下へ、その後、下線を右から左へ、最後に左線は下から上に描画します。
必要な技量
animationやtransition機能はプラグインによる内包をすることもなく、JavaScriptの基本技量です。今回はanimationを使った例を示します。
@keyframeによりCSSアニメーションシーケンスの中間段階をlinear(等速制御)に変化させています。具体的には次項に示されます。
枠線定義の核心部分とkeyframes
.border0{ /* 枠線定義の核心部分とkeyframes */ position: relative; width: 360px; height: 60px; border:0px solid green; font-size: 18px; } .border0:before{ content: ''; position: absolute; left: 0; top: 0; border-bottom: solid 2px lightcoral; animation: border_anim 2s linear 0s 1 forwards; //animation: animation-haniwaman 3s linear 0s infinite normal; animation-play-state: var(--animationPlayState); } @keyframes border_anim{ 0%{width: 0%;} 100%{width: 100%;} }
線描画の制御方法
囲み枠は縦二本、横二本の四本により構成されます。線を伸び縮みさせるにはborder線に対しkeyframeの効果を実施します。縦方向は横線を90度、-90度回転させて横方向の描画方式を利用します。最初の上線を左から右へ動的に描くことができたら、後の三線はこれのバリエーションとなります。
四本の線を描画するとき、少しずつ描画開始時間をずらし、長さに応じて描画時間を変え四本を等速に描きます。
描画開始とCSS変数のスコープ
描画開始はマウスホバーによる例題が多いですが、様々な事象によって起動する方法が利用しやすいです。よって今回は、ボタンのクリックでアニメーションが開始します。全範囲に適用させるCSS変数を当初、pausedに定義しクリックによりrunnningに更新することによってアニメーションを制御します。変化量が100%になればアニメーションが停止するのでCSS変数はそのままです。
前述しましたが線の伸縮はCSSのみで十分ですが、透過率や表示タイトルを更新するためにJavaScriptコードを追加しています。
Result(実演)
上図において、右下の◢ボタンをクリックすると《ニュースセンター》に届いた最新ニュースを、印象に残るよう動くメッセージとして描画することができます。再表示するにはブラウザのリロードボタンをクリックしてください。
効果的な応用

メッセージを囲み枠内に表示する今回の試みで、用意する情報はテキストだけであり画像データを一切、使っていません。
ラジオの表示窓に動くメッセージとして表示できないだろうか。災害緊急用連絡は多く場合、ラジオで十分です。
テレビの電力消費量はラジオに比べて極めて大きいです。災害時、近くの体育館に避難した折、小さなラジオを携行し情報収集に役立ちました。
電力逼迫の折、新しいことに目を向け往年の日本の勢いを取り戻したいものです。
他人・他社の後追いでは未来がありません。

情報伝達においてインターネットが主流になりましたが、テレビ・ラジオの二者間ではテレビ一辺倒に偏りすぎです。今こそラジオの役割を考え直したいです。
そうでなければラジオの発明者や商業化に尽力したマルコー二、エジソン、レオナルド・フェッセンデンなどが草葉の陰で泣いているでしょう。