てまりのユニバーサルデザイン

Telloをスマホで操縦するのは難しく、ドローン用コントローラー「GameSir T1d」を注文しました。

在庫切れで１か月以上待ち、その間にスマホ操縦に若干慣れてましたが、やはりコントローラーは操縦性が別格です。

Tello離陸！

コントローラー操縦は初めてです。

うまく飛ばせるか分からず、安全のため、Telloにヒモをつけて飛ばします。

コントローラーのボタンを適当に押したのですが、離陸の仕方が分からず、スマホ画面から飛ばしちゃいました。

※後で調べましたが、R2ボタン＋Yが離陸のようです。

コントローラーの操縦性は高い！

快適です。手元を見ないで操縦できます。

平面のスマホと、立体のコントローラーの違いでしょう。

ジョイスティックで力加減の調整や、方向操作が劇的にやりやすくなりました。

もう、室内でもぶつかる気がしません。

・・・ヒモもありますし。

室内練習ならコントローラー必須

人口密集地に住む人は、Telloを室内で飛ばしていることが多いと思います。

室内で飛ばすなら、コントローラーで操縦が大幅に安全になります。

Telloが壁にぶつかりそうになったら、慌ててスマホ画面を見て方向転換しなくても、コントローラーで直感的にTelloから目を離さず方向転換できます。

Tello推奨のコントローラー「GameSir T1d」。

操縦性が上がり、墜落で壊れる可能性が減るのであれば、4,000円弱の買い物も、高くないかと思えました。

• 

Leap Motionで空中スワイプを作っていましたが、このセンサーを買った当初の目的は、手話Vチューバーを作ることでした。

手話で挨拶すらできない

バーチャルアバターを作れるソフトfecerigを使って、手話Vチューバーを作れるか試しました。

まずは挨拶をやろうと思います。

右手人差し指と、左手人差し指で、お辞儀をするように曲げて・・・

う・・・う〜ん。曲がらん。

左手（アバターの右手）の親指は立つし、右手の人差し指は曲がらないし。

ダメだ！断念しました。

手話Vチューバーを作りたかったのは

イベントや仕事で、稀にろう者と会うことがあるのですが・・・私は全然手話をできません。挨拶とかお礼とか、わずかな単語しか分かりません。

そんな感じなので、遠隔で手話通訳をしてくれるサービスがあったらいいなと思い、調査していました。

その時流行りだったVチューバーにたどり着き、アバターが手話をできないか知りたくなり、手軽で安価に実現できそうなfecerigとLeap Motionを購入して検証していました。

福祉としての手話通訳サービスだと、利用する場面が限定されそうなので、エンタメ寄りな手話サービス、手話Vtuverがいると良い気がします。

私から見ると、手話の使い手は、手の動きのパフォーマーに見えます。

Webカメラ＋Leap Motionで上半身キャプチャ

技術の話でです。

fecerigはWebカメラを使い、表情を3Dアバターに反映させることが出来ます。

さらにオプションでLeap Motionを接続すると、手も動かせるようになります。

体に何も付けないで、モーションキャプチャができる手軽さは素晴らしいと思います。

反面、精度の高いキャプチャは望んではいけないでしょう。

手話は難しいという結論になりました。

透明スクリーンに映そう

最後に余談ですが、透明スクリーン(ポリッドスクリーン)に映して遊んでみました。投影が中途半端で美しくはありません。

大雑把な動きだったらキャプチャできるので、身振り手振りで雰囲気を伝えることなら、Leap Motion＋fecerigで問題なさそうです。

CSSで動画を合成できる、mix-blend-modeを前回使ってみました。

何か応用できないかな・・・。

思い付きですが、文字上で動画を再生してみようと思います。

文字と動画のブレンド

さくら舞う動画と文字を、mix-blend-mode: screen;でブレンドしました。

テキストとして操作できるように

そのままだと、テキストとして扱えないので、動画には合わせてpointer-events: none;をかけます。

UI操作上は動画がない扱いになり、テキストとして操作可能になります。

動画が文字の形にトリムされるわけではありません。

そのためブレンドモードscreenを使う場合、背景が白という制約はあります。

他のブレンドモードも、配色の制限はでてくると思います。

非対応ブラウザへの対応

IE、Edgeは2019年9月現在mix-blend-modeが効かないので、動画を消してしまいます。

ITHatさんの記事で、CSSのブラウザ対応を賢く調べる方法が紹介されていたので参考にさせて頂きました。

今回のコード

overflow: hidden;で、文字の高さからはみ出す動画はカットしています。

文字上で動画再生の実用性は？

GIFアニメで似たようなことが実現できそうですが、今回はプレーンテキストを使っているので、ページ翻訳が効いたり、テキストをコピー出来たり、アクセシビリティは確保しやすいかと思います。

ただ、チラチラ動いている文字を読むと気が散るので、本当にアクセシビリティを気にするなら、そもそも動画をブレンドはしない方がよいのでは・・・と、考えてしまいます。

・・・とは言え、アクセシビリティだけじゃ話が進まない場面は多々あるので、何か新しい（？）デザインを要求されたときの、ネタになればと幸いです。

CSSで動画を合成できました。

カメラ映像とスクリーン映像のブレンドが、簡単にできることに驚きです。

CSS「mix-blend-mode」を使う

PhotoShopで使われる乗算やスクリーンなどのレイヤーブレンド効果を、CSSで実現することができます。

CSSの「mix-blend-mode」で、指定の画像にブレンド効果を適用できます。

ただ、IE、Edgeが未対応（2019年9月現在）のため、Webページに投入するのは難しいです。

現状ではユーザーが限定されるWebアプリなどで、使用場面があるかもしれません。

mix-blend-modeはVideo要素にも使える

Chromeだけで良いので、Webカメラの映像と動画素材を合成したい。そんな場面がありました。

試しにVideo要素にmix-blend-modeをかけてみたら、あっさりブレンドを実現できるではありませんか！

↓Webカメラの映像

↓合成したいスクリーン映像’（動画素材はこちらから拝借）

この２つをブレンドすると・・・

合成、ブレンドがブラウザで出来ちゃいます！

今回のコード

画面いっぱいのVideo要素を２つ重ねて、前面に「mix-blend-mode: screen;」をかけています。

黒背景の素材を合成するときは「screen」を指定すると良いでしょう。

mix-blend-mode合成動画の使いどころ

私はWebでARコンテンツを作るときに使いましたが、他にもWebRTCと組み合わせ、動画チャットをリアルタイムで映像素材と合成して配信しする・・・など、使えるかもしれません。

使う場面は限定的だと思いますが、不意に役立ちそうな技術です。

一昨日からLeap Motionの空中スワイプで遊んで来ました。

そして、春夏秋冬を楽しむコンテンツを作り、壁に投影してみました。

今度は、スマートグラスに映して見てみましょう。

※GIFアニメが重くなったので、かなり減色しています。

Leap Motion × MOVERIO

スマートグラスは、EPSONの「MOVERIO BT-30E」を使います。

Leap Motionと組み合わせれば、AR（拡張現実）を空中スワイプで操作できるようになります。

無駄に近未来的です。

スマートグラスで現実拡張

スマートグラスBT-30Eは、USB Type-C接続（HDMIも可）でPCの画面を目の前に表示できます。

PCのブラウザをフルスクリーンにして、前に作ったスライドショーWebアプリを開きます。

これをスマートグラスに映すと、黒い背景が透明になり、目の前にコンテンツが浮かんでいるような状態になります。

MOVEIO(BT-30E)は視野角がそこまで広くないので、「部屋に桜が舞ってる！」とはいかず、「目の前の透明ディスプレイに桜が舞ってる」という体感かと思います。

ただ、発色はとてもきれいです。

今回はMRのように現実とCGを融合するようなものではありませんが、それでもMOVEIOとLeap Motionの組み合わせは、やはり、無駄に近未来的です。

前回、Leap Motionで空中スワイプ操作のスライドショーを作りました。

ブラウザで動くWebアプリです。

ブラウザをフルスクリーンにして、プロジェクターで壁に投影すれば、ちょっとした不思議体験ができます。

春夏秋冬を感じよう

壁に花火が打ちあがりました。

夏の風物詩の花火。

床に置いたLeap Motionで、季節を変えられます。

春・・・さくら舞い散る

夏・・・打ち上げ花火

秋・・・色づく紅葉

冬・・・しんしんと降る雪

春夏秋冬を視覚的に感じる体験？です。

本格的にやるなら、温度連動とか匂いとかを組み合わせた方が良いかも・・・。

直感的で楽しい空中スワイプ

空中スワイプは、子供でも簡単に使いこなします。

最初にセンサーの位置を教えてあげる必要がありますが、一度見れば覚えられる簡単な操作です。

空中スワイプは直感的で楽しいUIかと思います。

Leap MotionのセンサーデータはJavaScriptで取得できることを、前回確認しました。

手の座標を取得できるので、手を払うスワイプ操作UIを作ってみます。

なんだか心地よい空中スワイプ

スライドショーをスワイプするアプリケーションを作ってみました。

自分の手が画面上に入り込み、さらにスワイプするときに、ちょっと重さを感じるような錯覚を受けます。

思ったより、おもしろい体験です。

Web基本構成で開発

leapjsのサンプル、css-visualizer.htmlをベースとして使いました。

HTML＋CSS＋JavaScriptというWebの基本構成で開発できるのが、うれしいところです。

手のひらのX座標は、

で、値を取れます。

今のフレームのhand.palmPosition[0]と、前のフレームのhand.palmPosition[0]を引き算すると、X方向の移動距離を求められます。

例：
今のフレーム　X座標:280
前のフレーム　X座標:300

X方向の移動 -20

もし移動距離が -10より小さかったら、スワイプと判断し、スライドイベントを発生させるようにしました。

値が小さくなる（マイナスになる）場合、右から左へスワイプしたことになります。

スライドも右から左へ動かします。

一方通行のスワイプ操作が良い

昔、反射式光電スイッチでジェスチャー操作を作ったとき、空中スワイプ操作の問題に直面しました。

手をスワイプして戻るときに、意図しない逆方向の入力が入ってしまいます。

手の速さ、手を戻すタイミング、戻す速さは人それぞれで、誰もが使いやすいUIとして成立させることは難しかったです。

それならもう、一方通行のスワイプにして、スライドショーを操作したほうが快適だろうという結論になりました。

しかし、他に方法があるかもしれません。

今後もより操作性の高いUIを追求してみます。

モーションキャプチャー系のアプリケーションを作るとき、周りの人はUnityを使っています。

私はWeb系なので、ブラウザ上でなんとかしたいところです。

JavaScriptが使える！

幸運なことに、Leap MotionはJavaScriptで開発可能です。

WebSocketで手のデータを送信しており、しかも、leapjsというライブラリまで用意されています。

leap-0.6.4.js

更新、５年前。

更新が止まっているけど動くかな・・・？

GitHubからダウンロードして、examplesフォルダの中のhtmlをブラウザで開けば、サンプルが実行します。

トラブル続出

サンプルを実行しても、センサーデータを受信できません。

Leap Motionコントロールパネルで、「Webアプリケーションを許可」にチェックをいれてないことが原因のようです。

私はこれでもうまくいかず、ブラウザのエラーログを見るとWebSocketを受信できていないトラブルが発生していました。

これはPC再起動で解決しました。

ジェスチャー入力はもうできない！？

認識するようになったので、一番必要なジェスチャー入力サンプル、gestures.htmlを起動します。

手を振りかざしたり、両手をバタバタさせてみたりしますが、何も反応ありません。

また、エラーが！

Legacy Application Detected
An application is requesting legacy APIs that are no longer available in this version of the Leap Motion software.

このバージョンのLeap Motionソフトウェアで使用できなくなった過去のAPIを要求しています。

ダメだ。5年の歳月は長すぎた。

2019年現在、JavaScriptで何ができる？

手や指の座標は取得できるようです。

なので、手をブラウザに描画したり、自分でジェスチャーを判定するコードを書けば、JavaScriptでWebアプリケーションを作れるかと思います。

以下、leapjsのサンプルで起動したものを、いくつか掲載します。

値だけのものは分かりにくいので、ビジュアライザーを合わせて掲載しています。

回転を取得 loop.html

rollで手のひらの角度を取得できます。

ちなみにHandは手のIDで、124回手を認識したということです。

3軸回転 roll-pitch-yaw.html

ロール、ピッチ、ヨーという言葉を知らなかったのですが、飛行機とかに使われる３軸の回転のことみたいです。

ラジコン飛行機や、ドローンを飛ばすときに使えるかもしれません。

three.jsで3D描画　threejs-bones.html

three.jsを使うことで、Unityみたいなことができるようになります。

three.jsを使えれば・・・。

CSSで3D描画　css-visualizer.html

手の描画だけなら、CSSだけで3D表現をした方が、カスタマイズしやすいかと思います。

Webデザイナー寄りの人ほど、このサンプルを重宝するでしょう。

JSONデータでジェスチャーを判定する

手や指の位置はJSONで取得されています。

「右から左に手を払った」といったジェスチャーであれば、比較的簡単に実装できるでしょう。

実際にジェスチャー操作を実装したので、また記事を投稿します。

ジェスチャー操作センサー「Leap Motion」が、どれくらいの精度か確認したいと思います。

デフォルトのソフト、診断ビジュアライザーを使ってテストします。

何も先入観のない子供にテストをしてもらいました。

グー・チョキ・パーの動きは前回の確認済みなので、ちょっと難易度が高そうな動きも見ていきたいと思います。

指で円を描く

人差し指でくるくる円を描きます。

これは安定して認識しています。

人差し指の認識は、特に安定しているような気がします。

手と手を握る

次は、絶望的に難しいと思われる、手と手を握った状態にしてみます。

なんとすごい！最後に右手の認識が外れましたが、十分機能しています。

重なった手を、どうやって手と認識しているんだろう？

前フレームとの差異を比較して、間接の位置を予測し続けているのか？・・・もはや私にはわかりません。

たまに手がどこかへ行く

精度は良いとはいえ、たまに自分の手が、どこかへ行っちゃいます。

あれー、戻ってこーい！

こうなると、意図しないジェスチャーが入力される可能性はあります。

実用化に必要な精度は？

家や街中でジェスチャー入力をする機会は、いまだにありません。

タッチーセンサーのように実用化し、普及するのは、ほぼ100%の精度になってからかもしれません。

ジェスチャーがタッチより優れているのは、衛生面（触らなくていい）と、操作機器から少し離れた距離でも入力できるところでしょうか。

まだ先の印象ですが、キッチンとかで使われるようになるかもしれません。

手を動きを認識するLeap Motionを、半年前くらいに購入しました。

モーションキャプチャー精度が高く驚きます。しかし、日常的に利用するまでには至りませんでした。

Leap Motionとは？

手のジェスチャーでPC操作ができるようになる、近未来インターフェースです。

2012年に発売されているので、むしろ過去のインターフェースかもしれません。

外見はおしゃれ。

サイズも小型で、横8cm×縦3cm×高さ1cmくらいです。

診断ビジュアライザーで驚く

Leap MotionをPCにUSB接続し、診断ビジュアライザーを起動すると、すぐに動作確認ができます。

自分の手の３Dボーンが映し出されました。

なんだこの近未来的な体験は！？（今さらですが）

じゃんけんだってできます。

目の前の３Dボーンに自分の手の感覚が移る錯覚・・・ラバーハンド錯覚のようです。

それくらい、モーションキャプチャー精度が非常に高く、素晴らしい製品に感じました。

モーションキャプチャーの進化

ジェスチャー操作には昔から興味がありました。

子供でも直感的に操作できますし、ユニバーサルなUIを実現できる可能性を感じていました。

しかし、かなり前に日本科学未来館で、操作性の悪いジェスチャーUIを体験してから、実用的ではないのかな・・・と思い、遠のいていました。

まさかここまで進化していたとは！

しかし、使いどころは難しい

Leap Motionでより精度の高いキャプチャーができるようになったものの、日常的にジェスチャー操作は使っていない状態です。

音声操作の方が楽で、Alexaの方が使われています。

・・・Leap Motionで何が出来るか？

いくつか試したので、引き続き記事を投稿します。