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

画線法でカウント

物を数える

物を数えるとき、漢字圏では正(しょう)の字を用いて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>