はじめに
View ARというSDKを見つけたので、Furniture Live Wikitudeというテンプレートを使ってみました。
ライセンスを買ったり、中身を弄ったりはしていないので、新しいSDKをただ触っただけの記事として認識してください。
また、作業環境はWindowsですので、Macで同様の操作をしても、動かない場合があるかと思います。ご了承ください。
アプリの説明
今回使用するテンプレートでできるアプリは、部屋に家具を配置することができるものです。
なお、ARで実際に自分の部屋に配置するアプリケーションではないことをご留意ください。
テンプレートを変更することで、そういったアプリケーションも作成可能ですので、この記事で説明する設定項目を参考に、アプリケーション制作をしていただければ幸いです。
準備
アプリケーションを作成するにあたり、7zipという圧縮・解凍ツールを使用いたしましたので、本記事と同じように作成したい方は事前にインストールすることをお勧めします。
https://sevenzip.osdn.jp/
登録
まず初めに、View ARの公式サイトにアクセスします。
次に、右上にあるSign inをクリックし、ログイン画面に移動します。
右下のNeed to create an account?をクリックし、アカウントを新規作成します。
この画面で、必要事項を記入します。そしてそのままログインし、マイページにアクセスします。
（個人情報の為、名前は隠しています）
これで登録は完了です。
モデルデータの作成（テンプレートからダウンロード）
まずアプリを作る前に、3Dモデルをインポートします。
画面左側にある、Supportをクリックし、現れた項目の中にあるDownloadsを選択すると、↓の画面が現れます。
次に、この中にあるMammoth ChairをDownloadしてください。
これは、以降作成するアプリケーション内で使用するものとなります。自身で3Dオブジェクトを持っている方も、サイズの調整をする手間が省けるので、テストをする際はこちらの使用をお勧めします。
すると、42600_Mammoth_Chair_source.zipという圧縮フォルダをダウンロードできたことと思います。
こちらのzipなのですが、ダウンロードしたzipをそのままアプリケーションに使用できませんでしたので、事前準備にて紹介した7-Zipを使用してzipの中身を一部取り出し、再度zipにします。
以下、取り出す中身までの過程を示しますので、自分でできるという方は読み飛ばしてください。
- zipを選択し、右クリック
- 現れた
7-Zipにカーソルを合わせる - そこからさらに
開くにカーソルを合わせる -
zipの表示を選択
（以下画像参照）
このようにすると、展開できないzipの中身を見て、コピーすることができます。
上記の作業をすると、以下のような画面が現れると思いますので、MammothModelの中身4つ（モデル1つ、画像3つ）を、自身で用意したフォルダに移動してください。名前は何でもいいです。
移動させたら、自身で用意したフォルダをzip圧縮してください。
これで取り込める形のモデルデータ入りzipが完成しました。
モデルの取り込み
My Contentの項目をクリックし、Categoriesを選択します。
次に、現れた画面の右上にある+Create new Categoryを押し、現れた新しい画面のName項目に任意の名前を入力し、一番下にあるActiveのチェックボックスにチェックを付けてSaveします。
これで、モデルを格納するグループが完成しました。
ここからは、モデルを取り込む作業に入ります。
My Contentの項目をクリック→All Itemsを選択し、現れた画面の右上にある+Upload new Contentを押します。
以下の画像にある赤矢印が、入力項目です。上から順に1 ~ 4の番号を振って、説明します。
- Name
→モデルの名前の入力をする。 - Categories
→先ほど作成したカテゴリーを選択する。 - Model Bundle
→ファイルを選択から、先ほど新しく作ったzipを選択する。 - Accept Terms and Conditions
→必須項目なので、チェックを入れます。
これらができたら、Uploadを選択し、完了のポップアップが出るまで待機して、アップロードは終わりです。
アプリケーションの作成
ここから、アプリケーションの作成をします。
まず初めに、画面左側にあるMy Appを選択し、右上に現れたCreate new Appボタンをクリックします。
次に↓の画面で、Furniture Live Wikitudeの項目にあるTry Template FREE*を選択し、画面右上にあるNextをクリックします。
次の画面では、APP ID を hoge.fuga 等の . つなぎにした任意の名前にし、Saveを押します。
私はAPP IDをtest.ar1にして作成します。エラーが出た際は、別の名前で作成してください。
なお、Notification Email Addressesは必須項目ではないので、今回は入力しません。
それでは、テンプレートのテストができるように、最低限の設定をしていきます。
画面左側にあるSample Contentを選択し、All in This Categoryにカーソルを合わせ、クリックします。
これで、アプリケーション内でサンプルモデルが使用できるようになりました。
アプリケーションのテスト
では、テストしてみます。
画面左側にある Testing をクリックします。
次に、画面右側にあるTest Web Versionを選択します。
すると、↓の画面が立ち上がると思います。
Roomplannerを選択し、次に飾り付けたい部屋の間取りを選択します。
↓の画面が立ち上がったら、部屋のドアの場所と、窓の場所を決めます。
右側にあるドアまたは窓のアイコンをドラッグし、部屋の淵までカーソルを運んだらドロップします。
ドアや窓の種類を選ぶ画面が右下に出てきますので、想定しているもの（好きな窓枠、ドア）を選択し、Saveを押します。
部屋の中（薄いグレーの部分）を押すと、床の柄を選択できます。
また、部屋の淵（濃いグレー）を押すと、壁紙の色を選択できます。
部屋のデザインが決まったら、左下のチェックマークを押し、決定します。
すると、ボタンが3つある画面が出ます。
↓の画像で説明していますが、3D-Viewでモデル配置ができるので、それを押します。
ボタンを押すと↓のような画面が出ます。
なお、間取りや床のデザイン等で見た目は少し違うかと思いますが、問題ありません。
この画面で、右下にある+のボタンを押すと、モデルのカテゴリー名が一覧で出てきます。
サンプルモデルに付与したカテゴリー名をクリックすると、中に3Dモデルが入っていると思いますので、それをクリックします。
これで、モデルを部屋に設置できました。
さらに、モデルをドラッグアンドドロップすれば移動できます。
好きな場所に配置したら、画面左上にある<を押して、前のページに戻り、Walk Modeをから実際に部屋の中を歩いてみます。
これで、一通りテストが完了しました。
おわりに
この記事では最低限の部分しか触れていません。
CSSやUIなどのデザイン等、触る部分はほかにもまだまだありますので、ぜひ触ってみてください。