「これ部屋に置いたらどんな感じ？」を秒速で可視化する「ARで見る」を作った
文字で書かれた数量（大きさ、体積など）を一瞬でARで可視化する便利アプリです。先週作ったアプリなので僕のTwitterを見てる人は今更感あるかもしれないですが、作るにあたって考えたこととかを少し整理させてください。
使い方はビデオを見てもらうのが一番早いと思います：
装置とか家電調べてる時「128x145x285(mm)ってどんぐらいだ？」ってよくなるので、ブラウザとかから2クリックでAR表示できるアプリ作った。文字列選択して「共有」＞「ARで見る」を選択するだけ。めっちゃ便利。 https://t.co/E9TJMxitpj pic.twitter.com/ZHA8E3a1Hy
— Ken Kawamoto（ガリのほう） (@kenkawakenkenke) January 13, 2019
ブラウザ（など）で寸法を選択し、「共有」から「ARで見る」を選択すれば、すぐにARで可視化されます。 例えば買う予定の装置の置き場所を考えたりするのにとても便利です。
なんでこんなの作ったの？
友人と装置の話をしていて、寸法を見ながら「こんぐらいかな？」と手を広げているのを見て「昭和だな〜」と思ったのがきっかけでした。世の中にはARを使った巻き尺アプリは死ぬほどあるのにも関わらず僕が使おうしなかったのは、既存アプリのUXが（僕の）日常と乖離しているからだと考えました。寸法を覚えて、アプリを開いて、数字を入力して、床をタップして、ようやくARで表示とか絶対やりたくないじゃないですか。
「ウェブページで寸法を見ている状態から最短でARまで持ってくる」ところを突き詰めたアプリがあれば、ちゃんと日常で使えるものになるんじゃないかと思い、「テキスト選択→共有」で開けるARアプリを開発しました。
何に使うの？
上記例の「大きさ」（高さ・幅・長さ）は家具や装置を部屋に置いた時のイメージを掴むのに使ったり：
洗濯機がドアを通るか試したり：
なにかと便利です。
表記方法はかなり広く対応しています。アプリが理解できないテキストを見つけたら是非河本にご一報を。
また、大きさに限らずあらゆる「これどれぐらいだろう？」を答えることを目指しています。例えば速度：
「ARで見る」1.1をリリースしました。速度の表示にも対応してます。「ナマケモノの秒速3cmって、どれぐらいだ？」が分かります。 pic.twitter.com/dNsbpTjEwo
— Ken Kawamoto（ガリのほう） (@kenkawakenkenke) January 13, 2019
ナマケモノの最高速度が秒速3cmと言われてもイメージしにくいですが、実際にボールが動いているのを見ると素直に「おせぇ！」と実感できます。
「4km/h」「時速5キロ」「12ノット」「マッハ2.4」などの表記に対応しています。
体積：
「ARで見る」1.4.0リリース：体積（リットル/cc等）と円（直径/半径）の入力に対応しました。これで「人間の血液4.5Lってどんぐらい？」とか「2.4mの下水道管って実際どれぐらいの圧迫感だろう？」などと思った時にすぐに可視化できます。 pic.twitter.com/j0x0Sim8Zp
— Ken Kawamoto（ガリのほう） (@kenkawakenkenke) January 20, 2019
ペットボトルでイメージしやすい少量の体積には使う必要性が薄いかもしれないですが、「四千立方メートルのプールの水を無駄にした」みたいなニュースを実感するのには非常に便利だと感じています。
「4.6L」「50cc」「2合」などの体積の表記が理解できます。
さらに、基本的な物理量以外にも拡張できます。例えば「金額」：
「ARで見る」のゴールはあらゆる「これどれぐらいだろう？」に答えることなので、バージョン1.3.2では日本円の可視化に対応しました。「2億円受け取るってどれぐらい大変なんだろう？」とか「5000万円入るボストンバッグないかな」みたいな時に使えます。https://t.co/E9TJMxitpj pic.twitter.com/zF75K4a5jK
— Ken Kawamoto（ガリのほう） (@kenkawakenkenke) January 20, 2019
日本円の表記を入力すれば、 １万円札の束で置いたらどう見えるかすぐに可視化できます。これで部屋に5000兆円を置く遊びとかもできるわけです。現金強奪事件とかの被害額を札束として見てみると「これ持って逃げるの大変だったろうな」といった新しい感想が芽生えます。
こだわったところ
このアプリの肝は
- 他のアプリで寸法を見て『これどんぐらいだろ』と考えてから最短でAR表示すること
- あらゆるアプリから汎用的に使えること
の２つです。そのために（プロダクト）デザイン的にこだわった箇所をあげていきます：
- 「テキストを選択して共有」に特化する。
ブラウザやOSの基本機能として搭載されない限りは、寸法を汎用的にARに持っていくための最短ルートは選択→共有です（多分）。そのため、アプリの機能をすべてこのエントリーポイントに特化させ、他の入力方法は敢えてサポートしないことにしました。
「選択→共有エントリーポイントをメインに持ちつつ、普通にホーム画面からアプリを開いて数字を入力させるパスも用意しときゃいいじゃん」というコメントも分かるんですが、そうすると必ず欲が出てメインのエントリーポイントがおろそかになると思ってます。チームで開発して強いPMがついていればいざしらず、僕一人では弱いのでこういう縛りを設けました。暇になったらそっちも考えるかもしれないですが。ていうかそのパスは他の巻き尺アプリで十分だよね。
- 修正要らず。
『これどんぐらいだろ』からARで開くまでの間に数字を入力させたり微調整が必要だったりしたら最悪のUXです。そのためそもそも修正手段を無くし、実装としてはなるべく沢山の寸法表記のパターンを一発で理解できるように強いテキストパーサーを作りました。このために国内外のECサイトを巡って寸法表記をかき集めて実装しました。
大きさの寸法は、
次元の記法がバラバラだったり：「高さx幅=20x40」 vs「高さ20 幅40」
単位の記法がバラバラだったり：「高さ(mm) x 幅(mm)=20x40」vs「20mmx40mm」
結構ややこしいんです。
- すぐAR
最短でAR表示できるように、シーン内のモデルの挙動にこだわりました。
一般的なARアプリはだいたい「起動してから床を認識するのを待って、床をタップしてようやくモデルが出現」みたいな流れに則りますが、これではあまりに遅すぎると考えました。そこで、アプリが開いてから環境を認識するのを待たずにすぐモデルをカメラ前に浮かばせて、床が認識できた時点で「ドサッ」と落ちてくるような挙動にしました。これにより、寸法を「共有」してから1~2秒程度でモデルが見れます。
次のステップ
- テキストを選択→共有の基本UXを崩さずにもっと色んな日常的なニーズに応えられる方法を考えています。例えば大きさのmin-maxが表記されていた場合だけはスライダーを出してサイズ調整できるようにするとか。ページの他の情報からテキスチャを貼るとか。履歴を残して複数オブジェクトを置いていけるようにするとか。
- とは言いつつ、情報の修正が必要な場合があることもわかってるので（特に高さ/幅/長さの入れ替え）、このアプリに馴染む修正方法を考えてます。
- あらゆる「これどんぐらいだろう？」に応えられるように、表現出来る量を増やしていきたいです。例えば「５万人の群衆」に囲まれるのってどんな感じだろうとか。400luxってどれぐらいの光だっけ、とか。知らない言葉を辞書で引くのと同じように、イメージできない数量を「ARで見る」のが当たり前になるように普及させてみたいです。
さいごに
お昼食べながらふと考えたアプリが思いがけなくバズって驚きました。想像ですが「家具の寸法を数字で入力したらARで表示できるよ」というアプリだったらここまで話題にならなかったと思います。このアプリの新規性と魅力はARではなく、「選択→共有するだけで部屋の中で見れる」という体験です。実際に使う状況を思い浮かべて、間のあらゆる障壁を取り除いたUXを作るの、めっちゃ大事。
付録：対応している表記の例
大きさ
- 寸法(幅W×高さH×奥行D)(mm) 95×150×235
- 幅640×奥行600×高さ1039mm
- 70mm×124mm×364mm （←軸の指定のない場合 幅x高さx奥行きとして解釈）
- 70x124x364（←単位の指定のない場合mmとして解釈）
- 高さ123m
- 半径42.5mm（←円として表示）
- 直径10cm
容積
- 1m^3
- 4000立方メートル
- 123L
- 1カップ
速度
- 時速72キロメートル
- 72km/h
- 5ノット
- マッハ3
金額
- ¥4800万
- 3000兆円
- 24 million dollars
自然現象
- 風速12m
見えない空間データを可視化する「AR Sensor」を作った
（今回から河本の実験室の記事は、こっちに書くことにしました。そのうち過去記事も移転します。）
"AR Sensor"というアプリを作りました。
データをARで投影することで、普通は見えない日常の中の様々な空間データを見えるようにするツールです。
例えばこんなふうに、Wifiルーターから出てくる電波の立体的な強弱を見ることができます（緑は電波が強いところ、赤は電波が弱いところ）：
なんでこんなの作ったの？
もともとは「週一ぐらいでどこからともなく流れてくる排水口の臭いのもとを突き止めたい」という家庭的な悩みを解決するためにこのツールを作りました。臭いの空間分布を可視化できれば、臭いの元がすぐに見つけられるんじゃないかと。
使っているうちにWifiや磁場などのスマホで測れる様々なデータに応用すると便利＋教育的であることに気づいて、汎用的なアプリとしてリリースしました。
なにが測れるの？
バージョン1.0で表示可能なのは「Wifi電波強度」「Bluetooth LE電波強度」「磁場」「気圧」「LTE（携帯）電波強度」の５種類です。それぞれの面白さを紹介していきます。
Wifi電波強度
スマホが繋がっているWifiルーターの電波強度を測定し、空間にプロットしていきます。
例えば我が家では２階にルーターが置いてあるため、階段の中程でようやく良い信号（緑）になることが見えます。ルーター配置を最適化したり、ホテルのロビーでWifiが捕まる場所を探すのに使いましょう。
Twitterで少し勘違いしている人がいたので明確にしておくと、AR Sensorは「スマホが通った場所のセンサデータを随時記録して表示するツール」なので、上の動画を見るとわかるように通った場所のWifi電波強度しかわかりません。部屋全体を「見」たければ、部屋全体にスマホを動かす必要があります。頑張ってください。
余談ですが、アプリの現バージョンでは測定した点が「いい感じに」緑から赤が分布するように勝手に調整しています。このモードをOFFにしたい場合は設定画面から「色を動的に更新」をOFFにして、手動で最小値（赤）〜最大値（緑）を設定しましょう。
Bluetooth LE電波強度
Wifiと同じように、Bluetooth LEの電波強度（RSSI）を可視化します。
例えばこれは中心のスマホのBluetooth電波強度を測定した結果です。真ん中にアルミホイルの壁を設けてあるせいで、右側は左に比べて電波強度がガクっと下がる（赤くなる）のが見えますね。このように、「シミュレーションでは見たことあるけど実際どうなんだろう」が可視化できるのがこのツールの面白さです。
磁場
スマホには磁気センサー（ようはコンパス）が入っています。地図アプリなどで方角を示すのに使われています。これをAR Sensorで可視化すると：
このように、北極に向かって粒子が流れていきます。（地面に向かっているのは、東京では伏角が49°、つまり地面の先に北極があるからです。）
また磁石の周りの磁場も見てみましょう：
頑張れば教科書で見たことのあるような磁力線が立体的に見ることができます。
２つの磁石を並べると、一つの磁石からもう一つの磁石に向かって磁力線が繋がっているのが見えますね。
これまでは砂鉄とかを使って二次元的にしか見れなかった磁場を、スマホだけで三次元的に見ることができるようになりました。
気圧センサ
あんま面白くないので割愛します。
LTE電波強度
加筆 (2019/1/6)
携帯の電波強度です。携帯の繋がりにくい居酒屋でベストな席を探すのにご利用ください。
ガスセンサ＋Arduino＋シリアル通信
AndroidとArduinoを繋げるのが物凄く簡単だって知ってましたか？こういうホストケーブルで繋げば普通にSerial通信でデータのやり取りができます。
例えばこんなふうにガスセンサをAR Sensorとくっつければ、お湯を沸かしている時のガス分布を見ることができます。
これを使えば、スマホに搭載されているセンサ以外にもなんでも組み合わせられるということです。何か測ったら面白いもののアイディアがあったら是非教えてください。
ちなみに今回は面倒だったのでAR Sensorのリリース版にはシリアル通信機能は含めていません。そのうち作ります。
実装の話
今回初めてARCoreとSceneformを使ってアプリを作ってリリースしました。これからAR開発をしてみようと思っている人向けに、開発の流れをメモしておきます。
なんでSceneform？
Sceneformは面倒なOpenGLに触れなくても3DアプリがかけるJavaの3Dフレームワークです。僕はUnityのような現代的な開発環境がよく分からない古いエンジニアなので、Javaだけでゴリゴリ開発できるSceneformが好適でした。
学ぶ
Sceneformが提供するサンプルプロジェクトがとても簡単なので、特に迷わないと思います。
hellosceneformで基本的なセットアップに必要なもの（ArFragment, AnchorNodeなど）の取扱いを学びましょう。
solarsystemで変形やアニメーションを学びましょう。完全に余談ですが、天王星の向きがおかしいバグを見つけたのでPRを出してみました。練習に使うなら気が狂わないようにこっちの修正版を使いましょう。
次のステップ
次にこんな機能作ります。Twitterで「これがほしい！」といってくれれば作るかもです。
・ シリアル通信のデータを読み込む機能をリリース版にもいれる
・Cloud Anchorでデータの共有ができるようにする。例えば教室で先生が磁石の周りでグリグリしているのを生徒たちが自分のデバイスで見れたら素敵じゃない？
さいごに
「位置情報とセンサデータを3Dで取得して表示するツール」というのは１０年ぐらい前からずっと作りたかったものなんですが、今までは位置情報の取得が面倒で躊躇っていました。「環境に設置した複数のカメラで位置を測る」とか「QRコードを部屋中に貼る」とか「Kinectで右手の位置を測る」とか、やればできるけど実装＋環境構築コストが少し大きい手段しかなかったからです。AR Core（に搭載されたSLAM）が優秀なおかげで面倒な位置情報処理のコードを一行も書かずにシステム構築でき、センシングから位置取得から表示までスマホ一台で完結できたことが一番の驚きでした。是非皆さん（特に今回Pixelを買った人）には手元のスマホの力を感じてもらいたいです。
追記1 (2019/1/6)：用語がよくわからなかったので「磁力」と書いてました。正しくは「磁場」ですね。直しました。
