「ものづくり筆耕ブログ」カテゴリーアーカイブ

ものづくりに関する想い

百人一首『人を恋うる歌』

2022-11-04ものづくり筆耕ブログjohmonjin

《人を恋うる歌》

百人一首40番に収録された『平兼盛』の両想いの和歌 ©TacM,2022 Ver0.01

しのぶれど
色いろにでにけり
わが恋こいは
ものや思おもふと
人ひとの問とふまで
小倉百人一首四〇番平兼盛

【現代語訳】
隠していた私の恋心が顔色に出てしまい
恋の悩みでもあるのかと
人に尋ねられてしまったよ

I wait for a button to be pushed. 👉

HTMLプログラミングコード

主要ブラウザで動作します。

<html>										<!-- blog0/simpleSaigyo.htmlから派生 -->
<head>
<meta charset="utf-8">
</head>
<body onload="">
<DIV style="width:600px; margin:0 auto; border:0px solid darkviolet;">
<div style="width:600px; height:40px; text-align:center; font-size:36px; font-weight:bold; font-family:'HGS教科書体'; border:0px solid pink;">《人を恋うる歌》</div>
<div id="credit" style="width:600px; height:40px; text-align:center; color:navy; font-size:20px; line-height:1.8em; border:0px solid orange; display:block;">百人一首40番に収録された『平兼盛』の両想いの和歌<span style="font-size:10px;">&nbsp;&copy;TacM,2022 Ver0.01</span></div>
<Div id="tanka" style="position:relative; width:596px; height:400px; border:0px solid maroon; border-radius:10px;">
 <div id="kanemori" style="position:absolute; left:300px; top:25px; width:281px; height:350px; line-height:1.6em; writing-mode:vertical-rl; font-size:44px; font-weight:bold; font-family:'HGP教科書体','Yu Mincho',YuMincho,'Hiragino Mincho ProN','Hiragino Mincho Pro',serif; color:cyan; opacity:1.0; border:0px solid deeppink; z-index:7;">
  しのぶれど<BR>&emsp;<ruby>色<rt>いろ</rt></ruby>にでにけり<BR>&emsp;&emsp;わが<ruby>恋<rt>こい</rt></ruby>は<BR>
  ものや<ruby>思<rt>おも</rt></ruby>ふと<BR>&emsp;<ruby>人<rt>ひと</rt></ruby>の<ruby>問<rt>と</rt></ruby>ふまで
  <span style="font-size:18px;"><BR>&emsp;&emsp;&emsp;小倉百人一首四〇番&emsp;平&nbsp;兼盛</span>
  <div style="width:15px; height:340px; border:0px solid yellow;"></div>
  <div id="yaku" style="font-size:18px; color:ivory; line-height:1.3em; opacity:1.0;">【現代語訳】<BR>隠していた私の恋心が顔色に出てしまい<BR>恋の悩みでもあるのかと<BR>人に尋ねられてしまったよ</div>
 </div>
 <img id="p5" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/09/doncho.png" width="585" height="362" style="position:absolute; left:5px; top:20px; width:585px; height:362px; z-index:7;">
 <img id="g6" src="https://aidesign.lolipop.jp/wp-content/uploads/2022/01/hinode2022.png" width="600" height="450" style="width:600px; height:404px; position:absolute; top:-3px; left:-2px; clip:rect(10px,0px,46px,0px) z-index:6;">
</Div>
<div id="ttl" style="margin-top:5px; height:40px; float:left; font-size:16px; line-height:2.8em; color:hotpink; border:0px solid red;">&nbsp;I wait for a button to be pushed.&nbsp;&#x1F449;&nbsp;</div>
<audio id="bgm" style="margin-top:5px; height:40px;" src="https://aidesign.lolipop.jp/wp-content/uploads/2019/11/MusMus-BGM-CP05.mp3" controls controlslist="nodownload"></audio>
</DIV>
<script type="text/javascript" charset="utf-8">
const STEP=150;								//150 250 400 100steps
const DIST=200;								//200 80ms
const evnt = document.getElementById("bgm");//BGMのイベントオブジェクト

var c=0;
	evnt.addEventListener('play',function(){//再生ボタンの押下で起動  月のコラージュ  MusMusのフリーBGM・音楽素材
	  setWidth();
	  evnt.addEventListener('ended',function(){				//BGM再生終了
		document.getElementById("ttl").style.display=evnt.style.display="none";	//皆無にする
	  }, true);
	}, true);								//trueで本来のイベント処理を続行させる
function setWidth(){						//アニメーション関数2 幅を調整
var w = Math.round(585*c/(STEP));			//スムース処理, 0 ～ 99
	document.getElementById("p5").style.width=(585-w) + "px";//585 ～ 0 //console.log(c, w, document.getElementById("p5").style.width);
	if(++c<STEP)setTimeout("setWidth()", DIST);						//行内のスムージング or 行単位のスムージング
	else		document.getElementById("p5").style.display="none";	//皆無にする doncho.png
}
</script>
</body>
</html>

木枯らし1号2022

2022-10-29ものづくり筆耕ブログjohmonjin

木枯らし1号：10月半ばから11月末までの間に吹く、西高東低の冬型の季節風

輝

ブログ記事にパラメーターを与える方法

2022-10-19ものづくり筆耕ブログjohmonjin

ブログ記事にパラメーターを与える方法

ブログに『皆さん、おはようございます』のようなあいさつ文を、夕方には『皆さん、こんばんは』と表示したいときがあります。これにはDate関数などを用いれば想定した結果を得ることができます。

スマホやPCが持つシステム要因によらず、あらかじめ決めておいた動作にしたい場合はURLにパラメーターを付属する方法があります。この場合は記事の中でURLに付属されたパラメーターを解析して所定の動作になるようにプログラミングしておかなければなりません。

童謡『赤とんぼ』の再生位置を指定する方法によってその解析例を以下に説明します。

URLの設定例1　https://www.youtube.com/watch?v=WkCe9BpIcpU
URLの設定例2　https://〇〇〇△△△.html?currentTime=28

開始位置：0 👈の数値に注目し音声のユーザーインターフェースに反映されることを確認してください。

再生ボタンの押下で、URLに指定したcurrentTime位置から『赤とんぼ』が再生されます。

プログラミングコード

<html>
<body bgcolor="aliceblue">
<h2>ブログ記事にパラメーターを与える方法</h2>
<p>ブログに『皆さん、おはようございます』のようなあいさつ文を、夕方には『皆さん、こんばんは』と表示したいときがあります。これにはDate関数などを用いれば想定した結果を得ることができます。</p>
<p>スマホやPCが持つシステム要因によらず、あらかじめ決めておいた動作にしたい場合はURLにパラメーターを付属する方法があります。この場合は記事の中でURLに付属されたパラメーターを解析して所定の動作になるようにプログラミングしておかなければなりません。</p>
<p>童謡『赤とんぼ』の再生位置を指定する方法によってその解析例を以下に説明します。</p>
<p style="font-size:14px;">URLの設定例1　<span style="font-size:20px;">https://www.youtube.com/watch?v=WkCe9BpIcpU</span><BR>
URLの設定例2　<span style="font-size:20px;">https://〇〇〇△△△.html?currentTime=28</span></p>
<div>開始位置：<span id="currenttime" style="color:deeppink;">0</span>&nbsp;<span style="vertical-align:top;">&#x1F448;</span>の数値に注目し音声のユーザーインターフェースに反映されることを確認してください。</div>
<div>再生ボタンの押下で、URLに指定したcurrentTime位置から『赤とんぼ』が再生されます。</div>
<audio id="bgm" src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/JASRAC_000-0391-3_AkaTombo_xf_Music_Box.mp3" controls></audio>
<script>
let ProcName=location.href;									//現在ページURLを参照
var param = location.search;								//URLパラメータ文字列を取得する
var par=param.indexOf("currentTime=");						//開始位置
console.log(param, par, "location.href="+ProcName);
var cur=0;
if(par>0){													//?currentTime=23
	cur=param.substr(par+12);								//&#x27A1;
	console.log("param="+param, "CUR="+cur);
	document.getElementById("currenttime").innerHTML=cur;
	document.getElementById("bgm").currentTime=cur;
}
</script>
</body>
</html>

前方後円墳を訪ねる

2022-10-15ものづくり筆耕ブログjohmonjin

上州路を歩く

寒露の候に上州路を歩いてきました。以下が古墳の案内です。なぜ鍵穴の形なのかはここから知ることはできません。小学6年生向け「学研教育情報資料センター」の資料によると前の四角形（方形）と後方の円形（古墳）が繋がっているので上から見ると鍵あなの形に見えるとあります。

前方後円墳

鍵穴のような形の古墳は江戸時代の学者・蒲生君平（がもうくんぺい）によって前方後円墳と名付けられたとされています。

前方後円墳タイプは朝鮮半島や中国にもなく日本特有のデザインと言われています。

古墳時代のはじまり

考古年代は武器・生活器具に使われた材料により分類されます。一方、日本の歴史年代は行政地（都）が置かれた場所などにより区分されます。考古年代は石器時代-青銅器時代-鉄器時代と進みます。

３世紀後半―７世紀ころ、前方後円墳に代表される古墳が盛んに造られました。この時代を考古年代では古墳時代と呼んでいます。農耕生産の向上に伴い社会的身分の差が生じました。

年表出典：https://ameblo.jp/harusun-happy/entry-12458027909.html

利用金属の順序

金属を生活の機器に初めて利用したのは金や銀とされています。その後、銅や鉄に進んだものと思われます。加工しやすさの順に使われものと推測できますが、単に金属の融点の低い順に使われたわけでなく、もうちょっと複雑のようです。詳しくは専門家にお任せするとして、歴史的には青銅器-鉄器の順になります。

埴輪を自作

市民によって自作された埴輪が公園のいたるところに飾られてありました。そこには作成者と製造年月日が記されてありました。市が教育的見地から公募して作られたのだろうか。

観光事業として

大型バスの駐車場が用意されてあったので、車を使っての来場が基本のようです。公共交通機関を利用するには不便だったのでタクシー会社の売り上げに貢献しました。

お休みどころなどは近くに見当たらず教育県の面目躍如といったところですが少しもの足りなさを感じました。

不寛容の時代

2022-10-14ものづくり筆耕ブログjohmonjin

価値観の多様性

寛容に似た雰囲気に、「価値観の多様性」の尊重があります。三人集まると社会が構成されると言われます。

社会は様々な考えを持つ人々の集合体です。このたび、旅をしての悲喜こもごもを綴ってみたくなりました。

国の中央、地方を問わず同じような傾向にあり、シャッターを締め切った店舗や窓が壊れた空き家が目立ちます。高度成長のひずみ、人口減に対応できない行政など要因はいっぱいあります。

時代の推移

今や日本はあらゆる分野で劣化しているなどと言いたくありませんが、当たらずとも遠からずと感じます。また、世代間の分断が半端ではないようです。子育てを終えた世代はもっと上の世代から、何の援助も受けずに立派に勤めを果たし切ったとうぬぼれています。

幼稚園や小学校近くの住宅地では、子供の騒ぐ声がうるさいと抗議します。

電車内や公共施設でちょっとでも大声を出そうものなら重大な犯罪を犯した如く睨め付けられます。他人から許しや助けを受けて老境に至ったことなどどこ吹く風です。

そこにはマナーがあって然るべしです。ある体験からです。新幹線トイレで用を足していると激しくドアをノックされ、あわてて外に出ると中年女性が立っていて、はねつけるようにしてトイレの中に入っていきました。

我慢できないほどの生理的欲求であったことは理解できますが、会釈くらいして欲しかったです。明日は我が身、言いたくありませんが『労害』そのものです。往年の西部劇《ローハイド》の一節をもじって『労害、労害、労害、ろ～が～い』。

捨てる神あれば拾う神あり

不寛容は異世代間だけで起きるものではなく、同一世代でも起きます。社会の貧富に連動しているとも思えません。

SNS普及による個人の暴走のなせる業でしょうか。声を上げたもの勝ちの風潮はいつまで続くのでしょう。

旅をして不案内な土地で心細い思いしました。

そのようなときに受けた親切は一生、忘れられないのもです。信州路・交差点近くの土産店のお嬢さん、ありがとう。

緩やかな変化を好む

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

急な変化に対応

季節などのように時間の経過と共に自然に変化するものの他に、急に法律や制度が変わったりするものとがあります。

パソコンで処理していたことをすべてスマホに切り換えるとパニックを引き起こしかねないです。「インテル入ってる」のコマーシャルで名高いIntel CPUの戦略に感心しました。

パソコンの先駆けは8ビットのマイクロプロセッサを使用したPC8000シリーズでした。8ビットのCPUはAT互換機にその後、98シリーズに引き継がれDos/Vマシンに搭載され市民レベルでコンピューターを手にする時代を招来させました。

インテルは間を置かず、16ビットCPUを世に送り出しましたが8ビットのソフトウェアも動作するような仕組みを導入し、過去のソフトウェア資産が無駄にならないような配慮をし、徐々に16ビットの世界に導いたのです。

16, 32, 64ビットと変遷するときも同様の政策が取られました。

スマホの弱点

スマホは電源を入れると即刻、動作するのでのろのろ立ち上がるパソコンを笑い飛ばせます。また、場所を選びません。100ボルト電灯線からの電力を必要としません。行動的な若者向きと言えます。場所を問わずインタ―ネットを利用できることは大きな進歩です。一方、大型、オフィス、パーソナルコンピューターからスタートした高齢者には使いにくい点が多々あります。

例えば、画面が小さい、長文の手紙など複数回に分けて入力することが困難、これまでに蓄積した文章を再利用しにくい、検索において、即時的（リアルタイム）な検索結果が多く、1ヶ月先の旅行スケジュールを組む時などにはひねった工夫を要する…など高齢者には操作が大変です。画面のハードコピーや印字して手軽に配布するにも不向きです。

発展途上

パソコンにおいて四六時中、電源を入れっぱなしで利用するユーザーには当てはまりませんが、時たま使う利用者にはソフトウェアのアップデートが煩雑に発生し、電源シャットダウンが即刻、行われないなどの不都合が生じます。パソコンやスマホは発展途上にあります。　　　

習熟度に応じた機種の品ぞろえやシステム構築は、歴史あるある商品と比べると格段に劣ります。多くの人に安く提供するには総花的な商品にならざるを得ません。商品の説明書には、「性能向上のためお断りなく商品の改良が行われることがあります」と堂々と謳ってあります。

声を上げよう

旅行や耐久消費財の購入には高齢者が予算を落としやすいと言われていますが、スマホなどの商品について「もっと使いやすく」と声を上げる高齢者は少ないと言われています。

もっと、使いやすいスマホの普及が望まれます。痒いところに手が届く機能が欲しいです。

使っているスマホを5段階満足度で表示すれば、左から2番目です。

セキュリティーを考える

2022-10-05ものづくり筆耕ブログjohmonjin

体験したこと

HTMLを使って、有名な若山牧水の短歌をBGMを付けて筆記体風に描画しながら、背景画を複数回変えて吟じてみました。HTMLを満足いくまで高度化してその動きを動画に収め、公開サイトにアップしました。

Result（実演）

おろそかにできない情報

古い外国の話ですが、電話会社の専門職員がうっかり無料で電話する方法を公けにしてしまい、システム変更の憂き目になったというニュースがありました。

プライバシーは簡単に遺漏

パソコンやスマホの情報格納先をユーチューブに載せるのは危険極まりないです。日頃、何気なく画面上に表示された情報が動画に残ることがあります。

パソコンの画面にはタイトルバー、アドレスバー、ステータスバーなどに利用履歴や状況が表示され残っています。数時間前に見たアプリが他人に判ることがあります。

何の問題もないのですがある著名人が、若いカップルが好むサイトをクイックアクセスできるように画面登録していた情報が自分で公開した動画の付随データにくっついていて多くの人に知られてしまいました。この行政の最高責任者は配偶者と仲良く刺激になるサイトを閲覧していただけのようです。他人に迷惑かけることは一切ありません。

公開情報を吟味する

プライバシーを誰かれなく公けにすることは憚れる時代です。今回、動画を作るに当たり極力、個人情報が残らないように配慮したことをしたためます。

残したくない情報

HTMLにて作成したアプリケーションは10個近いファイルに収められディスクデバイスなどに保存されます。これらのファイルは公開されることもあり、セキュリティーは高くありませんが近傍ファイルはセキュリティーが求められます。にもかかわらずプログラムを構成するファイルは絶対パスという形で表に出てしまいます。このため、近傍にあるファイル名の一部が推定される結果になります。

これらのセキュリティー不安を払しょくする一案を以下にまとめます。

ゲストモードでブラウザを

個人情報を秘匿するために「Google Chromeのアドレスバーを非表示にする方法」などである程度改善されましたが、Meghty Text, LINE, Googleアカウント名などのアイコンを非表示にすることができませんでした。F11を押下して全画面表示にするとほとんど解決しますが、location.hrefでページを新しくしたときに画面位置が変動します。まだ不満です。

これらを一気に解決したのがゲストモードでブラウザを使う方法です。上の動画にはGoogleアカウント名などが非表示になっています。以前は画面の右上あたりに様々な情報が表示されましたが今では仮の名前：ゲストが表示されるだけです。

ゲストモードで起動した画面のURL入力枠にHTMLソフトアドレスを設定して動作させ、mp4形式の動画を作成しユーチューブにアップします。投稿後、ユーチューブで投稿ページを描画し画面下の「共有」をクリックして埋め込みコードを取得し、このページに貼り付けてあります。

自然淘汰を待てない

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

取捨選択は世の習い

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

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

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

歴史のひとこま

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

他国では使ってないものに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ものづくり筆耕ブログjohmonjin

画面切り替えに追加処理

ブラウザを用いてブログなどを見るとき、ウィンドウモード（フルスクリーンモードの対語）で動作します。そこからフルスクリーンモード（全画面表示）で動作するには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ものづくり筆耕ブログjohmonjin

動静をつかむ広告

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

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

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

2024年5月
日	月	火	水	木	金	土
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31