景品表示のWebページを作ってみた

これはAdventure Advent Calendar 2018の11日目の記事です。（後追い）

ひと月で４本も記事を書くとか、本当に褒めて欲しい。

さて、1日の記事でも触れましたが、私はインフラエンジニアです。

インフラといえば、ユーザーから見ると一番裏側の役割の為、たまには目に見える物をやって見たいと思い、先人のお力を借りてビンゴの景品を抽選するWeb画面を作ってみました。

正確に言うと、
https://github.com/sifue/partybingo
のソースコードをカスタマイズした　です。

会社の忘年会の司会を任命されたので作りましたが、日の目を見る事が無くなってしまったのでQiitaで公開します。
javascriptを触るのは人生で２回目でしたが、インフラと違って結果が目に見えて分かるので、凄く楽しいですね！！

（フロントエンジニアの方はこの記事は役に立たないので、そっとお戻りください）

完成版

gifなのでアレですが、
startボタンを押すとドラムロールが鳴り、
stopボタンを押すとジャーンとシンバルが鳴ります。

何処をカスタマイズするか？

元ソースは、ビンゴの整数を表示する目的の為、カスタマイズする箇所を以下の3つにします。

• 整数表示から画像表示にして、最大値を絞る
• 画像のサイズを調整する
• stopボタンと押した時にシンバルを鳴らす

フォルダ構成

展開する

.
├── README.md
├── asset
│   ├── bootstrap-3.3.5-dist
│   │   ├── css
│   │   │   ├── bootstrap-theme.css
│   │   │   ├── bootstrap-theme.css.map
│   │   │   ├── bootstrap-theme.min.css
│   │   │   ├── bootstrap.css
│   │   │   ├── bootstrap.css.map
│   │   │   └── bootstrap.min.css
│   │   ├── fonts
│   │   │   ├── glyphicons-halflings-regular.eot
│   │   │   ├── glyphicons-halflings-regular.svg
│   │   │   ├── glyphicons-halflings-regular.ttf
│   │   │   ├── glyphicons-halflings-regular.woff
│   │   │   └── glyphicons-halflings-regular.woff2
│   │   └── js
│   │       ├── bootstrap.js
│   │       ├── bootstrap.min.js
│   │       └── npm.js
│   ├── drumroll_sound_niconicomons.url
│   ├── jquery-1.11.3.min.js
│   ├── nc79078.mp3
│   ├── partybingo.css
│   ├── partybingo.js
│   ├── roll-finish1.mp3　　// シンバルのジャーン！！って音
│   └── screenshot.png
├── img // 新規作成。ここに1.jpeg などの景品画像を置いていきます。
│   ├── 1.jpeg
│   ├── 10.jpeg
│   ├── 2.jpeg
│   ├── 3.jpeg
│   ├── 4.jpeg
│   ├── 5.jpeg
│   ├── 6.jpeg
│   ├── 7.jpeg
│   ├── 8.jpeg
│   ├── 9.jpeg
│   └── undefined.jpeg
└── index.html

index.html

展開する

index.html

// ページを読み込んだ時に表示されている画像です。
// 00で固定されているので、undefined.jpegに差し替えます
//     <span id="pingo-number">00</span></p>
     <span id="pingo-number"><img src=img/undefined.jpeg class="keihin"></span></p>

---
// 音を読み込みます
// へー、最初にhtmlで読ませるんだ

    <audio id="drum" preload="auto">
	<source src="./asset/nc79078.mp3" type="audio/mp3">
    </audio>

// シンバルの音を追加します
// 音は https://soundeffect-lab.info/sound/anime/ から拝借しました

    <audio id="finish" preload="auto">
	<source src="./asset/roll-finish1.mp3" type="audio/mp3">
    </audio>
script src="asset/partybingo.js "></script>

asset/partybingo.js

展開する

asset/partybingo.js

(function(){
	var pingoNumber = $('#pingo-number');
	var startButton = $('#start-button');
	var resetButton = $('#reset-button');
	var historiesDiv = $('#histories');
	var drumAudio = $('#drum').get(0);
        // シンバル音の変数を定義
	var finishAudio = $('#finish').get(0);

---
	// init number list and storage
	var numberListAll = [];
        // 景品の最大個数を指定
	var maxNumber = 10
	for(var num = 1; num <= maxNumber; num++) {
		numberListAll.push(num);
	}
---	
	// startボタン押した後の画像ループ
	var isStarted = false;
	function rourletto() {
		if(isStarted) {
			var n = getNumberRamdom();

                        // n　の中に整数がランダムで入ってくるので
                        // id="pingo-number"の内容を画像に置き換える
                        // 元ソース見てもbingo-numberじゃなくpingo-numberだった
                        // class="keihin"は、CSSでサイズを指定する為

			document.getElementById('pingo-number').innerHTML 
			= '<img src=img/'
			+n
			+'.jpeg class="keihin">';
			setTimeout(rourletto, 3);
		}
	} 
---
        // stopボタンを押した時の動作
	var stop = function(time) {
		isStarted = false;
		startButton.text('Start');
		var n = removeNumberRamdom();
		//pingoNumber.text(toBingoString(n));
		document.getElementById('pingo-number').innerHTML 
		  = '<img src=img/'
		  +n
		  +'.jpeg class="keihin">';
		setTimeout(rourletto, 3);
		addHistory(n);

                // シンバル音の開始位置を最初にする
		finishAudio.currentTime = 0;
		drumAudio.pause();

                // ジャーン！！
		finishAudio.play();
	};

---
        // startボタンを押した時の動作
	var start = function(){
		isStarted = true;
		startButton.text('Stop');
		drumAudio.currentTime = 0;

                // ジャーン！！　を止める
		finishAudio.pause(); 

		drumAudio.play();
		rourletto();
	};
	var startClicked = function(e){
		if(isStarted) {
			stop(null);
		} else {
			start();
		}
	};
	startButton.click(startClicked); // button
	startButton.focus();
	
	// リセットボタンを押した時の動作
	var resetClicked = function() {
		if (confirm('Do you really want to reset?')) {
			resetLists();

                        // 最初に戻るので、画像をundefined.jpegを表示させる
			document.getElementById('pingo-number').innerHTML 
			= '<img src=img/undefined.jpeg class="keihin">';

			historiesDiv.empty();
			drumAudio.pause();

                        // ジャーン！！を止める
			finishAudio.pause();
			startButton.focus();
		}
	};
	resetButton.click(resetClicked);

asset/partybingo.css

展開する

末尾に、画像サイズを指定するCSSを追記します

asset/partybingo.css

img.keihin{
  width: 800px;
  height: 600px;
}