月別アーカイブ: 2022年9月

全画面表示について

画面切り替えに追加処理

ブラウザを用いてブログなどを見るとき、ウィンドウモード(フルスクリーンモードの対語)で動作します。そこからフルスクリーンモード(全画面表示)で動作するにはF11キーを押します。その後、元のウィンドウモードにも戻すにはESCやF11をキー入力します。「全画面表示を終了するにはESCを押します」のメッセージはFullscreenAPIが出力しているので非表示にすることができません。

また、画面切り替え時に処理を追加してもっときめ細かな動作にしたいときがあります。上の図において、ウィンドウモードではToggle Fullscreen Modeボタンの上にはタスクバーなどがあり窮屈さを感じさせませんが、フルスクリーンモードではボタンやメッセージの上にスペースを用意してゆったり感がほしいところです。

イベント関数の利用法

キー押下で発火するイベントを捉えて表示位置を変更する制御を設定する方法をまとめました。iframeで画面を重ね合わせる用途などに応用できるでしょう。iframeの記事はすでに公開済みであり原本に手を加えることができませんので参考になることでしょう。サンプルコード18~21行にてフルスクリーン表示に切り替えています。ここに全画面表示する処理を用意します。

フルスクリーンAPIでrequestFullscreenを指定すると背景色が黒になるので、7行目でDiv要素(id=”fullscreen-div”)の背景色を白(white)に指定します。

13行ではclickイベントに制御が渡ったときにデバッグ表示されます。この表示により切り替えボタンの押下で表示、F11キーの押下で非表示になることが判明しました。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body onload="document.getElementById('screen').addEventListener('click', switchFullScreen)"> <!-- ボタンクリックによる受付 -->
<Div id="fullscreen-div" style="background:white;">		<!-- backgroundをwhiteに設定するのはフルスクリーンのとき、画面の黒対策 -->
<h2>全画面制御</h2>
<button id="screen">全画面表示</button>
</Div>
<script>
function switchFullScreen(event) {	// 表示を切り替える, フルスクリーン表示なら解除する
  console.log("EVENT", event);		// F11でイベント発火するかを調べる
  if(checkFullScreen()){			// exitFullscreen is only available on the Document object.
  	document.getElementById('screen').innerHTML="全画面表示";
  	document.exitFullscreen();
  }
  else{								// 通常表示ならフルスクリーン表示にする
  	document.getElementById('screen').innerHTML="全画面解除";
  	document.getElementById('fullscreen-div').requestFullscreen();
  }
}
function checkFullScreen() {		// フルスクリーン表示しているか確認
  if(document.fullscreenElement||document.mozFullscreenElement||document.webkitFullscreenElement||document.msFullscreenElement)return true;
  return false;
}
</script>
</body>
</html>

Result(実演)

全画面制御の下にある画面切り替えボタンを押して画面モードを切り替えます。

全画面制御

 

考察

画面モードを切り替えるにはFullscreenAPIを使わざるを得ないので「全画面表示を終了するにはESCを押します」を非表示にすることはできません。非表示の手段が公開されるまでそのメッセージを無視しましょう。

 

ブログに挿入される広告

動静をつかむ広告

運営するブログに広告を入れるように変更してから数年が経ちます。当初、記事の最初と最後のみに設定したはずでしたが、いつの間にか記事の切れ目にも入るようになりました。以前より格段に読みづらくなりました。

広告収入は100円/月にもなりませんが世の中の動静をつかむのに役立ちます。よって、このまま継続することにしましたが、リロードボタンをクリックすれば、記事中に広告が挿入されなくなるようです。

複数のブラウザで同じような動きをします。ブラウザの都合で突如、変わる可能性があるでしょうが試されてはいかがでしょう。

記憶に残るニュース表現

印象に残る表現

新しい技術というわけではありませんが最近、テレビの世界で短い文章を四角の枠で動的に囲んで描画する方式が目立ちます。

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(実演)
二ュースセンターに届いている最新の二ュース
TacM

上図において、右下のボタンをクリックすると《ニュースセンター》に届いた最新ニュースを、印象に残るよう動くメッセージとして描画することができます。再表示するにはブラウザのリロードボタンをクリックしてください。

効果的な応用

「キクチラヂヲ堂」のサイトより

メッセージを囲み枠内に表示する今回の試みで、用意する情報はテキストだけであり画像データを一切、使っていません。

ラジオの表示窓に動くメッセージとして表示できないだろうか。災害緊急用連絡は多く場合、ラジオで十分です。

テレビの電力消費量はラジオに比べて極めて大きいです。災害時、近くの体育館に避難した折、小さなラジオを携行し情報収集に役立ちました。

電力逼迫の折、新しいことに目を向け往年の日本の勢いを取り戻したいものです。

他人・他社の後追いでは未来がありません。

東建コーポレーション株式会社のホームページより

情報伝達においてインターネットが主流になりましたが、テレビ・ラジオの二者間ではテレビ一辺倒に偏りすぎです。今こそラジオの役割を考え直したいです。

そうでなければラジオの発明者や商業化に尽力したマルコー二、エジソン、レオナルド・フェッセンデンなどが草葉の陰で泣いているでしょう。

 

シルエットと万華鏡

右のシルエットをクリックして、ユーチューブ《様々なシルエットに万華鏡を描画》にて、HTMLプログラミング習得の入り口に立つことができます。

リンク先から動画を閲覧ください。動画の描画終了後、戻るボタン(⇦)にてこのページに戻ってきてください。

手作りと準備

今はお金さえ出せば何でも手に入る時代です。カブト虫やメダカを欲しい時は山や川に出かけなくてもデパートで購入できます。大昔は竹など自然のモノで水鉄砲や凧を作りましたが今では手作り教育はどのようになっているでしょうか。

現在、自然は日常から遠くなって手軽に利用することは難しくなりました。その代わり、教材やおもちゃ会社からキット商品として入手可能です。実績のある通販会社から購入できます。

地元の図書館において、夏休みを利用して、『親子工作教室』などが開かれているようです。

ここでは、トンカチ、半田ごて、ねじ回しなどで作る工作ではなくプログラミングによる電子工作を扱います。小動物、果物、乗り物などを象った影絵のなかで万華鏡が千変万化に描画される作品の自作についてまとめています。

よってモノの準備とは物品の収集というよりも知識の吸収といった方がふさわしいでしょう。

シルエットを用意

シルエットは16個用意しました。ハートマーク、メロン、雲、オリンピックマーク、くじら、パンダなどです。

例えば雲の場合、空の部分を淡い色、オレンジ色の縁取りがあって内部を透明色に設定し型どった窓を通して、万華鏡が表現するさまざまな描写を見ることができます。

 

万華鏡のライブラリーを用意

p5.jsはプログラマでない人たち(アーティスト、教育者、初心者)がJavaScriptを簡単に利用できるようにするためにLauren McCarthy氏がライブラリとして開発して世に公開したものです。

これを利用することによって、多くの人々は本来の構成部分に力を注ぐことが可能になりました。

アニメーションを準備

アニメーションは背景色を自動的に時間差で表示させたり、点滅機能を指定することができます。

フルスクリーン表示と解除

モニタ画面は当初、タイトルバー、メニューバー、ツールバー、ステータスバーなどが表示された初期画面状態で動作しますが、本来、動作するソフトウェアだけが表示される全画面(フルスクリーン)で表示されるとかなり見やすくなります。

それらを制御するAPIはフルスクリーンAPIといってシステムに常設されています。F11とESCショートカットキーにて制御されます。この機能があることにより、くっきり、すっきりした表示を得ることができますが、画面モードが変化するときに特別の処理を追加したい場合に困ることがあります。


そのため、ここでは「フルスクリーン表示」「フルスクリーン解除」ボタンを設けました。この仕様について記録に残します。

フルスクリーンAPIの仕様について

フルスクリーンAPIは標準的な使い方が公開されているに過ぎません。「全画面表示を終了するためにESCを押します」というメッセージがいつも表示されるのはウザったいのでこれを非表示にすることは見つかっていません。また、フルスクリーン表示するにはrequestFullscreen()、フルスクリーン解除するにはexitFullscreen()を呼ぶように明記されて有効に動作します。



よって全画面表示を終了するためにESCを押すことを無効にしたくても方法がわかりません。よって無効にすることができないので依然としてF11/ESCキーによる機能が有効であり、新しく追加した「全画面表示」「全画面解除」ボタンと競合して困っています。

さいごに

完璧な動作とは言えませんが、「全画面表示」「全画面解除」ボタンを使う限り期待した動作が得られたので公開いたします。全画面処理は難解であり盛り込み過ぎでした。あぁ反省!

残念なことに

動くメッセージの部分はHTMLプログラミングで公開する予定でしたが、いざアップという段階で「mixed content…」のエラーが噴出して思うように進みませんでした。当サイトはかなり前に立ち上げ、ブログアドレスがhttpであるのにhttpsから始まる動画や画像を参照しているからです。巷ではhttpアドレスを持つ画像にて証券取引に使い多額の損失を受けた事例が起きています。時代の流れでほとんどのブラウザがmixed contentをブロックし始めました。

企業や団体の平均寿命、参照

mixed contentの他、管理ソフトPHPのバージョンアップ、アップするファイルサイズの制限など、このブログの形態も古めかしさを醸し出しているのに加えて体力が追いつかず、就活終活すべき時期に差し掛かったと自覚しています。

 マッカーサー退任の弁
老兵は死なず、消え去るのみ
Old soldiers never die, they just fade away.


上の図で右下のボタンをクリックするとマッカーサー元帥が5秒後に退任します。

秋本番

こよなく酒を愛した牧水の和歌を動くメッセージに

©2022 TacM, Ver0.04

災害対策

夏休みも終わり秋本番です。加えて台風シーズンです。高度成長期に作られたインフラも耐用年数切れのモノが多くなっています。

その中で数十年に一度の雨風では防ぎようありません。予報に注意して早めの避難が望まれます。

旅の巨人・歌の巨人

これからの季節は《実りの秋》と言われ、食べ物がおいしい季節です。お酒とりわけ日本酒がぴったりの季節です。

旅の巨人・歌の巨人とたたえられ、旅、酒、女を愛し43歳の若さでこの世を去った若山牧水の短歌から有名どころを手書き風に表現してみました。

動くメッセージを再表示するにはブラウザのロードボタンをクリックしてください。

 

人の巡り合いと最小公倍数

スポーツジム利用者の巡り合いと最小公倍数

3日、4日、8日ごとにスポーツジムを利用する3人の行動を図示化し、次に出会う日がいつかを考えながら最小公倍数を理解する。

youtube画面が現れたら中央の開始ボタン(▶)をクリックし全画面サイズでご覧ください。