[jQuery]$(document).readyと$(window).loadの違い[自分メモ]

今までずっとjqueryの実行タイミングをデフォで$(document).readyで書いてました。
今更こんな事書いたら、いろんなお客さんから怒られそうですが、今まで作ってきたjsアニメーションの実行のタイミングは何かをクリックしたら動かすといったような、必ずトリガーが何かしらあるものでした。

で、ちょうど今ページ読み込みと同時に動くアニメーション作っているのですが、PC環境だと問題なくてもスマホで問題があるんすよ。
wifiならまだしも、3G環境でただでさえ読み込みに時間がかかる状態で実行のタイミングが$(document).readyだと、スマホでデータの読み込みが終わった時点でアニメーションが終了しているという本末転倒な事態になる事が判明。

$(document).readyってなんぞ

DOMが読み込まれた時点で実行します。
htmlの構造が読まれた時って事だもんで、画像ファイルの読み込みを待たずにスクリプトの処理を開始します。

じゃあ$(window).loadってなにさ

DOM内に含まれる全ての要素の読み込みが完了した時点で実行します。
なので、今回の懸念である「3G回線」で画像の読み込み待ってる間にアニメーション終わっとるがな、という事態を解消するにはうってつけだったわけで。

ただ、調べている間に見つけたサイトには$(document).readyの方が良い的な事書いてあったので、$(window).loadはあまり推奨はされていないみたいですね。
うーん、もうちょっと勉強が必要だなぁ。

今気づいたけどもう2ヶ月もconcrete5に関する記事書いてないや…。

次世代インターフェース LEAP MOTIONが届いたよ!そして使ってみた


1年と2ヶ月前から待ちました。
もう、今年に入ってからは存在自体忘れていま…いえ、そんなことないです。
ずっと待ってたんです。

えぇと、お値段は…いくらだっけな…。
確か80ドルくらいでした。
[追記]
ごめんなさい、今調べたら日本円で8200円+配送料1800円+消費税で10500円でした。

で、発送元は花のサンフランシスコ…じゃなくてシンガポールでした。生産がシンガポールなのかな。
「発送したでー」メールが届いてから、わずか8時間でヤマトのにーちゃんが持ってきました。
Fedexのトラッキングしたら、3日前くらいに発送してたので、単にメール来るのが遅れただけっぽいですね。

そしてついに、LEAP MOTIONが私の手元に!!イヤッホーーーゥ!!

はい箱ドーン

箱の質感がなんか安っぽいと感じるのは、普段アップル製品ばっかり買ってアノ箱に慣れてしまったからだと思いたい。

そもそもLEAP MOTIONってなによ?

という方は、まず下記の動画をご覧ください。

手をかざして、PCを操作するインターフェース

今までのPCのインターフェースって、マウスだったりキーボードだったりして物理的なものを押すなり動かすなりして、PCの操作を行ってきましたが、LEAP MOTIONはモーションセンサーで手の動きを読み取り、それをPCに反映します。
僕は良く知らないけど、似たようなインターフェースはマイクロソフトのキネクトとかがそうらしいですよ。

Welcome to a whole new world.

大きさは100円ライターを2つ重ねたくらいの厚みで、デザインはアルミと黒の組み合わせなので、非常にMacに合いますね!

さっそくつなげてみよう!

USBでつなぐだけ!早い!簡単!!
ってわけにもいかず、前項の写真に記載されているように、https://leapmotion.com/setupへアクセスして、専用のソフトのダウンロード・インストールが必要です。

Airspace


Airspaceアプリ画面

LEAP MOTION専用のアプリケーションを提供するプラットフォーム「Airspace store」が2013/07/23にオープンしました。
現状アプリのAirspaceをクリックするとブラウザ開いて普通のウェブサイトが表示されるんだけど、これそのうちAirspaceに統合されるのかな。iTunes storeみたいに。

Airspace storeでは、やっぱりiTunes storeみたいに、LEAP MOTION専用のアプリを購入する事ができます。
ただ、iTunes storeと違って、まだ始まったばかりのサービスなので、アプリの数は非常に少ないです。まだ100個くらいしかありません。

とりあえず動かしてみた

デフォルトで「Visualizer」という機能が付いているので、それを動かしてみました。

こんな感じで、手の動きをキャプチャして画面の操作に反映します。
例えば、「Touchless」というアプリを使用して、従来であれば、マウスで行っているカーソルの動きを、LEAP MOTIONの操作で行う事も可能になります。
ただ、奥行きや高さの情報も含まれる為、カーソル操作をLEAPで置き換えて使用するのは、今まで平面の画面に対してマウスを使用して平面の操作を行っていたものを、3次元的に操作する必要性は全く感じません()
例えば、カーソルを画面右上に持って行きたいときに、腕を右上に持ち上げないとカーソルは右上に行かず、また、クリック操作は指を前に出す操作になるので、前に出した瞬間に上下左右の位置がずれてしまう。

ごめんね。絵が描ければ図解できるんだけど…。

結論

つまり、どういう事が言いたいんだってばよってところで、個人的には、LEAP MOTIONを最大限に活用するには今までにない新しいOSが必要なんじゃないかなーって思います。
PC用のOSでも、タッチデバイスOSでもない、3Dを基本概念として設計された全く別のOS。
LEAP MOTIONがあれば、掴む動作や、はじく動作、あおぐ動作なんかも実装できるわけです。
テレビなんかもね、あんなたくさんのボタンをつけたリモコンを作るんじゃなくて、こういうインターフェースで手を叩いたら電源つけるとか、右に手を振ったらチャンネル切替とか、いろいろできるんじゃないかなって思って、夢がどんどん広がっていくわけですよ。