VOYAGE GROUP エンジニアブログ

voyagegroup_techのブログ
VOYAGE GROUPエンジニアブログです。

iPad

iPad で「妄撮」をやってみました。

こんにちは。 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 なので(^^;)
我が家のソファに居座っている「物体」に被写体になってもらいました。

01


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

02


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

いかん、面白い!!!


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



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

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

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

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

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

「iPad (Wi-Fi) + Pocket WiFi + Apple Wireless Keyboard + ISSH」でWebアプリケーション開発環境を実現する。

こんにちは。 ECナビに新しく創設されました株 式会社genesixで プログラマをしています上杉 (@unlearned)です。

日本でもiPadの発売日が決定!! 早速、私もiPad(Wi-Fi)を予約注文しました。 やがて訪れる便利な生活を妄想して、うずうずしているところです。

ところで、先日アメリカ出張から帰ってきた同僚が、iPad を手に入れてきました。ECナビには、既に7台iPadがあります。

プログラマーであればいつでもどこでもアプリ開発をしていたいですよね。 わかります。

そこで表題にある 「iPad (Wi-Fi) + Pocket WiFi + Appleワイヤレスキーボード + iSSH」 を用いたWebアプリケーション開発環境をご提案いたします。

ちなみにiPad (3GS)購入の方はPocket WiFiは必要ないです。

まずはiPadと Apple Wireless Keyboard(US)をBluetooth経由で接続します。

1. Wireless Keyboardの電源を入れてください。

2. iPadの [設定] [一般] から [Bluetooth] を選択

3. Bluetoothを ”オン” にする

4. デバイスに ”Apple Wireless Keyboard” と表示される

5. 表示された ”Apple Wireless Keyboard” をクリックしてしばらく待つ

6. "Apple Wireless Keyboardでパスキー○○××を入力し、retunまたはenterキーを押してください" (○○○×××は6桁の数字)と表示されますので、そのようにします。

7. ”接続済み” の表示が出る

接続が完了すると、テキストの入力時にソフトフェアキーボードが表示されなくなります。

さて、これでキーボードの接続は完了。

次に必要なのはサーバ接続環境。 ここではiPad版のiSSHを利用します。 お値段は$10と、ちょっと値は張りますが躊躇無く購入します。

では立ち上げてみましょう。

ジャーン!!
写真1

これでバリバリ開発するぜー!!

しかし、iSSHではキーボードからのalt、Ctrl、Esc、tabが効かない!!!

orz . . . .

他のアプリではちゃんとalt、Ctrl、Esc、tabは使えます。 iSSH の作者の方、ご対応よろしくお願いします。

ちなみにこのシステムの優位性は重量の軽さ。

MacBook Air 1360kg (Appleの仕様(*1)より)

・Apple Wireless Keyboard(US) + 単三乾電池x2 0.324kg(実測値)
・iPad(Wi-Fiモデル) 0.680kg(Appleの仕様(*2)より)
合計1.004kg

「MacBook Air」と比較して 「iPad(Wi-Fiモデル) + Apple Wireless Keybord(US)」のほうが300[g]程度軽い!!
写真2

ECナビでは「スマートフォン研究会」という社内サークルもあり、 有志でブログを立ち上げています。そちらもよろしく。

スマホ研究会
http://blog.smaho.jp/

(*1) http://www.apple.com/jp/macbookair/specs.html
(*2) http://www.apple.com/jp/ipad/specs/

記事検索
QRコード
QRコード