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

ものづくりに関する想い

画線法でカウント

物を数える

物を数えるとき、漢字圏では正(しょう)の字を用いて5つを一つの塊として数える風習がありますが、英語圏では縦と横棒を使います。

この方式を画線法と呼んでいますが、英語圏ではTally marksの呼称を用います。

画数を追加する方式では消しゴムなどで直前状態をリセットする必要はありません。よって、和式では上寄せ、洋式では左寄せで書き始めます。

Tally marks

次の動画を再生してTally Marksによる数え方をお楽しみください。

 

正の字を使う方法は見慣れていると思います。ここではTally marksを掘り下げます。カウントを始めるときは黒板や大きな紙に手書きすることが多く、HTMLによる動く表現で実際の動作に似せています。

下部、左端にデジタル値が表示されるので厳密な数が判るのに対して、右側のTally Marksはアナログ値のように全体の多寡を知ることができます。

おわりに

規模の小さい投票数を確認するときなど、多くの国では似たような方法を採用しています。それは手足や指の本数はどの民族も同じであり、生活様式においても大差がないからであろうか。

アニメーション初期化

アニメーションの再使用

HTMLとCSSのanimationを用いるとかなり高度なアニメーションをすることができます。背景色を定期的に変えたり、画像を回転して多彩な表現が実現します。

当初、設定した動きが終了して再度、実行しようとするにはそう簡単ではありませんでした。そこで再使用の成功例を記録に残します。

再使用のつぼ

アニメーションは繰り返し表示されることが多く、そのため開始前に初期化が行われます。初期化は通常の使い方ならば開始前に一度、行われますが2度目以降の初期化はあいまいです。

正しく初期化されるには英文の言語解説書を詳読することになりますが、からくりをひとつ手に入れましたので成功例を以下にまとめました。

ある要素でanimationが定義され新しいクラス名に出会うとそのanimationが初期化されるようです。

よって、初回はおおむね大過なく正常動作になりますが、2回目以降も正しい動作にするにはアニメーション終了イベントを取り付けて、その中でクラスを削除することでanimationを再初期化可能にすることができます。

具体的には、開始する前にクラスを追加し、終了イベントでクラスを削除します。一方、Cssでは追加したクラスが定義された時に有効になるようにanimationを条件設定します。

処理を繰り返すにはそこで次のアニメーションを呼び出します。

例題においてはカウンタを用意して3回繰り返しています。

例題では、1.8秒でアニメーションが完了し、終了イベントでクラスを削除して2秒後に再起動されるようにプログラミングされています。

タイミングのあり様と処理の関連を下図にしましたので参考にしてください。

最後にソースコードを掲載しましたので参考になれば幸いです。丁寧なコメントはあなたのコード理解に役立つことでしょう。

CSSクラスの追加や削除する方法

要素にクラスを追加したり削除するにはclassListメソッドを使います。詳しくはHTML解説書をご覧ください。

RESULT
パンダ画像の回転が止まっているときはリロードボタンを押してください。

プログラミングコード

<!DOCTYPE html>							<!--- &copy;2022 TacM, Ver0.30 -->
<html>
<head>
<meta charset="utf-8" />
<style>
.charimg {								/* 基本の要素を定義 */
  width:280px;
  height:280px;
}
.charimg.charmove {						/* charimgとcharmove両方が指定されているタグにのみ有効になりanimation開始 */
  animation: moveframe 900ms linear 2;	/* 0.9秒/周 2回転, 1.8秒で終了 */
  width:280px; height:280px;
  transform-origin: 140px 140px;
}
@keyframes moveframe {					/* 回転keyframe */
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body onload="finishEventInstall();startAnimation();">
<Div style="position:relative; width:640px; height:480px; border:0px solid red;">
  <div style="position:absolute; top:50%; left:50%; margin-right:-50%; transform:translate(-50%, -50%); width:280px; height:280px; border:0px solid green;">
    <img id="img01" class="charimg" src="http://aidesign.lolipop.jp/wp-content/uploads/2022/11/panda.png" />
  </div>
</Div>
<script type="text/javascript">
const elem=document.getElementById('img01');
var ct=0;
function finishEventInstall(){					//アニメーション終了イベントを取り付ける
  console.log("window.addEventListener");
  elem.addEventListener('animationend', () => {	//終了イベント処理
    elem.classList.remove('charmove');			//クラスを削除することでanimationを再初期化可能にする
    if(++ct<3) setTimeout('startAnimation()', 2000);	//再起動を指令、条件が整っていればanimationが開始する
  });
}
function startAnimation() {						//animation処理
  console.log("startAnimation", ct);
  elem.classList.add('charmove');				//クラスを追加することでanimationを初期化する
}
</script>
</body>
</html>

 

JR自動券売機の奇々怪々

丁寧な応対を望む

人出不足が顕著になり機械化・省力化を避けて通ることができない時代になりました。お粗末な自動応対にはストレスが溜まります。

機械の扱いにおいて稀なケースを弾き飛ばすやり方はいかがなものでしょうか。JRの自動券売機には閉口させられます。

今回、在来線と新幹線を使って旅行しましたが乗車券と特急券を自動販売機で購入し、大雑把な応対に戸惑いました。イからロまで在来線で行き、ロ駅、新幹線ホーム臨時発売所でロ-二間の新幹線特急券だけを購入したつもりでした。

ところがこの券には乗車券料金も含まれていたのです。イ駅で購入した乗車券と特急券を新幹線改札口で入れて通過しようとすると事実と異なるエラーが表示されて扉は閉まりました。

何度やり直しても同じであり、係員に相談すると乗車券と特急券で二重に支払っているので払い戻してくださいとの説明を受けました。

人間並みの応対

窓口で係員から特急券を購入する場合は乗車券の提示が求められます。自動販売機でもそれをすればこの問題は解決すると思われます。国会答弁風な言い回しをするならば、丁寧な応対が望まれます。

この誤りはたびたび起きているように感じられます。降車駅で払い戻しの手続きをしたところ、本来は払い戻し手数料をもらうところですが手数料なしで払い戻しますといわれました。システムの不備に恩を着せられても一茶の句をもじって『うれしさも中くらいなりおらが旅』

add.gig.co.jpから引用

もう一つは途中下車ですが大雑把な機械の応対でしたが割愛します。ハードウェアは一流でも細かい部分をおろそかにしているところが多々、見受けられます。省力化を目指した機器が有効に使われないと人出不足に逆行します。AIなど目立つところばかりに目をむけず、身近なところから丁寧な応対をお願いします。

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

《人を恋うる歌》
百人一首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="http://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="http://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="http://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>

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

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

ブログに『皆さん、おはようございます』のようなあいさつ文を、夕方には『皆さん、こんばんは』と表示したいときがあります。これには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="http://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>

前方後円墳を訪ねる

上州路を歩く

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

前方後円墳

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

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

古墳時代のはじまり

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

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

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

利用金属の順序

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

埴輪を自作

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

観光事業として

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

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

不寛容の時代

価値観の多様性

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

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

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

時代の推移

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

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

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

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

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

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

山形の女性へのコメント「肌がきれい」『さざなみのおうみ』から引用

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

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

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

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

緩やかな変化を好む

急な変化に対応

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

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

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

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

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

スマホの弱点

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

古いコンピューター

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

発展途上

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

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

声を上げよう

顧客満足度

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

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

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

セキュリティーを考える

体験したこと

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

Result(実演)

おろそかにできない情報

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

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

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

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



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

公開情報を吟味する

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

残したくない情報

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

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

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

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



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

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