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

ものづくりに関する想い

表示時間を変更する方法

setTimeout関数の的確利用

コンピュータ処理は何事も瞬時に事を成し遂げてしまいます。ゆったり、ゆっくり行うには高度な技を行使しなければなりません。筆記体で一筆書きのようにサインする様を表現したことがあります。かなりの労力を要したと記憶しています。

興味のある方には下記のページをご覧ください。多くのテクニックが詰まっていることでしょう。

暑中見舞い2022

今回、有名な囲碁の格言を数十個、描写することになり、格言の長さに比例して表示時間を調整する処理を整理してみました。画面は紙芝居のように格言ごとに改まるので、長い格言ならば長い表示時間になるように制御されます。まずは表示例をご覧ください。再実行はブラウザのロードボタンを使います。

Result

参考コード

<html>
<head>
<meta charset="utf-8">
<title>文字数に応じて表示時間を設定する</title>
</head>
<body>
<div id="screen" style="position:relative; width:70%; height:auto; margin:0 auto; font-size:48px; border:1px solid black;"></div>
<script type="text/javascript">
const kakugen=[	"「二子の頭は見ずハネよ」自分と相手の石が二子ずつ並んで対峙した状態の時、相手の頭をハネるのは多くの場合に急所となる",
				"「厚みに近寄るな」相手の厚みに近よると、攻めの標的とされやすい",
				"「二筋は敗線、四筋は勝線」二線を必要以上にハウのは、地が1目ずつしか増えないのに相手の厚みがそれ以上に増えよくない。四線をノビていくのは地が3目ずつ増えて効率がよい",
				"終了"];
var count=0;												//長期に記憶を要すのでグローバル変数
	calcTime(count);										//表示情報を調査し時間制御を織り込む
function calcTime(){										//文字数に応じて表示時間を設定し表示する
	mojisu=kakugen[count].length;							//1回に表示する文字数
	var tm=mojisu * 80;										//文字数から求まる表示時間数
	document.getElementById('screen').innerHTML="<span style='color:pink;'>"+mojisu+"文字&emsp;"+tm+"ms</span><br>"+kakugen[count];
	console.log(count, kakugen[count].length, tm, kakugen[count], document.getElementById('screen').innerHTML);
	if(++count<kakugen.length)	setTimeout(calcTime, tm);	//終了チェック
}
</script>
</body>
</html>

動くメッセージ2024

大衆ゲームひとこと

以下に大衆ゲームについて語っています。私の感想にもとづくものです。

・麻雀

麻雀発祥の地は中国であり、その歴史は古く千年以上の歴史を持つ『マーチャオ(紙牌)』が発展したゲームです。マーチャオが改良され、今の麻雀牌の形になり世界に広まったようです。

愛好者はアジア圏だけでなく、英語圏でも多くいます。日本では役満のひとつを『緑一色』と呼んでいますが『オールグリーン』とも呼ばれて英語圏から我が国に逆輸入されたようです。

日本の麻雀人口は500万人弱であり2020年頃を底にここ数年、微増していることが驚きです。

・囲碁

囲碁の発祥地もインド・チベット・中国あたりのアジア圏という説が濃厚です。発祥の時期は数千年前であり、研究者によりそれぞれの内容になるでしょう。

麻雀や将棋に比べてルールも単純であり多くの国に伝播したことでしょう。わが国では平安貴族にいち早く普及し「源氏物語」の文学作品にも登場しています。徳川家康はプロ育成に貢献したと言われています。

・将棋

日本では平安時代の遺跡から『駒』が出土し古い歴史に彩りされています。駒に漢字が使われているので世界的な普及がイマイチになっていると感じています。
将棋に似たゲームにチェスがありますがルールはかなり異なっています。将棋には持ち駒というルールがありますがチェスにはこれがありません。

持ち駒とは直前まで敵であったメンバーが降伏すれば今までのことを水に流し味方に組み入れる方式です。

ゲームは戦いを具現化して平和的に娯楽化したものが多いです。古来の日本国内の戦いは部族間というより、共通の言葉を使う地域間の争いが多く、責任者が負けを認めた場合(多くは殿様の切腹で)はその部下を仲間に引き入れて戦力化を図ったのではないかと言われています。

言葉や習慣が異なる場合はハナから異分子との扱いをするチェスとは趣きを異にしています。

以下に大衆ゲームを動的に表現しコメントの補助情報としました。麻雀、囲碁、将棋、ナンバープレイスの遊びの参考になれば幸いです。

メニューに戻る

ブログ今昔

体力の続く限り

ブログを始めてかなり経ちました。3日に一度の更新を掲げていましたが、今では無理な注文です。それでも気持ちを奮い立たせて続けています。

一方、ゲームは嫌いではなく、かつて、将棋、コントラクトブリッジなどを体験しました。最近は対戦でない熟達者のテレビ観戦も結構、楽しめます。ゲームは脳を活性化させるだけでなく文化として定着し源氏物語などの文学作品にも登場しています。

囲碁はほとんど体験したことがなかったので最近、初心者教室に通い始めました。

囲碁や将棋の途中図を写真に修め、ネット上のサイトに投稿すると現況や優劣をコメントしてくれるサイトがあるようです。

囲碁や将棋には定石・定跡があり、これを自分の懐に納め先人の知識を集大成し理解すると強くなると言われています。

ブログのコメント増加

自由な投稿は制御・管理が効かなくなりそうで当ブログでは認めておりません。当ブログへの参加はコメントしかありません。

コメントは公開の前にモデレーションというクッションが入るので炎上の心配が薄らぎます。そのぶん、自由闊達なデスカッションが疎外される恐れがあります。

コメントには極力、返事を差し上げるようにしていますがこれもかなわないことがあります。ご容赦ください。

囲碁上達への挑戦

芸術・技能・技術・スポーツなどの分野で名人、達人と呼ばれる人の作品を模倣したり、参考にして新しいことを成し遂げることは人類歴史が始まってから数知れず繰り返されてきました。文字が考案され記憶媒体が整ったころには、密かにあるいは公けに記録として保存されてきました。

 

囲碁や将棋には棋譜があり、そこには対局者や新聞社などに帰属した著作権が存在します。著作権が発生して一定期間が過ぎれば限定的ながら棋譜利用は認められているようです。もちろん、棋譜そのもので利益を得るような行為は著作権に抵触するでしょうが。

Result

囲碁において、高段者の指し手を繰り返し閲覧して頭にたたき込み高度な技術を修得すべく、実践的な53手までの模範布石を棋譜から再現しました。

 

メディア協同利用第2弾

静と動

動きのある事柄を一時的に静止し紙による説明は理解を深めることに大いに役立っています。ネットメディアが拡大した今では両者が協同する表現方法には眼を見張るものがあります。

囲碁シチョウの解説に協同利用

囲碁シチョウを解説するにあたり、紙面では囲碁盤の端まで追い詰めればシチョウが成功すると語るも途中までの解説で終わっています。また、追い込んだ先に相手の石があると失敗に終わるとも解説していますが、紙面上の制約から実際の動きを示していません。このような場合にはネットメディアによる表現は力強いです。

百聞は一見にしかず

電子媒体はサイズと価格が日に日に小に、容量は秒刻みで大になっています。一方、紙による表現は高齢者には親しみやすく捨てがたいですが、流れに逆らってことを進めるのは得策ではありません。このような時代には双方の「いいとこどり」をすると良いでしょう。

 

囲碁シチョウの説明に解説ソフトを作りました。今回はこれを動画に収録しましたので公開します。

嘆き

解説ソフトはHTMLで作りましたが、そのまま公開するには躊躇せざるを得ません。そのため、Rust言語を紐解いていますが難解で思うように進んでいません。とりあえずはできることから歩き出しています。

紙とNETメディアの協同

メディアの利用法

囲碁や将棋の上達には定石(囲碁)・定跡(将棋)の研究が欠かせません。定石・定跡には過去の実績が凝縮されています。

それでも最近のAIソフトには定石にこだわらない常識はずれのアドバイスをすることが知られています。これがプロの常識に衝撃を与えゲームの戦法に新機軸を開いています。

このような例は稀ですが熟達者の対戦譜を省みることは実力向上につながります。両者がどのような手順で勝ち負けに至ったかを記録した書類を棋譜と呼んでいます。棋譜があれば対戦を再現することができます。

ゲームの入門書は紙による手引書がほとんどです。紙ではゲームの展開の流れを克明に表現するには紙面上の限界があります。

これらの隙間を埋めるために、棋譜から指し手をゆっくり表現するツール(囲碁対局再現ソフト)を記述言語JavaScriptにて作りました。

インターネットでは音声を出力することは容易であり紙より高い臨場感を出すことができます。

碁石を打つ効果音は実態に近い音声がありますが、サイズの大きな音声ファイルを再生するにあたり、指し手が速くなるとスピードに付いて行けなくなり、サイズの小さいキーボード押下の効果音で代用しました。

今回は、吉原由香里監修「はじめての囲碁の教科書」から19路盤を用いた『基本的な展開と考え方』を参照して、囲碁高段者の指し手を眺めてみました。

囲碁の研究を始めて間もないですが、参考書として選んだ手引書は多色刷りで読みやすく初心者には大いに助かりました。大まかな流れを動画に収録したので発表します。

棋譜再現ソフトの特長

黒と白の対局者がどのような布石をたどって終局に至ったかを1手1手確認することができます。表示速度を自在に可変でき、あらかじめ停止するタイミング・位置をプリセットしておくと緊張局面で動作を停止させることができます。

対局した囲碁試合を棋譜に収録し後に検証・研究用として再現することができます。

RESULT

ジャパンアズナンバーワン

夢のあと2024

昨日、東証において日経平均株価が34年ぶりに史上最高値を更新しました。実力通りの高値か期待込めた結果はともかく喜びたいです。40数年前に「ジャパン アズ ナンバーワン(Japan as number one)」という言葉が躍り始め、日本の優位性を表す意味に長く使われてきました。

150年以上も前、植民地政策を推し進めてきた西欧強国の追求をかわし、国の分断を回避して日本は明治維新を成し遂げました。このありさまをみてアジア列国は身近な日本を参考にした可能性は大ありです。また、太平洋戦争の敗戦を経験しどん底から立ち上がり欧米を手本にして危機を乗り越えた日本の経済成長に驚嘆したことでしょう。

日本のGDPは最近、ドイツに抜かれて世界第4位に低下しました。台湾、韓国、シンガポールより人口が多いのでGDPは第4位を維持していますが、国民一人当たりの国民所得はすでに周辺アジア諸国に抜かれています。

サッカー、野球、バレーボールなどのスポーツ世界ランクはアジアではトップレベルなのに経済レベルで低迷しているのはなぜだろう。
GDPがアメリカに次いで世界第2位になった時期がありましたが、これは敵失に恵まれたと言われています。朝鮮戦争、ベトナム戦争への物資供給が追い風になりました。戦場から遠い戦争非当事国は大きな声を出せませんが密かに笑いをかみしめるものです。

太平洋戦争敗戦後、ひたむきな努力がありましたが新しいものへの積極的な投資があったとは言い切れません。

今回の史上最高値も外国投資家の貪欲な動きが貢献していると言われています。「出る杭は打たれる」のことわざがありますが今回の株価更新にあたり、将来を見据えた意欲的な投資を切に希望します。フロントランナーを風よけに使い2番手からスキをうかがうこれまでの姿勢は改めてもらいたいです。

「喉元過ぎれば熱さを忘れる」は一度体験するにとどまりたいです。分家、開発途上国、先進的な国に周回遅れにならないよう老舗意識は忘れましょう。

ナンプレ改訂2024

脳トレーニング

いつも脳みそを活性化すればボケないと言われています。高齢者が小学低学年生のドリル課題を解いている映像を見たことがあります。

私にはこのようなことは耐えきれません。それならば短歌や俳句の創作、クイズ解読研究などをする方を選びます。

ナンプレ解析を開始してから2~3年たちました。

世に公開されているナンプレ解法のアルゴリズムをプログラミング上に具現化してパソコンやスマホで解く仕組みを研究しています。

ナンプレ改装

ナンバープレイスの改訂版が整いました。解法はただいま10です。新聞や週刊誌掲載の課題はおおむね解けるので解法の追加はありません。

改訂箇所は、画面いっぱいに表示できるようにタスクバーを隠したりフルスクリーンとウインドウ表示を簡単に切り替えられるようにしたことです。

課題を解いた後は画面を操作することが多くなります。81マスのナンプレ画面を最大限に表示すると新しい課題を読み込むときと読み込み後の情報表示には画面スクロールを要します。

これらをサポートするために画面設定ボタン(wMode)を設け新しいデザインにしました。右上のsolve, naviボタンはAI解析による自動解答、ナビゲーションを行います。

また、解析経過表示と残マス数を下段右に描写するように模様替えしました。目の弱い方にもナンプレ解析を通してプログラミングを楽しんでいただけたらありがたいです。

対価の評価

ブログに広告が入るように改訂してから数年たちました。広告料名目の報酬は驚くほど少ないです。記事として突飛なことは押さえ穏やかな内容を旨としているからでしょう。

これではブログ維持はできません。閲覧数を増やすにはそれなりの知恵が必要です。X(ツイッター)では閲覧数が一定数を超えたら報奨金が支払われるようです。

能登半島地震では架空の住所・できごとを前面に出して「助けて!」などと騙り閲覧数を伸ばしていることに対して注意を呼びかけています。このような振る舞いは許されませんが正当な「対価の評価」も必要です。

HTMLによるシステム開発のための設備などの経費は掛からず迅速にできます。唯一の欠点はプログラミングコードが丸見えになってたやすく模倣されることです。

大組織では開発部門と商品化部門とが分かれていて、模倣できにくいようにしてから公開されますが小組織には無理な話です。それでも他人の著作物にただ乗りして世に出すことは許されないことです。

最近、有料投稿記事を扱うブログや公開ページが繁盛しています。一作品あたり100円から300円程度のものが多く、数千円・数万円まであります。プログラムコードを改変して2次販売を認めているものもあります。

Result

プログラミングコードはHTMLにて記述されています。1500行ほどの量です。ここでの動作例はYoutubeです。

 

千変万化動くメッセージ

HTML2024第2弾

スマホ・パソコンにて朝夕や季節に合った挨拶をする、天候や気温に即した言及・制御をするにはどうするのでしょうか。一つの方法はインターネットにつながった環境の中、HTMLなどでプログラミングした記事を実行すれば実現できます。

当ブログでは「動くキャッチコピー」などのタイトルで何度も取り上げています。2024年を迎えて新しい機能を加えたものを発表します。



動くキャッチコピーの動作例



独自のコピー作成法
 「人の目を惹く動く広告を作る」から有料300円にてひな型プログラミングコードを入手します。

そこからはHTMLの基礎知識を応用してオリジナルキャッチコピー作りへと進みます。

辰年によせて

激動の年

辰年も本格的に始動しました。のっけから天変地変や思いがけない事故が起きました。地震は自然災害であり予測することは難しく甚大な被害を受けます。日ごろから避難対策を心がけるとともに、一日一日を充実して生きていくことでしょうか。

本年もHTMLの世界を探求してまいります。HTMLは開発環境を整えるのに手間や経費がほとんどゼロです。老若男女、誰でも始められます。多くを望まなければすぐ結果を出すことができます。

<p>誰でも始められます</p>
上記文字列を’sample.html’に納め、ローカルディスク等に保存し、ブラウザで実行してください。画面には期待した文字列が現れます。 ちょっと高級にします。
本日が元日から何日目を計算するには以下です。
<div id="bun" style="width:440px; height:55px; line-height:60px; background:aliceblue; text-align:center; border:0px solid"></div>
<script type="text/javascript">
var today=new Date();                   //1970-01-01から今日までのミリ秒(のオブジェクト)
var Year = today.getFullYear();         //今年の西暦年
var targetDay=new Date(Year+"/1/1");    //調査開始日(今年の元日)から今日までのミリ秒(のオブジェクト)
var dist="元日から" + (Math.floor((today-targetDay)/1000/60/60/24)+"").fontcolor("crimson") + "日経過";
document.getElementById("bun").innerHTML=dist.fontsize(8);
</script>

Result


明日、当ページを開くと経過日が更新されていることを確認してください。

HTMLについて

上記HTMLプログラミングコードはたった8行ですがかなりの内容が積み込まれています。HTMLを習得するには学習塾、自己修得講座などさまざまあります。サンプルコードがネット上に(当ブログも末端に並んでいます)ごまんとあります。予算にあった方法で一歩ずつ進化されるように願っています。

 

三葉曲線を描く

バラ曲線の描画

HTML言語のSvg(Scalable Vector Graphics)を用いて、正葉曲線(バラ曲線)の中で代表的な三葉曲線を描いてみました。そのサンプルを示します。

プログラミングにおいてはタイマー関数を利用して導火線が燃え移るような時間差描写を実現し、ここにおける三葉曲線は半径と描画色を変えて4重の重ね書きが完了後に全体が回転します。

三葉曲線はsinとcosの三角関数を準備すれば描画ポイントを算出できます。それらは浮動小数点演算され、誤差を加味したテクニックが要求されます。また、回転操作はHTMLのアニメーション関数を使いました。

調査不足かも知れませんがアニメーションの起動において、animation-play-stateによる制御は期待した動作にならず苦労しました。

cssのstye属性:animationに直接、働きかけたサンプルの処理は主要ブラウザで思ったとおりの動作を確認しました。 回転中心座標を指定するtransform-originは対象要素がdiv, svgによって回転中心座標が異なります。サンプルコードを注意深く見てください。

Result

再実行はブラウザのリロードボタンを押します。

©TacM 2023

HTMLサンプルコード

<html>							<!-- svg35C.html: svg, animation, setInterval, clearInterval のサンプル, ©TacM 2023 -->
<head>
<meta charset="utf-8">
<style type="text/css">
@keyframes rotate1 {					/* 回転に使う */
    0% { transform: rotate(  0deg); }
   50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body onload="gameLoop=setInterval(draw35,T3);" style="overflow:hidden;">
<div id="turn" style="margin:0 auto; width:400px; height:400px; border:1px solid blue; border-radius:50%;">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 550 550">
  <line id="xaxis" x1="0"   y1="275" x2="550" y2="275" stroke-width="1" stroke="skyblue"/>
  <line id="yaxis" x1="275" y1="0"   x2="275" y2="550" stroke-width="1" stroke="skyblue"/>
  <text x="490" y="272" font-size="16">&copy;TacM 2023</text>
  <polyline id="curv0" style="fill:none; stroke:deeppink; stroke-width:1.0" points=""/>
  <polyline id="curv1" style="fill:none; stroke:olive;    stroke-width:1.0" points=""/>
  <polyline id="curv2" style="fill:none; stroke:sienna;   stroke-width:1.0" points=""/>
  <polyline id="curv3" style="fill:none; stroke:blue;     stroke-width:1.0" points=""/>
</svg>
</div>
<script type="text/javascript">
const ZX=ZY=275;				//主要画像の位置
const T3=8;						//サイクロイド曲線を更新する間隔 ms
const ST=0.01;					//step 刻み値
//==============================//svgとは、Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)
var a=1;						//para-1, 1/1 1/1
var b=0.33333333333333;			//para-2, 1/3 1/5
var c=0.5;						//para-3, 1/2 1/7
var gameLoop=count=th=0;		//th:0~2.0  count:半径と色を変えて複数回繰り返す
var cmd35="";					//スタティックな変数であること
var SIZE=235;					//半径

function draw35(){				//<<<<<***** function draw35(), blue サイクロイド曲線 θ:0~360°まで繰り返す *****>>>>>
    var t = th * Math.PI;							//theta
    var ab = a - b;									//パラメータ
    var bb = ab / b * t;							//パラメータ
    var wy = 550 - ZY - SIZE * (ab * Math.cos(t) + c * Math.cos(bb));		//y方向の見た目が安定するよう上下を逆にした
    var wx = ZX - SIZE * (ab * Math.sin(t) - c * Math.sin(bb));				//見た目が左右対称になるようにxyを逆にした
    cmd35=cmd35+" "+wx+","+wy;						//polylineのpointsコマンドを作る
    //console.log("t=", t, wx, wy);
	document.getElementById('curv'+count).setAttribute("points", cmd35);	//三葉曲線を描画
	th += ST;										//次のポイント
	if(th > 2.0000000000000013){					//2.0000000000000013は 360°2πの浮動小数点演算誤差を勘案
	  if(++count>=4){clearInterval(gameLoop);setTimeout(revolution,500);return;}//三葉曲線を描画終了500ms後、回転 returnを忘れてはならない!
	  th=0;											//関数の外で定義したスタティックな制御変数をリセット
	  cmd35="";										//スタティックな変数を空に
	  SIZE = 235 - count*16;						//0 1 2 3  10~20 230 235  半径と色はcountに依存
	  console.log("半径と色を変える", count, SIZE, 'curv'+count, document.getElementById('curv'+count).style.stroke);
	}
}
function revolution(){								//全体を回転させる
	document.getElementById("turn").style.animation="rotate1 5s linear 2";	//回転起動
	document.getElementById("turn").style.transformOrigin="200px 200px";	//回転中心座標 svg要素でなくdiv要素の中心点
}
</script>
</body>
</html>

さいごに

三葉曲線は何度も取り上げてきましたが今回は演算誤差やアニメーションの起動に焦点を合わせました。Svgの使い方の例として参考になれば幸いです。