inventor のすべての投稿

言葉遊び2020

2020-10-18ものづくり筆耕ブログinventor

漢数字入り四字熟語

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

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

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

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

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

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

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

2020-10-15ものづくり筆耕ブログinventor

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

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

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

2020-10-12ものづくり筆耕ブログinventor

特典を付ける

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

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

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

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

使い方

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

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

Stop

数字合わせゲーム

おことわり

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

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

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

天は何もかもお見通し

秋の夕暮れ

2020-10-10ものづくり筆耕ブログinventor

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

寂さびしさに
　　宿やどを立たち出いでて
　　　　眺ながむれば
いづこも同おなじ
　　秋あきの夕暮ゆうぐれ
『後拾遺集』　秋・三三三　良暹法師りょうぜんほうし【現代語訳】
あまりにも寂しさがつのるので、
庵から出て辺りを見渡してみると、
どこも同じように寂しい、
秋の夕暮れがひろがっていた。

BGM：『童謡「俵はごろごろ」』
作曲：本居長世

遊び心の織り込み方

2020-10-09ものづくり筆耕ブログinventor

イースター・エッグ

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

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

遊び心

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

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

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

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

用途と動作例

右の例で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>