メイキング「Birthday Song for ミク | miku-39.jp」こと技術解説 - 甘味志向＠はてな

「初音ミク」というキャラクターが登場して5年。彼女の存在は世界中へと広がり、数の多くの人を魅了してきました。 その驚きと感動を盛大に祝ってあげるためのパーティの準備、そんな気持ちでこのミュージックビデオを制作いたしました。 http://miku-39.jp 初音ミク生誕5周年おめでとう！ ということで「Birthday Song for ミク | miku-39.jp」というサイトを作りました。 せっかくなのでメイキングっぽい技術解説を書いてみたいと思います。 とりあえず miku-39.jp とはなんぞやってことなんですが、 Mitchie M ([twitter:@Tukada])さんが作った「Birthday song for ミク」という曲にあわせて Tatsuro Ogata ([twitter:@llcheesell])さんが作ったミュージックビデオにインタラクティブな感じの

[goinger]

omoroiha

[tiadeen2]

Socket.IOがナイスガイすぎて惚れる！スマホ→PC連携はあとでサイトに行ってみてみよう。

[efcl]

HTML5のVideoタグは非常に残念ながらアルファ（透過情報）の動画が再生できない

[syuu1228]

メイキング「Birthday Song for ミク | miku-39.jp」こと技術解説 - 甘味志向＠はてな (id:Molokheiya / @Molokheiya)

[mainyaa]

すげぇ ＞ RGBとアルファを上下に分割した動画を用意してVideoタグのRGBとアルファのピクセルを読み込み、canvas上でアルファ情報を合成して書き出す。

[hiro_y]

Socket.IO使ってる

[serihiro]

node.jsでPC/スマフォ連携とかtwitter連携とか色々やってたのか。あとでもっかい見てみる

[wasai]

見ておきます～♪

[ejiwarp]

いろいろ最高です。

[NAT]

なにげに凄いことやってるなあ。Flashは使わずJavaScript+CSSのみ。スマホとPCのリアルタイム通信はSocket.IOを利用。動画と画像の合成はvideoのピクセルをcanvas上で合成。