TOMAS Reimersの：クール。 だからこんにちは、皆。 私の名前のトーマス。 私はTFだと、これはある ARMAGHAN BEHLUM：ARMI。 君たちを見てニース。 TOMAS Reimersの：クール。 だから我々は話をすることになるだろう 今日リープモーションについて。 だから、リープモーションです 本当にクールな製品という あなたがやり取りすることができます 別の方法でコンピュータ。 背後にあるので、全体的なアイデア うるう運動はあなたということです にあなたの手を使用することができます コンピュータと対話。 だから、右ここで私は何かがセットアップされている。 私は少しでそれについて話します。 しかし、基本的なバージョンは、次のことができている 私は前に私の手を持っていることを参照してください。 私はそれらを移動すると、私のコンピュータの、 あなたがコンピュータ上でアナログを得る そしてあなたはこれを分析することができます。 あなたは、ジェスチャーを作ることができます。 あなたがにあなたの手を使用することができます コンピュータと対話 新しく興味深い方法で。 まあ、私実際に最初に ARMIにオフ渡したい あなたに何のいくつかのクールなデモを表示する 一部の人はこれで行っている。 そして、我々はどのようにについて話します あなたが実際にこれをコーディングします。 ARMAGHAN BEHLUM：うん。 こんにちは。 我々が見たように、少し ここでのデータは、しかし、見てみましょう 何人かの人々はこれで行っている。 だから私はちょうどこの例を開いてみましょう。 そして、そう、例えば、あなたが見ることができます 今、私の手があるアナログが、今回 Unityを使用して、一部の人が持っている もう少し肌を置くことにしました と手の周りのもの。 だから私は、のこの1で手放すことができ、 確か、私の手が相互作用している。 そして、あなたはおそらく想像することができます 他のクールな便利な物事のカップル あなたがこれを行うことができます。 これは少なくとも一つの例である。 そして、この外にジャンプしてみましょう。 そして、もう一つの涼しい1 で、のこの1で行きましょう。 Plasmoボール。 再び、我々は必ずしもないだろう 複雑さのこのレベルを期待する CS50のための最終的なプロジェクトから。 これはあなたを示すことだけです。 のいくつかは、あなたたちを与える 何のために少しのインスピレーション 君たちはリープモーションで行うことができます。 したがって、たとえば、ここでクールです そこに私達は行く物理学の例、。 だから今、私の手の両方を持って この小さなプラズマボールを持っている。 そして、ボールは物理学に反応している 私のボールの周りに私の手を動かす。 さて、これはすべてのUnityを使用してますがあり、 ツールとフレームワークのようなものを使用して、 私たちは教えられていないこと クラスの皆さん、 しかし、あなたはいくつかの非常に見ることができるように クールな実行はそれでスルー。 しかし、あなたたちが行うことができます一つのことを リープモーションで、今オフの開始 JavaScriptでの作品です。 リープモーションは、JavaScript APIを有している あなたたちは非常に、非常に使用し、私たちができる 君たちが構築することをお勧めします それを使ってあなたのプロジェクト。 だからと、私を聞かせて トマスを切ったそれをバックに渡す リープについて話をする モーションとJavaScript。 TOMAS Reimersの：クール。 または、表示したいん それら最初のビジュアライザ？ ARMAGHAN BEHLUM：ああ。 はい。 それではそのビジュアライザの詳細をお話しましょう​​。 TOMAS Reimersの：最も基本的な上そう レベル、あなたが最初にリープモーションを取得 あなたはこのボックスを持っているつもりです。 ここでは、私が制御を取るしたいですか？ ARMAGHAN BEHLUM：ええ、それのために行く。 TOMAS Reimersの：だから、 最初リープモーションを取得 あなたはこのボックスを持っているつもりです。 これは、デバイスを有している このようになります。 お使いのコンピュータに差し込み、 必要なドライバをインストールし、 そして、それは基本的に設定されます。 ソートするので、最も簡単な方法 リープモーションとの契約の それがインストールされ、このプログラムを開いている リープモーションビジュアライザと呼ばれる。 そして、ビジュアライザーは文字通りです 私はここに示しています。 それはあなたが見ることができます あなたの手の骨格概要。 そして、何リープモーション としてそれらを解釈している。 だから、リープモーション、カメラを使用しています あなたの手を見てのソートする そしてそれは何を推測しようとします そのあなたの基本的な骨格物 画面上で表示されます。 そして、それはそれはあなたを示しているものです。 ARMAGHAN BEHLUM：毎週 シングル少しポイント そしてあなたがそこを見る事がある 君たちに利用できるのデータ 同様に使用する。 だから、それはだと見る キャプチャそのトマス 5本の指の各々を有する それらの異なる指 データとしてあなたのためにも利用できます どんなアプリケーションで使用するポイント あなたが望むかもしれない。 あなたがどうかを確認したい場合は 誰かが親指をやっている あなたは自分の指かどうかを確認することができます カールと、彼らがしているかどうかをされている 親指を指している 上向きに、またはどこに 彼らの手首や手のひらです とスタッフのそのタイプ。 TOMAS Reimersの：クール。 だから、いくつかのジェスチャーを見ることができ、それ 他より理解しています。 それがあなたを見ていることを、忘れないでください 下からカメラでから手、 だから、あなたの手のようなを持っている場合 これは、それは完全にそれらを理解し、 しかし、あなたは試してみて、何を開始したら、 親指は、時にはそれがそれを読み込み、 時にはそれが推測できますが、正直なところ カメラはちょうど親指を見ることができない。 だから、本当にありません 何が起こっているかを確認してください。 心に留めておくべきちょうどいくつかの制限 あなたはこれで開発しているとき。 とにかく、そのように戻ってこれまで行く。 ビジュアライザ実際に 便利なツールをたくさん持っている。 だから、リープモーションです ようにプログラム 彼らはあなたがことを期待していないこと 画像データと対話する。 彼らは本当にない あなたが理解することを期待 何が裏で起こっている。 彼らは何をやっていることは公開している あなたのためのAPIの束 あなたができるように このデータと対話 直接理解せずに 何がフードの下で起こっている。 だから我々はビジュアライザここでHをヒットした場合 あなたはたくさんのオプションが表示されます。 ここで重要な1でも あなたはOをヒットしてからHをヒットした場合で、 あなたはそれていることがわかります あなたがジェスチャーを描くことができます。 だから、ジェスチャー、あなたが表示されます それは全体の矢印を描画します。 ジェスチャーは、次のいずれかの方法リープです モーションは一種のあなたがデータを取得することができます それを処理することなく。 だから、むしろ私が理解する必要がなく アウト、ああ、手が動いていた、 私は、ポイントへのアクセス、持っていても APIは、ソートのちょうど私に教えてくれます、 ちょっと、彼らはこのジェスチャーをした。 ですから、基本的な矢印のジェスチャーを行うことができます。 あなたは円のジェスチャーを行うことができます。 あなたは、ジェスチャーをタップすることができます。 そして、あなたは、キープレスジェスチャを行うことができます。 うん。 とかのようなもの。 だから今我々は一種のしたこと リープモーションが何ができるかを見て、 あなたはそれが読むことができます見ることができます ジェスチャーの全体の束。 私は私がするつもりだと思います ARMIに戻ってそれを渡す そして、彼は方法について話をするつもりだ あなたは、JavaScriptを使用してこれらの取得 どのようにあなたもこれでプロジェクトを開始する。 そして、我々はいくつかの話をします 涼しい場所では、あなたはそれで行くことができます。 ARMAGHAN BEHLUM：うん。 いいですね。 そんなわけで、非常に最初に我々 あなたは、もちろんやることになるでしょう、 あなたが取得した後リープモーションすることにある セットアップleapmotion.com、に移動し、インストール ドライバーとスタッフ。 あなたが行くことができることを行った後 それが接続されているか確認します。 あなたがあなたの小さなトレイに表示された場合 リープモーションアイコンと、それは緑だが、 その後、あなたはすべてのセットだ知っている。 そしてもちろん、正確に何をチェックアウト トマスはちょうどジェスチャーであなたを示した そして、画面のタップをして、そして キーのタップ、とスタッフのそのタイプ。 その後、私たちも、 もう一度、私が言ったように、 我々はこれらのすべてにアクセスすることが JavaScriptで物事にも。 理想的には、あることを設定する 私たちはあなたを推薦する みんなあなたに行くことです バーチャルホスト、ディレクトリ、ローカルホスト、 あなたのCS50アプライアンスの公開。 そして、あなたはそこに行く何'LL 参照インデックスドットHTMLファイルである。 今、そのインデックスドット HTMLファイルやインデックスドット いずれかがあるPHPファイル、 罰金、あなたは次に何を行うことができます あなたのメインオペレーティングシステムに行くです。 そして、あなたはIPアドレスに行けば そのは右下にリストされている 右ここにあなたのアプライアンスのコーナー、 あなたが見ることができるように、その後何が起こる あなたはのページに行くされている そのインデックスドットHTMLファイルが参照する。 あなたが置くことがありますので、すべてのコード そこに送られ、ここで使用可能ですされます。 TOMAS Reimersの：だからそれもだ 参考のために重要なだけ あなたたちが実際に知っている場合に サーバーを自分で設定する方法を、 またはあなたは、世界中でこれを置きたい ウェブ、あなたは何を行うには歓迎している。 これらがあることを忘れないでください 単にJavaScriptファイル そしてすべてのリープ処理 クライアント上で実行されます。 だから、本当に重要ではありません どこにサーバーの人生 コンピュータ限り、 あなたがウェブサイト上に表示している リープモーションがインストールされています。 ARMAGHAN BEHLUM：もちろんです。 トマスのように、ええ、言った 何があなたたちのために働く。 これはちょうど私たちの提言の一つです。 今リープの使用を開始する あなたがどうなるのかモーション あなたがインポートされますされている リープモーションからのJavaScriptファイル。 そして、何そこから あなたが行うことができ、今、ある 私はちょうどこの段落を持っている タグは、テキストのIDに設定する。 私たちが推薦するチェック コントローラオプションを設定している とリープモーションのために 真であるとジェスチャーを可能にする。 デフォルトでは、それらのだから、 私たちはあなたを示したジェスチャー みんな、円、および キータップ、スワイプ、 それらはに示されていない あなたは、デフォルトでみんな。 しかし、我々は非常にそれらを使用することをお勧めします だから、車輪の再発明していない。 それらを渡し、trueにそれらを有効にする ドットループを跳躍するためのコントローラオプション そしてあなたはすべて行くように設定している。 その後あなただけの持っているので、 匿名関数を定義した それはになります リープモーションからフレーム そのフレームは、すべて持って あなたが必要になるだろう情報。 TOMAS Reimersの：だからへ 要約すると、1つのオブジェクトを持っている。 あなたはこの機能を持っている うるうドットループと呼ばれる。 そして、あなたは2つの引数を指定してそれを呼び出す。 あなたは、1でそれを呼び出す コントローラオプション。 とがたくさんあり​​ます あなたがそこに置くことができますオプション。 私たちがしようとしている1 ジェスチャーを有効にされて強調する。 そして、あなたはそれが等しいtrueに設定されている場合 あなたはこのジェスチャーでアクセスを得ることができます 私たちはビジュアライザであなたを示したこと。 そして、2番目の引数が この関数は、それが戻って種類のコールのようなものだ すべての呼び出されるされる タイムリープのフレームごとに、 ので、すべての時間の飛躍があることを登録する 手の動きは、それが新たなフレームを有する。 そして、それは1で、この関数を呼び出す フレームオブジェクトである引数、。 そのフレームのオブジェクトについて説明 リープなどのフレームはそれを見ている。 ARMAGHAN BEHLUM：その通り。 だから、これはすべての有用なが含まれています こまごまとした情報 我々は以前に話していたことを。 フレームドットジェスチャーをチェック ジェスチャの配列です うるう年の動きは、あなたをキャッチすることを 最後のフレームでやって手。 したがって、たとえば、私たちは何をしている ここで行うと、私たちがチェックしているである、 ちょっと、その最後のフレームでリープは、やった あなたは私がしたすべてのジェスチャーをキャッチ？ だから私たちが行うことにした場合はどうすれば これらのジェスチャーを繰り返し処理されている と試してみて、いくつかの有用なを取得 それらからの情報。 各ジェスチャーは固有のを持ってい それに関連するID。 彼らはタイプがあります。 あなたは、どの指を見ることができます ジェスチャーに関与していた このポイント可能なものをチェックアウトして。 あなたが通過する際のであれば リープモーションのJavaScript APIのもの、 彼らはpointablesに言及するとき、 彼らは、これらの指の話をしている。 そして手は、もちろん、ある 手全体オブジェクト。 ほかに何か？ あなたはどのくらいの時間を確認することができます 動きが続いた とのために、ええ、これらすべての有用なもの。 だから私は今、何をやっている ここで私はフレームをログに記録され、 その後、私は私のHTMLは、ディスプレイへのアップデート 情報のこれらのビットのすべて フレームから。 それでは、それをチェックアウトしてみましょう。 だから、ここにある。 ここでは、インデックスのドットのHTMLファイルです。 そして、私はちょうど移動したときに、あなただけ見たように 私の手リープは、円の動きを捉えました。 だから、私は上のサークルをやって見ることができます ここでは、サークル情報を更新します。 気の抜けたビールをやって、気の抜けたビールをキャッチします。 のは、画面タブを試してみましょう。 我々はそこに行く。 画面をタップし、キーをタップします。 によっても、キー、タップ、 あなたがダウンして打ったときの方法、である。 だから、あなたが想像できる 多分ピアノを演奏。 そして、画面のタップがある あなたは画面を打ったとき。 だから、実際に多分あなたを想像することができます あなたの目の前でタッチスクリーンを持っている あなたがタッチを打つしている あなたの前に画面。 そして、我々は、いずれかをつかむことができる ここでこれらのオブジェクトの。 だから私は私があったことを言った覚えている コンソールログにフレームを渡す。 そして、私たちはすべてのチェックアウトすることができます こまごまとした情報 で利用可能であること そのフレームにも使用するように。 私が先に言ったように、 pointables指です。 その瞬間、私たちは持っていなかった私たちの リープモーションの前で手を そのためには、ゼロを登録 しかし、これはどのようにある 多分見つけるために開始する どのように多くの指が画面です。 そして、そのタイプの情報。 TOMAS Reimersの：と記憶 これは単なるオブジェクトです。 だから、すべてがアクセスすることができます ソートの構造体のような C言語では、オブジェクトを持っている 名前はプロパティ名に点在しています。 そして、その中であなたが持っている アレイは、あなたが他のオブジェクトを持っている、 しかし、それだけで、オブジェクトの覚えている。 特別なものは何もありません 我々はリープを使用しているため。 ARMAGHAN BEHLUM：うん。 クール。 我々は、カップルをチェックアウトする必要があります JavaScriptの例の？ TOMAS Reimersの：だから すぐにその私たちを覚えている リープが実際にできることを言った 任意のウェブサイト上で実行する。 LeapJSだけをクライアントに提供しています。 だから一緒にクライアントが持っているように リープモーションは、それが動作します添付。 だから、リープモーションが持っている ウェブサイトの人々 彼らの例を共有することができます 物事の彼らが作った。 だから我々はちょうど行くつもりです それらのカップルを通して 前に可能だものを見るために 方法については、詳細に飛び込む それが可能だ。 そう ARMAGHAN BEHLUMは：見てみましょう。 TOMAS Reimersの：今、それが動作する必要があります。 ARMAGHAN BEHLUM：だから今 私たちは例を見た前に、 私たちの手をレンダリングUnityを使用して かなり印象的グラフィックスキンと、 しかし今、あなたはあなたが行うことができます見ることができます ウェブブラウザ内部でも同じこと。 これは、すべてのChromeの内側にある 単にJavaScriptを使用。 そして、他の素敵な あなたがしたい場合の事はある 彼らはこれをしなかった方法を知っている、 JavaScriptの上の例 また、そのコードオプションを含む あなたがチェックアウトした後、見ることができます どのようにこの人がつかんした 手やコードなど。 だから、あなたが見つけることができるすべてです developer.leapmotion.comで。 あなたが行くとJavaScriptをチェックアウトすることができます 彼らはそこに持っている例。 そうそう。 ここではこれらは申し訳ありませんおっと、である。 それでは、もう一度それを試してみましょう。 ああ。 私は2つの右の手を持っている。 そうそう。 TOMAS Reimersの：だから、もう一度、 リープが台無し時々思い出す。 ちょうどそれをもう一度を与える。 それは完璧ではないが、それはかなり良いです。 ARMAGHAN BEHLUM：One 他の勧告も 直射日光の当たる場所にそれをしないことです。 だから、道リープモーション 作品は、実際に、ある 私はカメラこれを示す場合、 同様に、赤外光。 だから、それらを送信し、その後 彼らが戻ってくるときにそれらを読み込みます。 だから、あなたがしようとしている場合は それを直射日光を行い、 例えば、それはおそらく 仕事に行くのではない、 またはそれが必要とするようになるだろう そうするいくつかのキャリブレーション。 また、別の推奨はしている リープの後ろのスペースをクリア とリープの前で。 作業として考えて のドームの内側 このリープモーションオブジェクトを囲む。 スタッフ権利があるとすれば その背後にも、 それはまた、干渉するために起こっている リープ·モ​​ーションのがしようとしてどのように あなたの手を認識する とスタッフのそのタイプ。 したがって、たとえば、私はこの中で考える 場合、それは実際に私のラップトップの それはリープモーションを作るようなものだ。 うん、そこに私達は行く。 だから私はから私のラップトップをクリアした場合 その背後に手がかなりよく現れる。 そうそう。 それがあります。 そのようにした他に何私たちはそれらを表示。 TOMAS Reimersの：私は思う 今の時間になります 飛び込むの一種とちょうどのをできるように ゼロから完全にデモを行う。 それは本当に簡単なことになるだろう。 基本的に私たちが行っている 実行しようとすることはそれを作るです そのので、あなたの手、強打時 背景が赤色のようにして起動するために起こっている、 そして、あなたの手をスワイプすると、 背景が緑色に変化するようになるだろう。 OK？ 本当にシンプル。 そして、それだけで基本的にだ たくさん通って行くつもり 背後にある概念の リープ我々はできるように、 リープがどのように動作するかのこのイデオロギーに入る とどのように我々はそれでものを構築することができます。 そして、我々はよそこから おそらくあなたが表示 APIドキュメント、どこ これについての詳細を読むことができます。 そして、我々は一日それを呼ぶことにします。 だから、コードまたはしたいです あなたは私には、コードにしたいですか？ ARMAGHAN BEHLUM：うん。 さて、私たちは仕事ができると思います 一緒にこの上で試してみてください TOMAS Reimersの：だから私たちはよ いくつかのペアコーディングを行う。 ARMAGHAN BEHLUM：あり私達は行く。 それはまさに私だ チェックアウトしたかった。 クール。 だからここで例えば、見てみましょう。 私たちは、反復処理している間 すでにジェスチャーを通して、 TOMAS Reimersの：作りたい ちょうど完全に新しいファイル？ ARMAGHAN BEHLUM：完全に新しいファイル？ 確かに、うん。 TOMAS Reimersの：うん。 ARMAGHAN BEHLUM：それでは、それを行うことができます。 TOMAS Reimersの：だから我々が行っている 完全にファイルを作成する。 私たちは、手のドットHTML、それを呼ぶことにします。 それは私と一緒にクールだ。 それで、あなたはHTMLタグを行う覚えている その中であなたは頭を持っている。 その頭はその中のタイトルを持っています。 タブ他の方法だから。 そこに行きます タイトルは、私たちはリープ例それを呼ぶことにします。 うん。 ARMAGHAN BEHLUM：おっと。 タイトル。 TOMAS Reimersの：うん。 ARMAGHAN BEHLUM：あり私達はある。 TOMAS Reimersの：そして その後のは身体を作ってみましょう。 ARMAGHAN BEHLUM：、待ってみましょう また、インポートするようにしてください。 TOMAS Reimersの：ああ、もちろん。 私の悪い。 だから、いつもあなたがリープがあることを確認してください そのため、スクリプトがあなたに与えられたスクリプトです これは基本的にリープ運動によって Webブラウザは接続することができます ユーザーのコンピュータ上のデバイスへ。 そして、この中で、私たちも 体を必要とするだけしてみましょう 体がそう挨拶する 私たちは学生を表示することができていること この新しいに接続する方法 彼らが作ったWebページ。 ARMAGHAN BEHLUM：確かに。 それでは、ちょうどanother--を入れてみましょう TOMAS Reimersの：こんにちは、こんにちは、世界。 だから、非常に基本的な例。 本当にただのデモ。 ARMAGHAN BEHLUM：そして、ここで我々 我々は手のドットHTML、それを呼び出し、に行くことができる、 右？ そして、ああ！ だから私は間違っているだろうか 今、この権利を持つ。 のは、読み取りアクセス権を追加してみましょう ドットHTMLを手へ。 TOMAS Reimersの：あなたがしたいですか ビッグターミナルでそれを行うには 私達はちょうどthe--上でそれを表示することができますように ARMAGHAN BEHLUM：ええ、それは理にかなっている。 大丈夫。 だから私は今追加 パーミッションが、我々の場合 チェックアウトしていた 我々は、あらかじめアクセス許可 その実際に手を見ているだろう ドットHTMLは読み取り権限を持っていませんでした したがって、我々はそれをレンダリングされませんでした。 私たちはそうした場合しかし、今、我々はを参照してください 右が少しハローワールド。 TOMAS Reimersの：だから、実際にしてみましょう 彼が書いていたように、Hello Worldの、 私は道を考えた 我々はこれを変更することができます。 のは、それが世界の挨拶しましょう​​、と あなたは波ときに、それが別れ言う。 右？ だから、こんにちは、さようなら。 ARMAGHAN BEHLUM：確かに。 TOMAS Reimersの：かなりいいですね。 ARMAGHAN BEHLUM：それ あまりにも、私にはいいですね。 TOMAS Reimersの：私たちはしているのであれば そのレッツだけをするつもり Webページを通じて少し思う。 我々はいくつかのスクリプトが必要になるだろう 基本的にはどのレジスタ あなたが手を振ったことと飛躍へ、 波とスワイプ、同じこと。 だから我々はそのスクリプトが必要になるだろう 基本的にはそのスワイプのために登録します。 そして別の事、我々はしている 必要があるとしては、私たちがしているである いくつかが必要になる 実際の内容は変更される場合があります。 だから、jQueryを覚えているように あなたがコンテンツを変更することができます。 だから我々は含めることができます一つのことは、 この中でjQueryライブラリです。 そして、何を選択することができるように 私たちは実際に内容を変更しようとしている、 つまり、IDが必要になるだろう またはクラス、または何か 我々はそれを選択するために使用できる。 だから我々はそれあげる 変更テキストの迅速なID。 そして、あなたはjQueryをつかむためにしたいですか？ ARMAGHAN BEHLUM：だから最初のものだ 私たちの今、リストを行う上での事？ TOMAS Reimersのは：のはjQueryをつかむしましょう​​？ ARMAGHAN BEHLUM：レッツ クール、OK、jQueryをつかむ。 その場合は、私が行くよ actually--する必要がありますする どこだろう そのための最適な場所？ TOMAS Reimersの：jQueryの、もしそうなら、あなた グーグルのjQuery、jQueryを打つ、最初 ARMAGHAN BEHLUM：非常に最初の1。 TOMAS Reimersの：またはダウンロード。 それはいいのよ。 左のダウンロードv1とv2ヒット。 だから我々はからjQueryを記述している あなたのようなオンラインは、おそらくやった。 下にスクロールします。 アップ、アップ。 ARMAGHAN BEHLUM：ああ、右ここに今？ TOMAS Reimersの：またはその。 うん。 だから、jQueryはホス​​トさバージョンがあります そのあなたが実際にないことを意味 それをダウンロードする必要があり、 しかし、あなたはより多くのだ それをダウンロードして歓迎 そしてそれを自分でホストします。 ARMAGHAN BEHLUM：クール。 だから今、私たちは、jQueryを持っている。 今、何が次の私たちの行うには、リスト上だ。 TOMAS Reimersの：恐ろしい。 だから我々は必要なものの次の 何私達が実際に必要である p個のhello worldのIDを与えるために 私たちは右に、それを変更できますか？ それでは、のアイデアを与えてみましょう、 私は、テキストを変更、知らないのか？ ARMAGHAN BEHLUM：ちょうどレッツ このようにそれを行うには、私は推測する。 TOMAS Reimersの：changeText、涼しい。 そして今、ちょうどページを更新してみましょう。 すべての作品を確認してください。 だから、ブラウザの[戻る。 クール。 その常に良いリマインダー あなたがウェブサイトを構築しているとき、 おそらくあなたが作るたびにリフレッシュ ただの幾分重要な変更 時にはあなたのため 誤ってタグを落とし、 またはあなたが誤って何かを削除し、 そして、あなたは、小さな何かを破る しかし、あなたは大きな変更を行うとき この大きな変化はなかったなぜあなたは、似ている 一見無関係なものを破る。 だから、一種のことは常に良いことだ 行くとそれらの健全性チェックを行う。 とにかくので、今のはやらせる 1最後の健全性チェック、 これですそれは、変更してみましょう リープモーションなしのテキスト、 何もせずに、単に ページのロード時にそれがよ にハロー世界を変える jQueryを使ってお別れ。 だから、jQueryのが公開を覚えていれば このドル記号機能、 その我々はCSSセレクタを渡すことができ、 すなわちハッシュタグの変更、テキスト、その で要素を選択 変更テキストのID。 そして、我々はつもりだ メソッドを呼び出すには、HTML オブジェクト上でそれはで戻ります 文字列の別れの引数、どの アイテムを変更します さよならを言うのHTML。 恐ろしい。 これはかなりクールなようだ。 そして今、我々は更新すると 私たちが見に行くしているページ それは即座に右に、別れに変わり？ それは何のために待機していないため。 ソートのとすぐにそのスクリプトとして それは別れに変更し実行します。 クール。 だから今のは、関数内でそれをラップしてみましょう。 右。 だから我々はするつもりだ 関数を作る。 私たちは別れ、それを呼ぶことにします。 だから、関数別れです 引数を取りませんつもり そしてそれは実際にはありません 何も返しに行く。 そして、それはちょうどになるだろう JavaScriptでそれを行う。 優秀。 今では私たちの関数さようなら 右、別れにテキストを変更する？ だから、これは私達に方法を提供します 基本的に変更へ 別れたときににそのテキスト 私たちは、その関数を呼び出した。 右？ だから、これはかなりクールです。 ARMAGHAN BEHLUM：まあ、我々 また、単に確認することができます 今、私たちが呼び出していないので、 機能、我々はページを更新した場合、 それはないだろうに気付く テキストを変更する。 TOMAS Reimersの：優秀。 だから今、私たちは起動するつもりだ そのリープのものに入るため 私たちは話していたことを。 だからARMI、あなたがしたいです ここからそれを取るか？ ARMAGHAN BEHLUM：うん。 かしこまりました。 私はおそらく必要があるつもりだ ダブルチェックの事に、 しかし、たとえば覚えている 我々が望んでいる オプションで確認します 我々はジェスチャーを有効に設定して TOMAS Reimersの：グッドキャッチ。 ARMAGHAN BEHLUM：真である。 そして、我々は、推薦された 君たちはあろうと 実行うるうドットループ、その 先ほど言ったように、 二つのオプション、JSONオブジェクトを持って あなたが望む方法のオプションです にリープモーションを設定するには 仕事、その後の機能 コー​​ルバックとしてフレームをキャッチしようとして トマスのような機能が言っていた。 そして、あなたが望むものを編集 その機能とすることができません。 だから我々は渡し 今オプションと我々は定義する フレームになります機能。 そして今、我々は定義する必要があります その関数が何をするか。 それはのためにもだ 今後、確認するためにそれを行う。 TOMAS Reimersの：優秀。 だから今我々はこれを持っている ドットループ機能を飛躍 基本的にリープを見て言うコール これらのオプションと毎回付き 何かの変更は、これを呼び出す データのすべてと関数フレーム あなたは、フレーム内の認識している。 かなり良いですね。 だから今迅速な健全性チェック、 私はいつもお勧めしている、 その中でちょうど置かれる コンソールドットログフレーム。 そしてChromeでそれを開く アップとあなたのコンソールを見て と見てリープで遊んで その意志ので、ログに記録されたフレーム あなたに何のアイデアを得る データはあなたがにアクセスできます。 そして、いつものようにあなたが混乱した場合に、 APIリファレンスを検索します。 そして、我々は、リンクが含まれます これの終わりに、そのための。 ARMAGHAN BEHLUM：だから我々 その後ページを更新し、 私達は行くと再びコンソールを開きます。 そして今、我々は我々がしていることに気付く 渡されたフレームを有し、 これらのほとんどのオブジェクトは、私たちは前に見た。 そうそう。 これらは、私たちのフレームです コンソールに現れて。 クール。 だから今我々はつかんできたことを フレーム、以前覚えているかもしれませんように 我々が持っていた例から、 我々は、フレームドットジェスチャーをチェックする 我々はそのジェスチャーのリストを取得 フレームは、最後にキャッチ。 私たちは、その配列の長さを確認することができます リープはどんなジェスチャーを捕まえたかどうかを確認します。 だから、配列の場合 ゼロより大きいし、我々 私たちが行うにはいくつかのものを持っていることを知っている。 それでは、if条件でそれを包むましょう そして今、ここで私たちが知っている私たちです ジェスチャーを見てきました、のは、それに基づいて行動しましょう​​。 だから今、私たちがここにいることを我々 チェックアウトするジェスチャーを持っている。 TOMAS Reimersの：まあ、最初 事は、それだけで1ジェスチャーではないです それは、多くのジェスチャーである可能性があります。 ARMAGHAN BEHLUM：非常に真。 TOMAS Reimersの：あたりそう ここで古典的なCスタイル 我々は、おそらくforループを使うことになるでしょう。 ARMAGHAN BEHLUM：ここでは、その後です。 私たちは、反復処理することを決めた ジェスチャーを通して。 そして、見てみましょう。 私プラス、プラス。 そして今、我々は多分行った場合 ちょうどVARジェスチャーに等しい フレームドットジェスチャー 私は、今、私たちが持っているブラケット ただ一つでジェスチャー自体、 ジェスチャーオブジェクトの単一のインスタンス 私たちは、作業するための ループのためのこの内部。 大丈夫。 TOMAS Reimersの：レッツ正気 再びここにチェックして、ちょうどコンソール ドットは我々が得るものを見るためにジェスチャーを記録します。 ARMAGHAN BEHLUM： コンソールドットログジェスチャー。 オーキーdokie。 そして、もう一つのより多くの時間をリフレッシュ。 TOMAS Reimersの：そしてレッツ ジェスチャーを作ってみてください。 あなたはたくさんいることがわかります 彼はスワイプするときの、 あなたがでジェスチャの束を得る コンソールと、彼は円を行おうとする場合には、 それはjust--だ ARMAGHAN BEHLUM：サークル 本当にいいです。 TOMAS Reimersの：今、奇妙なことがあると ここで、彼は一つの円をやってされている、 しかし、これは右、80ジェスチャーを記録している？ つまり、ジェスチャーをたくさんだ。 だから、事の最初のソートに 実現する、これが混乱することができ、 ジェスチャーということです 一度だけ記録されません。 すべてのフレームで、右、 私はサークルをやっている場合 リープは、これを検出し このからの変更であり、 この変更での変化である。 そして、それはそれらのそれぞれの1を記録します。 しかし、それらのそれぞれにおいて、 それは、ああ、と言うために起こっている 現在進行中のジェスチャーがあります。 だから、ちょっと、あります、私はただ言わせて ジェスチャーとそれが現在進行中です。 だから我々はしたくないものを やる人一に、ああ、と言うです これらのジェスチャーのあなた テキストを変更したい。 私たちがやりたいことはときにジェスチャーで 停止し、我々はそれをチェックすることができ、 その後、我々は、テキストを変更したい。 ARMAGHAN BEHLUM：Mhmm。 だから、トーマスのようなものです これらのジェスチャーを説明 複数を通じて表示されることがあります フレームが、例えば、 ときに我々が過ごしていた その円、我々が見ることができます そのその1のID その私たちは一つのサークル 完了しようとしている可能性があります 同じIDが全体だった。 そして実際に、あなたもすることができます ステータスをチェックしてください。 更新した。 その後、これはおそらく 最後のサークルその、ああ、まあ、OK。 だから、時にはそれがいます ジェスチャーの停止状態 そしてそれはまた、あなたのステータスが表示されます ときに新しいジェスチャを開始する それがあることを確かに認識し、 あなたは新しいジェスチャーを開始しました。 この場合の例である。 TOMAS Reimersの：クール。 ARMAGHAN BEHLUM：そうそう。 そして、見てみましょう。 また、気づくことができます 私たちが作っていたにもかかわらず サークルとジェスチャー 型と呼ばれるフィールドがあります それは私たちにどのように伝えます ジェスチャーのことである。 だから、私たちのために役に立つかもしれない あなたは試してみて、私たちがやっている何をすべきか。 TOMAS Reimersの：だから バックJSへの移行、 私に発生した最初のもの また、ちょうどこのコードを読んで 小さな最適化があるとされ、 実際に私たちはこれです 右、条件場合は、これを必要としない？ フレームドットジェスチャードットなぜならば、 長さは、ループのためにあることを、ゼロである とにかく実行するつもりはない。 だから我々は、同様にちょうど行くことができる 先にその取り除く。 繰り返しになりますが、コードを書いている間 それは背中とソート行くことが重要です リファクタリングのあなたがいることを理解するように より良いものを行っている可能性があり、 またはそのための別の方法があること。 だから今、私たちはこれをきれいにするつもりだ アップを迅速かつまた、あなたのコードをクリーンアップ。 それは大したことだ。 ARMAGHAN BEHLUM：良い スタイルは非常に理解される。 TOMAS Reimersの：あなたができる 時誰かいつも言う あればあるように使用されるコードを持って 条件とは、彼らはそれを削除し、 しかし彼らはそれをアンコメントしませんでした。 それは非常に明白だし、 それは一種の醜い。 ARMAGHAN BEHLUM：だから何だ 次の私たちの上のリストを行うには？ TOMAS Reimersの：だから今私たちが言っていたように、 私は、私たちが最初にしたいことを推測 そのジェスチャーのことを確認してくださいされている 実際にスワイプ、右？ ARMAGHAN BEHLUM：うん。 TOMAS Reimersの：だから我々はそれを言っている場合は、 私たちの別れは、一種のスワイプのようなものです それはスワイプだと私たちは、行くよ 我々はちょっと、と言って必要がある最初の事、 ジェスチャーは、右スワイプを入力している？ しない円やトップ、 それはスワイプのですか？ 私たちはそれを行うことができますので、道 我々はジェスチャーを言うことができるである 文字列としてドットタイプ等しい等しいスワイプ。 ARMAGHAN BEHLUM：[聞こえない]ジェスチャー ドットタイプはスワイプに等しい等しい。 我々があります。 TOMAS Reimersの：そして その後最後の質問 私たちは見てみたいジェスチャードットである 状態等しい等しいストップ、右？ だから、だとき ジェスチャーは停止されています。 私は実際に私は、スワイプで考える 私の頭の上からこれを知って、 しかし、あなたはに歓迎している ときに、それを見て それを登録するたびにスワイプ あなたが停止するまで、開始ジェスチャーです。 そして、最後の1の ちょうど停止ジェスチャー。 だから、唯一の1ストップがあるでしょう 私たちのために素晴らしいですジェスチャー、。 だから、私たちにできることは、ジェスチャードットあれば言うことです タイプ等しい等しいスワイプジェスチャードット 等しい等しい状況 停止、その後のは正気ましょう ここにチェックドットログジェスチャーを慰める。 だから我々はここに戻って行くよ。 私たちは、ページを更新します。 そして今、時間だけが何かすべき 我々はスワイプ時ログインがコンソールドットがある。 そして、我々はスワイプしようと、我々は何も表示されません。 右？ だから、これは実際には大きな問題です。 私たちは、私たちが期待したものを見ていない。 とデバッグはこれを大きな一部にすることができます。 だから我々が行っている最初のものは、 、[OK]を、のドットを慰めるてみましょうと言って ジェスチャードットあればそれをログに記録する 等しい等しいスワイプを入力します。 ARMAGHAN BEHLUM：うん、のはそれをやらせる。 TOMAS Reimersの：だから私たちはしている 戻ってこれに行くつもり。 私たちは、リフレッシュします。 私たちは、スワイプします。 そして、我々はそれらの束を見ることになるだろう。 OK。 だから、明らかに問題がなかった 私たちのジェスチャードットステータスを持つ。 私たちはこれらのいずれかを開くのであれば、我々はよ オブジェクトに見て、我々が表示されます、 まあ、それはああ、停止だが、 それはしない状況、状態と呼ばれています。 だから我々は戻っへ向かう場合、 我々のコード私たちが言うことができます もしジェスチャードット式等しい等しいスワイプ とジェスチャードット状態等しい等しいストップ、 その後、我々は、ドットコンソールそれをログに記録します。 そしてそうリフレッシュ。 私たちは、スワイプ。 そして、我々はその上に表示されます すべてのスワイプ、我々だけだ ものを、取得 素晴らしいです終わり、右？ それは我々が望むものだ。 ARMAGHAN BEHLUM：うん。 そして、我々はまた、気づくことができ、そのIDの これらのジェスチャのそれぞれは独立しています。 私たちがしているので、トマスが言っていたように この1停止状態をキャッチすること スワイプの終了時に存在している、私たちはしている 個々の独立したジェスチャーを取得 リープモーションから。 グレート。 TOMAS Reimersの：のは、先に行くとしましょう ただ、である最終の事を、やる ARMAGHAN BEHLUM：さようなら。 TOMAS Reimersの：恐ろしい。 そして今、私たちのウェブサイトをチェックしてみましょう。 One ARMAGHAN BEHLUM：第二。 私たちは、ええ、私たちはさよならを呼び出したのでした。 グレート。 TOMAS Reimersの：いいえ、さようなら 実際の関数である。 ARMAGHAN BEHLUM：うん。 のはそれをやってみましょう。 TOMAS Reimersの：そしてときに我々 さようなら波、それはさようなら言う。 ARMAGHAN BEHLUM：我々は勝利を持っている。 TOMAS Reimersの：だからかなりエキサイティングなもの。 うまくいけば、あなたが何かを構築することができます 他に、しかし、あなたは右のアイデアを得る？ あなたは、ジェスチャーを検出することができます。 あなたは、関数を呼び出すことができます。 そして、それは本当にあなたを与えるからこと いくつかの非常に基本的なビルディング·ブロック 彼らはスワイプ多分とき、ああ、言って、 あなたはまた、物事を検出することができますので、 方向のような。 私は彼らが何かをしたい。 それとも、彼らは右スワイプ、I 彼らが何かをしたい。 そして、我々は取得するために開始することができます どのように正確にとの創造 私たちは、当社のウェブサイトを改善するつもりだ これらのスワイプジェスチャーや円を使用して ジェスチャー、またはタップジェスチャー、 どちらかタップするか、画面タップキー。 そして、あなたがしていること以外、他 再生する歓迎以上 実際のデータと、 しかし、あなたがしたい場合は、 我々はあなたがドキュメントに行くことをお勧めすることを 彼らは実際には本当に良いだから。 だから今のドキュメントに向かった。 それとも、それについて話をしたいですか？ ARMAGHAN BEHLUM：うん。 のはそれをやってみましょう。 また、アドバイスの一つの他ちらほら、 試してみて、3Dでこの思います。 だから、実際にのは​​、これらのジェスチャーをプルアップしましょう 1より多くの時間のコンソールドットログジェスチャー そして、私たちはそれを行う。 戻ってくる中で、今のは、試してみましょう これらのカップル、それらのカップル。 我々は中に入ってチェックアウトする場合 同様にこれらのジェスチャー あなたはそれを見ることができるように 彼らは次元だ 実際には、三方向にある。 だから制限するものではない 自分で2D画面へ も、あなたがかもしれないが 2Dウェブサイト上にある。 あなたは試してみて、どのようにユーザーと考えることができます 3Dでウェブサイトと相互作用する可能性がある。 TOMAS Reimersの：3D空間の。 ARMAGHAN BEHLUM：その通り。 そして、ええ。 だから、方向、速度を得る 情報のすべてのこれらのクールなビット。 TOMAS Reimersの：そして、あなたがいないのであれば その精通し、それはX、Yを行く、 その後zは、この最後の次元である。 あなたはおそらくであるだけで何か あなたは、3Dに対処した場合に精通 前の平面を座標。 あなたが持っていない場合は、2Dと同じです 第三次元があるのを除いて1。 私たちは、zそれを呼び出す。 そして、すべて、ソートの好き それが起こっている場所である方向、 私はそれもしれないと思うposition-- 加速を公開、私はよく分からない。 ARMAGHAN BEHLUM：ええ、私は信じています。 これは間違いなくスピードを持っています。 私は実際には100％ではないよ 加速について確認してください。 TOMAS Reimersの：それは選択肢かもしれ あなたが何かに渡すことができます。 そのように位置と速度は、露出している 3つの座標のこれらの並べ替えで。 このため、x、y、zのデルタのx、δyは、デルタのz。 だから今のドキュメントに向かった それはdeveloper.leapmotion.comだ そして、あなたはドキュメントをクリックすることができます。 ここでも、リープモーションは、これらすべてを持ってい 素晴らしいのAPIは、JavaScriptのための1、 CシャープとUnityのための1、のための1 C ++、Java用1、Pythonのための1、 個人的にとObjective Cの1は、I JavaScriptを向けてあなたをプッシュするだろう またはあなたが知りたい場合は 新しい言語、Pythonを試してみてください。 私が一緒に働いてきたこれらの言語の両方 前と彼らが学ぶことは本当に簡単です そしてあなたは既にJavaScriptを、知っている それは本当に良い候補になります。 注意の一言 あなたはドキュメントを入力したとき。 あなたはドキュメントV2.0にしていることを確認してください。 あなたが使っているのであればあるため バージョン1、それは動作しません。 また、例えばギャラリーのために。 我々は良い30分を費やし デバッグ私たちのリープをしようとし 我々はそれを実現する前に V1はV2では動作しません。 だからあなたはバージョン2にしていることを確認してください。 そして私は彼をもらおう あなたのドキュメントを表示します。 ARMAGHAN BEHLUM：うん。 だからここその後、APIの概要とだ いくつかのビットとの情報 我々はすでにあなたに言ったこと。 ちょっといい浮動 リープモーション上記の手。 そして、リマインダーは思うように 3Dでスペース約。 考える最初の目的の一つ リープモーションで、もちろん、手である。 我々は認識されるものを見た ビジュアライザによる。 そして、あなたが持っているかもしれません それは認識していることがわかる 手首の部分と それに関連するアーム。 TOMAS Reimersの：あなたがしたい場合 ビジュアライザをプルアップする。 ARMAGHAN BEHLUM：うん、 のは再びそれを行うことができます。 TOMAS Reimersの：あなたは常に、見ることができます ソートの参照するにはちょうど良いリマインダー、 ビジュアライザーが表示しようとします リープが見ているすべてのデータ。 ですから、私たちが持っていることがわかります 4点のこれらの並べ替え 手首と、実際の手首による。 そして、あなたはまた、手のひらでこのボールを持っている。 これらはすべての点である LEAPによって認識認識しています。 ARMAGHAN BEHLUM：その通り。 だからその手のオブジェクトと 各フレームは、手のアレイを有する 同様にあなたも取得できる場所 左右の手。 あなたが得ることができている 方向の手がある 正常に直面 手のひらの方向 または、彼らは通常の手のひらそれを呼び出すように。 私たちは他に何がありますか？ 私たちも、おっと。 のがこの方法を試してみて、下にスクロールしてみましょう。 腕、指がある 指で表現 ポイント可能オブジェクトであるクラス、。 私たちが言っていたようなので、私たちはことを見た それぞれの手のためのpointablesの配列。 これらは少しある 考えるの指。 だから、これは行くには良い概要です 試してみて、理解するまで。 TOMAS Reimersの：[聞こえない] そこに手の解剖アップ。 ARMAGHAN BEHLUM：うん、正確に。 そうそう。 その生データがたくさんあり​​ます リープモーションはよく解釈を取り込み あなたのために、ので、それは素晴らしいことだ ここを通過するアイデア と試してみて、リープが持っている方法を見つけ出す 既にあなたのために物事を考え出した そしてそのようにどのような情報あなた そこから入手できます。 そして、そこから私がお勧めする こちらにこの左側のセクションに入る、 これも実際にありません、それらがある、行く 実際にはより多くのAPIのものabout-- TOMAS Reimersの：でのAPIリファレンス 下部には、通常、行くには良い場所です。 君たちはおそらくときこれを見た 我々は、GoogleマップPSETをしました。 しかし、リファレンス本当に ちょうどすべてを通過 機能やパラメータの あなたのオブジェクトで利用できる。 ARMAGHAN BEHLUM：うん。 例えば、これは何ですか 私は前に探していました。 我々は手の私たちがある場合 行くと把握することができます どのリープが推奨 私たちに手を見つけるために。 私が先に言ったように、 我々は手の配列を持っている。 私たちは手を持っているかどうかを確認してくださいと その後試してみて、片手をつかむ そのようにと対話する。 だから、私たちだ あなたたちのためにお勧めします。 ジェスチャーとかにも。 このAPIドキュメントをしようとしている あなたたちのための素晴らしいツールである。 あなたは他の勧告を持っていますか？ TOMAS Reimersの：私はしないでください。 私は、今のところ良いことだと思います。 ARMAGHAN BEHLUM：うん、 私はそうにも思う。 私達に電子メールを気軽に入手する リープモーションについてのタッチで あなたは多分すべての問題を抱えている場合は、 または推奨事項を必要としています。 そして、我々がしようとするものを把握することができます 同様にあなたの男と外。 ありがとう。 TOMAS Reimersの：厳選。