Hatena::ブログ(Diary)

shi3zの長文日記 RSSフィード Twitter

2016-05-24

VRに没入してる様子をわかりやすく実況中継するシステムを作った 06:42

https://i.gyazo.com/a388ab80fa8a0fe8eb9fad49ee10ad98.gif

 さて、何度か「電脳空間カウボーイズ(http://ch.nicovideo.jp/akiba-cyberspacecowboys)」でVRゲームを生中継したりしたんだけど、基本的にイマイチなにをしてるのか上手く伝わらないという問題があった。


 どうすべきか・・・。

 とりあえず勢いで昨日の生放送は「簡単すぎるVRプログラミング」ということになったが、肝心のVR空間の表現がちょいわかりづらいのだ。

[バーチャルリアリティ特集2] 仮想空間を創ろう!UnityでVRプログラミング! - 2016/05/23 19:00開始 - ニコニコ生放送

http://live.nicovideo.jp/gate/lv264108949


 そこで思いついたのが、Mixed Realityを使った表現だ。

D


 実際、htc Viveの公式でもそのような表現を使ってる。


 原理は簡単で、VR空間にバーチャルカメラを持ち込んで現実のカメラの位置とシンクロさせる。

 まあできるだろう。時刻は午後1時。放送は午後7時から。間に合うか。


 漠然と「Unityってグリーンバックのクロマキー合成ってできるのかなあ」と、20世紀プログラマーである僕はまずWebカメラのキャプチャ方法から調べた。


 結論から言うと、それはWebCameraTextureというこれ以上ないくらい簡単なクラスで実現可能だということがわかったが、もっと衝撃的だったのは、「U Chromakey」というWebカメラからの画像をクロマキー合成するアセットが$25くらいで売ってたことだ。


 Viveのコントローラをひとつ犠牲にしてWebカメラをくっつける。着脱が簡単なように養生テープで貼り付けるだけにした。

https://i.gyazo.com/b6086460336c4fa900223551f1957399.png


 これをUnity内のカメラに取り付け(Add Component)、カメラをViveのコントローラの子要素にしてしまえば、カメラがViveコントローラに従って動いて、さらに背景をクロマキー合成する。


 プログラムそのものは例によって一瞬でできてしまった。Unity恐るべし。Unity歴2日でこんなややこしいプログラムが書けてしまうとは。もうUnityをやらないという選択肢が思いつかない。UE4もいいのかもしれないがさすがにここまで簡単なのかどうか不安になる。


 問題はプログラムではなく、グリーンバックである。

 VRiderを展開する子会社のUEIソリューションズ社長の水野くんがグリーンバック用に買っておいた緑色の紙を本棚に貼ってまずは実験。

https://i.gyazo.com/7d04f87b60762acb9396d9e9ca5dca4d.png


 これでやってみると

https://i.gyazo.com/0921e4b8420bdcfe56d655ad7d20fcde.png


 抜けた!簡単すぎる!!


 あとは物量の問題。Webカメラの標準ケーブルでは短すぎるので5メートルのUSB延長ケーブルと電源付きUSBハブを買いに行ってもらって、ネットでグリーンバック用の幕を探すと、在庫があるらしいので買いに行ってもらう。


https://i.gyazo.com/838ca1e2d5cfedd4243771b052fd6c04.png


 そしてできました。MRスタジオ。

 放送開始まであと15分というところ。


 プログラミングよりもグリーンバックの準備に時間がかかってしまった。


https://i.gyazo.com/87202f00ecefebe0a2d8760279324f6a.gif


 調整する時間がなくてちょいズレてるけど、まあ何をしているのかはだいたいわかるでしょう。

 

https://i.gyazo.com/bad1c48b7b72c12850590f389d82b511.gif


 実際にやってる様はこんな感じ。

 


 いやあ、本当にプログラミングは簡単になっていくなあ。

 秋葉原プログラミング教室でもUnity講座を作ろうっと

2016-05-23

UnityでのVRプログラミングが簡単すぎる 05:42

 昨日は半日使ってUnityでVR会議室というのを作ってみた。 

https://i.gyazo.com/00cccae51cab99cc580b4646af658036.gif

https://i.gyazo.com/b5a3520302a7cdc53eae828dfc36cf0b.gif


 こんな感じで、空間上に好きなものを配置したり、線でつないだりできる。


 もとは一人でブレインストーミングをするために作ったのだが、なかなか楽しい。

 どうして作ったのか、どんなことができるのかは以下の記事を参照のこと

会議室を VR空間に変えると何が起きるか - WirelessWire News(ワイヤレスワイヤーニュース)

https://wirelesswire.jp/2016/05/53249/


 しかし記事中でも触れたが、とにかく久しぶりに触ったUnityが驚くほど簡単で驚くしかなかった。

 特に驚いたのは、本来とっても面倒くさそうなhtc Viveのヘッドマウントディスプレイの位置とか、コントローラーの位置とかを扱うというところ。


 面倒そうだなあと思って覚悟してたんだけど、実はSteamVRというプラグイン(アセット)をダウンロードしてインポートして、CameraRigという部品をドラッグ&ドロップすればそれで全て完了するという、「プログラマーのしごとってなくなるんじゃないの?」と心配になるほど簡単なのだ。この時点でコードを全く書かなくてもVR空間プログラミング完了。どうなってるんだってばよ。


 さらに、コントローラーの空間的位置、姿勢なんぞはちょっとしたコードを書いて、gameObject.transform.positionとgameObject.transform.rotationで取得可能。簡単すぎだろ。化けて出るぞ。なにかが。


 さらに当たり判定をとりたければコライダーとリジッドボディ(剛体)を設定すれば、あとはOnCollisionEnterというコールバックが呼び出されるので、そこにやりたいことを書いておけばOK。



 これで思ったんだけど、もはやUnityはプログラミングとは言えないと言っても過言ではない。

 というかこれならビジュアル言語で十分ではないか。


 と思ったら、既にUnity用のビジュアル言語としてBehaviour Machine というのがあるらしい。

https://i.gyazo.com/36b99c8ed6e07e38ee2242280f0bdfb7.png


 こういうので、もう十分だろう。


 もちろん、我々古き良き時代を謳歌したレガシーキーボードプログラマーはC#を使えばよろしい。

 なんとなく安心感があるし。


 ただ、もはや確実にプログラミングは簡単すぎて見えないレベルまでやってきているということ。それだけは間違いない。


 もはやVRプログラミングに障害となるのは、単に作業空間を確保するということであり、さすがにKAFじゃないから自宅にhtc Viveを設置するというわけにもいかない。


 自宅でやろうとすれば、まあちょいと、もう一部屋多い家に引っ越ししてVR専用ルームを作るくらいの覚悟がないと非現実的である。


 KAFのように現実よりVRが大事という人間はそうはいないだろうから、日本でhtc Viveを思い切り体験できる人は限られるが、そこまでやる価値はあると断言できる。


 しばらくVR空間に身を置いてると、感覚がだんだん変わってくる。

 むしろどちらかというと、こっちが現実で、HMDをとった方はなにか別の世界、というような気さえする。


 カラフルな空間よりも、ソリッドな空間、たとえば真っ暗な空間に光の線が浮かび上がるような場所だと、それがより顕著に感じられる。


 VR空間では、これまで頭のなかにだけ描いていた立体的な空間に言葉や記号や構造が生まれるという体験を、文字通り可視化できる。


 さらにいえば、自分の頭のなかだけにある構造を、他の人間にも体験させることができる。


 これはちょっとした驚きでもあるし、なにより、それまで以上に自分の思っていることを相手に伝える手段になる気がした。


 VR空間は文字通り新世代の表現を実現する強力なツールと言えるだろう。


 ほんとうに惜しいのは、これを自宅で体験するのが難しいことだ。

 普段なら、買え買えというんだけど、Viveを自宅に設置するのは本当に難しいし、僕自身も自宅に置いてない。置けないのだ。


 障害物があるとちゃんと機能しないしね。



 しかしむかしはおそろしく高価だったこの手の環境がたった12万円で手に入る。


 PCは手前味噌だがDEEPstation DK-1のBasic Editionを使った。ディープラーニングとVRの両方ができるスグレモノである。


 合計すると30万円ちょい。

 しかし、30万円で中古車を買うよりも抜群の体験が得られる。


 まだソフトは少ないが、今の段階ではソフトを遊ぶための環境というよりも、VR空間というこれまで存在しなかった新しい世界を体験する価値創造のために買うべきだ。つまり今これを準備すべきはクリエイターやプログラマーである。


 Oculusで散々遊んで「こんなもんかなー」と思っていた部分はあったんだけど、もはやぜんぜん違う。違いすぎてその違いに愕然とする。


 htc Viveだけが本物のVR空間を体験する環境であって、Oculusはなんていうか、遊園地のライドものみたいな感じだ。それはそれで面白さは否定しないが、モノとしてはゴーカートと乗用車くらいの違いがある。ゴーカートは決められたコースしか走れないが、乗用車は道路ならどこでも走れる。


 うーむ。楽しい。

 楽しすぎる。

https://i.gyazo.com/426bb5ced4131d123a7f704b00279d36.png

 ちなみにhtc ViveによるVR開発には、こういう台とかが不可欠だ。

 いちいち被ったり脱いだりしてられないのである。


 昨日はHMDをかぶりすぎて左目の下のところが炎症を起こしてしまった。


 そしてVRプログラミングは身体を動かすので、なんだか身体にいいのではないかという錯覚にさえ陥る。たぶん気のせいだが。


 暑い日は会社に引きこもるに限るねえ

2016-05-17

東洋経済がなんかおかしい!どこへ行くんだ日本経済! 09:31

https://i.gyazo.com/a399c508b4f0c57c79ec934d95732506.png


 東洋経済がもはや経済誌なのか日経パソコンなのかわからなくなっている。

 プログラミング大特集。しかも50ページに及ぶ。

https://i.gyazo.com/fc07f96f501dd1003c4012b6e5de7dd6.png

 中身も、MOONBlock、Excel、Scratch、Swift、Javaと、日経ソフトウェアかよ!という充実ぶり。よく作ったなあこんな本。


 まつもとゆきひろさんにN高校まで出てくるし。どういうことだってばよ。


 僕は東洋経済のインタビューだったんで、まあいつものように「最速の仕事術」みたいな、フツーのビジネスマンでもゆるーくプログラミングの知識を仕事に応用できる話をしてくれいという話だと思っていた。せいぜい8ページくらいの特集かなと。


 ところがフタを開けたらガチ特集。

 そしてMOONBlockが4ページ、最新の最速仕事術も4ページ特集

https://i.gyazo.com/1a2a76afd3e120e09a4a093b8092409c.png

 しかし仕事術の新しいネタ考えるのって大変なんだよ。野口悠紀雄センセじゃないんだから。


 というか無意識にやってることが多くて、無意識にあるものを意識上に持ってくるのが難しいというかなんというか。


 そしてこういう雑誌も、むかしは「掲載誌コンビニで買ってきて」と頼まなきゃいけなかったのに、今はKindleで買ってすぐに読めてしまう。すごい世の中だなあ


 しかし東洋経済がこんなにプログラミングを特集していていいのか?

 経済はいいのか経済は。


 経済ニュースにネタがないのか、プログラミングが新しい経済価値を持つと信じられ始めてるのか。

 とにかくよくわからないが簡単に言うと軽くプログラミングパニックが起きてる状態。



 そしてなんかこういう記事が掲載される度に、なんかだんだん自分がプログラマー芸人みたいになってないか心配になる。そろそろ仕事を選ぶべきか。このまま突き進むべきか。まあしかしS-IVBもいよいよ忙しくなってきたしなあ


 ちなみにMOONBlockをもっとやってみたい人は最新刊もどうぞ


2016-05-16

enchantMOONを使った先生向けのワークショップをやりました 06:28

https://i.gyazo.com/0ffe2642d843c69c524341cbe71753a1.png


 なんだろう。まだ言いたいことがまとまってない。のでブログにはざっと感想だけを書こうと思う。

 が、なんていうか、武者震いがした。


 今回のワークショップは、いつものように自分で自分の教育理論に基づいて教えるのではなく、enchantMOONを使ったワークショップをどのように運営するかというノウハウを、全国から集まったプログラミング教室の先生方に教えて、実際に学校や地域でenchantMOONを活用していただく、というものでした。


 これは僕が2011年から続ける人類総プログラマー化計画の第一段階である一億総プログラマー国家という目標を実現するためには不可欠なことで、そして作ること以外は何も出来ない端末だからこそワークショップのような限られた場面では高い効果を発揮するのだ、ということを伝えたかったのです。


 enchantMOONで先生向けのワークショップをやったのは初めてで、今現在、新潟県長岡市では既にenchantMOONを使った定期的なワークショップを市と現地の有志によって始めてるそうです。また、品川女子学院では中学1年生全員に一人一台のenchantMOONを配布し、授業で活用していただいてるそうです。


 さらに活用の幅を広げるため、今回は教育NPO法人CANVASさんの協力を経て、さまざまな教育の現場にenchantMOONをご活用いただくためのワークショップでした。


 でも本当を言うと少し心配で、なぜかというと子どもたちは基本的に飲み込みが早いので、教材がかなり酷くてもそれなりに楽しめてしまうのですが、大人はそういうごまかしが聞きませんし、固定観念に縛られているので飲み込みが遅いというか、短時間に説明して短時間に作品にするということができるか自信がありませんでした。しかし、それを一度は体験してもらわないと、ワークショップを運営することもできないので、できるかどうかはともかく、やってみることにしたのです。


 まず前半は僕が考えるプログラミングと教育について。


 人工知能のこと、手書きのこと、そしてプログラミングのこと。

 

 人類全てがプログラミングできるようになるためには、機械の側から人間に歩み寄るアプローチ、すなわちAIによる人間の意向の認知や、UX/UIによるユーザ体験の向上、新しいプログラミング言語によるプログラミングというハードルそのものを下げるといった方向性と、一方、人間にはたらきかけて機械をより理解するためのアプローチ、すなわち教育というものが重要であること。


 また、そもそもいまの学校教育システムではプログラミングに必要な数学的知識や物理学的知識を見につけるのが遅すぎること。


 そこで僕がやっている秋葉原プログラミング教室では、割り算と一緒に素数の概念を教えてしまう。そのとき配列を教えて、それからエラトステネスのふるいを作る。


 このやり方で教えると、6歳児でもエラトステネスのふるいが作れるようになる。


 次に、シューティングゲームの作り方を教える。なぜなら、今の子供も一番最初に作りたいのはシューティングゲームだからだ。これは僕が子供の頃からなぜか変わっていない。


 シューティングゲームを作るのはワクワクする。

 そのために必要な座標系の知識は一瞬で覚える。


 次に、敵の動きを考えさせる。

 紙に敵の動きを書いてみて、それをどうやったら数式で表現できるか考えてみる。


 このとき子供の脳では本能的に微積分の計算が行われている。

 フレーム毎にいくつ動かせばいいか、それを考えるのが微分であり、このプログラムではどのような軌跡が描かれるのか創造するのが積分というわけだ。


 つぎに、もっと滑らかな動きをさせたい、という要望が出てくる。必ず出てくる。

 その場合に、三角関数を教えてしまう。


 「sinっていう命令を使うとジグザグに動くよ」


 そうすると子供は、三角関数がなんなのか、どういう原理にもとづいているのかはひとまず置いておいて、とにかく便利な道具として三角関数を使う。これでいい。


 なぜなら、道具として実用できない数学など、単なる寝言に過ぎないからだ。

 いったいどれだけの日本人が学校で三角関数を習い、習った知識を自分の能力として、「道具として」数学を使いこなせているのかというと甚だ疑問である。それに比べたら、たいていの人よりも子供は三角関数を道具として使いこなすことができる。


 一度道具として使いこなすことを知っていれば、いずれ学校の授業で三角関数が出てきても、本質的にはより深い理解をすることができる。


 正直に言うと、僕は小学生の頃から三角関数を使ってはいたが、その意味をきちんと理解したのは高校に入ってからだ。しかし、プログラミングをしていなかったら、今になっても分かってなかったに違いない。本質的に理解していなくてもテストの点数はとれてしまうのだから。


 同じ理由でベクトルも教えてしまう。ベクトルがわからないと敵キャラも弾の動きも表現できないからだ。


 自分が道具として使えない知識は寝言である。というのが僕の基本的な考え方だ。


 むしろこういうことを体験させ、教えることによって子供は学校で学ぶあらゆる知識を道具としてどのように使えるかという判断基準を持つことになる。実利主義すぎて、一時的に学校の成績は落ちるかもしれないが、生きる力が身につくだろう。


 プログラミング教育を、プログラミングだけを他のあらゆる分野と切り離して教えるのはナンセンスだ。

 それでは何も身につかないし、なにも教えられない。


 プログラミングを教えるというのは、考え方を教えるというのに等しい。もしくは知識の道具化、でもいい。

 道具として使えない知識は役に立たない、というのがプログラミングの基本的な考え方であるはずだ。


 そしてプログラミング言語は徹底的に考える道具、または考えを表明する道具として進化してきた。


 あらゆる天才たちが生涯を掛けて様々なプログラミング言語やプログラミング手法を開発し、提案し、それをまた無数の天才たちが検証し、研究し、実用し、研鑽し、切磋琢磨してピカピカに磨き上げてきた。この流れは、21世紀に入っても衰えることを知らず、今もまたどこかで誰かが新しい言語を考案し、実用性を高めているだろう。


 プログラミングは最強の表現手段であり、人類の叡智を直接使うことができるもっとも優れた道具である。


 云々


 まあそんな話を最初にしたわけです。

 それからenchantMOONの話。


 とつぜん、プログラミングそのものじゃないかのようなところから始めます。

 お絵かきして、Webページを検索して、写真を撮って、ハイパーリンクで他のページに繋いで・・・


 「まずこの段階でハッカソンをやりましょう。テーマは「青春」。10分で作ってみてください」


 正直、これでなにが出てくるのか不安だった。

 年齢層もバラバラ。明らかに引退してる世代の人もいる。


 ところが10分後、その不安は払拭された。

https://i.gyazo.com/6b76ceceb762560a617322438e4a1bf6.png


 いろいろな人が色々なやり方で、「青春」を表現してくれたのだ。

 わずか10分、しかも初めて触る端末で、お絵かきとハイパーリンクと検索しかない端末で、である。


 それから、

 

 「実は既にみなさんはenchantMOONのプログラムを書いていたのです」


 と種明かしをした。


 「enchantMOONでは、Webページを切り取ったり、写真を撮ったり、他のページへのハイパーリンクを作ったりすると、その実体はシールというプログラムになります」


 その証拠に、貼り付けたシールを再び選択して、Hackというボタンを押すとプログラムが現れる。

 一通り、enchantMOONにおけるMOONBlockのプログラミングを教えると、僕は続けた。


 「さあ次は20分のチーム戦です。それぞれのチームで相談して、作品を作ってください。テーマは"祭り"にしましょう」


 実際のところ、ハッカソンのチーム戦で20分は極端に少ない。

 しかし時間が差し迫っていたので20分にするしかなかった。

 そしてワークショップとして、チーム戦の雰囲気を知っておいて欲しかった。


 方針はチームによってバラバラだった。

 分業を選択するチームと、個人個人で追求して最後に合作にするチームに別れた。


 時間は無情に過ぎ、発表の時間となった。

https://i.gyazo.com/ba112b9d5c1eaf4c569c6cdd372005a0.png


 最初のチームは1月から12月まで、それぞれの月の祭りを表現しようとした。

 プログラムで鯉のぼりを出し、それが動くという演出もあったが、時間不足で5月、10月、11月、12月しか発表できるクオリティに達しなかった。


https://i.gyazo.com/d0edc45d558357cee33f6ff631f8a440.png


 次に発表したチームは「祭り」を人混みで再現した。お神輿をタップすると無数に表示されたクマがワーーーッと殺到する。

 これは「タップしたところに向かって移動」を上手く利用したハックだった。

 「盆踊り」をタップすると、今度はそちらにワーッと移動する。

 見た目に楽しく、これはなかなかよくできてると思わされた。


 ところが最後のチームは様子が違った。突然、enchantMOONを横一列に並べ始めたのである。


https://i.gyazo.com/60186e085015fd836f6d17e5e5c07209.png


 祭りの参道と出店をそれぞれが1つずつ担当して、しかもデータを共有する手段がなかったため、同じ検索キーワードで検索し、全員が同じキャラクターを使うということで統一感を出した。


 それぞれの夜店ではスーパーボールすくいや金魚すくい、かき氷屋やお化け屋敷、射的などが再現され、最後に境内で参拝するという見事なストーリーを形成していた。本当に見事だった。


 ハッカソンの優勝者はハッカソン参加者自身によって選ばれるべきであるという、僕のポリシーがある。

 が、今回は3チームのチーム戦なので、荒れる可能性があるなあと思いながら、こう言った。


 「はい、じゃあみんな机に伏せてください」


 「いいと思ったチームに手を上げてください」


 結果を見た僕は驚いた。こんなことはめったに起きないからだ。

 たとえ考えるまでもないようなことだったとしても。


 僕はこの感動を伝えたくて、本来ならあり得ないセリフを言った。


 「手を上げたまま、目を開けてください」


 全員が手を挙げたまま、目を開き、周囲を見て、そして喜びと賞賛の気持ちがひとつになった。

 満場一致で、最後に発表したチームの勝ちだったのである。


 だいたいこの手の審査をすると、一人や二人は変わった見解の人がいるのだが、今回ばかりは完勝だった。


 そうして気持よくワークショップを終えることができた。

 実に楽しい週末だった。




https://i.gyazo.com/d0edc45d558357cee33f6ff631f8a440.png

 

2016-05-15

山ちゃんの謎コラボ 10:03

 ホンダのF1への挑戦物語は胸が熱くなった。

 そして僕も世界的視野でものごとを考えてみたい、と思った。


 世界的視野に立って物事を考えようとしたとき、どうするべきか。

 まず、酒を呑むのである。

 ではどこで飲むか。


 世界的視野を持つに相応しい店、それはもちろん、「世界の山ちゃん」にほかならない。


 なぜか?


 世界の山ちゃんは、言わずと知れた手羽先の店である。

 ところが世界の山ちゃんで食えるのは手羽先だけではない。


 天むす、きしめん、味噌カツ・・・名古屋の名物料理が揃っている。


 名物に美味いものなしとはいうが、名古屋だけは例外といえよう。

 天むす、きしめん、味噌カツ、そして山本屋総本家の味噌煮込みうどん、鳥ぎんの手羽先。あつた蓬莱軒のひつまぶし・・・数々の名料理に彩られている。台湾ラーメンの味仙も有名らしい。残念ながら行ったことがない。


 そして山ちゃんは、単に手羽先を出すだけでなく、自ら「幻の手羽先」と名付けた、コショウたっぷりの手羽先を引っさげて、きしめん、味噌カツ、天むす、そして台湾ラーメン(の具だけ)など、貪欲に名古屋名物を集めているのである。


 そしてついに海外進出も果たし、名実ともに世界の山ちゃんになっているのだ。あれ、この話前に書いた気がするな。


https://i.gyazo.com/8ec80898222610b905349c93683632f6.png


 これが山ちゃんの主砲、「幻の手羽先」である。「激辛で」と頼むとこんな感じで原型を留めないほどコショウが振られる。


 さすがに身体がおかしくなりそうなのでコショウをはたき落として食べる。これが美味い。


 そして最近のお気に入りは台湾モツ鍋である。何度ゴトーと二人で食ったか知れない。

 美味いのだ。とにかく。


 ふと視線を落とすと見慣れないメニューが・・・ 

https://i.gyazo.com/054fe90d3ab61b929c08df05380f684c.png


 なんだこりゃ。

 ハリウッド映画と山ちゃんのコラボ。


 すごい。さすが世界の山ちゃん。世界的視野に立つとこういうことになるのか。


 スペシャルメニューの豚足爆弾というのがいかにも思考停止しているように見えなくもないが、燦然と輝く名優、モーガン・フリーマンが山ちゃんに彩りを加えている。


 「エンド・オブ・ホワイトハウス」は北朝鮮のテロリストにホワイトハウスが乗っ取られてしまうという洒落にならないアクション映画だが、なかなかおもしろい映画だった。


 その続編が出るらしい。


 どれちょっと予告編でも見てみるか。

D


 なんじゃこりゃ、無茶苦茶おもしろそうじゃん。

 主人公と大統領が乗ったまま大統領機が爆発してんじゃん。どうなっちゃってんの!?この先どうなんの!?

 気になる!見たい!


 こうして山ちゃんの世界的策略にハマってついブログなど書いてしまう俺ガイル。


 今日もまた山ちゃんに世界を感じた。

 がんばろう(村上総裁風)