Hatena::ブログ(Diary)

Imaginable Reality

2018-04-29

スマホで作るNintendo Labo

Nintendo Laboが発売されましたね。Toy-Conガレージという自分で作品を作れるモードもあって、すでにTwitterにはいろいろな作品が投稿されています。ちょうどゴールデンウィークなので、工作を楽しんでいる人も多いでしょう。今回はそんなNintendo Laboを、スマホを使って自作しようという話です。


f:id:kougaku-navi:20180429140411j:image:w600

名付けて「段ボールラボ」


スマホのカメラとブラウザで実現

液晶画面や加速度センサなどSwitchの機能の多くはスマホにも搭載されていますが、Nintendo Laboで特徴的に使われているIRカメラに関してはスマホには標準搭載されていないので、普通のカメラで代替します。今回は段ボール箱の側面に穴を開けて、そこから差し込む光の有無をカメラで認識するという方法を採りました*1

ソフトウェアはブラウザアプリとして作りました。要はWebページです。iOSやAndroidのアプリを作る知識や環境がなくても、JavaScript/HTML/CSSの知識があればWebベースで開発できます。iPhoneではiOS11からブラウザでカメラアクセスができるようになったので、ブラウザ上でリアルタイムのカメラ画像処理ができます。

一つだけ注意があって、スマホでカメラアクセスをするWebページはセキュリティの都合でhttps(SSL対応)でなければいけないようです。つまりSSL対応のWebサーバが必要なのですが、持っていない場合はGitHubでWebページを作るのが手っ取り早いです。


ブラウザアプリ

スマホでこちらのWebページにアクセスしてください。「カメラへのアクセスを求めています」と表示されたら「許可」を選んでください。

f:id:kougaku-navi:20180429171400j:image:w450

カメラが向いている方向が明るければ、OFFと表示されますが…


f:id:kougaku-navi:20180429171403j:image:w450

カメラを手で覆って暗くするとONと表示されます。


しくみは単純で、カメラで取得した画像の中から明るい画素の数を数えて、それが一定未満だったらON、そうでなければOFFと表示しています。この辺はいろいろ工夫のし甲斐がありますね。光や影の位置・形・大きさが認識できれば、より複雑なこともできるでしょう。加速度センサやジャイロセンサを使って傾きや振動を入力とするのも良いですね。Toy-Conガレージよろしくビジュアルプログラミング環境を作ってみてもいいかなと考えています。


段ボールラボのソースコードはこちらからどうぞ。


段ボール箱に組み込む

Amazonの段ボール箱を使って工作しました。カッター、ハサミ、両面テープでちょちょいのちょい。

f:id:kougaku-navi:20180429140515j:image:w450

箱の全面にiPhoneをセットするガイドを付けました。


f:id:kougaku-navi:20180429140544j:image:w450

セットするとこんな感じ。充電ケーブルを挿したままセットできるような構造にしておくとバッテリ切れの心配がありません。


f:id:kougaku-navi:20180429140454j:image:w450

カメラ用の穴がこんな感じで開いています。カメラで箱の中の変化を捉えます。


f:id:kougaku-navi:20180429140345j:image:w450

カメラの反対側には採光用の窓があります。穴が空いてるとちょっとかっこ悪いかな?と思ったので、紙でふさぎました。ある程度光が入ってないとセンシングに支障をきたすので、コピー用紙のような薄い紙が良いです。


f:id:kougaku-navi:20180429140444j:image:w450

内側から見た様子。上のほうにある穴はキーを挿し込むための穴です。


f:id:kougaku-navi:20180430004524j:image:w450

スマホのカメラから見るとこんな風に見えます。これは箱のフタを閉める前。


f:id:kougaku-navi:20180430004556j:image:w450

そして箱のフタを閉めると、こんな風に見えます。


f:id:kougaku-navi:20180430004723j:image:w450

これがキーです。もう少しカギらしくデザインするとより良いですが、とりあえずこれで。


f:id:kougaku-navi:20180429140429j:image:w450

こんな感じでキーを挿し込むと、キー本体が採光用の窓から差し込む光を遮るしかけになっています。


f:id:kougaku-navi:20180429140408j:image:w450

キーを挿す前はOFFの文字が表示されていますが…


f:id:kougaku-navi:20180429140411j:image:w450

キーを挿し込むとONになります。


D

実際に動かしている様子がこちら。


おわりに

ごく簡単な方法でスマホ版Nintendo Laboを作ってみましたが、スマホ版でも体験可能な共通のエッセンスと、製品として作り込まれたNintendo Labo特有のエッセンスの両方がわかって実に面白いです。

段ボールを使わなくてもスマホのカメラを手で隠したり、床に置いたりするだけでもON/OFFの映像は切り替えることはできて、これはこれでなんとなく面白いのですが、キーを挿すのに合わせて画面が切り換わることと比べると、明らかに後者の方が楽しいです。単純なのに何度もやってしまいます。段ボールがズズーッとこすれた後でパッと絵が変わる感触がなんか気持ちいいんですね。アナログな質感とデジタルな質感が噛み合うところが面白さの一因だと思います。

また今回は「スマホのカメラでどうやってセンシングしよう?」と考えましたが、ハードウェアの制約の中でアイデアをひねり出すことの面白さはToy-Conガレージにも共通するところですね。

ゼロから段ボール工作をやってみると、Nintendo Laboがいかに丁寧に作り込まれているかがわかります。CGによる説明書もさることながら、ハサミやノリを使わずに失敗せずに作れるペーパークラフト設計は見事です。このあたりの話はNintendo Laboの開発者インタビューにも記載があるのでぜひチェックしてみてください。


参考ページ

*1:LEDライトと組み合わせて再帰性反射材の反射を検出するという手もありますが、今回はブラウザベースで開発した都合でLEDライトを制御できなかったので、自然光を使った方法になりました。これはこれでエコです。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/kougaku-navi/20180429/p1