はじめに

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などのデザイン等、触る部分はほかにもまだまだありますので、ぜひ触ってみてください。