お久しぶりです。インターンから正社員にジョブチェンジした新卒の堀口です。

ちまたではHTML5が騒がれていますね。
大抵Flashと比較されるのでFlash vs HTML5 みたいな構図が出来上がりつつあるの??
みんなFlash嫌いなの?
って気持ちになってきますが、そもそもぼくはFlash vs HTML5というのに疑問を感じます。
お互のいい所を引き出せるクリエイターになりたいです!

いい機会なので、HTML5も覚えちゃいたいですね。
ともかくまずはHTML5に触ってみないと何も始まらないので、先週末に少し遊んでみました。

以前プログラマーの先輩に見せていただいたブラウザ上へのファイルのドラッグアンドドロップが衝撃的だったので、
ぜひこれをやりたいの、僕は。
*調べたらブラウザ上へのファイルのドラッグアンドドロップはFirefox3.6の対応のみでした。

ということでこんなデモを見つけました。

Drag'n Drop & Firefox 3.6
http://demos.hacks.mozilla.org/openweb/DnD/

すごいですね!何でもぽんぽん入りますね。

どうなってるのかしらべると、画像をドラッグしてみるとimgタグのsrc要素に
data:image/jpeg;Base64,(base64String)
が入る事がわかりました。
この形式はdataスキームURIって言うらしいです。


なるほど、ドラッグされた画像はBase64エンコーディングされたただのテキストになるってことですね。

ということは、簡単にFlashに渡せそうですね!
画像がブラウザに読み込まれたタイミングでBase64エンコーディングされた画像をExtarnalInterfaceを利用して
Flashに渡します。
Flash側でBase64をByteArrayにエンコーディングして、LoaderクラスのloadBytes()メソッドの引数として渡せば
Flash上で画像が表示されます。

これができたら何がすごいって、Flashだけではできない(AIRは別)Flash上へのファイルのドラッグ&ドロップが擬似的にですが実現できるってことです。

以下にデモを作ってみました。
画面中央に表示されるswfにローカル上の画像ファイル(jpeg/png/gif)をドラッグ&ドロップしてみてください。複数ファイルだっていけちゃいます。
!Firefox3.6以上でないと動きません。

Flash + HTML5 Drag and Drop demo.
http://www.ledmosquito.net/html5flash/demo1/



swfを表示しているObjectタグへのドラッグ&ドロップのイベントをjsでハンドリングすることで、Flash上にあたかもドラッグ&ドロップできるかのように見せてます。
また、js->Flashへの画像の受け渡しができるなら、その逆も可能ですね。
Flashで作ったキャプチャをdataスキームURIとして
jsに渡して、それをcanvasに書き出してます。
ちゃっかりcanvasも使っちゃいました。

canvasのはまった所は、CSSでwidthなどを指定するとdrawImageしたときなどスケールがおかしくなりました。canvasタグのwidth要素などで直接サイズを指定した方がいいです。
jsで動的にcanvasのサイズをいじるときも、こちらのプロパティを変更します。
 


なかなか面白いですね。

HTML5飯