Magic Leap で手洗いアプリを作った話
先日新型コロナwithARハッカソンにエンジニアとして参加して、開発期間の2日間で以下のような Magic Leap アプリ作成しました。「今、コロナ社会に対してAR業界として何ができるのか」をテーマにしたハッカソンで、No More Corona プロジェクト（以降はNMCとする）の協力の下、オンラインで開催されました。結果的に優勝することができまして、ここでは Magic Leap での開発を中心に振り返ってみようと思います。
事前準備
ハッカソンでは使用デバイスの制限が設けられていなかったので、Magic Leap で開発することは自分の中ではほぼ確定でした。その上でスマホARとの違いを出すために、両手がフリーになるというARグラスの特徴を活かせそうな手洗いをテーマにしようと考えていました。ただ自分が正しい知識を持っているかは不安だったので、運営が事前に共有していた国連の資料1ページ目にあった「好きな曲で覚える手洗い」インフォグラフィックを参考にして、当日 NMC の方に相談することにしました。
アイディアブラッシュアップ
相談の結果、手順は「好きな曲で覚える手洗い」のままで問題なく、曲としては “Happy birthday to you” を2回連続で流すことになりました。曲は NMC からの提案で、Centers for Diesease Control and Prevention (CDC) が When and How to Wash Your Hands にて例示していたからだそうです。専門的な知識を持つ方とのブラッシュアップを通し、コンテンツの方向性に自信が持てるようになり、かなり開発のモチベーションが上がりました。
基本的なアプリの流れは、
- スタート画面表示と配置
- 各ステップを順次表示
- 終了画面の表示
として、ここに適切な機能と効果音、UI表示を追加していくことにしました。その際意識したのは、自発的な行動変容を促すために、ただ手順を示すのではなく、楽しく分かりやすくそれらの手順の意図を伝えることでした。
開発環境
- Unity 2019.3.5f1
- Magic Leap Unity API 0.24.1
- Magic Leap Toolkit (MLTK)
開発
アプリの流れで、それぞれ何を表示してどのように遷移するのかを説明していきます。今回はハンドトラッキング機能周辺を使いやすくした MLTK の HandInput コンポーネントを多用していますが、このコンポーネントの詳細解説は後日また別のエントリーで書きたいと思います。
1. スタート画面表示と配置
AR グラスでは、スマートフォンのように画面固定の情報表示（display-locked）をしてしまうと、圧迫感を与えうっとうしく感じさせてしまいます。そのため現実世界の特定座標に固定（world-locked）するか、何かしらのオブジェクト — 例えば自分の体、手、画像、机など — に追従するように表示（object-locked）することが推奨されています。今回は手洗いがテーマにしているで、手洗い場に固定して表示することにしました。ただ現状の Magic Leap には手洗い場を認識する機能はないため、特定のハンドジェスチャを認識したらその瞬間の手の位置に固定表示するようにしました。ちなみに認識できるジェスチャは以下の8つです。
しかし表示される画像の向きまで固定しまうと、自分が動いたときに見にくくなる角度が出てくるので、BillBoard という機能をつけることで常にユーザの方を向くようにしました。この機能は標準の Magic Leap Unity API には入っておらず、MLTK にある Billboard.cs を GameObject にアタッチすることで簡単に実現できます。
スタート画面固定後は、特定のハンドジェスチャを認識して、次に進みます。
2. 各ステップを順次表示
各ステップでは、まず洗い方の説明画像と歌詞と残り時間（残り時間のアセットは @y_homm が作ってくれました、感謝）が表示されます。ここですぐに対応する曲を流し始めるのではなく、手を Open Hand ジェスチャに戻したことを確認したのちに流します。ステップが進んですぐに歌が流れてしまうと、説明画像を確認する余裕がなくなり洗い方が雑になってしまうと考えたからです。
Open Hand ジェスチャが確認出来たら、重点的に洗ってほしい場所赤点で、指先だったら指先に、掌だったら掌に強調表示します。掌の場合のみ掌全体を洗ってほしいことが伝わりやすいように、赤点を大きく表示しました。
手には常にハンドオクルージョン処理を施します。Magic Leap には手のメッシュを生成する機能があるため、手に重畳させることで手が説明画像によって隠されることを防ぐことができます。開発段階ではハンドオクルージョンは機能としてあったらかっこいいかな～、くらいの軽い気持ちで追加していたのですが、この手洗いアプリを試す段階になってかなり重要であることに気づきました。比較としてオクルージョンが無効化されている場合も載せますが、Magic Leap は表示されるコンテンツの輝度が高いため、自分の手を見ながら洗いたいのに画像が邪魔でうまくできているかの確認が非常にしづらかったです。
逆に、最初はかっこいいかなと思って追加していた手のスケルトン表示ですが、いざ試してみるとスケルトンから何も意図を感じることはできないし、むしろチラチラ変化してほかに伝えたい部分（赤点など）の邪魔になってしまうことに気づき、取り除きました。情報の取捨選択って大事。
歌詞分の曲が終わると自動で次のステップに進み、最後のステップが終わると終了画面に遷移します。
3. 終了画面の表示
終了画面は本来であれば特に無くてもよい部分だったのですが、最初の目標として手洗いをただの作業として捉えてほしくはなかったので、気分よく終えてもらうために追加しました。
ファンファーレやよくできましたスタンプなどありますが、個人的に一番最後に追加したキラキラのエフェクトによって、手がきれいになったことを視覚的に出せたのは良かったなと思ってます。ちなみに無料アセットの DL Fantasy RPG Effects を利用させてもらいました。自分は普段あまりエフェクトなどを拘ることが少ないのですが、少しの工夫で伝えたいことをより明確にできるのなら積極的にやっていくべきだと感じました。
まとめと今後
まず良かったこととして、NMC さんとの共同作業を通して、適切な知識をインプットした上で、それを自信をもって外部に発信できたことが挙げられます。ずっと HandInput を使って何か作りたいなーと思いつつも、知識面での不安があり躊躇っていたところがあったので、非常にいい機会になりました。また本文中でも触れましたが、見せたい情報の取捨選択の大切さに改めて気づけたことです。いつも機能を作るだけ作って満足しがちなのですが、一つ一つの UI に意図を持たせ余分を省くことで、機能を改善するよりも大きな効果をもたらすことがあるなと感じました。
一方で UX 面はもっと改善の余地があることは明白です。ジェスチャを使って画面配置やステップ間の遷移を行いましたが、そうである必要はないし、自然とそのような動きが発想として出てくるわけでもないので、初見の方は確実にうまく使えないと思います笑。なので今後もしアプリを Magic Leap のストアにリリースすることがあれば、UX 面でのアップデートを視野に入れて取り組みたいです。
企画をしてくださった withAR ハッカソン運営と、NMC さんに感謝です。
最後に
この記事の執筆中に、COVID-19 の影響を受け MagicLeap が大型のレイオフを発表しました。リモートワークが注目され、AR/VR の価値が認識されつつある中での残念な決定となってしまいました。ただこれは MagicLeap に限った話ではなく、この状況が続けば間違いなく身の回りでも同様のことが起こります。少しでも早い終息のために、他人事とはせずに、個人レベルで日々の行動を見つめ直すことが重要になります。この制作物が、そのきっかけの一つとなれたら幸いです。
