「プログラミング」カテゴリーアーカイブ

Programing

めくりフリップその後

プログラミング

おあずけ

テレビ番組やプレゼンにおいてフリップに付箋紙をかぶせて最初は見えないようにし気を持たせるおあずけ手法があります。めくりフリップについては当ブログでは数度、取り上げています。

①動的な表現のいろいろ

②めくりフリップ

③世界の若者二態

先の例では一度めくると元の戻すことができませんでした。再度クリックすれば目隠しが元に戻るようにした例を以下に掲げます。参考になれば幸いです。

お隠れ/御出座ここをクリック

サンプルコード

<html>
<div onClick="document.all.item('okng').style.visibility=(document.getElementById('okng').style.visibility.length==6)?'visible':'hidden';">
<span style="font-size:36px; color:orange;">お隠れ/御出座</span><span style="font-size:18px; color:blue;">ここをクリック</span>
</div>
<div id="okng" style="visibility:hidden; width:360px; height:160px; border:1px solid blue">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2015/09/hamanasu.png" alt="イラストB" width=350 height=152>
</div>
</html>

おまけ

御出座（ごしゅつざ）とはおでましを言います。テレビ時代劇の北町奉行、遠山左衛門尉様、御出座ぁ～！(きたまちぶぎょう、とうやまさえもんのじょうさま、ごしゅつざぁ～)のきめ台詞が浮かびます。

 

横長画像からの切り抜き

プログラミング

トリミングの新しい試み

横長画像をトリミングあるいは切り抜きをするとき、幅が大きくなると扱いが面倒になります。今回、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="http://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="http://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等分のような設定になります。最初に決めた仕様に後でつじつま合わせをしたような違和感を覚えましたが先に決めたが勝ちでしょうか。

 

イベント盛り上げ装飾品

プログラミング

イベントを盛り上げるツール

結婚式や創業祭などは人生の中でそう何度も体験しないものです。記念のイベントを催すに当たり、特注のビンゴゲームで盛り上げてみませんか。それを制御する中核はスマホに収納されています。

会場の映像設備がユーザーに開放されるかどうかにもよりますが、スマホの画像をオンラインで表示できる時代です。

スマホ、パソコン用に開発したオンラインゲームで人生の節目にインパクトを付けて見ましょう。

今回、オリジナル画像は開始時、終了時には主催者を称える動画が表示されます。ビンゴ番号が更新されるタイミングで参加者をクローズアップして描写する演出が可能です。

主催者のアイデアに寄り添い世界に二つとない企画でイベントを盛り上げよう。

ビンゴ籠をクリックして開始です。ビンゴ籠の回転はChromeブラウザが脈動なしでスムースです。

　

　

　

　

　

　

　

　

　

　

　

　

　

　

　

ビンゴゲーム管理ソフトA

プログラミング

Aバージョン

ビンゴゲーム管理ソフトでAバージョンをリリースします。まだ改良点はたくさんあるようですがを一応の区切りです。アメリカの半導体ビジネスでは製品化済みの商品の改訂版にはA,B,Cと枝番を振る慣わしがありました。

画期的なマイコン8ビットCPU Intel8080が世に出ましたが、使いにくい点を改訂したのがIntel8085でした。更に改良して8085Aが出荷されたと記憶しています。それに因んでAを使ってみました。

改良点

改良点は実際のビンゴマシンの動きに近づけて一度使ったビンゴボールを使わないようにして空（から）くじをなくしたことです。ビンゴボールの番号は1～75の75種ですが、一度出現した番号は二度と現れないような処理を追加しています。抽選回数が増えるごとに動きが軽くなります。

 

これら動作は電子的システムの得意とする分野です。また、参加者ごと、抽選回数ごとの処理の切れ目が分かるように間を置いたり背景色を変えています。背景色変更の効果が記事全体に及ぶのはやり過ぎでしょうか。「あちら立てればこちらが立たず」一筋縄ではいかぬものです。

将来への布石

 

結婚式場などのイベント会場には巨大モニタ画面が備わっているようです。また、パブリックビューイングでスポーツなどが観覧できるようになりましたので、紙による抽選ゲームからエレクトリックゲームへの転換が一段と進むことでしょう。

さらなる改良点

①参加人数の入力
②カード番号と参加者の対応付け
③抽選タイミングの指定
④ゲームの記録を残す

管理機能付きビンゴゲームの動作例

ゲーム画面の左上にあるビンゴ籠をクリックし回転させて開始です。リーチが叫ばれるまで時間がかかりますが一度、リーチやビンゴが起きればにぎやかになります。

複合システムの難解な問題

今回、抽選のタイミングで背景色を変更しましたがウィジェット欄を含むすべての背景色に及び期待した動作ではありません。

ローカル環境では問題が起きてないので、調査を進めると当記事のJavaScriptオブジェクトidに”main”という名付けをしていることが原因でした。

この名前はウィジェット欄を表示させるコードで既に使用されているようです。id名をユニークな名前に変更したところ、期待した動作が得られました。

ウィジェット欄のコードはWordPressなどのサポートシステムが管理しているので個別に確認することはできません。ウ~ムなかなか難しい問題と言えるでしょう。

ビンゴゲーム管理ソフト

プログラミング

追加された新機能

ビンゴゲームを作って楽しく遊ぶための研究用記事です。今回、20人のビンゴゲーム参加者のゲーム完成状況を時々刻々、表示する機能を追加しました。

ひとりのビンゴカードにおいて縦、横、斜めの12組がビンゴマシンが発する番号と如何に合致しリーチやビンゴ状態に達したかを一目で把握します。

ビンゴマシンが1～75の数を決定すると参加者はビンゴカードにその番号があるかどうかチェックし、あればその部分に穴をあけます。

12組のどれかに4個の穴がそろったらリーチと、5個の穴がそろったらビンゴと叫びます。確率的には少なくなりますが2組、3組、4組が同時に成立することもあります。

その時は一段と気張ってダブルリーチ、トリプルビンゴなどと声を出してもいいかもしれません。

これら一連の動作をビンゴゲーム管理ソフトが処理します。カードマシンの籠から出たボールは再び籠に戻ることはなく、そのため空（から）くじが起きることはないでしょう。

このチェックはまだ施されてないのでたびたび空くじが起きています。空くじなしにする方法で可能ですが実施は次回以降になります。

空くじなしにする方法

空くじなしというか必ずどれかにヒットする完全な方法は、20人全員の発番に用いたボールのみをビンゴマシンの籠に用意します。加えて使い切ったボールを削除する処理を追加すればいいようです。

処理的には1～75のうち、利用したボールの値を、例えば999などと改変し、ソーティングして小さい順に並び替えその上、発生する乱数を1～74と小さくしていきます。

それをインデックスにして先ほど並び替えたテーブルを参照してマシンが発番する番号にします。これを繰り返せば空くじはなくなるでしょう。

それにしても空くじはしらけます。早めの対応が課されているようです。

管理機能付きビンゴゲームの動作例

ゲーム画面の左上にあるビンゴ籠をクリックし回転させて開始です。リーチが叫ばれるまで辛抱強く待ってみましょう。一度、リーチやビンゴが起きれば声が重なるほどにぎやかになります。

音声ファイルの作り方

プログラミング

音声の作り方

ビンゴゲームを作るに当たり、MP3やWAV形式の音声を作るには、テキストを音声に変換してくれるサイトが便利です。今回、Sound of Textを利用させていただきました。

サイトを参照すると上図の①の画面が現れます。Text欄に変換する文言、Voice欄で言語を選択してSubmitをクリックすれば、②の画面が現れます。変換するテキストを確認してDOWNLOADをクリックすると、所定のフォルダにmp3ファイルがダウンロードされます。

テキストの設定例

「リーチ」、「ビンゴ」などの掛け声や感嘆詞音声はサイト上に多く存在し、ダウンロードフリーのものを用意できますが、ユーザーフレンドリーなメッセージは独自に準備します。『カード番号一番さん、ビンゴ完成です。あめでとうございます。』のようなメッセージ音声ファイルを作りました。

音声ファイルの利用例


《音声で意思疎通！》

けさ、ちょっと言い過ぎました。ごめんなさい！

サンプルコード

<!DOCTYPE html>
<html>
<body>
<DIV id="top" style="width:480px; height:400px; font-size:24px;  color:deeppink; border:1px solid green; display:block;">
<audio id="apology" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/09/pardonme.mp3" controls controlslist="nodownload"></audio><BR>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTeIePErZuNGrIvnBBjYQoeTFz-DsGHMUV0ady7SMI3UltzSWsChQ" 
width="320" height="307" align="left" border="1">《音声で意思疎通！》<BR><BR>けさ、ちょっと言い過ぎました。ごめんなさい！
</DIV>
</body>
</html>

 

ビンゴゲーム作成部品

プログラミング

ビンゴゲームの部品

ビンゴゲームをJavaScriptで作成するに当たり、様々な機能を分担するパーツから成り立ちます。今回、参加者全員のヒット状態を一覧表に表示するパーツを作成しました。

thやtd要素へのアクセスは独特の方法がありますが、ここではそれぞれにidを付加したオーソドックスな方法を採用しています。

背景色を動的に設定するにはdocument.getElemeniById(‘idxx’).style.backgroundColorに背景色を代入します。

例えば、下の図に示すようにカード番号3番の12組のヒット数を表示しています。G列がビンゴ、5行目がリーチであり、背景色をそれぞれマゼンタ、ディープスカイブルーでそれ以外はヒット回数を表しています。

余談ですがスタイルシートにはbackground-colorプロパティがあり、背景色を指定するにはstyle.background-colorとすべきですが、-（ハイフン）はマイナス演算子と誤解されエラーになります。そのため、ハイフンを省き次の文字を大文字にするのが習わしです。これをマスターする時は悩みましたがかなりの月日が経ちました。

背景色動的設定機能を拡張して右の図のようにサインカーブを描いてみました。サイン値は０～２π間で-1～1の値を採りますが、角度を1～12、サイン値を12組に引き当てています。

背景色を動的に設定する機能を応用した描画

BINGO 12345 \/

サンプルコード

<Div id="wrapper" style="width:180px; font-size:20px; background:aliceblue;">
<table id="status" style="text-align:center; border-collapse:collapse; width:20px; font-size:14px;" border=1>
<tr><th>  </th><th bgcolor="pink">B</th><th bgcolor="pink">I</th><th bgcolor="pink">N</th><th bgcolor="pink">G</th><th bgcolor="pink">O</th>
<th bgcolor="lime">1</th><th bgcolor="lime">2</th><th bgcolor="lime">3</th><th bgcolor="lime">4</th><th bgcolor="lime">5</th>
<th bgcolor="yellow"><span style="font-family:Arial;">&#x5c;</span></th><th bgcolor="peachpuff">/</th></tr>
</table>
</Div>
<script type="text/javascript" charset="utf-8">
var v, w, x;
var table = document.getElementById('status');				// table要素を生成
for (var i = 1; i <= 12; i++) {								// tr部分のループ
    var tr = document.createElement('tr');					// tr要素を生成
    for (var j = 0; j < 13; j++) {							// th・td部分のループ
      x='n'+letter2(i)+letter2(j);							// id作成
      if(j==0)	{v='th';w=i;}								// th table-header
      else		{v='td';w=0;}								// td table-data
      var td = document.createElement(v);					// th・td要素を生成
      td.id = x;											// th・td要素にidを付ける
      td.textContent = w;									// th・td要素内にテキストを追加
      tr.appendChild(td);									// th・td要素をtr要素の子要素に追加
    }
    table.appendChild(tr);									// tr要素をtable要素の子要素に追加
}
document.getElementById('wrapper').appendChild(table);		// 生成したtable要素を追加する

    document.getElementById('n0301').innerHTML = 2;
    document.getElementById('n0302').innerHTML = 0;
    document.getElementById('n0303').innerHTML = 1;
    document.getElementById('n0304').innerHTML = 5;
    document.getElementById('n0304').style.backgroundColor = "magenta";
    document.getElementById('n0305').innerHTML = 3;
    document.getElementById('n0306').innerHTML = 2;
    document.getElementById('n0307').innerHTML = 0;
    document.getElementById('n0308').innerHTML = 0;
    document.getElementById('n0309').innerHTML = 1;
    document.getElementById('n0310').innerHTML = 4;
    document.getElementById('n0310').style.backgroundColor = "deepskyblue";
    document.getElementById('n0311').innerHTML = 3;
    document.getElementById('n0312').innerHTML = 2;

function letter2(num) {return ('0' + num ).slice(-2);} <!-- send '01' -->
</script>

 

ビンゴカードの作り方3

プログラミング

再利用などについて

動作や行動について何度も繰り返して利用されるのが一般的です。そのため大きな組織では分厚いマニュアルが用意されています。ソフトウェアやプログラミングにおいても繰り返し利用されることがほとんどです。

そのためには、切れ目にはきちんとした管理がなされなければなりません。お店のレジスターでは購入者ごとに買い物額が累計されるので、開始時には合計値を0にしますが、その前に一日の売り上げや支店ごとの売り上げ管理のために累計加算がなされます。

下記のサンプルはsumというグローバル変数を利用する前にリセットすべきであることを示しています。これに対しsumationという関数のローカル変数totalは毎回、利用される直前にクリアされます。

<script>
var sum=0;							//グローバル変数
for(var i=0; i<=10; ++i) sum+=i;
alert("SUM10="+sum);				//55
for(var i=0; i<=20; ++i)	sum+=i;
alert("SUM20="+sum);				//265
sumation(10);						//55
sumation(20);						//210

function sumation(n){				//総計算出
var total=0;						//ローカル変数
  for(var i=0; i<=n; ++i) total+=i;
  alert("N="+n+" TATOL=" + total);	//10 55, 20 210
}
</script>

このビンゴ運用研究システムでは、複数のビンゴカードを作成するに当たり、1回目、2回目とプログラムコードを再利用（リユース, reuse）するために、ヒットした回数をリセットしたり、画面を初期状態に戻さなければなりません。

この処理を再利用処理と呼ぶことがあります。再利用処理を含むシステムは通りいっぺんのことを成し遂げ終了するシステムよりも複雑・難解になります。

多人数で起きる事象の研究

ビンゴは２～３人で行うものではありません。ある程度の人数がそろわないと著しく面白みを欠きます。パソコンやスマホ画面は小さく参加者全員のカードを表示することは難しいですが、特定者を選択して時分割に表示することは容易です。

複数人数で起きる事象を独りビンゴを重ねて行うことでおおむね実態に近い体験が可能です。

また、このシステムはビンゴカードを紙で配布しないで参加者のスマホに送付する方式を目指しています。

並びステータス監視を改良

並びは縦5組、横5組、斜め2組の合計12組を制御します。25ポジションがどの組に属するかを制御するには下図に示しテーブルを使うように改訂しました。

テーブルの数値3は縦横、7は縦横左斜め、11は縦横右斜め、15は縦横左斜め右斜めに属します。縦はB～O列、横は一～五行、左斜めは＼斜、右斜めは／斜でできごと欄に表示されます。

例えばG列二行に位置する数字にヒットした場合、左のテーブルを参照すると11を得ます。11は縦横右斜めの3組に関与し、横はc4（G列）、縦はc6（二行）を、右斜めはc11（／斜）をカウントアップします。

左の制御テーブルを使用すればカウントすべき組の扱いが簡潔になります。

改良されたビンゴゲーム

ビンゴマシンのボールを入れた籠をクリックしてスタートです。

🎑動作の説明

  1. ビンゴマシンのボールを入れた籠をクリックすると籠が回転し始めビンゴ番号が2秒間隔で確定します。
  2. 選ばれたビンゴ番号がビンゴカードの中にあればヒットになり該当する組の通算回数をカウントアップしピッという確定音が鳴ります。
  3. ヒットしたボールの色がシアンから薄い赤に変化しビンゴカードに穴をあけた状態に変化します。
  4. カウントアップされた値は縦横斜めの所定位置に累計値が表示されます。4でリーチ、5でビンゴ状態です。該当表示欄にできごととして表示されアナウンスが流れます。
  5. ビンゴカードの中に無ければブッという音が鳴ります。
  6. ビンゴが完成し「おめでとう」がアナウンスされビンゴ籠が停止したら、再びビンゴ籠をクリックすると次のビンゴカードを発行することができます。

次回の予定

次回は音声の作り方や設定について語る予定です。

追加説明

サンプルコードの全貌は故あって非公開です。ANDビット演算（たとえばa = b & c;）の文法エラーを解決できずやむを得ず、a = ((a | b) ^ a) ^ b;と代替していることが一因です。

 

ビンゴカードの作り方2

プログラミング

当ブログのスタンス

当ブログでは電子福引き器への応用や万華鏡と万葉を彩る恋歌などユニークなゲームを発表してきましたが、完成されたゲームそのものよりもゲームの作り方に重きをおいてきました。

ビンゴゲームについてもグループの懇親会で即、使えそうなゲームではありません。

本格的なビンゴゲームを設計、開発するための指針を語っています。

今回は一人ビンゴゲームのような雰囲気に近く、コンピューターが作り出したビンゴカードを、ビンゴマシンに見立てた乱数生成器によって確定されたビンゴ番号がリーチ、ビンゴ状態になるのを見届けるゲームです。

前回に述べましたが、如何にビンゴカードを作るか、そして、リーチ・ビンゴ状態を如何に把握するかに腐心しています。

ビンゴカードの作り方のおさらい

ビンゴマシンに直接、触ったことはありませんが想像で話を進めます。

ビンゴマシンも様々な形態があるようですが、ここでは左上の図のような籠に右図に示したような1～75の番号が付いているボールを入れて回転させ、ビンゴ番号を決定する仕組みを電子的に実現させます。

一度、出目として出たボールは二度と使われることがないため、ゲームが収束方向に向かいやすくなります。

並びのステータスの監視

ビンゴカードの作り方に加えて重要なのが、並びのリーチ、ビンゴ状態の把握です。並びは縦5組、横5組、斜め2組の合計12組を制御します。

一つのボールは縦と横の最低2組に関与し、左たすき掛けと右たすき掛けのどちらかを加えた3組、両たすき掛けを加えた4組まで存在します。

もっとも高い景品が期待されるのは、N列、三行、左たすき掛け、右たすき掛けが同時にリーチ状態で最後のど真ん中のN列三行にヒットすれば、シングル、ダブル、トリプルを超えてクアドラプルのビンゴ完成です。こうなれば2倍、4倍、8倍返しの褒賞になることでしょう。

今回は、複雑さを解消するためにシングルビンゴの完成でゲーム終了としています。これまでの原理を理解すれば、最終仕様を実現することは難しくないでしょう。

ビンゴゲーム理解のために

本格的なビンゴゲームを作成するために、自動的にシミュレーション動作を行うゲームを取り上げます。ビンゴボールの集まりをクリックしてスタートです。ビンゴの完成でゲームは終了します。リーチとビンゴのできごとを音声でアナウンスします。

🍀動作の説明

  1. ビンゴボール集団画像をクリックするとビンゴ番号が2秒間隔で確定していきます。この画像は次のクリックまで回転し続け、回転後のクリックで停止し動作は中断し再度のクリックでゲームは継続します。
  2. ビンゴ番号がビンゴカードの中にあればヒットになり該当する組の通算回数をカウントアップしピッという確定音が鳴ります。ヒットしたボールの色がシアンから薄い赤に変化しビンゴカードに穴をあけた状態に変化します。
  3. ビンゴカードの中に無ければポッという音が鳴るだけです。この状態が何度も繰り返されることがありますが、実際は複数のカードを対象にするので本番ではもっと少ない回数になるので問題はないでしょう。

  4. ヒットして、縦横斜めの該当する組が通算回数4回のとき、該当組み名とリーチが表示・アナウンスされます。
  5. 次にビンゴ番号が更新されたら同様にヒットの確認が行われてビンゴ完成ではおめでとうと祝福のアナウンスが流れます。
  6. リーチが起きた順にビンゴが完成するとは限りません。
  7. ひとつの番号が複数の組に関与している場合、リーチやビンゴが重複することがありますが、前述のとおり、ひとつに省略しています。

次回の予定

次回は内部動作を把握できるような機能を付けてみます。

 

ビンゴカードの作り方

プログラミング

ビンゴゲームとは

ビンゴゲームとは正方形、多くは5ｘ5＝25個の桝目に数字を書き込んだカードを、ゲーム参加者に配布しておき、ゲーム進行者が回すビンゴマシンの出目（でめ）に一致した箇所に穴をあけ、縦横斜めの5桝を打ち抜いたらビンゴと言って勝者になり、用意した景品を取得するゲームです。

ビンゴゲームは懇親会などのアトラクションに採用され、ゲーム機材は通販で購入することができます。4つ並んだ状態をリーチと称し5つ目を待望するワクワク感を惹起します。

ここではビンゴゲームを何回かに分けてプログラミングを解説します。調査を進めていくとビンゴゲームを作るには参加者に配るビンゴカードを如何に作るかに帰着するとの結論を得ました。

ビンゴカードの特徴

ここでは5ｘ5のビンゴカードについて語ります。当方は豊富なビンゴゲーム体験者ではありませんが、平穏で退屈な生活に刺激をもたらす射幸心などについては一通りの心得を持っているので、ウィナーが同時に複数出るようなことがないように配慮してあります。

右図の横並びは上から一行、二行、三行、四行、五行と、縦列を左からB列、I列、N列、G列、O列と呼ぶことにし、現れる5個の数字を

B列 I列 N列 G列 O列
1～15 16～30 31～45 46～60 61～75

に設定します。どの列も同じ数字は現れません。ゲーム参加者は8~15名ほどが望ましく、25桝すべての値が同じでなければ他者のカードの一部が同値であっても問題は起きません。

今回は複雑さを削除するため、たった一枚のビンゴカードを作成します。

サンプルビンゴカード

当記事を参照すれば一枚のビンゴカードが出来上がります。番号は乱数を用いて決定されるので毎回、異なります。よって、2枚目、3枚目のカードを作るにはブラウザの再読み込み（🔄）ボタンをクリックします。

BINGO ©TacM,2019 Ver0.01

 

次回の予定

次回はビンゴマシンを使って発表された番号が、配布されたビンゴカードに一致するかどうかをチェックするコードを拡張する予定です。