inventor のすべての投稿

自然淘汰を待てない

2022-10-01ものづくり筆耕ブログinventor

取捨選択は世の習い

日本は海に囲まれ他国からの文化を取り入れ、巧妙に自国に合ったように改変して特有の文化を形成してきたと言えるでしょう。

だからいいものは取り入れ、時代にそぐわなくなったものは捨てていかないとごみの山になります。

誰がそれを決めて実行に移すのでしょう。それは国民の総意がなせるのではないだろうか。

歴史のひとこま

「人一倍」という言葉がありますが明治初頭までは二倍のことを指していましたが、国際標準に例えるとややこしいということで、二倍は二倍以外使ってはならないというお触れが出て、国際標準に統一されました。

他国では使ってないものに12時があります。時刻は12進数で0～11が普通です。なのに0時のことを12時と言います。

長年の習慣で真夜中は0時、正午は12時がいいかな。それならば0～23を用いる24時間制に切り替えるべきです。24種の数字より12種ならば経費がかからないので12時間制だったでしょうか。

今は液晶表示で正午に0～11を12～23に変更すれば良いのです。経費は微小ですが付加価値は格段にアップします。

それから、ちょっと言いにくいことですが、渡辺の「辺」、斉藤の「斉」などの異体字があります。学校の名簿や戸籍にはコード化された文字で印字できるのでしょうか。当事者でないものが何を言うかと叱られそうですが、統一すべき時期ではないでしょうか。

これは戸籍として登録するときに生じたものでしょうか、富にも上の点がない「冨」があるし、吉の他、上より下が長い「吉」があります。また、シンニュウ、しんにょう篇に点が２つのものも存在します。

統一するには難事業となるでしょうがソフトウェアの仕事がなくなりかけた頃、国民的事業として実行されることを願っています。

ローマ字表記もバラバラ

地名、人名のローマ字表記もバラバラです。富士山は「Mt.Fuji」ですが月山は「Mt.Gassan」、大山も「My.Oyama」。その他、長音もoh,u,＾,ーなど多種にわたっています。

私の幼少の頃には「箱根の山」が小学唱歌として口ずさまれましたが、今では歌われません。「一夫関に当るや万夫も開くなし」とは意味がわかりません。「村の鍛冶屋」の歌詞に「ふいご」が出てきますが理解できる人は超高齢者だけです。

さいごに

新しいことが次から次へと押し寄せてきます。残念ながら価値の低いもの、使われなくなったものは整理されていきます。また「老兵は死なず、消え去るのみ」ですか。

全画面表示について

2022-09-26ものづくり筆耕ブログinventor

画面切り替えに追加処理

ブラウザを用いてブログなどを見るとき、ウィンドウモード（フルスクリーンモードの対語）で動作します。そこからフルスクリーンモード（全画面表示）で動作するには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を押します」を非表示にすることはできません。非表示の手段が公開されるまでそのメッセージを無視しましょう。

ブログに挿入される広告

2022-09-22ものづくり筆耕ブログinventor

動静をつかむ広告

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

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

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

記憶に残るニュース表現

2022-09-20ものづくり筆耕ブログinventor

印象に残る表現

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

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

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

効果的な応用

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

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

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

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

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

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

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

シルエットと万華鏡

2022-09-15ものづくり筆耕ブログinventor

右のシルエットをクリックして、ユーチューブ《様々なシルエットに万華鏡を描画》にて、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をブロックし始めました。