【プログラミング】初心者が学び始めて、バスドラムメトロノーム作るまで・・・

(2022/02/26)　プログラミングを学び始めた時の記事を書きなおしました…！

JavaScriptを学ぶ！(2021/06/28)
1. 勉強に使ったサイト
バスドラムメトロノーム作る！(2021/07/04)
シン・バスドラムメトローム爆誕！(2021/07/22)
やってみて

JavaScriptを学ぶ！(2021/06/28)

昔みなさんが楽しんだであろうFlashのコンテンツのようなおもしろいWebサイトを作ることに憧れ…

勉強を決意！！（浅い！！）

Flash自体は終了しており、どうやらHTML、JavaScriptを学べば、それっぽいことが出来そうだということで、勉強をスタートさせました…！

勉強に使ったサイト

とほほのJavaScriptリファレンス

この文ってどういう時に使うんだっけ？どういうパラメーターがあるんだっけ？と思ったときに帰ってきたい辞書的なところ。

JavaScript入門＆サンプル集

「JavaScript入門」の説明めっちゃ丁寧。

もうちょっとわかるようになったら帰ってきたい。「サンプル集〔インタラクティブ編〕」は魅力的なサンプル多し！

イヌでもわかるJavaScript講座

サンプル数めっちゃ多い！手を動かしながらの勉強にもってこいの場所。

これらのサイトで「へーこういう感じかー」とだらだら打ち込んだりしながら勉強しました。

バスドラムメトロノーム作る！(2021/07/04)

一通り「こんな感じかー」となったところで、何か作ろうということで、「バスドラムメトロノーム」となるものを作り始めました…！

どういうもの？

画像の素材としては、いらすとやさんのドラムペダルのイラストと大太鼓のイラストと姿勢の良い・姿勢の悪い椅子に座る男の子のイラストの3つを組み合わせて、以下の2つの画像を作りました。(Photoshopのパペットワープめっちゃ便利…。)

ペダルを踏んでいる画像とペダルを踏んでいない画像の2つです。

この2つの画像が自分の決めたBPMでパラパラ漫画のように動くというものです。

試しに作ってみる…

バスドラムメトロノーム（仮）

(仮)というのは試しに作ってみたからという感じです。後でわかりますが、めっちゃ不安定なできとなっております…。（笑）

youtu.be

コード

イヌでもわかるJavaScript講座のStep.65 – 定期的に画像を変更する(スライドショー)を参考にさせていただきました。

以下のようなコードになっています。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>バスドラム</title>
</head>
<body>
</body>
<script type="text/javascript">
myImage=new Array(
"pedal0.png",
"pedal1.png",
"pedal1.png",
"pedal1.png"
);
myNowCnt=0;
myInterval=0;
function mySet(){
	var myTemp=eval(document.myForm.myFormTemp.value);
	var myInterval=eval(250*(60/Number("myTemp")));
	return myInterval;
}
	
	
function myChange(){
	if(myNowCnt==myImage.length-1){
		myNowCnt=0;
	}else{
		myNowCnt++;
	}
	document.sshow.src=myImage[myNowCnt];
	
	setTimeout("myChange()","mySet()");
}
	
function myStart(){
	mySet();
	myChange();
}
</script>
<form name="myForm">
テンポを入力してください BPM=
<input type="text" size="2" name="myFormTemp">
<input type="button" value="ＯＫ" onclick="myStart()">
</form>
<img src="pedal0.png", width="500" height="500" name="sshow">
</html>

setTimeout関数（メソッド）を再帰的に呼び出して、一定の周期で画像が切り替わります。

周期はフォームから自分で入力できるようになっています。BPMなので、１分間に何回バスドラムを叩かくか決められます。

テンポを決めて、フォームのOKボタンを押すと、アニメーションが動き始めます。

テンポを決める関数（myTemp）とパラパラ漫画が動かす関数（myChange）がOKボタンを押すと、myTemp→myChangeの順で開始されるという感じです。

ただ動画でもわかるように、テンポを決めるフォームに何も打ち込まなくても動いてしまったり、何回も押したら、トリッキーなリズムを刻むようになったり…（苦笑）

そして月日は経ち・・・

シン・バスドラムメトローム爆誕！(2021/07/22)

いろいろと改良を加え、この度「シン・バスドラムメトローム」（庵野秀明監督風）が完成しました！

しっかり動作します！なんと音も出ます！

シンバスドラム

コード

コードは次のようになっています。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>バスドラム</title>
</head>
<body>
<script type="text/javascript">
myImage=new Array(
"pedal0.png",
"pedal1.png",
"pedal1.png",
"pedal1.png"
);
var id=0;
var myTemp=0
var myInterval=0;
function mySet(){
	myNowCnt=0;
	myInterval=0;
	myTemp=document.getElementById("myFormTemp").value;
	myInterval=eval(250*(60/Number(myTemp)));
}
	
function mySound(){
	document.getElementById("sound-file").currentTime=0;
	document.getElementById("sound-file").play()
}	
	
function myChange(){
	if(myNowCnt==myImage.length-1){
		myNowCnt=0;
		mySound();
	}else{
		myNowCnt++;
	}
	document.sshow.src=myImage[myNowCnt];
}
	
	
function myStart(){
	clearInterval(id);
	mySet();
	if(myTemp==0 || isNaN(myTemp)){
	document.getElementById( "caution" ).innerHTML="0以外の数字を入力してください";
	}
	else{
		document.getElementById( "caution" ).innerHTML=""
		id=setInterval("myChange()",myInterval);
	}
}
	
</script>
<form name="myForm">
テンポを入力してください BPM=
<input type="text" size="2" id="myFormTemp">
<input type="button" value="ＯＫ" onclick="myStart()">
</form>
<div id="caution"></div>
<img src="pedal0.png", width="500", height="500", name="sshow">
<audio id="sound-file" preload="auto">
<source src="和太鼓でドン.mp3" type="audio/mp3">
</audio>
</body>
</html>