Aeroで手軽にARする話
🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅
この記事は Misoca+弥生 Advent Calendar 2019 の21日目エントリーです。
🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅🎄🎅
こんにちは、弥生のヨコヤマです。
最近入社したばかりのぺーぺーUI/UXデザイナーです。
弥生はデザイナーが少なく、開発本部社員全体の1%強です。
ガチャでいうと★5が出るくらいの確率です。SSRです。そのため、初めて日本に来たパンダのような感じであたたかく見守られています。やさしい世界。
ところでみなさんはAR好きですか？
日本語では拡張現実と呼ばれているアレです。私は好きです。ARもVRも好きです。
サンタさん今年のクリスマスはOculusください。
ARはたくさんの可能性を秘めています。AppleやMicrosoft、Googleと有名企業もこぞって取り組んでいるところを見るに、その勢いは弥増しているように思われます。
購入前の家具を部屋に置いた時のイメージを把握できたり、晴れた空にクジラを泳がせてみたり、もしかしたら、思い出せないあの人の名前を頭上に表示してくれたりなんてことも可能になるかもしれません。
空を泳ぐクジラ見た～い🐳
そんなARコンテンツを自分の手でで作れたら最高だと思いませんか？思います。
「でも、ARってプログラムとか3Dモデルが必要だったり難しいんでしょ？」とお思いのそこのアナタ。かつての私もそうでした。しかし、Aeroなら気楽に手軽にARが楽しめるんです！すごい！ありがとう！👏
Aeroってなんすか
今年のAdobe MAXで発表され話題を集めました。
以前よりAdobeがARに注力していることは知られていましたが、満を持してお披露目されたというわけですね。そんなAeroさんですが、何がステキなのか。その理由を以下に記します。
Aeroさんのここがすごい
無料
無料です。「Creative Cloud契約してるから実質無料」とかではなく、混じりっけなしのピュアな無料です（'19/12/21現在）。iOS 13.1以降にアップデートされているデバイスをお持ちの方なら、誰でも利用することができます。いきなり入口が絞られた感じがしますが、iPhoneシェア率が異常に高い日本人にはそこまで高くないハードルではないでしょうか。多分。
コーディングスキルが必要ない
これこそが人々をARコンテンツ制作から遠ざけていた一番のハードルではないでしょうか？Aeroでは一切のプログラミングが不要です。アプリ画面を数回タップするだけであっという間にARコンテンツができあがります。
デザインスキルも必要ない
逆にデザインスキルがなくて、「自分で素材を作れないよ（＞＜）」という方も大丈夫。Aeroには結構な数の「スターターアセット」が用意されていて、すべてロイヤリティフリーです。使いたいモデルを選んで、あとはアプリ画面を数回タップするだけであっという間にARコンテンツができあがります。
アセットたくさん！ここで紹介してるのはほんの一部です。アニメーション付きのアセットもあります。
サルでもわかるUI
わざわざ天丼してまでお伝えした通り、何も分からなくても数回タップすればとりあえず作品ができてしまうくらい直感的なUIです。何しろシンプル。サーフェス設定後の初期画面では、重要そうなボタンは１つしか見当たりません。「とりあえずそれを押す」以外の答えを導き出せるならむしろ教えてほしい。おサルさんでも使えますね。
シンプル～～！青いボタン1個しかないもん。とりあえず押すよね！🐵
チュートリアルが手厚い
残念ながら使い方が分からなかったみなさん、ご安心ください。手厚いチュートリアルがあります。アセットの配置からスタートして、一般的な制作手順に乗っ取って進んでいくので、全体の流れも掴みやすいです。長すぎず短すぎず、しかしながら要点を抑えたコメントも随時出てくるので、きっと迷いも少なく次へ進めることでしょう。
私はサル以下だったので大変お世話になりました。
お前もARにしてやろうか！
さて、Aeroの概要を把握したところで実際にARしてみましょう。 AeroではDimensionをはじめとして、Adobe製品のファイルを多くサポートしています（もちろんヨソで作った子も読み込めます）。ARなので派手に3Dモデルを使いたい気持ちもありますが、10年以上モデリングなんてしてないし時間もないので、今回はPhotoshopで作ったネコチャンのデータを使いたいと思います。2Dなのでペラペラです。良く言うとナニッパラッパーです。
Aero用のpsdファイルを書き出す
ネコチャンこと「nekochan.psd」は1枚のレイヤーで構成されているファイルです。
まずPCでPhotoshopからAeroで読み込めるファイル形式にします。
［ファイル］ > ［書き出し］ > ［Aeroに書き出し］
これだけです。これをモバイルデバイスのAeroで読み込むことになるので、Creative Cloudファイルにしておくと後々ラクチンです（その他の方法でもモチロン読み込めます）。
※［Aeroに書き出し］は最新のデスクトップ版Photoshop（バージョン21以降）のみに搭載されている機能です。iPad版ではできないのでご注意ください。
Aeroに読み込む
舞台をモバイルデバイスに移し、Aeroに今作ったpsdファイルを読み込ませます。Aeroで［新規作成］し、サーフェスを設定後左下の青丸ボタンをタップ、［Creative Cloud］から「nekochan.psd」を選択します。
無事ネコチャンが世界に顕現しました！1本指操作でX軸・Z軸の移動、2本指操作で拡大縮小・回転、3本指操作でY軸の移動ができます。配置場所を決めたら、アセットをタップして終了です。
インタラクティブ機能をつける
最後にインタラクティブ機能を追加しましょう。アセットをタップして、出てきた下部メニューの［動作］をタップします。そこからまずトリガーを選択します。トリガーには3種類あって、それぞれ開始時、タップ時、指定した距離に侵入した時にアクションが開始します。
アクションにはたくさん種類があるのですが、今回はトリガー：タップ、アクション：バウンスを選択します。いい感じのバウンスになるように各種数値を調整。納得できる動きになったら、もう一度アセットをタップして完了です。
完成
ショボいですがとりあえず完成です。上部メニュー右のプレビューをタップすると、実際の動作を確認したり、画面を撮影したりできます。初めてなのでファイルの書き出しを失敗したりもしましたが、それを含めても30分くらいでここまでたどり着けました。う～ん、簡単！
タップするとネコチャンがピョンピョンします。活きのいい猫だ。
実は複数レイヤー読み込める
ちなみにpsdファイルですが、複数レイヤーを保持したままAeroに読み込むことができ、読み込んだレイヤーを等間隔に配置することができます。
これだけだとピンとこないと思うので早速やってみましょう。ここではネコザイルのデータを使います。ネコザイルこと「nekoxile.psd」は以下の5枚のレイヤーで構成されています。
［Aeroに書き出し］をクリックすると、レイヤーをフラット化するか保持するかのダイアログが出てくるので［保持］を選択します。これでpsdファイルの準備は完了です。次にAeroに読み込みます。以下が読み込んだ直後の「nekoxile.psd」です。
レイヤーが多層的に配置されているのが分かります。しかし、このままではギュウギュウに詰まっていて、ネコザイル達が息苦しそうです。なので、ここでアセットをタップして、複数レイヤー情報を持つアセットのみに表示されるメニュー［レイヤー］をタップします。X軸・Y軸・Z軸それぞれの調整スライダーが表示されるので、Z軸を広げてやります。
すると……
程よく距離感ができて、いい感じのﾌｧﾝﾌｧﾝｳｨｰﾋｯﾀｽﾃｰｯｽﾃｰになりましたね。ちなみに縦並びや横並びにもできます。
タテザイルとヨコザイル
作ってみた
というわけで、今回得られた知見を駆使してARクリスマスディスプレイを制作してみました。
思ったところに配置できなかったり、考えていたものと違うアクションになったり、見た目の華やかさと裏腹に地味で地道な作業が目白押しです。けれど、自分の空想でしかなかったものが形を成して日常空間に浮かび上がっていく過程はとてもワクワクできる時間だと思います。これを見て「自分もARはじめよっかな」と興味を持ってもらえたら幸いです。
ちなみにお使いのiOS端末（13.1以降）で実際にご覧いただけるので、よろしければこちらのQRコードからお楽しみください。
https://adobeaero.app.link/V2VLwYWPx2
まとめ
直感的なUIで、コーディングスキルが0でもサクサクARコンテンツが作れちゃうAdobe Aero。すでにデスクトップ版もプライベートベータとしてリリースされていて、これからの展開もとても楽しみです。私も今回の知見を活かし、弥生会計ARの開発に取り組んでいきたい所存です嘘です。
今回Aeroを通してARについても少し詳しくなれたので、次は若干上級者向けと噂のReality Composerにも挑戦してみたいですね。
次回、Misoca+弥生 Advent Calendar 2019 の22日目は、uchoさんです。
震えて待て！
それではみなさんハッピーホリデーよいお年を。
