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

ものづくりに関する想い

ウェブ年賀状を作る

知人にウェブ年賀状を送る

やよい、さき、権左衛門、寛寿郎みんな元気かな。お転婆、悪たれ小僧から紳士淑女に変貌した幼なじみにウエブ年賀状を送ります。

学び舎、校庭、運動会、修学旅行などの動画から娘盛り、男盛りを思い起こし壮健な一年をめざそう!

サンプルのウェブ年賀状を閲覧するにはパスワードが必要です。当サンプルはパスワードを設定する際のテンプレートになることでしょう。

以下のサンプルを起動するにあたりパスワードとして、小学六年生のときの恩師の名前、ニックネーム、住いのどれかを左のテキスト入力欄にひらがなで入力し右のボタンをクリックすれば閲覧できます。忘れた場合は、次の逆さ文字を参考にしてください。

たかまろ、わかとの、さるわかちょう : 恩師の名前、ニックネーム、住い

©2021 TacM
パスワードを確認します。

紙の賀状に添付する

ウェブ年賀状を作った上で紙の賀状を出す場合、ウェブ年賀状のURLアドレスを二次元コード(QRコード)にして賀状に印刷します。さすれば、スマホなどで容易にウェブ年賀状を閲覧できます。

自分で作る

ウェブ年賀状を自作するにはフリーの作成キットが複数、出回っていますが、かゆいところに手が届くまでは至っていません。

Windows Movie Makerなどのアプリを使いこなすと品質の高い動画を作ることができます。

今回の例題をひな型にしていただけたら、巧妙にパスワードを施すなど多彩な作品に仕上げられることでしょう。

ぜひ、プログラミングを紐解いて熟達者に成長されるように祈っています。

左のQRコードは上の作品に手を加えたものです。こちらは画像をクリックするかウェブカメラをかざすかしてご覧ください。

 

師走の俳句

冬を詠む

近年にない厳しい試練に揺れた年末に、古き詩人の俳句を現代風に表現しました。

松尾芭蕉、小林一茶とともに名高い与謝蕪村の作品から冬の夜に出る、冷たく冴えわたった月を謳った句を紹介します。

BGMを再生すると毛筆で短冊にしたためる如く描画されます。かなり手が掛かった作品です。

寒月かんげつもんなきてら天高てんたか 与謝よさ蕪村ぶそん

 

師走の俳句
参照音楽:フリーBGM・音楽素材MusMus 「祖父の書斎」 ©2020 TacM, Ver0.02 /****** かんげつもんてらてんたかよさぶそん *******/

 

千変万化の万華鏡

多彩な表現

万華鏡の基本描画は真四角に表示されます。丸型万華鏡を実現するには円型でフィルタリングします。

円形の内部を透明色に、外部は白色などの背景色にした四角い画像を用意し、万華鏡の画像に上書きして中心部に丸い画像を浮かび上がらせます。

今回、24種の型取りで動物や造形を描写します。

再生ボタンをクリックしてスタートです。

 

 

コロナ禍の年の瀬

戦々恐々の日々

感染症の病魔が衰えるどころか容赦なく牙を向けてきて、蔓延の一歩手前まで進んでいます。感染者数が日々、過去最高と報道され戦々恐々の至りです。

いつもの師走、年の瀬とは雰囲気をことにしています。例年なら一年の生活の垢を払い落とし、「お正月を移そう」などと新しい年を待望する言葉があふれかえっているところでした。

感染症のせいで身体的、経済的にハンディキャップを持つ人をおちょくるお笑い番組などは少なくなっています。これはこれで望ましいことです。

長期のロケを要するテレビ番組は延期になったり、過去の映像を使いまわしたりしてその場をしのいでいるようです。

 

政治の世界では感染症を抑えることと経済を回していくことがバトルを繰り広げています。どちらを押すかはその人の立場によりけりです。コロナ慣れと侮らず3月、4月頃の純粋な気持ちに立ち戻ることも大切な方向性ではないだろうか。

メリークリスマス2020

クリスマスを祝う

コロナ禍の真っただ中です。予防を徹底して日常生活を続けざるを得ません。With corona!と叫ばれています。クリスマスは家庭で静かに祝いたいです。

下記の作品の結菜(ゆいな)ちゃんは女子名前ランキングベストテンから採用しました。プログラミングをひも解いて自分の関係者名に更新してはいかがでしょう。ブラウザGoogle Chrome, Edge, FireFox, Opera, Vivaldiで動作確認しました。

再生ボタン(▶)をクリックして描画と音楽をスタートさせてください。

お使いのブラウザはobjectタグに対応しておりません。

冬のある日

再生ボタンをクリックして起動後、少し待つと怪しげなダビンチコードが現れます。ワクワク⁈

©TacM,2020 Ver0.02

【現代語訳】
こんにゃくの裏と表
どっちが裏で、どっちが表か怪しい
年末の夜
そんなこんにゃくを誰かが見ている
こんにゃくの
 裏と表の
  あやしさを
歳晩さいばんの夜
 誰か見ている
昭和・平成の歌人 岡部桂一郎 作

 

コロナ禍で揺れた2020

第3波来襲

コロナ禍で揺れた2020はあとわずかになりました。科学がたゆみなく進んだ昨今、多くの人々がこれほどの災難を感じた年はそうなかったでしょう。

2020年を振り返るには少し、気が早すぎますがsetTimeout関数を使って透き通るようなBGM《南十字星》に同期させた10個の『冬の風景』を描画しました。

以下に掲げた冬の風景を切り替えて描画するプログラミングコードはデータ部を除いて20行です。

基礎からHTMLプログラミングをマスターするには 初歩から高度HTMLプログラミングへの道 を参考にしてください。多くのサンプルコードが参考になるでしょう。

描画&BGMスタート直上の再生ボタンをクリックしてスタートです。

冬の風景10例

冬の風景 ©TacM,2020, Ver0.01
音楽:《南十字星》「甘茶の音楽工房」
冬のイラスト素材:「花鳥風月」   
  ⬑描画&BGMスタート
🌸

 

野球少年2020

新たなエール

野球、音楽、プログラミングをこよなく愛する皆様へHTMLを駆使した第二弾のエールを贈ります。

自動スタートしないブラウザでは左下の再生ボタンをクリックして開始させます。

©2020 TacM, Ver0.02

栄冠は健康な体に宿る

時は巡って

療養生活から社会復帰しました。久しぶりに娑婆の風にあたっています。朝ドラ『エール』が終わりになりました。《栄冠は君に輝く》をブログの再開に載せました。皆様の健康をお祈りします。

自動スタートしないブラウザでは左下の再生ボタンをクリックして開始させます。

©2020 TacM, Ver0.01

一年の代表風景

集合写真の様々な利用

数字ボタン( 1~12)は指定された月の風景、nowは当月の風景、allは集合写真と1月から12月までの風景を時間差で順に描画します。

サンプルコード

<html>
<head>
<meta charset="UTF-8" />
<style>
#scenemain {
  max-width:640px;
  text-align:center;
  border:0px solid blue;
}
</style>
</head>
<body style="max-width:640px; margin:0 auto;">
<DIV id="scenemain">
<h2 style="text-align:center;">季節の12風景&emsp;<span style="font-size:12px;">&copy;2020 TacM, Ver0.01</span></h2>
<button onclick="setClip( 0);">&nbsp;1</button>
<button onclick="setClip( 1);">&nbsp;2</button>
<button onclick="setClip( 2);">&nbsp;3</button>
<button onclick="setClip( 3);">&nbsp;4</button>
<button onclick="setClip( 4);">&nbsp;5</button>
<button onclick="setClip( 5);">&nbsp;6</button>
<button onclick="setClip( 6);">&nbsp;7</button>
<button onclick="setClip( 7);">&nbsp;8</button>
<button onclick="setClip( 8);">&nbsp;9</button>
<button onclick="setClip( 9);">10</button>
<button onclick="setClip(10);">11</button>
<button onclick="setClip(11);">12</button>
<button onclick="setClip(12);">now</button>
<button onclick="setClip(13);">all</button>
<BR>
<div id="month" style="padding-top:10px; text-align:center; font-size:24px;">&#x1f4c6;</div>	<!-- &#x1f310; -->
<div id="dmy1" style="float:left; width:170px; height:225px; border:0px blue solid;"></div>
<div id="item" style="float:left; position:relative; width:300px; height:225px; overflow:hidden; border:0px solid red;">
 <div id="sample" style="position:absolute; left:0px; top:0px; width:900px; height:900px;">
  <img src="http://aidesign.lolipop.jp/wp-content/uploads/2020/09/scene3x4.png">
 </div>
</div>
<div id="all" style="padding-top:10px; text-align:center; display:none; width:640px;">
  <img src="http://aidesign.lolipop.jp/wp-content/uploads/2020/09/scene3x4.png" width="300" height="300">
</div>
</DIV>
</body>
<script type="text/javascript" charset="utf-8">
var status=0;
var m=0;
var p = document.getElementById( "sample" );
function setClip( v ) {
  if(v==13){										//all
	status=1;
	m=0;
	document.getElementById('all').style.display="inline-block";
	allMonth();
	return;
  }
  else{												//0~12
	if(status!=0)	{alert("一年の全風景を表示中");return;}
	status=0;
	if(v==12){										//当月
	  var date = new Date();
	  v = date.getMonth();
	}
  }
  outMonth(v);
}
function allMonth(){								//一年の全風景
	outMonth(m);
	if(++m < 12)	setTimeout('allMonth()', 1000);
	else			{status=0;document.getElementById('all').style.display="none";}

}
function outMonth(v){								//指定月の風景
	var x = v % 3;									//x:0~2
	var y = Math.floor(v / 3);						//y:0~3, mon:0~11 => 1~12
	p.style.left = (-300*x) + "px";					//オフセットx
	p.style.top  = (-225*y) + "px";					//オフセットy
	document.getElementById('month').innerHTML = (v+1) + "月";
	console.log(document.getElementById('month').innerHTML, v, x, y, p.style.left, p.style.top);
}
</script>
</html>