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

ものづくりに関する想い

はごろも伝説の天女

久米の仙人も欲情

天衣をまとった天女

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

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

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

久米寺

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

変倍ベクタ曲線の一例

 

おまけ

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

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

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

 

大いなる遊び心

回らないホイールキャップのような動き

最も下の動く画像は少し異なる動きをしています。中央の五の文字だけは周辺の五感を示唆する画像と違って回転しています。

五感の画像は背景画像の一部として時計方向に回転しつつ、同じタイミングで反時計方向に自転しているため、常に上向きを保持しています。

「五」の画像は奇妙さを浮きだたせるために周辺の丸い画像と異なる動きにしています。

「回らないホイールキャップ」より

広告に使えるかも

五感に因んで5回転して停止します。車の改造は違法になることがありますが、プログラミングは若者の創造力を育みます。参考になればありがたいです。

©2019 TacM, Ver0.01

 

新しいアピール方式

メディア共生時代

紙、ラジオ、テレビなどのメディアに加えて電子メディアが共生しています。それぞれ特長がありどれが最良とは一概に言えません。

電子メディアの歴史はまだまだ浅いです。今のところ、電子メディアにおいて人間の五感のうち、目(視覚)、耳(聴覚)、皮膚(触覚)を使うことができます。今回、前者の2つにスポットライトを当ててみました。

オーディオ再生ボタン(▶)をクリックしてスタートです。

 

 

任務を公平に分担する方法

一日に一度の家事

alive-kaji.jimdo.comを参照

一日に一度実施する家事はたくさんあります。子供の数が少なくなって家事で親を助ける風潮はすたれつつありますが、ここでは毎日休むことなく行う家事(今回は4つの任務)を3人で分担する例を考えます。

条件を整理します。公平に分担するには任務を順番に交代する案が浮かびます。7つの家事を7日ごとに交代する場合は、曜日に関連付ける方法がありますが一般的ではありません。

そこで一日に一度を考慮して元旦からの通算日を任務に紐づけます。

算出方法

4つの家事は一つずつずれて担当しますが、3人で担当するので一人は2つの業務を受け持つことになります。

ずらす方法は元旦からの通算日を利用することができます。3月以降の通算日はうるう年で異なるので調整します。この方法を採用すれば月替わりに問題なく対応することができます。

任務を4つずつ365回横に並べ、順に瑠美さん(C)、健次君(B)、太郎君(A)に割り振っていきます。1日に2つの任務を受け持つ担当者は毎回、異なり3日目経って同じ状態に戻ります。

結果の4日分をまとめました。次のようになることでしょう。

実行結果

以下のプログラムコードは日付データを実時間で取り込んでおり、午前0時を過ぎた瞬間に再読み込みボタンをクリックすれば一日、進んだ通算日になるように作成されています。

yet

プログラムコード

<Div style="float:left; width:128px; height:128px; font-weight:bold; border:0px navy solid; margin-top:-6px;">
<div id="ym" style="width:128px; height:28px; font-size:16px; border:0px red solid;"></div>
<div id="dy" style="width:128px; height:60px; font-size:40px; text-align:center; vertical-align:middle; display:table-cell;"></div>
<div id="s6" style="width:120px; height:40px; font-size:20px; border:0px green solid;"></div>
</Div>
<div style="float:left; width:128px; height:128px; border:0px solid red;"><img id="picImage" src="" width="128" height="128" alt="yet"></div>
<div id="housework" style="clear:both; width:250px; height:200px; border:1px solid blue;"></div>
<script type="text/javascript" charset="UTF-8">
const youbi = ["日","月","火","水","木","金","土"];								//曜日の選択肢
const hw = ["犬の散歩", "花に水やり", "風呂の掃除", "トイレ掃除"];				//任務名
const nm = ["太郎", "瑠美", "健次"];											//担当者
var now, year, mon, day, you, k, picFileName;									//変数定義
var	month = [0, 31, 59, 90, 120, 151, 181, 212, 243, 274, 304, 334];			//通算日算出表
	now = new Date(/*"2019-11-19"*/);											//日付と時間の設定
	year = now.getYear();														//1900年からの経過年数
	mon = now.getMonth();														//今日の月(0~11)
	day = now.getDate();														//今日の日
	you = now.getDay();															//今日の曜日
	if ((year%4 == 0 && year%100 != 0) || (year%400 == 0)){						//グレゴリオ暦のうるう年か
		for(var j=2; j<12; ++j)	month[j]++;										//うるう年だから通算日算出表を修正
	}
	k = month[mon]+day-1;														//通算日
	var ym = (1900+year)+"年"+('0'+(mon+1)).slice(-2)+"月";						//YYYY年MM月
	var s6 = youbi[you]+"曜日&nbsp;&nbsp;"+"<span style='color:red;'>"+k+"</span>";
	document.getElementById("ym").innerHTML = ym;								//年月
	document.getElementById("dy").innerHTML = day;								//日
	document.getElementById("s6").innerHTML = s6;								//通算日の表示
	document.getElementById('picImage').onload = function() {					//読み込み完了のイベント関数
		console.log('読み込み完了', document.getElementById('picImage').src, ym, day, s6);
		houseWorking(k);
	};
	var f = "abcdefghijkl".substr(mon, 1);										//12個のファイルを引き当てる
	picFileName = "http://aidesign.lolipop.jp/wp-content/uploads/2019/01/pic12Middle-" + f + ".png"
	console.log('画像ファイル読み込み起動=', picFileName);
	document.getElementById('picImage').src = picFileName;
function houseWorking(tusan){
	//  ここからは家事(houseWork)を分担する処理
	var s="";
	var j = tusan % hw.length;													//通算日から3のモジュロ値を算出
	for(var i=0; i<hw.length; ++i){												//ミッション数に柔軟対応
		var n = (tusan+i) % nm.length;											//担当者
		//console.log("i="+i+" "+n+" "+nm[n]+" "+hw[i]);
		s = s + i + " " + nm[n] + " " + hw[i] + "<br/>";
	}
	//console.log("tusan=%d %d\n%s", tusan, j, s);
	document.getElementById("housework").innerHTML = s;						//console.log("S:\n"+s);
}
</script>

 

コードの解説

  1. 10行目、任務を定義する。定義数をhw.lengthで参照するのでJavaScriptの本文修正は不要。
  2. 11行目、担当者名を定義する。上項と同じ理由で本文修正は不要。
  3. 14行目、Date関数で動作確認のとき、”2019-11-19”のように引数をセットする。
  4. 28~31行目、画像ファイルサイズの読込みを待って動作する。
  5. 36~47行目、家事を公平に分担する関数。
  6. 38~46行目、この部分では複数の任務に対応すべく、任務数分データを作成しdocument.getElementByIdにて担当任務表を作成するが、createElementによりdiv要素を動的に生成する方がスマートと言える。

おまけ

実行結果において年月日、曜日、通算日の右に描画される季節を代表する画像は、記事の起動時の現在時刻で月ごとに変化する優れものです。JavaScriptプログラミングコードの32~35行に注目ください。

 

 

蛙と縁起物

動物の置物

玄関の前に飾る置物には信楽焼のタヌキや招き猫が多いようです。

商品に添えるシンボル絵柄には何がふさわしいかと思いめぐらしました。

カエルは多くの国で縁起の良い動物とされており、今回、蛙について調べてみました。

カエルにまつわる佳言・嘉言

カエルには以下のような効能があるらしい。

仕事運 人が返る
子宝運 おたまじゃくしなどの多産系をイメージ、子孫繁栄
金運 お金が帰る
交通安全運 無事に帰る
豊穣運 カエル➡雨➡豊作を連想
恋愛運 泡の中から生まれるカエルはヴィーナスを象徴
魔除け 悪いことがひっくりカエル
前向きな行動力 並外れた跳躍力で前に跳ぶ
純な生き方 童心にカエル
神事に採用 俳句、詩、歌に詠まれる

さいごに

『井の中の蛙大海を知らず』などカエルについては凡庸なイメージもついて回りますが、上の図のようになかなか愛嬌があります。

ケロヨン、ケロンパなどのことばは蛙に由来しているように感じます。

また、大衆浴場にはケロリンマーク入りの風呂桶がありましたが、今はあまり見かけなくなりました。

カエルについて日ごろの思いを綴りました。

成長を表現する

健やかな成長を願う

若者の成長の過程を16枚のイラストで表現しました。成長をひとことで表す画像の外は透明色にしています。

そうすることによって他の画像と重なり合っても違和感を生じさせません。

成長過程を表示する画像はsetTimeoutにより一定間隔で描画され、七五三のお祝いメッセージはLazyLinePainterのdata-llp-delayの機能を利用して時間差表示されます。

お祝いのことばをハート型に配置するにはtranslateで位置決めしますが、当初は横一線に仮表示されたものをカット&トライで決めていきます。

成長を体感する時間差描画は二式あり、ひとつはハート型の七五三お祝いメッセージ(27文字)です。もうひとつは成長を示す16枚の画像です。

どちらも約44秒で完了し、BGMに同期させています。

若者の成長を祝って

下右の開始ボタンをクリックしてスタートです。

参照音楽:『ノッポとカッパのかけっこ』楽しい・明るい-フリーBGM音楽素材© TacM, Ver0.02
image/svg+xml 🍀 /*玲*/ /*依*/ /*ち*/ /*ゃ*/ /*ん*/ /*七*/ /*五*/ /*三*/ /*お*/ /*め*/ /*で*/ /*と*/ /*う*/ /*げ*/ /*ん*/ /*き*/ /*に*/ /*た*/ /*く*/ /*ま*/ /*し*/ /*く*/ /*そ*/ /*だ*/ /*っ*/ /*て*/ /*ね*/

 

 

 

さいごに

この作品はHTMLで記述されライブラリを除いたコードは約100行から成り立っています。

将来、我が国を背負って立つ担い手の成長を祝ってください。

合わせてHTMLプログラミングの妙味を堪能していただけたら幸甚に存じます。

七五三お祝いのメッセージ

七五三を祝う

当事者にとって子供の成長はうれしいものです。子育てが終わってかなりの時間が経過している世代には、懐かしく安心な対応にはまた違った幸せを感じます。

11月には様々なイベントがありますが、子育て真っ最中の世代には七五三は気合の入るイベントと言えましょう。

当方には着物などの高価なプレゼントはちょっと難しいです。得意のプログラミングで世界に二つとない贈り物を発表します。CTRL+Uにてソースコードを取り出すことができるので参考になれば幸いです。

個別対応にするには

ここでは個人情報でお祝いするわけにはいきませんので、名前や写真は仮のものです。

個別対応にするには基本をしっかり押さえなければなりません。通常、名前などはソースコードで

 

 

 

const  grandChildName  “山田太郎”;  //孫の名前を定義する

上記のようなコードを見つけて個別の名前に変更するだけでは解決になりません。縁取り漢字を時間遅れで表示するにはpathデータを作る必要があります。

 

pathデータを手作りするにはかなりの労力が必要です。InkscapeとLazy Line Painterを利用すれば割と楽にpathデータを作ることができます。

自前で開発する意欲のある方は最後までブログを読んでいただけるとありがたいです。

七五三の特別なプレゼント

下右の七五三お祝いのメッセージ 開始ボタンをクリックしてスタートです。ブラウザChrome, Edge, FireFox, Operaでお楽しみください。

Shichigosan celebration
参照音楽:『ノッポとカッパのかけっこ』楽しい・明るい-フリーBGM音楽素材 © TacM, Ver0.01
image/svg+xml /*玲*/ /*依*/ /*ち*/ /*ゃ*/ /*ん*/ /*七*/ /*五*/ /*三*/ /*お*/ /*め*/ /*で*/ /*と*/ /*う*/ /*げ*/ /*ん*/ /*き*/ /*に*/ /*た*/ /*く*/ /*ま*/ /*し*/ /*く*/ /*そ*/ /*だ*/ /*っ*/ /*て*/ /*ね*/

 

 

 

自作するには

ここで発表したサンプルコードはHTMLで記述されていますので、開発環境を構築するにはほとんど予算を必要としません。知識を吸収したり根気強い継続の気持ちの方がものを言いそうです。

ソースコードは100行あまりですが、LazyLinePainterを中心に据えておりそのライブラリを利用しています。

LazyLinePainterはSvgを使っているのでSvgの知識を紐解いてください。

それに加えて画像や音声データの扱いに慣れることも必要です。

その他、イベントについて知っておくと処理の制御を理解するのに役立つでしょう。これらについては当ブログで過去に何度も述べています。また、JavaScriptに関する解説書Amazonキンドル本を256円で発表していますので参考にしてください。

かつて、「水と安全はタダ」と言われていましたが水はスーパーで買う時代です。他人が作ったものをタダで拝借するのは実力が付きません。先日、ITを始め多くの分野で日本は先進国から脱落しているとのテレビ番組がありました。

自ら考える習慣を持ち、ちょっとした予算でもいいので先人を評価する気持ちを育てて欲しいです。

参考資料

アニメーションを語る
手書き風アニメーション
多目的時計
Vivus Instant
SVGでハンドライティングアニメーションを実装する
Lazy Line Painter

紅葉前線2019

紅葉は北から

桜前線は南、紅葉前線は北からと言われます。日本には四季があるおかげで紅葉が見られます。イチョウやもみじが色づく光景は毎年、楽しみのひとつです。

右の図は平地における紅葉の見頃を表しています。待ちきれない場合は少し高い山に登れば早めの鑑賞が可能です。

小学校唱歌の『もみじ』は誰でもが輪唱で歌った経験があることでしょう。

歌詞と曲は著作権保護期間が消滅しているようです。

楽譜、詞、音響再生、背景画像付きで表現してみました。開始ボタンをクリックしてお楽しみください。

 

開始
参照音楽:日本の童謡
©TacM,2019 Ver0.01

 

前例主義は変わるか

悪しき慣習

令和元年も後2ヶ月です。月日はまわりの思惑に関わらず留まることを知りません。当方は電話不精、出不精を挽回すべく年に2度ほどの筆による挨拶を長年継続してきました。

ここへきて高齢化社会を反映し毎年、年初めの賀状では挨拶が憚れる状況です。郵便事業は民営化が図られましたが、日本郵政の株式は国が保有し続けており、残念ながら大胆な企業展開は難しいようです。

年賀状の利用は尻すぼみ

年賀はがきの発行枚数は2003年の44億5936万枚を頂点に年々、減少しています。人は高齢になると取り巻く周りも高齢化するので年末年始の欠礼ハガキの差し出しは毎年連続する可能性が大きいです。

賀状というめでたさを暗示する名称はいかがなものでしょう。お年玉付き年賀はがきの名称は止めて、景品付き記念はがきなどの名前にしてほしいです。

個人による印刷技術が進化している現況においては、あらゆる冠婚葬祭に使える当選番号のみがついたシンプルなデザインのものがあってもよいのではないだろうか。

特に赤みをなくした控えめな色のデザインがほしいです。スマホが全盛を誇る時代にこそ他人と異なるアピール法を採用する極め付き情報発信を始めませんか。

近況を連絡するだけの年初めの挨拶

年賀状は虚礼の最たるものと筆不精の言い訳が聞こえてきそうです。個人の考えが尊重される時代です。

様々な考えがあって当然ですが、一律に強制できるものではありません。

現役の時にはビジネスでいやおうなしににスケジュールで出していましたが、現役を終えると極端に出したりもらったりする枚数が減ります。

金貨、金塊、高価な商品、高額商品券による贈賄罪が後を絶ちません。100円にも満たない年始の挨拶が虚礼とは情けないです。心のこもった挨拶状は実例の最高品といっても過言ではないでしょう。

郵便はがきに期待するもの

お祝いをイメージしないデザインを追加
当選番号のみ印刷されたデザインを追加
指定した日(元旦、1月4日)に配達されるはがき
今の当選方式などを踏襲しながら電子メールで届く
単なる近況挨拶への利用を啓蒙する
丸に3つ茶

梅花の宴

即位礼正殿の儀によせて

令和の誕生を祝って、雅な和風調雰囲気のなか『梅花の宴』をお楽しみください。祝日・即位礼正殿の儀10月22日(火)には間に合いませんでした。11月10日(木)の天皇即位パレード《祝賀御列の儀》にまた想い起してください。

オーディオ再生ボタン(▶)を押下してスタートです。福岡太宰府市の坂本八幡宮(いにしえの大伴旅人邸)をしのびつつ荘厳なBGMのもとご鑑賞ください。

梅花の宴・令和の誕生を祝って音源参照:obscured『著作権フリーbgm配布サイト hurt record』
©TacM,2019 Ver0.00
  梅花ばいかうたげ・即位礼正殿せいでんの儀によせて
    「万葉集 巻五-八一五 梅花の歌」の序文
天平二年正月十三日に、帥老そちらういえあつまりて、宴会をべたり。
時に、初春しょしゅんれいげつにして、気く風やわらぐ。うめ鏡前きょうぜんふんひらき、らん珮後はいごこうを薫らす。加以しかのみにあらずあさけみね雲移くもうつり、まつうすものを掛けてきぬがさかたぶけけ、ゆふへくきに霧結び、とりうすものぢられて林にまとふ。庭に新蝶舞ひ、空には古雁こがん帰る。
ここに、天をきぬがさにしつちしきゐにし、膝を ちかづさかづきを飛ばす。ことを一室のうらに忘れ、ころものくび煙霞えんかの外に開く。淡然たんぜんみずかゆる し、快然くわいぜんに自ずから足りぬ。
もし翰苑かんゑんにあらずは、何を以ってかこころをのべむ。ねがはくは落梅の篇をしるせ、古と今とれ何か異ならむ。園梅えんばいを賦して、いささかに短詠を成すべし。

【口語訳-解説】 富田敏子氏作品参照
天平二年正月十三日、太宰帥だざいのそち旅人たびと卿の邸宅に集まり、宴会を開いた。ちょうど初春正月の佳い月で、風は快く穏やか。梅花は化粧鏡前の白粉おしろいのように白く、蘭は匂い袋のように香る。それだけでなく、夜明けの峰に雲がかかり、松は雲のうすぎぬ天蓋てんがいをさしかけ、夕べの嶺には霧がかかり、鳥は霧に封じ込められ林をさ迷う。庭には春生まれた蝶が舞い、空には雁が南に帰る。
そこで天をきぬがさにし、地を座敷に、悠然とお互い膝を近づけ酒杯をくみ交わす。一同は言葉も忘れ、襟もゆったり外気に向けてくつろぐ。こだわらず気ままに振舞い、皆が快く満ち足りている。
もし文筆によらないなら、何をもって心中を述べることができるだろう。落梅の歌を詠んでほしい、唐の昔も今もその心は違わない。苑の梅の風情を思い、おのおの歌を作ってくれ。

 

余禄・天蓋について

天蓋(てんがい)という言葉があります。

①仏像などの上にかざされる傘状の仏具
②虚無僧が被る深編み笠
③貴人にさしかける長い柄がついた傘

の意味があります。ここでは三番目の意味が適切のようです。図にすれば右図のようなものと思われます。