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

横長画像からの切り抜き

トリミングの新しい試み

横長画像をトリミングあるいは切り抜きをするとき、幅が大きくなると扱いが面倒になります。今回、object-fit:coverとobject-positionを使って部分画像に光を当ててみました。

複数の写真をかなりの枚数ごとにまとめて管理することがあります。一般に画像はサイズが大きくそれをまとめるとさらに大きくなりますが、管理のしやすさを優先する場合があります。

今回採用したobject-fitプロパティは、<img> などで指定された画像をどのようにはめ込むかを設定します。さらにオブジェクトの詳細配置を決めるには、 object-positionプロパティを用います。

object-positionは切り取る位置を全体サイズとの比率で指定します。今回、pxなどの単位で絶対指定する方式は思ったような動作は得られていません。動作確認された%による配置を以下に示します。

ブラウザの再読み込みボタンで何度でも動作出来ます。

動作例

©TacM,2019 Ver0.01

HTMLサンプルコード

<html>
<body onload="sceneChange();">
<Div style="width:300px; height:315px; border:0px red solid;">
<img id="bj" src="https://aidesign.lolipop.jp/wp-content/uploads/2019/11/bijin8.png" width="2400" height="300" style="width:300px; height:300px; object-fit:cover; object-position:85.714% 0%;">
<div style="margin-top:0px; font-size:12px; color:navy;">&copy;TacM,2019 Ver0.01</div>
</Div>
<img id="la" src="https://aidesign.lolipop.jp/wp-content/uploads/2019/11/bijin8.png" width="2400" height="300" style="width:600px; height:75px;">
<script type="text/javascript" charset="UTF-8">
var m = -1;													//グローバル変数
function sceneChange(){
	var p = ++m % 8 * 100 / 7;								//ローカル変数   14.286=100/7;
	document.getElementById('bj').style.objectPosition = p + '% 0%';	
	console.log(m, document.getElementById('bj').style.objectPosition);
	if(m < 7)	  setTimeout(sceneChange, 3000);			//3秒ごとに8枚の画像を描画する。
}
</script>
</body> 
</html>

プログラミングの肝はsceneChange関数の呼び出し回数カウンタ(m)がグローバル変数、表示画像を指定する変数pをローカル変数に定義することです。その理由は別の機会に語ります。

雑感

object-fit:coverとobject-positionを使った画像のトリミングを体験しました。切り抜いた画像の配置にはobject-positionを利用しますが0%で左端、100%で右端の画像が選択されます。

切り抜きの設定例をHTMLコードの11行目に示します。8枚の画像を順に切り取る場合は7等分のような設定になります。最初に決めた仕様に後でつじつま合わせをしたような違和感を覚えましたが先に決めたが勝ちでしょうか。

 

はごろも伝説の天女

久米の仙人も欲情

天衣をまとった天女

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

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

一方、ふくらはぎに見とれる久米仙人伝説もありごっちゃに語り継がれることがあるようです。今回は、雲に乗った仙人が俗界の天女に気を取られ惑わされて神通力を失い転落する画像と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 = "https://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