月別アーカイブ: 2020年10月

一年の代表風景

集合写真の様々な利用

数字ボタン( 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>

言葉遊び2020

漢数字入り四字熟語

二束三文のイメージ、参照ウェブhttp://arita.justhpbs.jp/yojijyukugo/7cd5b0588dddb9717d5e541e30964229.jpg

文字に音楽と映像を加えた言葉遊びをHTMLで実現しました。

四字熟語を手書き風に表示する機能はInkscapeとLazyLinePainterを用いてJavaScriptソースコードを作成しました。

詳しくは本ブログの手書き風アニメーション「愛」を込めてを参照してください。

プログラミングを初歩から本格的にマスターしたい場合は「音や映像が飛び出すプログラミングつぶやき本」を紐解いてください。

 

輪環の順とは元に戻ることを意味します。①②③~⑧⑨と進み⑩で最初の①に戻ります。数え歌の再生ボタンをクリックすると漢数字入り連番熟語が表示・描画されます。

 

 

自分流の言葉遊び

人間の文化は古来と比べると劇的に進歩していると考えがちですが、大したことはないといわれています。自分流の言葉遊びに挑戦されてはいかがでしょう。六〇七〇に詰まったら六泊七日があります。八〇九〇は八勝九敗でも当初は許されるでしょう。そのうち、最良の言葉が湧いてくることでしょう。

 

手書きサインのお祝いメッセージ

透明アクリル板にサインペンで即興的にサインする如く、Html, Css, JavaScriptにより七五三お祝いの言葉を表現しました。

image/svg+xml /*あ*/ /*か*/ /*り*/ /*ち*/ /*ゃ*/ /*ん*/ /*七*/ /*五*/ /*三*/ /*お*/ /*め*/ /*で*/ /*と*/ /*う*/ /*山*/ /*田*/ /*源*/ /*太*/ /*郎*/ /*日*/ /*光*/ /*仮*/ /*面*/ /*よ*/ /*り*/
©2020 TacM, Ver0.01

栃木県中禅寺湖の湖畔にて

特典付き数字合わせゲーム

特典を付ける

幼い子に習い事を教えるとき、ちょっとでもよいところを褒めてあげると習う側では心強いものです。

くじ引きゲームでは通常の当選確率より高確率で当たりが出ると今日は何かいいことが起きそうなどとウキウキするものです。

ゲーマーを嬉しがらせる特典付き数字合わせゲームを作りました。

作り方は遊び心の織り込み方の記事が役立つでしょう。

使い方

使い方は上図に示す開始ボタンの右上隅をクリックして開始します。右上隅が押下され特典モードに入るとタイトルの背景色がピンクに変わります。

開始ー停止ボタンを押すと2等賞、1等賞、特等賞が当たるように細工が施されています。7回で特典モードは終了し背景色が白に戻ります。

Stop
 数字合わせゲーム 
©2020 TacM, Ver0.10
0 1 2 3 4 5 6 7 8

おことわり

遊び心の織り込み方高度に専門的な利用法で隠された機能を起動して周りをびっくりさせたりパワハラを仕掛けた者への意趣返しなどに応用できることを申し上げました。

今回の例は乱数を用いた当選率を人為的に変化させるサイコロ賭博のようなものです。遊び心が過ぎて公序良俗に反する行為に与(くみ)するものではありません。

『天網(てんもう)恢恢(かいかい)疎(そ)にして漏(も)らさず』を忘れないでください。

天は何もかもお見通し

秋の夕暮れ

音楽の再生ボタンを押して開始します。

©2020 TacM, Ver0.01
さびしさに
  宿やどでて
    ながむれば
いづこもおな
  あき夕暮ゆうぐ
『後拾遺集』 秋・三三三 良暹法師りょうぜんほうし 【現代語訳】
あまりにも寂しさがつのるので、
庵から出て辺りを見渡してみると、
どこも同じように寂しい、
秋の夕暮れがひろがっていた。
BGM:『童謡「俵はごろごろ」』
作曲:本居長世

遊び心の織り込み方

イースター・エッグ

イースター・エッグとはキリスト圏において復活祭を祝って色づけられた鶏卵のことですが、電子機器に備えられた通常と異なる隠された機能を指すときにも使われます。

この機能は遊び心であったり、システムのメンテナンスに利用されます。

遊び心

物事にいつも張りつめて付き合うと長続きしないものです。リラックスや遊び心が周りを和ませてくれることがあります。パソコンにおいてWindows95の出現はエポック的な出来事でした。

25年後に明かされた秘密として「Windows95には開発者たちの名前を見る裏技」がありました。

これはコンピュータ版イースター・エッグとして語り継がれています。

今回、小さな遊び心としてコンピュータ版イースター・エッグの作成例を紹介します。

用途と動作例

右の例で2つのボタンは同一名称にしており形状も限りなく似せてあります。

背景色がグレーの左ボタンを選択するとカジュアルガール、ライトシアンの右ボタンを選ぶと見返り美人のイラストが表示されます。

いつも同じ画像では代わり映えがせず、時には妖艶な美人が現れないかなと思う時もありましょう。

このようなときに隠された機能を仕込む方法を示します。まずは右例の2つのボタンを押して一般的な機能を確認してください。

仕組み

上の例では同じようなボタンが2つあり、左はinput要素、右はdiv要素に定義されています。inputではグレー色の四角内でマウスがクリックされたとき、イベントが発生しonclickで指定された処理が起動します。

一方、clkと名付けられたdiv要素には11行目のコードでクリックイベントが取り付けられクリック位置を細かに検出することができます。

その詳細位置を解析することにより左図の〇印個所の押下を確認できます。特別な機能を隠したいときは2つのボタンを似た形に、そうでなければ異なる形状にすることが多いです。

サンプルコード

<div id="target" style="position:relative; width:300px; height:80px; border:1px solid red;">
  <div style="position:absolute; left:40px; top:20px; ">
    <input id="startButton" type="button" onclick="GoStop();" value="Start" style="width:80px; height:40px; font-size:26px;">
  </div>
  <div id="clk" style="position:absolute; left:180px; top:20px; text-align:center; width:80px; height:40px; font-size:26px; background:lightcyan; border:1px solid black; border-radius:3px 3px 3px 3px;">Start</div>
</div>
<Div style="width:300px; height:315px;">
<img id="bj" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/11/bijin8.png" style="width:300px; height:300px; object-fit:cover; object-position:0% 0%;">
</Div>
<script>
document.getElementById( "clk" ).addEventListener( "click", function( event ) {//clk要素のクリックイベントを取り付ける
	var clickX = event.pageX ;
	var clickY = event.pageY ;
	var clientRect = this.getBoundingClientRect();			//要素の位置を取得
	var positionX = clientRect.left + window.pageXOffset;
	var positionY = clientRect.top + window.pageYOffset;
	var x = clickX - positionX;								//要素内におけるクリック位置を計算
	var y = clickY - positionY;
	console.log("X,Y", x, y);
	if(clickPosition(x, y)==0)	document.getElementById('bj').style.objectPosition = '57.143% 0%';	//艶やか美人
	else						document.getElementById('bj').style.objectPosition = '85.714% 0%';	//見返り美人
},false ) ;
function clickPosition(x, y){								//clk要素内のクリック位置を取得
	if((x > 68) && (x < 80)){
	  if((y > 0) && (y < 10))	return 0;					//右上隅を検出
	}
	return 1;												//その他
}
function GoStop(){											//startButtonのクリック処理関数
	console.log("GOSTOP");
	document.getElementById('bj').style.objectPosition = '100% 0%';		//カジュアルガール
}
</script>

実用化へのヒント

隠された機能は開発者が運用時に蓄えた情報を取り出して製品品質の向上に利用することがあります。このような場合、一般利用者には起動しにくく設定します。このため、起動条件を複雑にします。上の例では、〇印をクリックする他にshiftキーやctrlキーの押下と併用する条件を付加するとよいでしょう。

高度に専門的な利用法

黎明期のワープロソフトにおいて、変換用の辞書を作ることが大きな作業でした。他社の辞書をこっそりコピーしてオリジナル商品として販売する防止策として使用頻度の低い語をわざと誤変換が起きるようにして、コピー事実が表に出るようにしていました。

発展途上の商品では3つのキーを同時押しするとデバッグ情報が出力される機能がありました。

この他、上司の違法行為に近いブラックな活動を内外に告発すべく、告発者の退職後に発砲するように取り付け、パワハラのリベンジに利用した出来事もあったようです。

隠された機能は遊び心、品質向上、著作権対策、パワハラ牽制などに目立たないところでこれからも利用されることでしょう。

 

秋の夜半2020

BGMを再生して秋の夜半に月を愛でながらいにしえの和歌に親しんでください。

秋の夜半2020
TacM

秋風あきかぜ
  たなびくくも
    より
もれいづるつき
  かげのさやけさ

 古今和歌集 巻四 秋上 四一三 左京大夫顕輔
BGM:『秋の夜半』
作詞:佐々木信綱、作曲:ウェーバー

数字合わせゲーム

 

数字合わせゲームを作りました。二段目の3つの数字の並びにより特等、1等、2等、はずれが決まります。等級の決め方を示します。上位等級と重なる場合は上位を採用します。

特等 000 111 222 333 444 555 666 777 888 999
1等 x77 7×7 77x              
2等 xx7 x7x 7xx              
はずれ                    

xは0~9を示します。

超幻想的万華鏡

あかりちゃん、七五三のお祝いに渾身の作品を贈ります。スペースキーの入力によってより一層、幻想的な模様に変化します。キー入力は対象のオブジェクトをマウスで選択してから行います。

 

描画変化=R:背景色反転 △:ぼやけ変化 H:回転制御

自作への道

プレゼントするような作品は一朝一夕にはできませんが、継続すれば必ずや心を打つ作品が完成します。

それには体系的な知識を吸収するとよいでしょう。本格的に目指すならば専門学校、教室、講座・講習などがあり、趣味で始めるならば本屋さんにて求める解説書やネット取得の電子書籍があります。

ブログ守り人による作品『音や映像が飛び出すプログラミングつぶやき本』なども参考にしてください。サンプルコードが満載です。継続は力なりを期待しています。