スマホで作るNintendo Labo
Nintendo Laboが発売されましたね。Toy-Conガレージという自分で作品を作れるモードもあって、すでにTwitterにはいろいろな作品が投稿されています。ちょうどゴールデンウィークなので、工作を楽しんでいる人も多いでしょう。今回はそんなNintendo Laboを、スマホを使って自作しようという話です。
スマホのカメラとブラウザで実現
液晶画面や加速度センサなどSwitchの機能の多くはスマホにも搭載されていますが、Nintendo Laboで特徴的に使われているIRカメラに関してはスマホには標準搭載されていないので、普通のカメラで代替します。今回は段ボール箱の側面に穴を開けて、そこから差し込む光の有無をカメラで認識するという方法を採りました*1。
ソフトウェアはブラウザアプリとして作りました。要はWebページです。iOSやAndroidのアプリを作る知識や環境がなくても、JavaScript/HTML/CSSの知識があればWebベースで開発できます。iPhoneではiOS11からブラウザでカメラアクセスができるようになったので、ブラウザ上でリアルタイムのカメラ画像処理ができます。
一つだけ注意があって、スマホでカメラアクセスをするWebページはセキュリティの都合でhttps(SSL対応)でなければいけないようです。つまりSSL対応のWebサーバが必要なのですが、持っていない場合はGitHubでWebページを作るのが手っ取り早いです。
ブラウザアプリ
スマホでこちらのWebページにアクセスしてください。「カメラへのアクセスを求めています」と表示されたら「許可」を選んでください。
カメラが向いている方向が明るければ、OFFと表示されますが…
しくみは単純で、カメラで取得した画像の中から明るい画素の数を数えて、それが一定未満だったらON、そうでなければOFFと表示しています。この辺はいろいろ工夫のし甲斐がありますね。光や影の位置・形・大きさが認識できれば、より複雑なこともできるでしょう。加速度センサやジャイロセンサを使って傾きや振動を入力とするのも良いですね。Toy-Conガレージよろしくビジュアルプログラミング環境を作ってみてもいいかなと考えています。
段ボールラボのソースコードはこちらからどうぞ。
段ボール箱に組み込む
Amazonの段ボール箱を使って工作しました。カッター、ハサミ、両面テープでちょちょいのちょい。
箱の全面にiPhoneをセットするガイドを付けました。
セットするとこんな感じ。充電ケーブルを挿したままセットできるような構造にしておくとバッテリ切れの心配がありません。
カメラ用の穴がこんな感じで開いています。カメラで箱の中の変化を捉えます。
カメラの反対側には採光用の窓があります。穴が空いてるとちょっとかっこ悪いかな?と思ったので、紙でふさぎました。ある程度光が入ってないとセンシングに支障をきたすので、コピー用紙のような薄い紙が良いです。
内側から見た様子。上のほうにある穴はキーを挿し込むための穴です。
スマホのカメラから見るとこんな風に見えます。これは箱のフタを閉める前。
これがキーです。もう少しカギらしくデザインするとより良いですが、とりあえずこれで。
こんな感じでキーを挿し込むと、キー本体が採光用の窓から差し込む光を遮るしかけになっています。
実際に動かしている様子がこちら。
おわりに
ごく簡単な方法でスマホ版Nintendo Laboを作ってみましたが、スマホ版でも体験可能な共通のエッセンスと、製品として作り込まれたNintendo Labo特有のエッセンスの両方がわかって実に面白いです。
段ボールを使わなくてもスマホのカメラを手で隠したり、床に置いたりするだけでもON/OFFの映像は切り替えることはできて、これはこれでなんとなく面白いのですが、キーを挿すのに合わせて画面が切り換わることと比べると、明らかに後者の方が楽しいです。単純なのに何度もやってしまいます。段ボールがズズーッとこすれた後でパッと絵が変わる感触がなんか気持ちいいんですね。アナログな質感とデジタルな質感が噛み合うところが面白さの一因だと思います。
また今回は「スマホのカメラでどうやってセンシングしよう?」と考えましたが、ハードウェアの制約の中でアイデアをひねり出すことの面白さはToy-Conガレージにも共通するところですね。
ゼロから段ボール工作をやってみると、Nintendo Laboがいかに丁寧に作り込まれているかがわかります。CGによる説明書もさることながら、ハサミやノリを使わずに失敗せずに作れるペーパークラフト設計は見事です。このあたりの話はNintendo Laboの開発者インタビューにも記載があるのでぜひチェックしてみてください。