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

ものづくりに関する想い

奥の細道・序文2

時代の流れに対応して改訂

法律、習慣、流行など時代とともに変わります。時代にそぐわなくなってもすぐには変えられずそのまま踏襲されているものが数多くあります。同一県でも方言や習慣が微妙に違う地方があります。それは江戸末期までは異なる統治下にあって明治維新で同じ県に統合されたからです。

ブラウザの仕様変更

ニュースを見るためにブラウザを起動するとテレビ局が発行する動画が大音量で流れびっくりしたことがありました。

このようなことがないように操作が加わらないと音が出ないようにブラウザの仕様が変更されました。

それに合わせて一度発表した「奥の細道・序文」の朗読を、音声再生ボタンをクリックしてすべてがスタートするように改訂しました。朗読に加えて臨場感を高めるBGMを付けました。BGMは《気淑く風和らぎ》という万葉集の一節で令和改元の基になったタイトルがついている曲を採用しました。ソースコードは落ち着いた時期に公開されるでしょう。

RESULT

 

歴史は勝者が作る

NHK大河ドラマ

NHK朝ドラは女性の一代記、大河ドラマは歴史上の人物の一代記をテーマにしているものが多いです。前者は女性、後者は男性を主に取り上げています。


大河ドラマは日曜日に放映されます。正月三ガ日が日曜でもない限り年が明けて一週間以内には一回目が放送されるはずですが、今年は共演者の覚せい剤所持事件の影響で半月ほど遅れているようです。

そのため、大河ドラマの番組宣伝でその場をしのいでいます。今年の大河ドラマのタイトルは「麒麟がくる」で、明智光秀をテーマにしています。NHK、民放の明智光秀を語る番組は殊の外多くドラマの放送開始が待ち遠しく感じます。その中でも、また昔から「歴史は勝者が作る」という言葉が何度も使われます。

「勝てば官軍、負ければ賊軍」という言葉もあります。勝てば正義、負ければ不正義が一般化しています。勝ったものは称えられ、負けたものは怠け者と誹られます。負けた者の周辺からは人が去り、過去の親しい付き合いなどはなかったような顔をするのが一般的です。

権力闘争はどの組織にもあります。非情な手段で手に入れた権力は正しく使って欲しいものです。争った相手を子会社の日の当たらない部署に追いやったのに、勝者が慢心して会社をつぶした例は少なくありません。

敗者の歴史

明智光秀は織田信長の有能な家臣であったはずですが、主君から満座の席で叱責されたり足蹴りにあったドラマのシーンを一度や二度見たことがあることでしょう。光秀は裏切り者の代名詞です。本当にそうかどうかはわからないのです。江戸時代に明智光秀に関する資料はことごとく消滅したと言われています。

勝者は賢く強い人間と称えられ、敗者は不義理ものと評価されがちです。2代将軍秀忠の正室お江は織田信長の妹お市の方の三女であり、織田家は徳川家の親戚にあたり、その子孫は吉良、京極などとともに高家として処遇されました。

お市の方は戦国一の美女であり、さらに聡明であったと語られていますが、それもアンフェアぎりぎりで天下を取った権力者側の関係者であったからでしょう。主君に逆らったとされる縁者を賛美する資料は埋もれていったと推測されます。

勝者は事実によって裁かれる

「勝者は事実によって裁かれる」とも言われています。万難を排して獲得した権力は大切に行使してもらいたいものです。

後日譚

2代将軍秀忠は側室を置かなかったとある小説家は作品のなかで語っています。司馬遼太郎の『王城の護衛者』には「会津松平家というのは、ほんのかりそめの恋から出発している」と書かれています。

そして3代将軍は秀忠とお江から生まれた家光に引き継がれました。書き出しのフレーズに惹かれて夢中になって『王城の護衛者』をむさぼり読んだ記憶がよみがえりました。

逆さ文字と鏡文字2

その後の逆さ文字と鏡文字

相手の情報をこちらから見た状態で表現したいことがあります。卑近な例では将棋のゲームがあります。相手の盤や駒台にある駒は逆向きにあり、対戦者は総合的な判断から容易に駒などを識別します。

棋譜はテキスト形式で記録されます。相手の駒は逆向きであり逆さ表示になります。画像ならば逆さ表示は容易ですがテキストながら逆さに表示する必要性が高いです。

このような時には逆さ文字や鏡文字に注目しましょう。

以前に逆さ文字と鏡文字に両者を取り上げました。今回、鏡文字について左右対称と上下対称に分けて考えてみました。

文字の様々な表示例

G 角 🌙
標準
G 角 🌙
鏡文字V
G 角 🌙
鏡文字H
G 角 🌙
逆さ文字
🌂 🎅
標準
🌂 🎅
鏡文字V
🌂 🎅
鏡文字H
🌂 🎅
逆さ文字
©TacM,2019 Ver0.01

 

 

令和二年の正月

令和初めての新年

アントワネットの庭フリーBGM素材 甘茶の音楽工房
©2020 TacM, Ver0.01
【現代語訳】
夕闇せまり 袖から入る風で寒さが染みる
吉野の山には雪が降っているに違いない
ゆふされば
 衣手ころもでさむし
  みよしのの
吉野よしのやま
 みゆきるらし
古今和歌集 巻第六(冬歌)三一七番  読人しらず

 

HTMLを楽しもう

新しい生活スタイル

時間は連続して流れています。新しいことに挑戦するにはいい時期です。3日坊主でも合計すれば3週間、3か月になるかも知れません。HTMLで会報や会計報告書を作ってみませんか。

準備する資材はネット上にありフリーで利用できます。

すでにお使いのパソコン、スマホに組み込まれているでしょう。

以下に旅行案内の事前連絡をお知らせするハガキを想定した文面を掲げます。

2020年4月から新学習指導要領が全面実施となるので小学校でもプログラミング教育が必修化になります。

プログラミングは誰にでも開かれ相談相手はネットです。興味があれば老若男女あらゆる世代で始められます。そこでHTMLで楽しんでみませんか。

縦書き、横書き併用、カラー、テキスト・画像の重ね書きは異彩を放ちます。

RESULT

 《恒例の旅行について》

会員の皆様、お変わりありませんか。令和初めての新年です。春の恒例の旅行について、様々な要望が届いていますが、都内近辺を提案します。東京都が筆頭株主のはとバスを利用して効率よく東京を巡るのはいかがでしょうか。


はとバス観光には洗練されたコースがたくさんあり、おおぜいの外国人観光客にも利用されています。近々、詳細スケジュールを決定したいと考えています。健康には十分気を付けたいです。桜の頃に元気に再会しましょう。
幹事より

 令和二年 あけぼの
貴賓席の旅

HTMLサンプルコード

<!DOCTYPE html>
<html>
<body>
<DIV style="width:60%; margin-right:auto; margin-left:auto; margin-top:10px;">
<Div style="position:relative; width:351px; height:520px; font-size:20px; border:1px solid pink;">
<div id="doyo" class="h2vr_26" style="margin-right:10px; margin-top:0px; line-height:1.2em;">
 <span style="color:navy;">《恒例の旅行について》</span>
<p>会員の皆様、お変わりありませんか。<strong>令和</strong>初めての新年です。春の恒例の旅行について、様々な要望が届いていますが、都内近辺を提案します。東京都が筆頭株主の<strong>はとバス</strong>を利用して効率よく東京を巡るのはいかがでしょうか。<BR>
<BR>
<BR>
はとバス観光には洗練されたコースがたくさんあり、おおぜいの外国人観光客にも利用されています。近々、詳細スケジュールを決定したいと考えています。健康には十分気を付けたいです。桜の頃に元気に再会しましょう。<BR>
<span style="padding-left:437px; color:deeppink;">幹事より</span></p>
 令和二年 あけぼの
</div>
<div style="position:absolute; left:15px; top:180px; width:435px; height:40px; font-size:64px; color:deeppink; border:0px solid blue; opacity:0.3;">貴賓席の旅</div>
<div style="position:absolute; left:2px; top:260px; width:347px; height:260px; border:0px solid red; opacity:0.6">
<image src="https://img.poke.co.jp/media/transfer/img/eventid_13003/eventid_13003_pic3.jpg" width="347" height="260">
</div>
</Div>
</DIV>
</body>
</html>

 

星座はきらめく

CSSだけでグラデーションとアニメーション

はじめとまれボタンを押下してバックグラウンドの背景色の更新、月画像の回転、音声の開始と停止を交互に制御します。これまで縦書きはh2vRのプラグイン(アドイン)を利用していましたが、今回はブラウザの素の機能を利用します。

一つのボタンで交互に処理を切り分ける部分はCSSだけという触れ込みに抵触しますが6行ほどのJavaScriptを使っています。縦書きはブラウザごとにかなり動作に差があります。Chrome, FireFox, Operaはほぼ同一ですが、Edgeは差が大きいです。IE11はサポート終了でお薦めできません。

RESULT

 

コンピューター将棋入り口

大橋流駒並べソフト


人間とコンピューターが対戦するAI将棋が盛んです。コンピューターの高速化やアルゴリズムの発展でプロ棋士をも凌駕するコンピューター将棋ソフトが開発されています。

かつて、日本のあちこちで将棋大会が開かれ成績優秀者には景品が授与される大会がありました。今でも開催されているでしょうが高齢者の参加が多いようでした。

プロ棋士藤井聡太七段の活躍などによりこれからは小中学生や女性の参加者が増えることでしょう。これに加えてコンピューター将棋大会が日本の津々浦々で開催されればIT先進国をけん引できるようになることでしょう。

自分で対戦ソフトを開発しいきなり人間やコンピューターと対戦するコンピューターソフトを作成するのはハードルが高いです。

初心者は駒の名称と駒の効きを覚えて盤上に駒を並べることからスタートします。コンピューター将棋ソフトのC言語やJavaScrictソースコードは大学や研究機関から公開されています。

ネット上には駒や将棋盤、駒台などの画像など参考になるものが盛りたくさん揃っています。将来、コンピューターソフトを販売する計画の場合は二次利用などの著作権にまつわる検討をするとよいでしょう。

盤や駒台などは後から見栄えよく追加できるので基本だけを備えた大橋流駒並べソフトを公開します。

☖大橋流で駒を並べる☗キーをクリックしてスタートです。

RESULT

☖大橋流で駒を並べる☗ ©TacM,2019 Ver1.00
後手:蒼賢照初段 鬼才伝説
天童佐藤敬商店『飾り駒』
先手:聡琳翔二段 新手一生

 

JavaScript Code

<!DOCTYPE html>
<html lang="ja">
<body onload="start()">
<audio id="komaoto" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/11/komaotoPiece1.mp3"></audio>
<div style="clear:both; bottom:20px; height:50px; border:0px red solid;"><a onclick='masume81();setKoma();'><span style="font-size:24px;color:green; background:papayawhip;">&#x2616;大橋流で駒を並べる&#x2617;</span></a> &copy;TacM,2019 Ver1.00</div>
<DiV style="float:left; width:360px; height:500px; font-size:24px; color:blue; border:0px red solid;">
<div style="float:left; width:300px; height:40px; border:0px peru solid">後手:蒼賢照初段 <span id="gote" style="color:red">鬼才伝説</span></div>
<div><canvas id="sample0" width="40" height="40" style="margin-left:0px; border:0px gold solid;"></canvas></div>
<div><canvas id="sample2" width="350" height="384" style="background-color:aliceblue; opacity:0;"></canvas></div>
<Div id="kazarikoma" style="padding-top:40px; padding-bottom:59px; margin-left:0px; margin-top:-384px;">
<img id="oh" src="https://www.gogo-web.com/shogi-img/600710.jpg" width="350" height="245">
<div style="width:350px; height:40px; font-size:28px; color:orange; border:0px gold solid;">天童佐藤敬商店『飾り駒』</div>
</Div>
<div style="float:left; width:300px; height:40px; border:0px red solid">先手:聡琳翔二段 <span id="sente" style="color:red">新手一生</span></div>
<div><canvas id="sample1" width="40" height="40" style="margin-left:0px; border:0px gold solid;"></canvas></div>
</DiV>
<DiV style="height:424px;margin-top:40px"><img src="http://aidesign.lolipop.jp/wp-content/uploads/2019/12/shogiAppeal.png" width="240" height="400"></DiV>
<img id="p0" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/12/o80x86.png" width="80" height="86" style="display:none;">
<img id="p1" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/12/k80x86.png" width="80" height="86" style="display:none;">
<img id="p2" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/12/komaImage.png" style="display:none;">
<script type="text/javascript" charset="utf-8">
const CC = 12;
const X0=36;
const Y0=40;
const X1=101.25;												// 810/8
const Y1=112.5													// 450/4
const KOMA_NAME	= '王飛角金銀桂香歩玉竜馬 金圭杏と玉飛角金銀桂香歩玉竜馬 金圭杏と';	// 
const SUJI		= '987654321';
const DAN		= '一二三四五六七八九';
const ban = [//9-0 8-1 7-2 6-3 5-4 4-5 3-6 2-7 1-8		//将棋開始画面データ
				[22,  21,  20,  19,  16,  19,  20,  21,  22],	//一 0
				[-9,  17,  -9,  -9,  -9,  -9,  -9,  18,  -9],	//二 1
				[23,  23,  23,  23,  23,  23,  23,  23,  23],	//三 2
				[-9,  -9,  -9,  -9,  -9,  -9,  -9,  -9,  -9],	//四 3
				[-9,  -9,  -9,  -9,  -9,  -9,  -9,  -9,  -9],	//五 4
				[-9,  -9,  -9,  -9,  -9,  -9,  -9,  -9,  -9],	//六 5
				[ 7,   7,   7,   7,   7,   7,   7,   7,   7],	//七 6
				[-9,   2,  -9,  -9,  -9,  -9,  -9,   1,  -9],	//八 7
				[ 6,   5,   4,   3,   0,   3,   4,   5,  6]];	//九 8
const setting=[	[40, 30, 50, 20, 60, 10, 70, 00, 80, 11, 71, 42, 32, 52, 22, 62, 12, 72, 02, 82],
				[48, 58, 38, 68, 28, 78, 18, 88,  8, 77, 17, 46, 56, 36, 66, 26, 76, 16, 86, 06],];
const SenteGote = ["gote", "sente"];
var ctx, ct2=[0, 0], n=0;
function start(){
  ct2[0] = document.getElementById("sample0").getContext('2d');
  ct2[1] = document.getElementById("sample1").getContext('2d');
  ctx = document.getElementById("sample2").getContext('2d');
  											//桝目を作る
}
function setKoma(){										//20枚の駒を並べる
  if(n>=20){alert('Please reload!');return;}
	document.getElementById("komaoto").play();			//駒音鳴動
	for(var l=0; l<2; ++l){								//0:先手, 1:後手
	  var x0=8-Math.floor(setting[l][n] / 10);			//筋をx座標に変換
	  var y0=setting[l][n] % 10;						//先手段
	  var k0=ban[y0][x0];								//初期配置図から駒を引き当てる
	  komaDraw(x0, y0, k0, l);							//定められた位置に駒を設置
	  document.getElementById(SenteGote[l]).innerHTML = SUJI.substr(x0, 1) + DAN.substr(y0, 1) + KOMA_NAME[k0];
	}
	if(++n < 20)	setTimeout(setKoma, 1000);			//20枚の駒を並べるまで繰り返す
	else{
		ct2[0].drawImage(document.getElementById("p0"), 0, 0, 80, 86, 0, 0, 40, 43);
		ct2[1].drawImage(document.getElementById("p1"), 0, 0, 80, 86, 0, 0, 40, 43);
		document.getElementById("gote").innerHTML = "鬼才伝説";
		document.getElementById("sente").innerHTML = "新手一生";
	}
}
function komaDraw(x, y, koma, p){						//ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
	var kx = koma % 8;									//0~7
	var ky = Math.floor(koma / 8);						//32枚の全体画像から1枚を切り出す
	ctx.drawImage(document.getElementById("p2"), kx*X1, ky*Y1, X1, Y1, x*X0+CC+0, y*Y0+CC+1, X0, Y0);		//12-w
	ct2[p].clearRect(0, 0, X0, Y0);
	ct2[p].drawImage(document.getElementById("p2"), kx*X1, ky*Y1, X1, Y1, 0, 0, X0, Y0);
}
function masume81(){									//81個の桝目を作る
	document.getElementById("sample2").style.opacity=1.0;
	document.getElementById("kazarikoma").style.opacity=0.0;
	for (var i = 0; i <= 9; i++) {
		var x = i * X0 + 12;							//縦線
		ctx.moveTo(x, 2 + CC);
		ctx.lineTo(x, 360 + CC);
		ctx.stroke();
		var y = i * Y0 + 1 + CC;						//横線
		ctx.moveTo(11, y);
		ctx.lineTo(337, y);
		ctx.stroke();
		if(i==9)break;
		ctx.font = "bold 11px 'MS ゴシック'";			// 2019-12-19
		ctx.fillText(SUJI.substr(i, 1), i*X0+22, CC);
		ctx.fillText(DAN.substr(i, 1), 338, CC+i*Y0+24);
	}
}
</script>
</body>
</html>

 

おまけ

将棋のマナー.html|将棋講座ドットコム より引用

「将棋は役立つの?」の問いに5項目を挙げています。小学生向けの言葉が多いですが最後は大人にも通用します。将棋は囲碁のように勝ち負けに大小はなくall or nothingです。

負けるときは「負けました」と声を発して相手に告げることが礼儀とされています。

この言葉は当初、悔しくてなかなか言えないのです。万感の思いを乗り越えて言えるようになると強くなると言われています。

 

生活心得第2弾

日々の目標

以前に生活目標を発表したことがあります。今回は以下の点を改良しています。日々の暮らしにおける心得をしるしたものです。

❶メッセージの回転を滑らかにした。

➋BGMを追加した。

❸主な絵文字を表示して彩りを持たせた。

❹リンクフリーのライブカメラでオンラインビデオ再生。

円形スクロールメッセージ、時計、絵文字、四字標語の出力は自動開始されますが、ブラウザの制限によりビデオと音声は再生開始でスタートします。

動作例

 日々の暮らし  生活心得   ©TacM,2019 Ver0.01
🌝🍆🍳🍷
カナダケベック港のライブカメラ
音楽:フリーBGM素材「茶屋にて」by MATSU

 

 

試み

広告媒体は新聞、テレビ、ラジオから少しずつネット関連に移行しています。

ここでは静止画、静止テキスト、音声、ビデオ、回るテキスト、切り替わるテキスト、切り替わる画像、時計など盛りだくさんの表現を試しました。

後日談

画像、ビデオ、記事の格納先を明示してリンクを認めているサイトは多くありません。東京・渋谷のスクランブル交差点のライブカメラを中継したらたちまち止められてしまいました。上では数少ないリンクフリーから掲載しました。

 

 

連綿と受け継ぐべき技術

手抜き工事

マンション施工で手抜き工事が発覚して建て直しのニュースが流れたことがあります。マンションの壁の中までは専門家でなければ評価が難しいです。

しかしながら長年暮らしていくうちに瑕疵が浮き彫りになります。発覚した時には経営者が変わっていることが多くその責任はうやむやになることがありました。この辺りはこれから整備されていくものと思われます。

散歩コースに雨上がりに滑りやすい箇所があり写真に納めました。ここは近年、簡易舗装から本格舗装に変わった所ですが片側にU字溝があるのに高低差に施工ミスがあり雨の日には水溜りができました。雨降り直後は流れ着いた粘り気のある土を踏むと転ぶことがあります。

駅にまだ自動改札が未導入の頃、高架駅舎に昇る階段の手前が年配の男女二人の業者によって舗装されましたが、雨がふると水溜りができ不評ビンビンでした。

切符切りの駅員に苦情がしきりに浴びせられたと思われ、施工のやり直しを見たことがありました。最近は水準器なるものがあり、手作りマニアも所有しています。水はけの技術は有史以来、いち早く確立したことでしょう。

道路工事は大きな事業でもなく地元優先で中小企業の業者に委託されるのがほとんどと推測されます。業者の技能・技術はピンからキリまでで完成度にかなりの差が出てしまいます。小さな手抜き工事でしょうが出来具合が長きに渡って評価され続くでしょう。

はごろも伝説の天女

久米の仙人も欲情

天衣をまとった天女

はごろも伝説は日本各地にあります。どれが一般的かはわかりませんが、羽衣(うい、はごろも)をまとった天女(てんにょ)が舞い降りて水浴びをしているところを年老いた男性が覗き見て、あまりの美しさに天に返すのが惜しくなり脱いだはごろもを隠すお話のようです。

いろんな伝承のある中、ここではもっとも俗っぽい内容を取り上げます。

一方、ふくらはぎに見とれる久米仙人伝説もありごっちゃに語り継がれることがあるようです。今回は、雲に乗った仙人が俗界の天女に気を取られ惑わされて神通力を失い転落する画像とSvg(Scalable Vector Graphics、変倍ベクタ図形)による曲線を表示しています。

久米寺

美人にまつわる伝説には事欠きません。傾城美人、クレオパトラ伝説、楊貴妃、小野小町など美人は歴史を作ったでしょうか。取り上げてみたいものです。

変倍ベクタ曲線の一例

 

おまけ

妖艶美女十態は横2400px、縦300pxからなる1枚の集合画像です。1枚ずつ描画するにはclip:rectを使っていましたが、ローカル環境で思い通りに動作してもアップロードすると全体が小さく表示されて誤動作します。

《蔵出し秘蔵画像》左の文字列をクリックしてください。

最近、object-fit:coverの存在を知りました。大きな画像から一部分を切り取って表示するのに非常に便利ですが、object-positionと絡んで切り取る位置を決定するのに悩みました。内容を整理できたらソースコードを公開できることでしょう。