年賀状メーカー『トリックネンガ』つくりました

あけおめです。YoshihideShimazawaパイセンとYuichiroOkuと自主制作でこんなものをつくりました。

クリスマスにプロジェクト発足、12/28に企画がFIXしたので、都合3日でタイトル策定〜実装まで3人で駆け抜けました。

デザインパーツ60点、音ネタ43点、「良い感じのタイトル考えて〜」という雑なフリ、そして実装。

ということで、今年の年越しも作業しながら紅白を見る感じになりました。年末年始休みとは。

さて今回の実装のポイントはWebAudioAPIを使って、音を多重再生しているところです。

ちょっとネタバレ的な感じになるのですが、音楽は頭の5桁に対応して、5つのパートが同時に流れることでひとつの曲が形成されるようになっています。

ブラウザでの音の再生は、HTML5でaudioタグを使えるようになったことで大分実装が楽になりましたが、再生タイミングがガバガバだとか、複数同時再生できないとか、がっつり音ネタを組もうとするとわりと無理ゲーでした。

ということで今回はWebAudioApiに手を出してみました。

なんちゃってフロントエンジニアの僕にとっては大分深淵な世界だったので、今回は僕が使ったのは複数音源の同時再生と、ビートに合わせたアニメーションくらいでしたが、前者はあっさり実装できてびっくり。後者もWebAudioApiは通常のJSと比べて時間の扱いの精度や使い勝手が良く、ちゃんと使えれば大分音周りは自由度が高くなるなと思いました（ちゃんと使えたとは言ってない。

堀り甲斐がありそうな技術です。書籍とか出てるのかな？読みたい。

最後になっちゃいましたが、「なんかつくろーよ！」と誘ってくれたYoshihideShimazawaパイセンと「とりあえずジョインして」というノリにのってくれたYuichiroOkuに最大の感謝を。素晴らしいクリエイターと仕事と趣味の間みたいな感じで遊べる環境は、ほんとに有難いでことです。

このあたりのやりとりがスピード感あってよいですな。

高校生の時から毎年やっている恒例の年賀自主制作がこういう風にスケールしていくのは楽しいですね。

ところでアップにした有村架純は、顔がまるっこくなる感じが逆に可愛いですね。

今年もよろしくお願いいたします。

今回参考にしたやつ。