プログラミングをはじめたけど何をつくったらいいか分からない人向け 木魚サービスを作る
プログラミングを始めた人にありがちな悩みとして、何を作ったらいいか分からないということがあると思います。
そこで今回はそんな人のために、課題を書きます。
サービス名は木魚サービス
木魚を鳴らすことができるサービスです。仕様は以下です。
- スペースキーを押すと木魚の音が鳴る
- スペースキーを連打すると、連打した分だけ音が鳴る
実装
実装はHTMLとJavaScriptで作ります。
大まかな流れは以下です。
- htmlを用意する
- 木魚の音源を入手する
- <audio>タグを書く
- イベントを取得する
- スペースキーを押した時のイベントが来たら、音源を鳴らす処理を書く
htmlを用意する
まずはhtmlを用意します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mokugyo</title>
</head>
<body>
</body>
</html>ブラウザで表示しても何も表示されませんが問題ありません。
木魚の音源を取得する
私はクラゲ工房さんから木魚の音源をダウンロードしました。
ダウンロードした音源は、htmlと同じ階層にseというフォルダを作成してその中に配置しました。
.
├── se
│ └── wood-block01.mp3
└── index.html
audioタグを書く
次にhtmlにaudioタグを書きます。audioタグは音を紐づけるためのタグです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mokugyo</title>
</head>
<body>
<audio id="oto" src="./se/wood-block01.mp3" />
</body>
</html>idはotoにし、srcに先ほど配置した音源ファイルのパスを書きます。
スペースを押した時のイベントを取得する
次にhtmlに以下のようにjavascriptを書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mokugyo</title>
</head>
<body>
<audio id="oto" src="./se/wood-block01.mp3" />
<script>
document.addEventListener('keydown', e => {
console.log('hogehoge')
})
</script>
</body>
</html>document.addEventListener でイベントをリッスンします。
ブラウザでキーを押したりクリックしたりすると、イベントというものが飛びます。
document.addEventListener はそのイベントを監視し、イベントをキャッチしたら特定の処理を実行することができます。
今回の場合、イベントはキーが押されるで、そのときに行いたい処理が木魚の音源を鳴らすです。
上記のコードのように書くと、keydownというイベントが発生したときに、コンソールにhogehogeを出す、という処理になります。
コンソールはブラウザを開いた状態でF12キーを押すと開くことができます。これは今後かなりお世話になるので覚えておきましょう。
試しにスペースキーを押すと、コンソールに以下のようなメッセージがでればOKです。
イベントの中身をみてみる
先ほどのコードのhogehogeの部分をeに変えてみましょう。
document.addEventListener('keydown', e => {
console.log(e)
})同じように、スペースキーを押すと今度は以下のようなメッセージがでます。(htmlを更新したら必ずブラウザで更新して最新の状態にしてください)
これはイベントを表します。イベントの実態と考えて問題ありません。
KeyboardEventのあたりをクリックすると、イベントの情報が展開されます。
code: “Space" や key: " " というあたりから、どのキーが押されたかの情報も載っていることがわかります。
試しに他のキーを押すと、押したキーの名前になっていると思います。これでどのキーが押されたかは把握できそうです。
以下のように変更します。
document.addEventListener('keydown', e => {
console.log(e.code)
})スペースキーを押すとSpace、Aキーを押すとKeyAとコンソールに表示されます。
スペースキーを押した時のイベントが来たら、音源を鳴らす処理を書く
次にスペースキーを押した時に、音源を鳴らすようにします。
いきなり音源を鳴らそうとするのではなく段階的に実装します。
これは非常に重要な考え方です。
一度にすべてを作ろうとするのではなく、小さな処理に分けて一つずつ作っていき、最後に合体させる、ということが重要です。
こうすることで、どこでエラーになったのか、どこで問題が起きているのかが分かりやすくなります。
一気に全部の実装をしていざ実行したら動かなかった、となると原因を突き止めるのは大変です。
どのようなシステムも小さな処理を組み合わせて作られているので、それを意識すると良いです。
audio要素を取得する
まず、audio要素を取得するところからはじめます。
以下のように<script>タグの後にコードを追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mokugyo</title>
</head>
<body>
<audio id="oto" src="./se/wood-block01.mp3" />
<script>
const se = document.querySelector('#oto') //追加
console.log(se) //追加
document.addEventListener('keydown', e => {
console.log(e.code)
})
</script>
</body>
</html>document.querySelector('#oto’) で、idがotoの要素を取得する、という意味です。その後に、console.logで取得した要素をコンソールに表示するようにしているので、ブラウザを更新してコンソールをみてみましょう。
要素が取れているのが分かります。
さきほども使いましたが、console.logは変数の中身をみることができるので、非常に役に立ちます。
何かうまくいかないことがあれば、その処理で使われている変数の中身をconsole.logでみてみましょう。nullになっていたり、想定しないオブジェクトが取れているかもしれません。
スペースキーが押されたときだけ特定の処理をするようにする
次に先ほどのイベントリスナーの中を変更します。
先ほどは、どのキーが押されてもコンソールに表示されましたが、スペースキーが押されたときだけコンソールに表示するようにします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mokugyo</title>
</head>
<body>
<audio id="oto" src="./se/wood-block01.mp3" />
<script>
const se = document.querySelector('#oto')
console.log(se)
document.addEventListener('keydown', e => {
if(e.code === 'Space') {
console.log('ok')
}
})
</script>
</body>
</html>スペースキーを押した時は’ok’、それ以外のキーを押した時は何も表示されなければOKです。
音源をならす
ようやく最後です。
console.log('ok’)の部分を、音源を鳴らす処理に変えればOKです。以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mokugyo</title>
</head>
<body>
<audio id="oto" src="./se/wood-block01.mp3" />
<script>
const se = document.querySelector('#oto')
console.log(se)
document.addEventListener('keydown', e => {
if(e.code === 'Space') {
se.play()
}
})
</script>
</body>
</html>seは先ほど取得したaudio要素です。audio要素のplay()を実行すると音がでます。スペースを押してみると音がでるはずです。
しかし、このままでは連続で押しても一度しか鳴りません。そこで currentTime = 0を前に追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mokugyo</title>
</head>
<body>
<audio id="oto" src="./se/wood-block01.mp3" />
<script>
const se = document.querySelector('#oto')
console.log(se)
document.addEventListener('keydown', e => {
if(e.code === 'Space') {
se.currentTime = 0
se.play()
}
})
</script>
</body>
</html>currentTime = 0とはその音源の再生時間を0にするということです。
つまり、スペースが押されるたびに音源を初めから鳴らし直すイメージです。
最後に、余計なconsole.logを消しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>mokugyo</title>
</head>
<body>
<audio id="oto" src="./se/wood-block01.mp3" />
<script>
const se = document.querySelector('#oto')
document.addEventListener('keydown', e => {
if(e.code === 'Space') {
se.currentTime = 0
se.play()
}
})
</script>
</body>
</html>以上で木魚サービスの完成です！お疲れ様でした。
このように、小さな単位に分けて考えて、それらを一つ一つ実装していけば、混乱せずに一つのシステムをつくることができます。
これができたら、他の音源も追加する、キーを押したときにブラウザに何かを表示する、などもチャレンジしてみると良いでしょう。