VOYAGE GROUP　エンジニアブログ : ガジェット

こんにちは。 ECナビの子会社adingoでエンジニアをしています tatenosystem です。
圧倒的ダメエンジニアなので、本ブログでは「ダメなネタ担当」になると思います。

私は、先月アメリカ出張に行ったタイミングで iPad を買ってきました。
そこでいち早く社内で iPad で遊んでいると、システムの偉い人から「iPadをネタに何かブログ書いて」という　ムチャぶり御神託がありました。

いい機会なので、HTML5 の canvas を使って iPad向けのページを作ってみようと思います。
私は「HTML5非対応ブラウザ」が横行しているこの世の中、HTML5 を避けていたのですが
iPad 専用ページということであれば、HTML5 が必ず使えるので安心です。

HTML5 canvas と iPad のタッチパネルを使った素敵なネタは……

妄撮！！！

グラビア界に革命を起こした「妄撮」を iPad に移植しましょう。
いや～、我ながら「発想がダメ」ですね。。。
いつか他の優秀なエンジニアさんに怒られる日がくると思います。

早速 JavaScript を書いていきます。
実をいうと似たようなプログラムを大昔 Java Applet で書いたことがあるので、それを移植すればOKです。

iPad のJSタッチイベントは iPhone とまったく同じです。
タッチしながら指を動かすと"touchmove"イベントが発生します。
ですので、以下のようにイベントリスナーに登録します。

document.addEventListener("touchmove", clearBlock, false);

iPad 以外の HTML5 対応ブラウザでも利用できるように、通常のマウスイベントも登録しておきます。

window.onmousemove = clearBlock;
window.onmousedown = function(){ moveFlag = 1; }
window.onmouseup = function(){ moveFlag = 0; }

あとは、自作の clearBlock 関数内でタッチした部分の一部画像を違う画像に置き換えてあげればOKです。

では、早速動かしてみましょう。
大昔描いたイラストとか使いたかったのですが、どう考えても会社のブログでは NG なので（＾＾；）
我が家のソファに居座っている「物体」に被写体になってもらいました。

で、さっそくタッチして画像を切り取ってみます。

おお！ちゃんと「妄撮」できた！

いかん、面白い！！！

ちなみに、動画だとこんな感じです。

有名な絵師がコレやって公開してくれると、一気に iPad が（間違った）普及するかもしれませんねｗ

サンプルURL は以下です。
iPad 及び HTML5対応のブラウザをお持ちの方は是非遊んでみてください。

http://tatenosystem.com/ipad/canvas/

なかなか面白かったので、暇を見つけて今後拡張していきます。
今回は15分位でプログラムを書いたのでかなり適当です。
（むしろ「ぬいぐるみ」の撮影の方が時間がかかってしまいました）

次回はもう少し真面目なネタに挑戦します。