子供をあやす音遊びアプリ「どうぶつピアノ」を作った
ぷかぷかタッチに続いて、子供をあやすブラウザ遊びの第2弾を作った。今度は音が主役のピアノで、画面全体が6本の大きな色鍵盤になっている。触ると動物がぽよんと跳ねて音が鳴り、指でなぞるとグリッサンドになる。
画面全体を鍵盤にする
本物のピアノを模した白黒鍵盤は、子供向けには細かすぎる。このアプリでは鍵盤を6本だけにして、1本ずつを画面の縦いっぱいの色帯にした。スマホでも1鍵の幅が指3本ぶんくらいあるので、狙わなくても必ずどこかの鍵に当たる。
鍵にはカエル、ひよこ、ゾウ、魚、うさぎ、ライオンが1匹ずつ住んでいて、鳴らすとその動物が跳ねてキラキラが飛ぶ。音への反応が目でも見えるようにするためだ。
ペンタトニックだけにする
音はドレミソラ（ペンタトニックスケール）の6音に絞った。ファとシを抜いたこの音階は、どの組み合わせで同時に鳴っても濁らないという性質がある。子供はでたらめに連打するし、手のひらで複数の鍵を同時に押す。それでも耳障りにならないのは、この音階の選択によるところが大きい。
前作と同じくWeb Audio APIでその場で合成していて、音声ファイルは使っていない。今回は三角波を基音にして、ピアノの帯域に寄せた少し丸い音にした。
音階: C5 D5 E5 G5 A5 C6（ペンタトニック）波形: 三角波 + 1オクターブ上のサイン波を薄く重ねるエンベロープ: 12msで立ち上げ、1.1秒で減衰なぞるとグリッサンド
タップだけでなく、指を横に滑らせると通過した鍵が順に鳴る。ポインタイベントで指の位置を追いかけ、鍵をまたいだ瞬間にだけ発音することで、なぞる速度がそのまま音の速さになる。子供は画面をこすりがちなので、その動きがそのまま演奏になるのは相性がいい。
実装上の注意点は前作と同じで、スクロールとピンチズームを全て無効化してある。全画面タッチ系のアプリは、ブラウザの既定動作を殺す作業が実装の半分を占める。
まとめ
・画面全体を6本の大きな色鍵盤にして、狙えない子供でも必ず鳴らせるようにした ・ペンタトニックに絞ったので、連打でも同時押しでも音が濁らない ・なぞるとグリッサンド。こする動きがそのまま演奏になる ・音はWeb Audioで合成。素材ゼロ・単一HTML・外部ライブラリなし ・タップ遊びのぷかぷかタッチとあわせて、あやしの合間にどうぞ