皆様、明けましておめでとうございます。
制作部の近藤です。

さて、皆様年始はいかがお過ごしだったでしょうか？

わたくしは、年末子供たちと初日の出を見に行こうと思っていたのですが、
残念ながら見逃してしまいました。

見たいものが見れなかったのは、ほんと残念な気分になりますね・・・

うちは子供ちっちゃいので、動画いっぱい撮って見てるんですが、
よそ見してて、一瞬の、「見たかったあの寝起きのボケボケ顔」を見逃してしまった時なんかも、
それなりに残念な気分になります。

あんまりに面白い顔した瞬間とか、仲間にすごく見せたいんだけど・・
うまい手は無いか、ちょっと考えてみました。

HTML5 のCanvasタグとVideoタグ

Canvasタグ：スクリプトでビットマップ画像を描くための要素です。
Video：ウェブページで動画を再生するための要素です。

これらは、Javascriptを使って以下の処理ができます。

・canvasに、videoタグの、「今」を描画
drawImage() メソッドを使って、canvas内にimg, canvas, videoを描画できます。
参考：http://www.html5.jp/canvas/ref/method/drawImage.html

・canvasに描画された内容を、画像として出力
toDataURL() メソッドを使って、画像の内容を、data: URLとして取得できます。
参考：http://www.html5.jp/canvas/ref/HTMLCanvasElement/toDataURL.html

ということで、こんなものを作ってみました。

作ってみたもの

※すいませんが、PC版のchrome・safariのみで動きます。

・「キャプチャー」をクリック
・キャプチャー画像を生成

キャプチャー

ちょっとした技術かもしれませんが、
・動画の「笑いどころ」をキャプチャーしまくってシェアしたり
・決定的瞬間がキャプチャーできるか？みたいなゲーム作ったり
と、色々転用できそうな技術ですね。

初日の出の話題からはそれてしまいましたが、
ぜひ今年も色々と面白いものみつけて、試して行きたいと思います。

それではみなさま、今年もアライドアーキテクツをよろしくお願いいたします！