【超簡単】スマホARアプリの仕様整理法｜初めてのARデモ開発で躓かないために
今回はUnityやARアプリの開発が初めての方でもARのデモアプリをより開発しやすくする手法をご紹介します。
弊社MESONではARアプリ開発を学びながら手伝ってくれるインターン生を採用しており、彼らに初めてARデモ開発を着手してもらう際にもこの方法でまず仕様を整理してもらっています。
この手法はあくまでUnityやARが初心者の方が規模の小さなARデモアプリを作ることを想定したものです。Apple Storeにアプリをリリースするようなアプリの場合には用途として向かない可能性があることにご注意ください。
対象読者
・Unityを使ってスマホARアプリを開発し始めた開発者
・Unity, ARKit (ARCore)をWebや本などをみてある程度理解した方
・これからオリジナルのARデモや小規模アプリを作ろうとしている方
オリジナルデモを作る時に「何から着手していいかわからなくなる」インターン生のための仕様整理法
弊社ではUnityやARの教科書を読み終えたインターン生にはオリジナルデモの開発をしてもらっています。
弊社の場合には他のエンジニアも参加して、みんなで「こんなアプリ作ったら面白いんじゃない？」というアイデアを出しあいました。
そしてそこで出たアイデアの中からインターン生自身が「これが作りたい！」と思ったものを選んでもらい、作り始めてもらいます。
しかしここでインターン生はあることに躓いてしまいます。
インターン生曰く、「何から着手していいのかわからなくなる」のだそうです。
これまで教科書を元に写経やちょっとコードを変えることでUnityやARKitの各要素については理解できているのですが、デモアプリを組み立てる時にそれらの繋がりを整理し、何を実装すればよいのかがわからなくなるのです。
UnityでARアプリを作るために思考を整理する方法
そこで今回はそういった一通りの教科書を終えた開発者がオリジナルのARデモアプリを作る際にどのように情報を整理して、設計できるようにしているかについてご紹介します。
手順を大きく分けると
1. 必要となるuGUI要素を挙げる
2. 3D空間に登場するオブジェクトを挙げる
3. ストーリーとロジックを列挙する
の３つのステップになります。
ちなみにこの３ステップは一度完了したら戻ってはいけないというものではなく、前のステップで不足しているものがあるとわかったら何回でも戻ってもよく、あくまでも目安としてのステップになります。
そして各ステップ毎にA4の画用紙などのシートに絵を描いていきながら整理します。このシートは各ステップごとに「UI」「3D Objects」「Story & Logic」という名前をつけています。
今回はPlacenote SDKを使って空間上にメモが残せるデモを作った時のものを参考にその手順を確認してみたいと思います。
またブログのボリュームが大きくなりすぎないように、今回はメモを書いて空間に配置するところまでの部分で一旦区切った状態でご紹介します。
必要となるuGUI要素を挙げる
スマホARアプリの場合、ユーザーはほとんどの場合、uGUIでインタラクションを行います。
uGUIの要素を書いていく時にはスマホの枠を手書きで良いので書きながら書いていくとイメージしやすいと思います。（今回の例では画像にしてあります）
まずアプリを起動した状態ではメモを設置するNewボタンのみが必要になります。
その後メモの内容を入力する画面ではInputFieldが必要になるはずです。
そしてメモを入力し終わったらそのメモが画面に記載されており、そのメモを置くためのPutボタンが必要になると考えられます。
メモを一度空間に置いたらまた最初の画面に戻って、新しくメモを残すためのNewボタンが押せる画面になれば良いと考えられます。
このように必要なUIパーツを列挙してみます。
上記は時系列で並べられていますが、もし時系列で考えるのが難しければまずは必要になりそうな画面のとりあえず並べて、後々のステップで必要なものがわかったら追記しても大丈夫です。
3D空間に登場するオブジェクトを挙げる
次に3D空間内の登場オブジェクトを整理します。
まずUnityでARアプリを作る場合には必ずMain Cameraが設置されており、これがスマホカメラと同期して動きます。
そして今回は空間にメモが設置されるので、メモを空間上に描きます。
今回のデモの場合、登場するオブジェクトはメモのみでしたが、内容によってはより多くのオブジェクトが登場する場合があるかもしれません。
ストーリーとロジックを列挙する
上記のステップでデモの外見についてはイメージが固まってきました。次にデモの内部についても整理しましょう。
まずはストーリーから整理します。ユーザーがどのような操作、体験をこのデモの中で行うのかについて書き出してみます。
そしてこの時ストーリーの各要素の間はできるだけ余白を設けながら書いてください。
今回の場合には大きく四つの流れが挙げられます。もしイメージがつかなくなった場合には先ほどのステップで整理したUIと3D Objectsのシートをみながら思い描いてみてください。
そしてストーリーを書き出し終えたら今度はその要素の間にそのストーリーが発生した場合に必要なロジックを付け加えていきます。
例えば1番目でユーザーがNewボタンを押した際には次の画面に遷移するためにNewボタンのActiveをFalseにして、ユーザーが入力できるようにInputFieldをTrueにしなくてはなりません。
2番目でユーザーが入力をしている際には特に必要なロジックはありませんが、3番目で入力を終えた際にはInputFieldをFalseにして今度はPutボタンを出してあげます。
またメモを新しく追加してあげるために、Prefabからインスタンス化してあげる必要があります。
そして最後にはPutを押してメモを空間に配置するためにカメラへの追従をオフにしてあげる必要があります。
このように整理すると実装すべき処理がなんなのかが見えてくるようになると思います。
3D Objectsシートに戻って追記
これは必須なステップではありませんが、先ほどのストーリーとロジックを整理した際に3D Objectsシートの方に不足していそうな情報が出てきたので、こちらを追記します。
まず生成されたメモは初期状態ではカメラに追従している必要があります。
そしてPutボタンが押された時にその場に固定されます。
またそもそもこのメモオブジェクトはどこから生成されるのかというとPrefabからです。なので、Prefab化しなくてはならないことがわかります。
それではこのPrefabはどのようなもので構成されているのでしょうか？メモは平面なのでPlaneで代用できそうです。
また中の文字はTextMeshが良いでしょう。
このように一度Story&Logicまで整理した後に前のステップで不足の情報が発見できたら戻ってどんどん書き足していきましょう。
まとめ
上記のように整理していくことで「何から着手すれば良いかわからない」という状態からは抜け出せるようになるのではないかと思います。
UIと3D ObjectsのシートをみながらUnityのGUIでの実装、そしてStory & LogicをみながらC#のコードの実装をしていくとスムーズかと思います。
ただこの方法はあくまで最近自分と弊社に所属するエンジニアと一緒に開発した手法なので、まだまだ荒削りな点などもあると思います。
もし「うちではこういう風にしているよ」とか「こういう風にやったらもっと良くなりそう」などのご意見があればぜひ教えていただければ嬉しいです！
また、MESONでは一緒にARサービスを作っていきたいエンジニア、インターンも募集中です！先月からジョインしてくれた二人のインターン生も弊社で開発を手伝ってくれながらメキメキと力をつけています！
興味がある方がいましたら、会社のホームページか私のTwitter宛てにお気軽ご連絡ください。
この記事が気に入ったらサポートをしてみませんか？